CloudFlare CDN cache HTML ?

Se sei uno sviluppatore web che lavora con WordPress, probabilmente hai familiarità con i benefici del caching. Il caching è un processo che salva le risorse frequentemente accessibili come le immagini sul computer del visitatore piuttosto che sul server. Questo riduce il carico e il numero di richieste al server, che a sua volta migliora le prestazioni.

Quando si ha un sito lento e poco performante, uno dei comportamenti ormai standard più adottati è quello di Installare CloudFlare.

Si ha così la credenza e convinzione che CloudFlare possa cachare le pagine html del proprio blog o ecommerce, le pagine prodotto, i post, le pagine categorie oltre che risorse statiche come CSS, JS, e media come immagini.

Nulla di più sbagliato invece. Per chi non lo sapesse, CloudFlare di default NON cacha pagine HTML e dunque avrete si installato CloudFlare ma sicuramente non avrete memorizzato nella Cache CloudFlare i contenuti HTML del vostro sito.

Esistono modi comunque, alcuni quasi obbligatoriamente utilizzanti piani Business a partire da 200 dollari al mese per poter usare proficuamente la Cache CloudFlare HTML nei casi più reali e comuni di utilizzo di siti dinamici.

Altre opzioni molto più economiche esistono per fare la stessa identica cosa e saremmo lieti di analizzarle insieme qualora ci chiederai una consulenza in merito.

Cos’è CloudFlare ?

Cloudflare è una rete di distribuzione dei contenuti (CDN) che accelera il tuo sito web facendo il caching in più centri dati in tutto il mondo. Può essere usato per proteggere il tuo sito da attacchi DDoS, per bloccare utenti malintenzionati e per fornire certificati SSL gratuiti.

Quali sono i vantaggi di Cachare HTML con CloudFlare ?

La velocità della pagina è un fattore incredibilmente importante per UX, tassi di conversione e SEO. Questo case study descrive in modo molto dettagliato come abbiamo utilizzato un’implementazione di base della funzione di memorizzazione nella cache HTML di Cloudflare su un sito Web di e-commerce per migliorare i tempi medi di caricamento della pagina del 28%.

Se utilizzi Cloudflare come server CDN del tuo sito web (server proxy HTTP), devi verificare se le risorse della tua pagina web (CSS, js, immagini, contenuto Html) sono state memorizzate nella cache da Cloudflare o meno.

Cloudflare aggiunge un’intestazione HTTP CF-Cache-Status con vari valori di intestazione nella risposta HTTP per dirti se la tua risorsa di richiesta è stata memorizzata nella cache o meno. Questo articolo ti spiegherà come verificare se Cloudflare CDN ha memorizzato nella cache il contenuto html del tuo sito Web, css, immagini, file js o meno.

1. Che tipo di risorse verrà memorizzato automaticamente nella cache da Cloudflare ?

1. Se non effettui impostazioni speciali, Cloudflare memorizzerà nella cache solo il contenuto del sito Web statico con l’estensione di file seguente. Nota che Cloudflare non memorizzerà nella cache i file Html per impostazione predefinita se non effettui configurazioni speciali.
2. Per impostazione predefinita, la CDN di Cloudflare memorizza nella cache i file con le seguenti estensioni di file: bmp, class, css, csv, doc, docx, ejs, eot, eps, gif, ico, jar, jpeg, jpg, js, mid, midi, otf, pdf, pict, pls, png, ppt, pptx, ps, svg, svgz, swf, tif, tiff, ttf, webp, woff, w0ff2, xls, xlsx.

2. Controlla il valore dell’intestazione HTTP CF-Cache-Status di Cloudflare.

Possiamo utilizzare vari ispettori del browser Web per controllare questo valore di intestazione. Questo esempio utilizzerà Google Chrome.

1. Sfoglia l’URL della tua pagina web (ad esempio https://www.code-learner.com/can-not-find-django-tutorial-django-polls-templates-error/) con google chrome.
2. Fare clic con il pulsante destro del mouse sulla pagina Web, fare clic sulla voce di menu Ispeziona nell’elenco del menu a comparsa per visualizzare la finestra di ispezione.
3. Fare clic sulla scheda Rete nella finestra di ispezione, quindi selezionare la risorsa del sito Web nel pannello di sinistra.
4. Innanzitutto, selezioniamo la prima risorsa del sito Web che è l’URL della pagina Web. Fai clic su Intestazioni nel pannello di destra, non possiamo trovare l’ intestazione CF-Cache-Status  , ma possiamo vedere un’intestazione cf-ray , questo significa che Cloudflare non memorizza nella cache questa risorsa web (perché questa estensione di file non è inclusa nell’impostazione predefinita di Cloudflare elenco di estensioni di file memorizzabili nella cache).
5. Ma puoi impostare le regole della pagina Cloudflare per personalizzare l’opzione di memorizzazione nella cache. Possiamo anche saperlo dal valore di un’altra intestazione HTTP, l’ intestazione del controllo della cache nell’immagine sottostante. Il suo valore contiene no-cache , il che significa che la pagina non viene restituita dalla cache, viene restituita dal server web originale.
6. Ma quando fai clic sulla seconda risorsa web che è un file js, puoi trovare il valore dell’intestazione cf-cache-status è MISS . Ciò significa che il file js è memorizzabile nella cache ma non memorizzato nella cache in Cloudflare ora. Quindi verrà caricato anche dal server web originale.
7. Ora facciamo clic sulla risorsa web gallery.min.css?ver=4.0.0 (l’URL completo della risorsa è https://www.code-learner.com/wp-content/themes/stargazer/library/css/gallery.min .css?ver=4.0.0), possiamo trovare il valore dell’intestazione di questa risorsa web cf-cache-status è HIT . Ciò significa che la risorsa web è memorizzata nella cache nel server Cloudflare. Verrà restituita la versione memorizzata nella cache.

3. Altri valori di intestazione CF-Cache-Status.

1. Oltre a HIT , MISS e non specificato, l’ intestazione CF-Cache-Status ha altri valori come EXPIRED, STALE, IGNORED, REVALIDATED, UPDATING . Puoi andare su Cloudflare per trovare tutte le spiegazioni sui valori dell’intestazione CF-Cache-Status .

Il problema di CloudFlare che non Cacha l’HTML e le performance ridotte.

La memorizzazione nella cache dell’HTML può ridurre significativamente l’utilizzo delle risorse e fornire vantaggi in termini di scalabilità e prestazioni. Al contrario delle risorse statiche, come Javascript, CSS e immagini, l’HTML è spesso personalizzato per l’individuo che lo visualizza. Pertanto, la memorizzazione nella cache HTML, chiamata anche memorizzazione nella cache a pagina intera, non è banale e ci sono diverse insidie da evitare.

Questo articolo spiega come far funzionare la cache HTML con WordPress e Cloudflare.

Ci sono tre componenti principali in una corretta configurazione della cache HTML di Cloudflare:

1. Un modo per dire a Cloudflare cosa memorizzare nella cache . Per la maggior parte delle configurazioni, questo viene fatto abilitandocache everythingin combinazione conbypass on cookieuna regola di pagina che corrisponda a ogni pagina del tuo sito.
2. Un modo per escludere pagine che non dovrebbero mai essere memorizzate nella cache. Questo viene fatto anche tramite le regole della pagina, impostando la cache su bypasso standard.
3. Un modo per invalidare la cache quando il contenuto viene aggiornato . Questo di solito rendono le cose diventano difficili e difficili.

Le funzionalità Cloudflare richieste per la memorizzazione nella cache HTML Full Page Cache

Di seguito sono riportate le funzionalità necessarie per far funzionare la cache HTML con Cloudflare.

Regole della pagina

Per impostazione predefinita, Cloudflare non memorizza nella cache HTML. Per abilitare la memorizzazione nella cache dell’HTML è necessario utilizzare le regole della pagina e, più specificamente, l’impostazione Cache Everything. Con questo, puoi abilitare la memorizzazione nella cache dell’HTML creando una regola di pagina che memorizzi tutto nella cache.

Tuttavia, c’è un piccolo problema con questo approccio tecnico, la precondizione è che tutto il contenuto che viene memorizzato nella cache da questa regola di pagina deve soddisfare due criteri. L’HTML deve essere statico, il che significa che non cambia nel tempo (come ad esempio la prima pagina di una notizia cambia continuamente).

L’altro criterio è che il contenuto sia anonimo. Ciò significa che è lo stesso contenuto destinato a qualsiasi visitatore di questa risorsa dunque pagine non personalizzate per utenti loggati ad esempio, come checkout, aree riservate, wishlist e simili.

In sintesi, questo significa sostanzialmente che la cache di tutte le impostazioni da sola non è sufficiente.

Memorizza tutto nella cache

Il rischio di memorizzare nella cache tutto è sempre quello di poter memorizzare nella cache contenuti non destinati al visitatore successivo. Ad esempio, se accedi al tuo amministratore di WordPress, memorizza tutto nella cache alla cieca e visita la tua prima pagina. Un prossimo visitatore casuale vedrebbe la pagina che era destinata solo a te, con la barra di modifica di WordPress in alto. Ecco perché è necessaria l’impostazione Ignora cache sui cookie.

Ignorare la cache sui cookie

Per accedere a un sito Web, i cookie sono necessari per mantenere un collegamento tra il tuo computer e il server. Quando hai questo cookie, viene inviato con ogni richiesta che fai al server. Ciò significa che puoi dire al server di passare la richiesta al server di origine, dato che l’utente ha un determinato cookie. Con questa opzione abilitata, puoi fornire risposte memorizzate nella cache ai visitatori anonimi, mentre tu come amministratore o un cliente registrato nel tuo WooCommerce viene servita una pagina HTML su misura che non verrà memorizzata nella cache.

Scegliere l’abbonamento Cloudflare corretto

Gli elementi essenziali per far funzionare la cache HTML su Cloudflare sono le regole della pagina e l’impostazione Bypass Cache on Cookie. Ciò significa che se vuoi memorizzare nella cache HTML su Cloudflare, stai guardando il piano Business a partire da $ 200 al mese, senza alcun componente aggiuntivo.

La memorizzazione nella cache a livelli struttura le cache di Cloudflare in due livelli davanti alla tua origine (invece di uno solo), il che può ridurre significativamente i tempi di risposta in tutto il mondo, oltre a risparmiare ancora più risorse sul server di origine.

Come configurare Cloudflare Business per la memorizzazione nella cache HTML per WordPress

Quando prevedi di sfruttare Cloudflare per la memorizzazione nella cache HTML, ti consigliamo di ridurre la quantità di plug-in che utilizzi per l’ottimizzazione, l’aggregazione, la memorizzazione nella cache e simili sul tuo sito web.

Uno dei motivi è che più plug-in e funzionalità utilizzi, più diventa complesso e più difficile diventa risolvere i problemi. Un altro motivo è che le ottimizzazioni vengono in gran parte eseguite in modo molto più efficiente su Cloudflare rispetto all’utilizzo di PHP in WordPress. Nei piani Cloudflare Business avrai anche workers illimitati inclusi, che possono essere sfruttati per ottimizzare i caratteri, ridimensionare le immagini e così via.

Non c’è niente di più fastidioso che provare a eseguire il debug dei problemi di cache su una CDN . Un visitatore ad esempio segnalerebbe un errore e quando lo provi a colpire un altro nodo CDN, i risultati potrebbero essere completamente diversi.

Impostare le regole della pagina

Avrai bisogno di una serie di regole nella sezione delle regole della pagina di Cloudflare, che indichino a Cloudflare come elaborare le varie richieste. La prima regola di pagina che corrisponde alla richiesta in entrata è quella che verrà applicata.

L’esempio seguente è una configurazione minima assoluta, che fa le basi necessarie per rendere una funzione WordPress standard come previsto.

Spiegazione per queste regole:

La regola 1 abilita Cache Everything per tutte le richieste che vanno a qualsiasi cosa nella /wp-content/cartella, questo includerà i tuoi temi e le tue immagini.

Regola 2 Ignora la cache per tutte le richieste che iniziano con /wp-(eccetto wp-content, che è gestita dalla regola della prima pagina). Ciò ti consente di accedere ( /wp-login.php) e lavorare nell’amministratore ( /wp-admin/*) senza incorrere in problemi di memorizzazione nella cache. Quando accedi al Pannello di controllo , otterrai il no_cachecookie

La regola 3 applica la politica predefinita per il resto delle richieste. Questa è la regola che abilita la memorizzazione nella cache HTML per tutto, con l’eccezione di bypassare la cache se si dispone del no_cachecookie.

Si consiglia di aggiungere no_cache wp-*|wordpress-*|comment_*| woocommerce_*nella regola di bypass.

Regole aggiuntive richieste per WooCommerce o altri endpoint dinamici sul tuo sito

Se stai eseguendo WooCommerce, ci sono un paio di altri endpoint che devono essere esclusi dalla memorizzazione nella cache. Il carrello e il checkout sono dinamici per progettazione e non possono essere memorizzati nella cache. I percorsi possono variare, quindi è necessario verificare quali percorsi sono in uso per il carrello ed effettuare il checkout.

Quello che segue è un esempio standard in cui abbiamo aggiunto altre due regole di pagina (le prime due):

Il checkout spesso comporta più passaggi, quindi la /checkout/*regola dei caratteri jolly viene utilizzata per ignorare la cache. E questo esempio ha la pagina del carrello su /cart.

Ulteriore personalizzazione delle regole della pagina

Tutti i siti sono diversi e di solito ci sono determinati percorsi e richieste che vorresti escludere dalla memorizzazione nella cache. Sia i plugin che i temi a volte richiedono la personalizzazione. Inoltre, le richieste API generalmente non sono qualcosa che vorresti memorizzare nella cache.

Spesso vorrai anche applicare criteri di cache che siano efficienti per il tuo sito. Non ci sono regole generali, ma gli strumenti di test online si lamentano sempre di impostare date di scadenza della cache molto lontane.

L ‘ Expire Cache TTL è un’impostazione che racconta Cloudflare quanto tempo si dovrebbe mantenere un bene nella loro cache. Ad esempio, per il contenuto statico, è spesso una buona idea impostarlo sull’impostazione massima (un mese). Per l’HTML potresti volere tempi più brevi a seconda del tuo caso d’uso. Poniti la domanda, quando e con quale frequenza desideri che questo HTML venga aggiornato. Un aspetto positivo di Edge Cache è che possiamo controllarlo ed eliminare gli elementi da esso quando richiesto. Questo può essere fatto sia tramite il pannello di controllo, sia utilizzando ad esempio Servebolt Optimizer, che aggiornerà automaticamente i contenuti rilevanti.

Possiamo anche controllare il TTL della cache del browser utilizzando le regole di pagina. La Browser Cache è speciale, perché non possiamo controllarla come la Edge Cache. Non può essere cancellato facendo clic su un pulsante. L’unico modo per aggirare la cache del browser è forzare il ricaricamento di una pagina (che farà ricaricare la pagina dal server al browser) o lasciarla scadere. Il vantaggio della cache del browser è che è la cache più vicina agli utenti, quindi farà caricare l’HTML in poche frazioni di secondo perché non richiede alcun traffico di rete.

C’è anche un origine di controllo cache impostazione che permette di controllare la cache CDN dal server web origine. Questa è una funzionalità molto interessante per gli utenti avanzati, che sanno come manipolare le intestazioni e istruire la cache Edge utilizzando le intestazioni.

Funzionalità “Bypass Cache on Cookie” e “Edge Cache TTL” di Cloudflare

Esistono diversi modi per affrontare i problemi descritti sopra, ma in questo caso avevamo bisogno di una soluzione semplice che non richiedesse troppe risorse di sviluppo.

Hamlet Batista , in questo fantastico articolo sulla memorizzazione nella cache HTML per i siti Web di e-commerce , suggerisce che una soluzione per elementi di contenuto dinamico come il nome di un utente connesso sarebbe quella di aggiungere queste informazioni alla pagina tramite JavaScript, invece di includerle in l’HTML originale. In questo modo, i file HTML senza elementi dinamici che funzionano per tutti gli utenti potrebbero essere memorizzati nella cache e gli elementi dinamici potrebbero essere aggiunti individualmente per ogni utente sul lato client. Il nostro problema con questo approccio, sebbene sembri un’ottima soluzione, è che richiederebbe un cambiamento significativo nel modo in cui sono programmati alcuni elementi del negozio.

Un’alternativa suggerita da Amleto è quella di attivare la memorizzazione nella cache HTML solo per gli utenti che non hanno effettuato l’accesso. Se applichiamo questa idea al nostro caso, con elementi di contenuto dinamico per gli utenti che hanno effettuato l’accesso e per gli utenti che hanno aggiunto prodotti ai loro carrelli degli acquisti, questo significherebbe che dovremmo trovare un modo per attivare la cache HTML solo per gli utenti che non hanno effettuato l’accesso e che non hanno aggiunto nulla ai loro carrelli degli acquisti.

Cloudflare offre una soluzione per la memorizzazione nella cache delle pagine HTML solo per determinati utenti , chiamata “Bypass Cache on Cookie” (disponibile per gli utenti del piano Business ed Enterprise ). L’unico elemento aggiuntivo di cui hai bisogno sul tuo sito web per utilizzare questa funzione è un cookie che viene impostato ogni volta che desideri escludere un utente dalla memorizzazione nella cache HTML. Nel nostro caso, avevamo bisogno di un cookie che venisse impostato ogni volta che un utente aggiungeva un prodotto al carrello o effettuava l’accesso e che veniva eliminato ogni volta che il carrello era vuoto o l’utente si disconnetteva.

A seconda del CMS o del sistema di eCommerce che stai utilizzando, ci sono diversi modi per impostare i cookie: potresti anche essere fortunato e i cookie di cui hai bisogno esistono già. Se non sai come impostare i cookie necessari per implementare la memorizzazione nella cache HTML sul tuo sito web, ad esempio cone con Google Tag Manager

Edge Cache TTL di Cloudflare è una funzionalità che ci consente di impostare un intervallo di tempo dopo il quale la cache viene svuotata e Cloudflare recupera una nuova versione della pagina dal server di origine la volta successiva che la pagina viene richiesta da un utente. Abbiamo deciso di utilizzare questa funzione per far scadere la cache di Cloudflare con la stessa frequenza con cui vengono aggiornati i prezzi sul sito Web, ogni 30 minuti.

L’utilizzo delle funzionalità “Bypass Cache on Cookie” (per escludere gli utenti che hanno effettuato l’accesso e gli utenti che hanno prodotti nel carrello dalla memorizzazione nella cache HTML) e “Edge Cache TTL” (per far scadere la cache dopo un certo lasso di tempo).

Come eliminare la cache di Cloudflare

Iniziamo con come evitare di eliminare la cache, se si desidera mantenere sempre le migliori prestazioni possibili.

Il pulsante Elimina tutto è molto comodo, ma d’altra parte è un killer delle prestazioni. Il pulsante è molto efficiente e fa esattamente quello che dice: elimina ogni elemento memorizzato nella cache per l’intera zona (dominio) su ogni nodo CDN nella rete Cloudflare. Ciò significa che tutti i nodi CDN devono ricostruire la cache recuperando nuovamente tutte le risorse dall’origine. Ciò richiede tempo e riduce le prestazioni per l’utente finale.

Pertanto, l’opzione migliore è utilizzare la funzione di eliminazione personalizzata , se possibile. Questa funzione invalida solo i percorsi specifici, invece di invalidare anche tutti i tuoi elementi statici e tutte le altre pagine HTML.

Elimina automaticamente tramite dei pluging.

Alcuni plugin sono in grado di farlo agganciandosi alle azioni che vengono eseguite ogni volta che aggiorni un post, una pagina, un prodotto o qualsiasi altro tipo di post. Facciamo la stessa cosa quando aggiorni i termini della tassonomia come categorie, categorie di prodotti, tag, ecc.

La vera magia è che oltre a eliminare il post stesso, eliminiamo anche i termini a cui appartiene. In questo modo puoi assicurarti che, ad esempio, la pagina della categoria del prodotto sia aggiornata se aggiorni il prezzo di un prodotto in quella categoria.

Come sostituire CloudFlare con un’alternativa per fare Caching dell’HTML ?

Come abbiamo appena visto CloudFlare memorizza nella cache contenuti statici come immagini e file CSS, ma non le pagine HTML. Varnish può memorizzare entrambi nella cache. Ciò significa che se state usando CloudFlare come CDN, avrete ancora bisogno di Varnish per una performance ottimale.

Cloudflare è una CDN (content delivery network) globale. Non è esattamente la stessa cosa di un servizio di caching come Varnish.

Cercare di usare Cloudflare per il caching può causare problemi perché non memorizza nella cache le pagine HTML.

Varnish invece è un servizio di caching. Mette in cache le pagine HTML e non le rimette in cache a meno che non gli si dica di farlo.

Cloudflare può aiutare a velocizzare il tuo sito web, ma solo se hai molto traffico. Se non hai abbastanza traffico, Cloudflare riduce le prestazioni del tuo sito web, perché dovrà fare più richieste al tuo server per ottenere il contenuto.

Varnish è un proxy web di caching. Si siede davanti al vostro server e qualsiasi traffico web può essere memorizzato nella cache in modo che l’utente non debba aspettare che arrivi dal server dell’applicazione. Varnish è noto per essere più veloce di altre soluzioni di caching, perché è più vicino all’utente finale e ha una latenza inferiore.

La differenza tra Varnish e Cloudflare è che Cloudflare non fa la cache delle pagine HTML. Questo è il motivo per cui Varnish potrebbe essere il miglior sostituto di Cloudflare.