22 Dicembre 2021

CloudFlare CDN cache HTML ?

Vediamo insieme alcuni limiti e caratteristiche di CloudFlare

CloudFlare HTML Cache

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 bypassstandard.
  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.

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):

WooCommerce CloudFlare

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.

Pulire Cache CloudFlare

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.

Hai dei dubbi? Non sai da dove partire? Contattaci


Abbiamo tutte le risposte alle tue domande per aiutarti nella giusta scelta.

Chatta con noi

Chatta direttamente con il nostro supporto prevendita.

0256569681

Contattaci telefonicamente negli orari d’ufficio 9:30 – 19:30

Contattaci online

Apri una richiesta direttamente nell’area dei contatti.

INFORMAZIONI

ManagedServer.it รจ il principale provider italiano di soluzioni hosting ad alte performance. Il nostro modello di sottoscrizione ha costi contenuti e prevedibili, affinchรฉ i clienti possano accedere alle nostre affidabili tecnologie di hosting, server dedicati e cloud. ManagedServer.it offre, inoltre, eccellenti servizi di supporto e consulenza su Hosting dei principali CMS Open Source come WordPress, WooCommerce, Drupal, Prestashop, Magento.

SOLO UN ATTIMO !

Vorresti vedere come gira il tuo WooCommerce sui nostri sistemi senza dover migrare nulla ? 

Inserisci l'indirizzo del tuo sito WooCommerce e otterrai una dimostrazione navigabile, senza dover fare assolutamente nulla e completamente gratis.

No grazie, i miei clienti preferiscono il sito lento.
Torna in alto