La migliore configurazione CloudFlare per superare i Core Web Vitals

Ottimizzare i Core Web Vitals con Cloudflare: cosa abilitare e cosa evitare

Cloudflare offre un'ampia gamma di impostazioni che possono avere un impatto sui Core Web Vitals, sia positivamente che negativamente. Mentre alcune impostazioni migliorano le prestazioni, altre introducono ritardi o interferiscono con il rendering della pagina. Analizziamo le opzioni Cloudflare più comuni e a quali condizioni dovresti abilitarle!

Domande comuni sulla configurazione di CloudFlare: Spesso analizzo le configurazioni di CloudFlare per i clienti. Anche se potrei scrivere libri sulla configurazione di una CDN come CloudFlare, la maggior parte delle domande ruota attorno a un semplice 'dovrei abilitare questa impostazione?'. Questo articolo risponde a queste domande con le dovute considerazioni per le impostazioni CloudFlare più comuni relative ai Core Web Vitals.

Free vs. Pro: vale la pena fare un upgrade?

Speed > Optimization

Polish 

Polish ottimizza le immagini ospitate sul tuo dominio CloudFlare comprimendole, rimuovendo i loro metadati e convertendole opzionalmente  in immagini WebP. 

Dimensioni delle immagini più piccole di solito miglioreranno il Largest Contentful Paint migliorando la image resource load duration. Tuttavia, poiché il LCP è influenzato da molteplici fattori oltre al tempo di caricamento delle risorse delle immagini, non aspettarti miglioramenti drastici!

Raccomandazione: Abilita e scegli 'Lossy Webp' per ottenere i migliori risultati.

Mirage

Mirage ottimizza le immagini in base alle condizioni di rete. Sebbene questa idea sia nobile, l'implementazione è 'lenta di progettazione'. Al fine di ottimizzare le immagini per tutte le condizioni di rete, le immagini sulla pagina devono essere bloccate fino a quando non è stata misurata la velocità della connessione di rete.  Questo blocco delle immagini può causare Layout Shifts e ironicamente un punteggio Largest Contentful Paint più basso.

Raccomandazione: Evita di abilitarlo in qualsiasi circostanza!

Speed Brain

Speed brain utilizza le API Speculation Rules per accelerare il Time to First Byte precaricando le navigazioni future. Anche se le Speculation rules sono estremamente efficaci nel migliorare tutti i Core Web Vitals incluso il Largest Contentful Paint, non consiglio di abilitare questa funzione di CloudFlare perché 'auto-configurare' le speculation rules è facilissimo e molto più efficace della soluzione 'taglia unica' di CloudFlare, persino con la loro integrazione RUM! 

Raccomandazione: Disabilita e configura le speculation rules manualmente

CloudFlare Fonts

CloudFlare fonts automatizza l'auto-hosting dei font. Questa è un'ottima idea perché ospitare autonomamente risorse importanti elimina nuove connessioni esterne che per impostazione predefinita sono più lente del riutilizzo della connessione già aperta al tuo sito con proxy CloudFlare.

È più efficace prendersi 15 minuti e configurare manualmente i file di font auto-ospitati. Purtroppo molti sistemi CMS non lo consentono. In tal caso, abilitare CloudFlare fonts è un'opzione perfettamente valida.

Raccomandazione: Disabilita per impostazione predefinita; abilita solo se l'auto-hosting manuale non è un'opzione.

Early Hints

Gli Early hints accelerano la distribuzione delle risorse critiche (come stili, font o immagini) suggerendoli prima che il contenuto HTML vero e proprio venga inviato al browser. Per inviare un resource hint tramite CloudFlare, CloudFlare leggerà la tua intestazione di risposta e ne estrarrà i resource hint. 

Se sei a tuo agio nell'inviare resource hint nelle intestazioni di risposta HTML, ti consiglio vivamente di abilitare questa funzione. Tuttavia, tieni presente che i resource hint potrebbero essere molto più nascosti al tuo team di sviluppo rispetto ai resource hint nell'head della pagina. Se configurati in modo errato, possono rallentare le cose invece di accelerarle. Quindi, usa con cautela.

Raccomandazione: Abilita solo se stai inviando correttamente le intestazioni di resource hint.

Rocket Loader™

Rocket Loader 'differisce' tutti i JavaScript su una pagina web trattenendoli temporaneamente e poi iniettandoli di nuovo nella pagina qualche istante dopo.  Questo è un trucco sgradevole (o geniale, a seconda del punto di vista) che richiede molti controlli e accorgimenti per garantire che funzioni correttamente su tutti  i browser. Inoltre questo trucco nasconde gli script al preload scanner, un meccanismo progettato per accelerare il caricamento delle risorse critiche..

Per i motivi sopra citati, ovviamente, non sono un fan dell'abilitazione cieca di Rocket Loader. Gli script dovrebbero essere programmati in base alla loro importanza. Gli script critici devono essere caricati ed eseguiti in anticipo, mentre gli script non essenziali possono attendere finché il browser non è inattivo.

Il Rocket Loader di CloudFlare fa proprio questo. Trattiene gli script e ad un certo punto li inietta senza tenere conto della loro importanza. Rocket Loader dà priorità solo ad altre risorse come l'elemento LCP, i font e gli stili rispetto agli script. Se il tuo CMS non consente di differire gli script o un tempismo degli script più granulare, Rocket Loader potrebbe essere la tua migliore opzione.

Raccomandazione: Disabilita e programma gli script manualmente. Abilita solo se non hai altro modo per differire o controllare l'esecuzione degli script.

Automatic Platform Optimization for WordPress

L'APO di CloudFlare memorizza nella cache intere pagine sui suoi server edge, una tecnica nota come full-page edge caching. Se implementato correttamente, migliorerà il Time to First Byte (e successivamente l'LCP e l'FCP) per un certo tipo di visitatore! 

Tuttavia, c'è un problema. Il full-page edge caching spesso deve essere bypassato automaticamente. Ad esempio, quando un utente accede o aggiunge articoli al carrello, l'APO viene automaticamente disabilitato poiché il contenuto della pagina diventa personalizzato. A quel punto, servire una pagina generica memorizzata nella cache non è più un'opzione. Poiché l'APO deve funzionare per tutti i tipi di siti web, la cache verrà bypassata molto più del necessario per il tuo sito. Ecco perché la configurazione manuale della cache sarà quasi sempre più efficace dell'APO di CloudFlare.

Raccomandazione: Abilita APO, o ancora meglio, configura le tue regole di full-page edge caching per un migliore controllo su quando la cache viene bypassata.

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

Abilitare HTTP/2, HTTP/2 to Origin & Enhanced HTTP/2 Prioritization è una scelta ovvia.  HTTP/2 è un enorme miglioramento rispetto al vecchio protocollo HTTP/1.1. HTTP/2 fa molte cose, ma la più importante è che elimina il vecchio effetto a scala consentendo l'invio di più file sulla stessa connessione in parallelo. HTTP/2 esiste da 10 anni ed è ampiamente supportato da browser e server!

Raccomandazione: abilita

HTTP/3 (con QUIC)

HTTP/3 con QUIC è persino più veloce di HTTP/2  grazie ai miglioramenti nella configurazione della connessione e nella latenza. Fondamentalmente HTTP/3 consente l'invio di più flussi in modo indipendente anche se uno è in ritardo. QUIC combina gli handshake di trasporto e di crittografia, il che riduce i tempi di connessione. Questo si traduce in tempi di TTFB più veloci fino al 10%!

Raccomandazione: abilita

0-RTT Connection Resumption

0-RTT Connection Resumption accelera le connessioni sicure saltando l'handshake iniziale quando un utente visita nuovamente un sito. Utilizza chiavi di crittografia archiviate in precedenza, consentendo l'invio immediato dei dati, riducendo la latenza e migliorando i tempi di caricamento della pagina. 

Raccomandazione: abilita

Automatic Signed Exchanges (SXGs)

I Signed Exchanges (SXG) consentono alla Ricerca Google di precaricare i tuoi contenuti preservando la privacy dell'utente. Ciò significa che i risultati mostrati nella Ricerca Google possono precaricare alcune risorse chiave (come HTML, JavaScript, CSS, immagini o font) in modo da preservare la privacy. Gli Automatic Signed Exchanges miglioreranno i tuoi Largest Contentful Paint e Time to First Byte!

Raccomandazione: abilita

Scrape Shield

Scrape Shield protegge i contenuti del tuo sito web. Sebbene possa sembrare una buona idea, sono fermamente contrario all'abilitazione di qualsiasi opzione Scrape Shield. Scrape Shield funziona iniettando JavaScript nella tua pagina per decodificare il contenuto precedentemente offuscato. Questo compromesso tra velocità e occultamento dei contenuti per me non ha senso. I veri spammer non si lasciano ingannare, mentre gli utenti reali ricevono script extra che rallentano la pagina.

Raccomandazione: disabilita Email Address Obfuscation e disabilita Hotlink Protection

Caching > Configuration

Purge Cache

Svuotare la cache invaliderà tutti i file memorizzati nella cache da CloudFlare, inclusi fogli di stile, JavaScript, immagini e persino cache di intere pagine. E sebbene lo svuotamento della cache tecnicamente non sia un'impostazione, devo avvertire riguardo alla sua cancellazione. Svuotare la cache renderà il tuo sito più lento fino a quando la cache non sarà stata ricostruita!

Raccomandazione: evita di svuotare l'intera cache se possibile. Svuota solo i file interessati!

Caching Level

Il Caching Level determina in che modo CloudFlare gestisce le query string (lo so: 'cosa c'è in un nome!'). Vorrai dare un'occhiata attenta a questa impostazione. 

L'opzione 'più veloce' è 'ignore query string'. Questa serve la stessa risorsa indipendentemente dalla query string. Questa è una buona opzione solo se sei sicuro al 100% che le query string non vengano utilizzate sul tuo sito. In tal caso, le query string aggiunte da altri vengono ignorate.

'Standard' serve un file diverso memorizzato nella cache per ogni diversa query string. Questa è l'impostazione predefinita per CloudFlare ma, in combinazione con il full-page edge caching e parametri di tracciamento come i parametri utm, questa impostazione può causare mancate corrispondenze nella cache e un rapporto di accessi alla cache inferiore!

Raccomandazione: 'Ignore query string' quando possibile o 'standard', evita l'opzione 'No query string' se possibile.

Browser Cache TTL

Il browser cache TTL indica al browser per quanto tempo può memorizzare nella cache le risorse statiche. Le risorse memorizzate nella cache possono essere servite direttamente dal browser e sono disponibili molto più velocemente rispetto alle risorse di rete remote. Ciò significa che un browser cache TTL breve invaliderebbe frequentemente la cache del browser, abbassando il rapporto di accessi alla cache. Quindi, a meno che i tuoi file statici non cambino frequentemente, imposta questa opzione al massimo. 

Raccomandazione: imposta a 1 anno se possibile

Development Mode

La Development Mode bypasserà tutte le cache di CloudFlare mentre è abilitata. Potresti essere tentato di abilitare la modalità di sviluppo durante lo sviluppo. Per favore, non abilitare la modalità di sviluppo, in quanto disabilita la cache anche per tutti gli altri visitatori. Imposta invece un dominio di sviluppo in cui puoi sviluppare, oppure escluditi dalla cache di CloudFlare impostando delle regole della cache..

Raccomandazione: non abilitare!

Caching > Tiered Cache

La Tiered cache riduce il numero di richieste al tuo server di origine e aumenta il rapporto di accessi alla cache istruendo CloudFlare a cercare prima i file non memorizzati nella cache sui propri server. Ciò riduce ulteriormente il carico sul tuo server back-end e libera risorse extra.

Raccomandazione: abilita la smart cache topology