De beste Cloudflare-configuratie om te slagen voor de Core Web Vitals

Core Web Vitals optimaliseren met Cloudflare: Wat je moet inschakelen en wat je moet vermijden

Cloudflare biedt een breed scala aan instellingen die de Core Web Vitals kunnen beïnvloeden, zowel positief als negatief. Sommige instellingen verbeteren de prestaties, terwijl andere vertragingen introduceren of de paginarendering verstoren. Laten we de meest voorkomende Cloudflare-opties analyseren en onder welke voorwaarden je ze zou moeten inschakelen!

Veelvoorkomende Vragen over Cloudflare Setups: Ik controleer vaak Cloudflare-setups voor klanten. Hoewel ik boeken zou kunnen schrijven over het opzetten van een CDN zoals Cloudflare, draaien de meeste vragen om een simpele 'moet ik deze instelling inschakelen?'. Dit artikel beantwoordt die vragen met de juiste overwegingen voor de meest gangbare Cloudflare-instellingen die verband houden met de Core Web Vitals.

Gratis vs. Pro: Is een upgrade de moeite waard?

Speed > Optimization

Polish 

Polish optimaliseert afbeeldingen die op je Cloudflare-domein worden gehost door ze te comprimeren, hun metadata te verwijderen en ze optioneel te converteren naar WebP-afbeeldingen. 

Kleinere afbeeldingen verbeteren doorgaans de Largest Contentful Paint door de image resource load duration te verkorten. Maar omdat de LCP door meerdere factoren wordt beïnvloed, en niet alleen door de laadtijd van afbeeldingen, moet je geen drastische verbeteringen verwachten!

Aanbeveling: Inschakelen en kies 'Lossy Webp' voor de beste resultaten.

Mirage

Mirage optimaliseert afbeeldingen op basis van netwerkomstandigheden. Hoewel dit idee nobel is, is de implementatie 'slow by design'. Om de afbeeldingen te optimaliseren voor alle netwerkomstandigheden, moeten de afbeeldingen op de pagina worden geblokkeerd totdat de snelheid van de netwerkverbinding is gemeten.  Dit blokkeren van afbeeldingen kan leiden tot Layout Shifts en ironisch genoeg tot een lagere score voor de Largest Contentful Paint.

Aanbeveling: Onder geen enkele omstandigheid inschakelen!

Speed Brain

Speed Brain gebruikt de Speculation Rules API om de Time to First Byte te versnellen door toekomstige navigaties te prefetch-en. Hoewel Speculation Rules extreem effectief zijn in het verbeteren van alle Core Web Vitals, inclusief de Largest Contentful Paint, raad ik het inschakelen van deze Cloudflare-functie af. Het zelf configureren van de speculation rules is namelijk super eenvoudig en veel effectiever dan Cloudflare's 'one-size-fits-all'-oplossing, zelfs met hun RUM-integratie! 

Aanbeveling: Uitschakelen en configureer de speculation rules handmatig.

Cloudflare Fonts

Cloudflare Fonts automatiseert het self-hosten van lettertypen. Dit is een geweldig idee, omdat het self-hosten van belangrijke resources nieuwe, externe verbindingen elimineert, die standaard trager zijn dan het hergebruiken van de reeds openstaande verbinding met je door Cloudflare geproxiede site.

Het is effectiever om 15 minuten de tijd te nemen en het self-hosten van lettertypebestanden handmatig te configureren. Helaas zijn er veel CMS-systemen die dit niet toestaan. In dat geval is het inschakelen van Cloudflare Fonts een prima optie.

Aanbeveling: Standaard uitschakelen; alleen inschakelen als handmatig self-hosten geen optie is.

Early Hints

Early hints versnellen de levering van kritieke resources (zoals styles, fonts of afbeeldingen) door ernaar te verwijzen voordat de daadwerkelijke HTML-content naar de browser wordt gestuurd. Om een resource hint via Cloudflare te sturen, leest Cloudflare je response header en extraheert de resource hints daaruit. 

Als je er vertrouwd mee bent om resource hints in HTML response headers te sturen, raad ik je ten zeerste aan deze functie in te schakelen. Wees je er echter van bewust dat resource hints veel meer verborgen kunnen zijn voor je dev-team dan resource hints in de head van de pagina. Als ze verkeerd geconfigureerd zijn, kunnen ze de boel vertragen in plaats van versnellen. Gebruik dus met de nodige voorzichtigheid.

Aanbeveling: Alleen inschakelen als je de resource hint headers correct verstuurt.

Rocket Loader™

Rocket Loader stelt alle JavaScripts op een webpagina uit ('defers') door ze tijdelijk achter te houden en ze even later opnieuw in de pagina te injecteren.  Dit is een smerige (of slimme, afhankelijk van je standpunt) truc die veel controles en hacks vereist om ervoor te zorgen dat het op alle browsers correct werkt. Bovendien verbergt deze truc de scripts voor de preload scanner, een mechanisme dat is ontworpen om het laden van kritieke resources te versnellen.

Om bovenstaande redenen ben ik uiteraard geen fan van het blindelings inschakelen van Rocket Loader. Scripts moeten worden ingepland op basis van hun belangrijkheid. Kritieke scripts moeten vroeg laden en uitvoeren, terwijl niet-essentiële scripts kunnen wachten tot de browser idle is.

Cloudflare's Rocket Loader doet dat niet. Het houdt de scripts achter en injecteert ze op een bepaald moment zonder rekening te houden met hun belangrijkheid. Rocket Loader geeft alleen prioriteit aan andere resources zoals het LCP-element, fonts en styles boven scripts. Als je CMS script deferring of meer verfijnde script timing niet toestaat, kan Rocket Loader je beste optie zijn.

Aanbeveling: Uitschakelen en plan scripts handmatig in. Alleen inschakelen als je geen andere manier hebt om de uitvoering van scripts uit te stellen of te controleren.

Automatic Platform Optimization for WordPress

Cloudflare's APO cachet volledige pagina's op zijn edge servers, een techniek die bekend staat als full-page edge caching. Wanneer dit correct is geïmplementeerd, verbetert het de Time to First Byte (en daarmee de LCP en FCP) voor een bepaald type bezoeker! 

Er zit echter een addertje onder het gras. Full-page edge caching moet vaak automatisch worden omzeild. Wanneer een gebruiker bijvoorbeeld inlogt of items aan zijn winkelwagentje toevoegt, wordt APO automatisch uitgeschakeld omdat de pagina-inhoud dan gepersonaliseerd wordt. Op dat moment is het serveren van een generieke gecachete pagina geen optie meer. Omdat APO voor alle soorten websites moet werken, wordt de cache veel vaker omzeild dan nodig is voor jouw site. Daarom is handmatige cacheconfiguratie bijna altijd effectiever dan Cloudflare's APO.

Aanbeveling: Schakel APO in, of beter nog, configureer je eigen full-page edge caching-regels voor meer controle over wanneer de caching wordt omzeild.

HTTP/2 & HTTP/2 to Origin & Enhanced HTTP/2 Prioritization

Het inschakelen van HTTP/2, HTTP/2 to Origin & Enhanced HTTP/2 Prioritization is een no-brainer.  HTTP/2 is een enorme verbetering ten opzichte van het oudere HTTP/1.1-protocol. HTTP/2 doet veel dingen, maar het belangrijkste is dat het het oude 'staircase effect' elimineert door toe te staan dat meerdere bestanden parallel over dezelfde verbinding worden verstuurd. HTTP/2 bestaat al 10 jaar en wordt breed ondersteund door browsers en servers!

Aanbeveling: inschakelen

HTTP/3 (with QUIC)

HTTP/3 met QUIC is zelfs sneller dan HTTP/2  door verbeteringen in de verbindingsopzet en latency. In principe staat HTTP/3 toe dat meerdere streams onafhankelijk van elkaar worden verzonden, zelfs als er één vertraagd is. QUIC combineert transport- en encryptie-handshakes, wat de verbindingstijd verkort. Dit resulteert in tot wel 10% snellere TTFB-tijden!

Aanbeveling: inschakelen

0-RTT Connection Resumption

0-RTT Connection Resumption versnelt beveiligde verbindingen door de initiële handshake over te slaan wanneer een gebruiker een site opnieuw bezoekt. Het gebruikt eerder opgeslagen encryptiesleutels, waardoor data onmiddellijk kan worden verzonden, wat de latency verlaagt en de laadtijden van pagina's verbetert. 

Aanbeveling: inschakelen

Automatic Signed Exchanges (SXGs)

Signed exchanges (SXG) stellen Google Search in staat om je content te prefetch-en met behoud van de privacy van de gebruiker. Dat betekent dat resultaten die op Google Search worden getoond, een paar belangrijke resources (zoals HTML, JavaScript, CSS, afbeeldingen of fonts) op een privacy-vriendelijke manier kunnen prefetch-en. Automatic Signed Exchanges verbeteren je Largest Contentful Paint en Time to First Byte!

Aanbeveling: inschakelen

Scrape Shield

Scrape Shield beschermt de content op je website. Hoewel dit een goed idee lijkt, ben ik een fervent tegenstander van het inschakelen van Scrape Shield-opties. Scrape Shield werkt door JavaScript in je pagina te injecteren om de eerder geobfusceerde content te decoderen. Deze afweging tussen snelheid en het verbergen van content is in mijn ogen zinloos. Echte spammers laten zich niet foppen, terwijl echte gebruikers extra scripts krijgen die de pagina vertragen.

Aanbeveling: schakel Email Address Obfuscation en Hotlink Protection uit

Caching > Configuration

Purge Cache

Het legen van de cache (purgen) maakt alle door Cloudflare gecachete bestanden ongeldig, inclusief stylesheets, JavaScript, afbeeldingen en zelfs full-page caches. En hoewel 'purge cache' technisch gezien geen instelling is, moet ik je waarschuwen voor het legen van de cache. Het legen van de cache maakt je site trager totdat de cache opnieuw is opgebouwd!

Aanbeveling: vermijd indien mogelijk het legen van de volledige cache. Purge alleen de betreffende bestanden!

Caching Level

Het Caching Level bepaalt hoe Cloudflare omgaat met query strings (ik weet het: 'what's in a name!'). Deze instelling wil je goed bekijken. 

De 'snelste' optie is 'ignore query string'. Hierbij wordt dezelfde resource geserveerd, ongeacht de query string. Dit is alleen een goede optie als je 100% zeker weet dat er geen query strings op je site worden gebruikt. In dat geval worden query strings die door anderen worden toegevoegd, genegeerd.

'Standard' serveert een ander gecachet bestand voor elke verschillende query string. Dit is de standaardinstelling voor Cloudflare, maar in combinatie met full-page edge caching en trackingparameters zoals utm-parameters kan deze instelling een cache mismatch en een lagere cache-hitratio veroorzaken!

Aanbeveling: 'Ignore query string' waar mogelijk, of 'Standard'. Vermijd de optie 'No query string' als het kan.

Browser Cache TTL

De browser cache TTL vertelt de browser hoe lang het statische resources mag cachen. Gecachete resources kunnen direct vanuit de browser worden geserveerd en zijn veel sneller beschikbaar dan externe netwerkbronnen. Dat betekent dat een korte browser cache TTL de browsercache regelmatig ongeldig zou maken, wat de cache-hitratio verlaagt. Dus, tenzij je statische bestanden vaak veranderen, zet je deze instelling op maximaal. 

Aanbeveling: zet indien mogelijk op 1 jaar

Development Mode

Development Mode omzeilt alle Cloudflare-caching zolang het is ingeschakeld. Het kan verleidelijk zijn om de Development Mode in te schakelen tijdens het ontwikkelen. Doe dit niet, want het schakelt de caching ook uit voor alle andere bezoekers. Zet in plaats daarvan een development-domein op waar je kunt ontwikkelen, of sluit jezelf uit van Cloudflare-caching door cache-regels in te stellen.

Aanbeveling: niet inschakelen!

Caching > Tiered Cache

Tiered Cache vermindert het aantal requests naar je origin server en verhoogt de cache-hitratio door Cloudflare de opdracht te geven eerst op zijn eigen servers naar niet-gecachete bestanden te zoeken. Dit vermindert de belasting op je back-end server nog verder en maakt extra resources vrij.

Aanbeveling: schakel 'smart cache topology' in