Core web vitals meten om je site sneller te maken - Combell Partner Day 2023
•
0 likes•94 views
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.
Recommended
More Related Content
Similar to Core web vitals meten om je site sneller te maken - Combell Partner Day 2023
Similar to Core web vitals meten om je site sneller te maken - Combell Partner Day 2023 (20)
More from Thijs Feryn
More from Thijs Feryn (13)
Recently uploaded
Recently uploaded (20)
Core web vitals meten om je site sneller te maken - Combell Partner Day 2023
- 1. CORE WEB VITALS METEN OM JE SITE SNELLER TE MAKEN DOOR THIJS FERYN
- 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
- 19. VERTICALS ✓ TELECOM ✓ BROADCASTING ✓ MEDIA ✓ SPORT ✓ FINANCE ✓ RETAIL ✓ TRAVEL ✓ HOSTING/CLOUD ✓ ACADEMIA ✓ MANUFACTURING
- 20. CORE WEB VITALS
- 21. 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
- 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
- 37. MET REVERSE CACHING PROXY USER VARNISH SERVER
- 38. USER COMBELL BOOST SERVER MET REVERSE CACHING PROXY
- 41. Cache-Control: private, no-cache, no-store
- 42. Cache-Control: public, max-age=60, s-maxage=100
- 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
- 53. USER PROXY ORIGIN ASYNC FETCH "STALE" DATA RETOURNEREN
- 54. Cache-Control: public, max-age=3600, stale- while-revalidate=100
- 56. PLUGINS
- 61. X-LiteSpeed-Purge: * X-LiteSpeed-Purge: /phpinfo.php X-LiteSpeed-Purge: tag=cat_news, tag=home IN APART SCRIPT RESPONSE HEADERS
- 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
- 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"); } }
- 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
- 102. WEBP CONVERSIE
- 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>