Den bedste CloudFlare-konfiguration til at bestå Core Web Vitals

Optimering af Core Web Vitals med Cloudflare: Hvad du skal aktivere, og hvad du skal undgå

Cloudflare tilbyder en bred vifte af indstillinger, der kan påvirke Core Web Vitals, både positivt og negativt. Mens nogle indstillinger forbedrer ydeevnen, introducerer andre forsinkelser eller forstyrrer sidegengivelsen. Lad os gennemgå de mest almindelige Cloudflare-indstillinger og under hvilke betingelser du bør aktivere dem!

Almindelige spørgsmål om CloudFlare-opsætning: Jeg gennemgår ofte CloudFlare-opsætninger for kunder. Selvom jeg kunne skrive bøger om opsætning af et CDN som CloudFlare, drejer de fleste spørgsmål sig om et simpelt 'skal jeg aktivere denne indstilling?'. Denne artikel besvarer disse spørgsmål med de relevante overvejelser for de mest almindelige CloudFlare-indstillinger relateret til Core Web Vitals.

Free vs. Pro: Er en opgradering det værd?

Speed > Optimization

Polish 

Polish optimerer billeder, der hostes på dit CloudFlare-domæne, ved at komprimere dem, fjerne billedernes metadata og eventuelt konvertere  dem til WebP-billeder. 

Mindre billedstørrelser vil normalt forbedre Largest Contentful Paint ved at forbedre billedressourcens indlæsningstid. Da LCP dog påvirkes af flere faktorer ud over billedernes ressourceindlæsningstid, skal du ikke forvente drastiske forbedringer!

Anbefaling: Aktiver og vælg 'Lossy Webp' for de bedste resultater.

Mirage

Mirage optimerer billeder baseret på netværksforhold. Selvom idéen er god, er implementeringen 'langsom by design'. For at optimere billederne til alle netværksforhold skal billederne på siden blokeres, indtil netværksforbindelsens hastighed er blevet målt.  Denne blokering af billeder kan forårsage Layout Shifts og ironisk nok en lavere Largest Contentful Paint-score.

Anbefaling: Undgå at aktivere under alle omstændigheder!

Speed Brain

Speed Brain bruger Speculation Rules API til at fremskynde Time to First Byte ved at prefetche fremtidige navigationer. Selvom Speculation Rules er ekstremt effektive til at forbedre alle Core Web Vitals, inklusive Largest Contentful Paint, anbefaler jeg ikke at aktivere denne CloudFlare-funktion, fordi 'selvkonfigurering' af Speculation Rules er super nemt og langt mere effektivt end CloudFlares 'one size fits all-løsning', selv med deres RUM-integration! 

Anbefaling: Deaktiver og konfigurer Speculation Rules manuelt

CloudFlare Fonts

CloudFlare Fonts automatiserer self-hosting af skrifttyper. Dette er en god idé, fordi self-hosting af vigtige ressourcer eliminerer nye, eksterne forbindelser, som som standard er langsommere end at genbruge den allerede åbne forbindelse til dit CloudFlare-proxyede website.

Det er mere effektivt at bruge 15 minutter på manuelt at konfigurere self-hosting af skrifttypefiler. Desværre er der mange CMS-systemer, der ikke tillader dette. I så fald er aktivering af CloudFlare Fonts en helt gyldig mulighed.

Anbefaling: Deaktiver som standard; aktiver kun hvis manuel self-hosting ikke er en mulighed.

Early Hints

Early Hints fremskynder levering af kritiske ressourcer (som styles, skrifttyper eller billeder) ved at give hints om dem, før det faktiske HTML-indhold sendes til browseren. For at sende et resource hint gennem CloudFlare vil CloudFlare læse din response header og udtrække resource hints derfra. 

Hvis du er komfortabel med at sende resource hints i HTML response headers, anbefaler jeg stærkt at aktivere denne funktion. Vær dog opmærksom på, at resource hints kan være meget mere skjulte for dit udviklingsteam end resource hints i head-sektionen af siden. Hvis de er forkert konfigureret, kan de bremse tingene i stedet for at fremskynde dem. Så brug med forsigtighed.

Anbefaling: Aktiver kun hvis du korrekt sender resource hint headers.

Rocket Loader™

Rocket Loader 'udskyder' al JavaScript på en webside ved midlertidigt at tilbageholde dem og derefter injicere dem på siden igen et øjeblik senere.  Dette er et grimt (eller smart, afhængigt af dit synspunkt) trick, der kræver mange kontroller og hacks for at sikre, at det fungerer korrekt på alle  browsere. Desuden skjuler dette trick scripts fra preload-scanneren, en mekanisme designet til at fremskynde indlæsningen af kritiske ressourcer.

Af ovenstående årsager er jeg naturligvis ikke fan af blindt at aktivere Rocket Loader. Scripts bør planlægges baseret på deres vigtighed. Kritiske scripts skal indlæses og køres tidligt, mens ikke-essentielle scripts kan vente, til browseren er inaktiv.

CloudFlares Rocket Loader gør netop det. Den tilbageholder scripts og injicerer dem på et bestemt tidspunkt uden hensyn til deres vigtighed. Rocket Loader prioriterer kun andre ressourcer som LCP-elementet, skrifttyper og styles over scripts. Hvis dit CMS ikke tillader script-udskydelse eller mere finjusteret script-timing, kan Rocket Loader være din bedste mulighed.

Anbefaling: Deaktiver og planlæg scripts manuelt. Aktiver kun hvis du ikke har nogen anden måde at udskyde eller kontrollere script-udførelse.

Automatic Platform Optimization for WordPress

CloudFlares APO cacher hele sider på sine edge-servere, en teknik kendt som full-page edge caching. Når det er implementeret korrekt, vil det forbedre Time to First Byte (og efterfølgende LCP og FCP) for en bestemt type besøgende! 

Der er dog en hage. Full-page edge caching skal ofte automatisk omgås. For eksempel når en bruger logger ind eller tilføjer varer til sin indkøbskurv, deaktiveres APO automatisk, da sideindholdet bliver personaliseret. På det tidspunkt er det ikke længere en mulighed at servere en generisk cachet side. Fordi APO skal fungere for alle typer websites, vil cachen blive omgået meget mere end nødvendigt for din side. Derfor vil manuel cachekonfiguration næsten altid være mere effektiv end CloudFlares APO

Anbefaling: Aktiver APO, eller endnu bedre, konfigurer dine egne full-page edge caching-regler for bedre kontrol over, hvornår caching omgås.

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

Aktivering af HTTP/2, HTTP/2 to Origin & Enhanced HTTP/2 Prioritization er en no-brainer.  HTTP/2 er en kæmpe forbedring i forhold til den ældre HTTP/1.1-protokol. HTTP/2 gør mange ting, men vigtigst af alt fjerner den den gamle trappeeffekt ved at tillade flere filer at blive sendt over den samme forbindelse parallelt. HTTP/2 har eksisteret i 10 år og understøttes bredt af browsere og servere!

Anbefaling: aktiver

HTTP/3 (with QUIC)

HTTP/3 med QUIC er endnu hurtigere end HTTP/2  på grund af forbedringer i forbindelsesopsætning og latenstid. Grundlæggende tillader HTTP/3, at flere streams sendes uafhængigt, selv hvis én er forsinket. QUIC kombinerer transport- og krypteringshåndtryk, hvilket reducerer forbindelsestiden. Dette resulterer i op til 10% hurtigere TTFB-tider!

Anbefaling: aktiver

0-RTT Connection Resumption

0-RTT Connection Resumption fremskynder sikre forbindelser ved at springe det indledende håndtryk over, når en bruger genbesøger en side. Den bruger tidligere gemte krypteringsnøgler, hvilket tillader data at blive sendt øjeblikkeligt, reducerer latenstid og forbedrer sideindlæsningstider. 

Anbefaling: aktiver

Automatic Signed Exchanges (SXGs)

Signed Exchanges (SXG) tillader Google Search at prefetche dit indhold, mens brugerens privatliv bevares. Det betyder, at resultater vist på Google Search kan prefetche nogle nøgleressourcer (såsom HTML, JavaScript, CSS, billeder eller skrifttyper) på en privatlivsbevarende måde. Automatic Signed Exchanges vil forbedre din Largest Contentful Paint og Time to First Byte!

Anbefaling: aktiver

Scrape Shield

Scrape Shield beskytter indholdet på dit website. Selvom dette kan virke som en god idé, er jeg stærkt imod at aktivere nogen Scrape Shield-indstillinger. Scrape Shield fungerer ved at injicere JavaScript på din side for at afkode det tidligere tilslørede indhold. Denne afvejning mellem hastighed og skjulning af indhold giver ingen mening for mig. Rigtige spammere bliver ikke narret, mens rigtige brugere får ekstra scripts, der bremser siden.

Anbefaling: deaktiver Email Address Obfuscation og deaktiver Hotlink Protection

Caching > Configuration

Purge Cache

At rydde cachen vil ugyldiggøre alle filer cachet af CloudFlare, inklusiv stylesheets, JavaScript, billeder og endda full-page caches. Og selvom Purge Cache teknisk set ikke er en indstilling, må jeg advare mod at rydde cachen. Rydning af cachen vil gøre din side langsommere, indtil cachen er blevet genopbygget!

Anbefaling: undgå at rydde hele cachen hvis muligt. Ryd kun berørte filer!

Caching Level

Caching Level bestemmer, hvordan CloudFlare håndterer query strings (jeg ved det: 'what's in a name!'). Du vil gerne kigge grundigt på denne indstilling. 

Den 'hurtigste' mulighed er 'ignore query string'. Denne serverer den samme ressource uanset query string. Dette er kun en god mulighed, hvis du er 100% sikker på, at query strings ikke bruges på din side. I så fald ignoreres query strings tilføjet af andre.

'Standard' serverer en anden cachet fil for hver forskellig query string. Dette er standardindstillingen for CloudFlare, men i kombination med full-page edge caching og sporingsparametre som UTM-parametre kan denne indstilling forårsage cache-mismatch og en lavere cache hit ratio!

Anbefaling: Ignorer query string når det er muligt eller standard, undgå 'No query string'-muligheden hvis muligt.

Browser Cache TTL

Browser Cache TTL fortæller browseren, hvor længe den kan cache statiske ressourcer. Cachede ressourcer kan serveres direkte fra browseren og er tilgængelige meget hurtigere end fjerne netværksressourcer. Det betyder, at en kort Browser Cache TTL vil ugyldiggøre browserens cache hyppigt, hvilket sænker cache-hit-ratioen. Så medmindre dine statiske filer ændres hyppigt, sæt denne indstilling til maks. 

Anbefaling: sæt til 1 år hvis muligt

Development Mode

Development Mode vil omgå al CloudFlare-caching, mens den er aktiveret. Det kan være fristende at aktivere Development Mode under udvikling. Aktiver venligst ikke Development Mode, da det også deaktiverer caching for alle andre besøgende. Opsæt i stedet et udviklingsdomæne, hvor du kan udvikle, eller ekskluder dig selv fra CloudFlare-caching ved at opsætte cacheregler.

Anbefaling: aktiver ikke!

Caching > Tiered Cache

Tiered Cache reducerer antallet af forespørgsler til din origin-server og øger cache hit ratioen ved at instruere CloudFlare i at lede efter ikke-cachede filer på sine egne servere først. Dette reducerer belastningen på din backend-server yderligere og frigør ekstra ressourcer.

Anbefaling: aktiver smart cache topology