Slides for my presentation at the Combell Partner Day 2023 in Gent (Belgium). See https://feryn.eu/speaking/core-web-vitals-meten-om-je-site-sneller-te-maken-combell-partner-day-2023/ for more details about the event.

1. CORE WEB VITALS
METEN OM JE SITE
SNELLER TE
MAKEN
DOOR THIJS FERYN

2. BROWSER CACHE SERVER

3. BROWSER CACHE SERVER
ACHTERKANT

4. BROWSER CACHE SERVER
VOORKANT

5. HALLO, IK BEN THIJS

6. IK BEN DE TECH
EVANGELIST
BIJ

7. IK
HEB 15 JAAR
VOOR COMBELL
GEWERKT

12. WIJ BOUWEN SOFTWARE-
DEFINED WEB ACCELERATIE &
CONTENT DELIVERY
OPLOSSINGEN

14. WE MAKEN HET
WEB SNELLER

15. WE VERBETEREN DIGITALE INTERACTIES
DOOR NETWERK LATENCY TE VERLAGEN

16. CONTENT DELIVERY NETWORK
SOFTWARE

17. SOFTWARE
HARDWARE
DISAGGREGATION
TREND

19. VERTICALS
✓ TELECOM
✓ BROADCASTING
✓ MEDIA
✓ SPORT
✓ FINANCE
✓ RETAIL
✓ TRAVEL
✓ HOSTING/CLOUD
✓ ACADEMIA
✓ MANUFACTURING

20. CORE WEB VITALS

21. LAADSNELHEID

22. WAARGENOMEN LAADSNELHEID

23. METRICS
✓ TIME TO FIRST BYTE (TTFB)
✓ FIRST CONTENTFUL PAINT (FCP)
✓ LARGEST CONTENTFUL PAINT (LCP)
✓ FIRST INPUT DELAY (FID)
✓ TIME TO INTERACTIVE (TTI)
✓ TOTAL BLOCKING TIME (TBT)
✓ CUMULATIVE LAYOUT SHIFT (CLS)

24. CORE WEB VITALS
✓ LARGEST CONTENTFUL PAINT (LCP)
✓ FIRST INPUT DELAY (FID)
✓ CUMULATIVE LAYOUT SHIFT (CLS)

25. LARGEST CONTENTFUL PAINT
✓ LAADTIJD VAN DE GROOTSTE VISUELE INHOUD
✓ AFBEELDINGEN, VIDEO, TEKST
✓ < 2,5 S
✓ BEVAT TIME TO FIRST BYTE
✓ BEVAT MOGELIJKE RENDER BLOCKING

26. FIRST INPUT DELAY
✓ TIME TO INTERACTIVE NADAT EEN "EVENT"
PLAATSVINDT
✓ VEROORZAAKT DOOR HYPERLINK, KNOP, INPUT VELD,
JAVASCRIPT RENDERING
✓ DOEL: REDUCEREN VAN BROWSER MAIN THREAD
WORK
✓ < 100 MS

27. CUMULATIVE LAYOUT SHIFT
✓ MEET VISUELE STABILITEIT
✓ VERMIJDEN VAN BEWEGING OP HET SCHERM TIJDENS
HET LADEN
✓ < 0,1

28. Trage websites
SUCKEN

29. MET SERVERS
GOOIEN

30. OP ZOEK GAAN NAAR DE
VERTRAGENDE FACTOREN

31. OPTIMALISEREN

32. OP DE LIMITEN STOTEN

33. WAAROM
HERBEREKENEN
ALS DE DATA NIET
VERANDERT?

34. CACHEN

35. DIRECT INTERACTIE
USER SERVER

36. ONDER DRUK
SERVER

37. MET REVERSE CACHING PROXY
USER VARNISH SERVER

38. USER COMBELL
BOOST
SERVER
MET REVERSE CACHING PROXY

40. Cache-Control: public, max-age=500

41. Cache-Control: private, no-cache, no-store

42. Cache-Control: public, max-age=60, s-maxage=100

43. CONDITIONAL REQUESTS

44. HTTP/1.1 304 Not Modified

45. CONDITIONAL REQUESTS
HTTP/1.1 200 OK
Host: localhost
Etag: 7c9d70604c6061da9bb9377d3f00eb27
Content-type: text/html; charset=UTF-8
Hello world output
GET / HTTP/1.1
Host: localhost

46. CONDITIONAL REQUESTS
HTTP/1.1 304 Not Modified
Host: localhost
Etag: 7c9d70604c6061da9bb9377d3f00eb27
GET / HTTP/1.1
Host: localhost
If-None-Match: 7c9d70604c6061da9bb9377d3f00eb27

47. CONDITIONAL REQUESTS
HTTP/1.1 200 OK
Host: localhost
Last-Modified: Fri, 22 Jul 2016 10:11:16 GMT
Content-type: text/html; charset=UTF-8
Hello world output
GET / HTTP/1.1
Host: localhost

48. CONDITIONAL REQUESTS
HTTP/1.1 304 Not Modified
Host: localhost
Last-Modified: Fri, 22 Jul 2016 10:11:16 GMT
GET / HTTP/1.1
Host: localhost
If-Last-Modified: Fri, 22 Jul 2016 10:11:16 GMT

49. SNEL
VALIDEREN

50. VROEGE

51. ETAG IN
OPSLAAN

52. ASYNCHRONE
HERVALIDATIE

53. USER PROXY ORIGIN
ASYNC FETCH
"STALE" DATA
RETOURNEREN

54. Cache-Control: public, max-age=3600, stale-
while-revalidate=100

56. PLUGINS

58. X-Litespeed-Cache: hit
X-Litespeed-Cache-Control: public,max-age=604800
X-Litespeed-Tag:
555_HTTP.200,555_home,555_URL.6666cd76f96956469e
7be39d750cc7d9,555_F,555_

59. X-Litespeed-Cache: hit
X-Litespeed-Cache-Control: public,max-age=604800
X-Litespeed-Tag:
555_HTTP.200,555_home,555_URL.6666cd76f96956469e
7be39d750cc7d9,555_F,555_

60. X-Litespeed-Cache: hit
X-Litespeed-Cache-Control: public,max-age=604800
X-Litespeed-Tag:
555_HTTP.200,555_home,555_URL.6666cd76f96956469e
7be39d750cc7d9,555_F,555_

61. X-LiteSpeed-Purge: *
X-LiteSpeed-Purge: /phpinfo.php
X-LiteSpeed-Purge: tag=cat_news, tag=home
IN APART SCRIPT
RESPONSE
HEADERS

62. X-LiteSpeed-Cache-Control: public, max-age=100, esi=on

63. EDGE SIDE INCLUDES
ESI

64. <esi:include src="/header" />

65. NIET
CACHEBAAR
CACHEBAAR
CACHEBAAR

66. <!DOCTYPE html>
<html>
<body>
<esi:include src="/header" />
<p>De verdere inhoud</p>
</body>
</html>

67. <!DOCTYPE html>
<html>
<body>
<p>Welkom Thijs</p>
<p>De verdere inhoud</p>
</body>
</html>

68. <IfModule LiteSpeed>
RewriteEngine On
RewriteRule .* - [E=cache-control:max-age=3600]
</IfModule>
.HTACCESS

69. <IfModule LiteSpeed>
RewriteEngine On
RewriteRule .* - [E=esi_on:1]
</IfModule>

70. <IfModule LiteSpeed>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} Mobile|Android|Silk/|Kindle|
BlackBerry|Opera Mini|Opera Mobi [NC]
RewriteRule .* - [E=Cache-Control:vary=ismobile]
</IfModule>

71. <IfModule LiteSpeed>
RewriteEngine On
RewriteCond %{REQUEST_URI} ^/my-page [NC]
RewriteRule .* - [E=Cache-Control:max-age=3600]
</IfModule>

72. HOE ZIT DAT
MET VARNISH?

73. VARNISH
✓ CACHE-CONTROL
✓ PURGING URL, PATROON & TAGS
✓ CACHE VARIATIES
✓ EDGE SIDE INCLUDES
✓ PLUGINS NIET OFFICIEEL, BEHEERD DOOR APARTE CONTRIBUTORS
✓ VARNISH CONFIGURATION LANGUAGE

74. VARNISH CONFIGURATION LANGUAGE

75. VCL MOGELIJKHEDEN
✓ REQUEST VERWERKING
✓ REQUEST ROUTERING
✓ RESPONSE MANIPULATIE
✓ BACKEND SELECTIE
✓ ALLE ASPECTEN VAN DE CACHE CONTROLEREN
✓ BESLISSINGEN NEMEN "ON THE EDGE"

76. vcl 4.1;
import cookie;
sub vcl_recv {
cookie.parse(req.http.Cookie);
cookie.keep("PHPSESSID");
set req.http.Cookie = cookie.get_string();
if (
req.http.Cookie ||
req.url ~ "^/wp-comments-post.php" ||
req.url ~ "^/wp-cron.php" ||
req.url ~ "^/wp-login.php" ||
req.url ~ "^/wp-activate.php" ||
req.url ~ "^/wp-mail.php" ||
req.url ~ "^/wp-login.php" ||
req.url ~ "^/preview=" ||
) {
return(pass);
}
}

77. COMBELL BOOST IS GEBRUIKERSVRIENDELIJK
VARNISH IS KRACHTIGER & BIEDT MEER
FLEXIBILITEIT

79. vcl 4.1;
backend default {
.host = "127.0.0.1";
.port = "8080";
}
sub vcl_recv {
if (req.http.Cookie) {
set req.http.Cookie = ";" + req.http.Cookie;
set req.http.Cookie = regsuball(req.http.Cookie, "; +", ";");
set req.http.Cookie = regsuball(req.http.Cookie, ";(PHPSESSID)=", "; 1=");
set req.http.Cookie = regsuball(req.http.Cookie, ";[^ ][^;]*", "");
set req.http.Cookie = regsuball(req.http.Cookie, "^[; ]+|[; ]+$", "");
if (req.http.cookie ~ "^s*$") {
unset req.http.cookie;
}
}
}

80. vcl 4.1;
sub vcl_recv {
if (req.http.Cookie) {
set req.http.Cookie = ";" + req.http.Cookie;
set req.http.Cookie = regsuball(req.http.Cookie, "; +", ";");
set req.http.Cookie = regsuball(req.http.Cookie, ";(language)=", "; 1=");
set req.http.Cookie = regsuball(req.http.Cookie, ";[^ ][^;]*", "");
set req.http.Cookie = regsuball(req.http.Cookie, "^[; ]+|[; ]+$", "");
if (req.http.cookie ~ "^s*$") {
unset req.http.cookie;
}
return(hash);
}
}
sub vcl_hash {
if(req.http.Cookie ~ "^.*language=(nl|de|fr);*.*$") {
hash_data(regsub( req.http.Cookie, "^.*language=(nl|de|fr);*.*$", "1" ));
} else {
hash_data("en");
}
}

81. vcl 4.1;
import cookie;
sub vcl_recv {
if (req.http.cookie) {
cookie.parse(req.http.cookie);
cookie.keep("language");
set req.http.cookie = cookie.get_string();
if (req.http.cookie ~ "^s*$") {
unset req.http.cookie;
}
return(hash);
}
}
sub vcl_hash {
if(cookie.get("language") ~ "^(nl|fr|de)$") {
hash_data(cookie.get("language"));
} else {
hash_data("en");
}
}

86. WAT BRENGT
DE TOEKOMST?

87. VARNISH TOEKOMST
✓ FOCUS OP DOCUMENTATIE & TUTORIALS
✓ MEER AANDACHT VOOR FRAMEWORKS & CMS'EN
✓ MEER CLOUD-NATIVE ZIJN
✓ BETERE PACKAGING VOOR VARNISH MODULES
✓ INTERESSANTE FEATURES TOEGVOEGEN IN OPEN
SOURCE
✓ SLEDGEHAMMER

89. WEB ASSEMBLY
ON THE EDGE

90. ENTERPRISE

91. CORE WEB VITALS

93. LIGHTHOUSE

96. CACHING

100. COMPRESSIE ACTIVEREN
COMBELL
DOET DIT AL

102. WEBP CONVERSIE

105. DEFER BLOCKING JAVASCRIPT

107. <script src="/static/jquery-3.6.0.min.js" ></script>
<script src="/static/bootstrap.bundle.min.js" ></script>
<script defer src="/static/jquery-3.6.0.min.js" ></script>
<script defer src="/static/bootstrap.bundle.min.js" ></script>

108. INLINE SPECIFIEKE CSS & SVG

111. <svg width="100" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 344.6
153.01"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#0072ce;}</style></defs><title>Varnish Software Logo Blue and Black_rgb</
title><path class="cls-1" d="M95.37,133.17h8.54l6.5,39,20.26-39h8.89l-25.91,49.41h-9.74Z" transform="translate(-37.83
-72.27)"/><path class="cls-1"
d="M173,182.58h-8.47L162.68,171H143.13l-5.93,11.57h-8.89l25.9-49.41h10.24ZM146.8,163.74h14.68L158,142.07Z"
transform="translate(-37.83 -72.27)"/><path class="cls-1"
d="M186.32,133.17h20.32c9.89,0,14.33,4.66,13.91,12.85-.35,9.53-4.94,15.46-12.21,17.86l6.49,18.7h-8.75L200,165H189.14L186,182.5
8h-8.4Zm4.09,24.49h11.15c4.87,0,9.74-2.25,10.17-10.23.42-4.66-1.84-6.92-6.64-6.92H193.37Z" transform="translate(-37.83
-72.27)"/><path class="cls-1" d="M237.68,148.56l-6,34h-8.4L232,133.17h7.84l15.88,34,6-34h8.4l-8.68,49.41h-7.84Z"
transform="translate(-37.83 -72.27)"/><path class="cls-1" d="M281.05,133.17h8.4l-8.68,49.41h-8.4Z" transform="translate(-37.83
-72.27)"/><path class="cls-1"
d="M315,162.4l-8.47-1.56c-7.83-1.48-10.8-5.72-10.8-11.08,0-8.68,5.93-17.29,20.61-17.29,11.44,0,17.86,5,16,15.88h-8.4c1.06-6-2-
8.54-8.33-8.54s-10.94,2.47-10.94,8.19c0,2.47,1.62,4.44,5.29,5.15l8.47,1.55c8.12,1.55,10.8,5.79,10.8,10.87,0,9.46-6.42,17.72-20
.75,17.72-11.44,0-18.14-5-16.24-15.88h8.4c-1.06,6,2.19,8.54,8.54,8.54s11.16-2.47,11.16-8.47C320.34,165.08,318.78,163.1,315,162
.4Z" transform="translate(-37.83 -72.27)"/><path class="cls-1"
d="M369,161.55H347.71l-3.67,21h-8.4l8.68-49.41h8.4l-3.74,21H370.3l3.74-21h8.4l-8.68,49.41h-8.4Z" transform="translate(-37.83
-72.27)"/><path class="cls-2" d="M69.71,106.37A25.45,25.45,0,1,0,85,73.79,25.44,25.44,0,0,0,69.71,106.37Z"
transform="translate(-37.83 -72.27)"/><path class="cls-2"
d="M49.15,149.69a18.38,18.38,0,1,0,25-7A18.37,18.37,0,0,0,49.15,149.69Z" transform="translate(-37.83 -72.27)"/><path
class="cls-2" d="M38.05,117.89a10.64,10.64,0,1,0,12.53-8.32A10.65,10.65,0,0,0,38.05,117.89Z" transform="translate(-37.83
-72.27)"/><path class="cls-1"
d="M111.27,212.32l-5.42-1c-5-.92-8-3.72-8-8.45,0-6.08,4.21-9.15,11.34-9.15s11.3,3.11,11.3,9.28v.57h-5.21V203c0-3.15-2.15-4.77-
6.09-4.77s-6,1.4-6,4.29c0,2.23,1.57,3.59,3.94,4l5.42,1c5.21,1,8,3.77,8,8.41,0,6.26-4.34,9.32-11.43,9.32S97.7,222.17,97.7,216v-
.57h5.21V216c0,3.15,2.28,4.73,6.22,4.73s6.08-1.32,6.08-4.38C115.21,214.07,113.64,212.76,111.27,212.32Z"
transform="translate(-37.83 -72.27)"/><path class="cls-1"
d="M158,214.21c0,7.22-4.69,11.07-12.08,11.07s-12-3.85-12-11.07v-9.42c0-7.18,4.69-11,12.08-11s12,3.85,12,11Zm-5.21-9.42c0-4.2-2
.63-6.52-6.79-6.52s-6.87,2.32-6.87,6.52v9.42c0,4.24,2.63,6.52,6.79,6.52s6.87-2.28,6.87-6.52Z" transform="translate(-37.83
-72.27)"/><path class="cls-1" d="M172,194.2h19.7v4.51H177.19v9.63h12.3v4.51h-12.3v12H172Z" transform="translate(-37.83
-72.27)"/><path class="cls-1" d="M200.78,194.2h23.95v4.51h-9.37v26.13h-5.21V198.71h-9.37Z" transform="translate(-37.83
-72.27)"/><path class="cls-1"
d="M233.65,194.2H239l5.6,24,5.78-24h5l5.69,24,5.65-24h5.17l-7.84,30.64h-5.87l-5.42-21.14-5.43,21.14h-5.87Z"
transform="translate(-37.83 -72.27)"/><path class="cls-1"
d="M306.45,224.84H300.8l-2.41-7.18H286.31l-2.41,7.18h-5.16l10.68-30.64h6.35Zm-18.74-11.68H297l-4.64-13.44Z"
transform="translate(-37.83 -72.27)"/><path class="cls-1"
d="M318,194.2h12.61c6.13,0,10.16,2.93,10.16,9.85,0,5-2.06,7.92-5.52,9.19l5.82,11.6h-6l-5.26-10.9h-6.61v10.9H318Zm5.21,15.23h7.
23c3,0,4.94-1.48,4.94-5.38s-1.92-5.34-4.94-5.34h-7.23Z" transform="translate(-37.83 -72.27)"/><path class="cls-1"
d="M354.37,194.2H375v4.51H359.58v8.54h13.18v4.5H359.58v8.54H375v4.55H354.37Z" transform="translate(-37.83 -72.27)"/></svg>

112. <img src="/static/varnish-software-logo-light.svg" />
<esi:include src="/static/varnish-software-logo-light.svg" />

113. <link href="/static/main.css" rel="stylesheet">
<style><esi:include src="/static/main.css" /></style>