Perché l'intestazione HTTP Vary può danneggiare il tuo sito web

Vary è un’intestazione HTTP potente che svolge un ruolo significativo nel funzionamento della cache del tuo sito web. Quando questa intestazione è impostata correttamente, assicura che i visitatori del sito web visualizzino il contenuto giusto, indipendentemente dal caching applicato. Tuttavia, se questa intestazione è impostata in modo non corretto, può eliminare completamente i vantaggi del miglior sistema di caching e causare un sovrautilizzo delle risorse. In questo articolo del nostro blog, voglio fare un po’ di luce sul modo in cui l’intestazione Vary influisce sul tuo sito ospitato su SiteGround e, in particolare, sul nostro sistema di caching, e mostrarti l’utilizzo consigliato dell’intestazione Vary per il tuo sito web.

Come funziona l’intestazione Vary?

Il ruolo dell’intestazione Vary è quello di indicare in quali casi dovrebbe essere mostrata una versione diversa del tuo sito web. Se l’intestazione Vary ha uno dei seguenti valori: User-Agent, Cookie, Referred o * (wildcard), può ridurre significativamente l’effetto del nostro sistema di caching. Ciò accade perché questi valori indicano che dovrebbe essere mostrata una versione diversa delle tue pagine in base al tipo di browser utilizzato (user-agent), che è presente un cookie unico o URL referral o, nello scenario peggiore, quando viene utilizzato *, che verrà mostrato un contenuto nuovo durante ogni singola visita, che equivale a disattivare completamente la nostra cache.

Vary: User-Agent

Diamo un’occhiata al modo in cui funziona il valore più comunemente utilizzato, User-Agent. Dice al nostro caching dinamico: “Ehi, dovresti memorizzare diverse cache per sistemi operativi e browser diversi”. Questo per evitare di mostrare, ad esempio, una versione desktop presente in cache a un visitatore che utilizza un dispositivo mobile. Tuttavia, considera che al giorno d’oggi la maggior parte dei siti web non mostra in realtà HTML diversi per le loro versioni mobili. È il CSS responsivo che fa tutto il lavoro pesante e mostra il tuo sito web in maniera diversa su smartphone e desktop. Pertanto, a meno che non utilizzi plugin come ad esempio WP Touch, o sai per certo di avere differenze nell’uscita HTML del tuo sito web in base ai browser dei visitatori, il tuo sito web non dovrebbe inviare l’intestazione Vary: User-Agent.

Senza impostare Vary: User-Agent, il nostro sistema di caching memorizzerà in cache il tuo sito web durante il primo caricamento e in seguito mostrerà la versione in cache durante le richieste successive – a meno che non aggiorni i contenuti o svuoti manualmente la cache. Con User-Agent attivato, il sistema manterrà copie diverse per ciascuna combinazione di sistema operativo e browser che visita il tuo sito web. Ciò significa che avrai una richiesta dinamica per la prima persona che carica il tuo sito web su Safari da desktop, uno per la prima persona che lo carica su Chrome da dispositivo mobile, uno per la prima persona che lo carica su Chrome da desktop… e così via.

Diciamo che svuoti la tua cache ogni 100 visite circa. Senza l’intestazione Vary: User-Agent inviata dal tuo sito web, il tuo sito web avrà solo una richiesta dinamica su 100. D’altra parte, con l’intestazione abilitata, a seconda del profilo dei tuoi visitatori, avrai 5-30 richieste dinamiche per le stesse 100 visite. Quindi lo stesso sito web utilizzerà 5-30 volte le risorse che sarebbero state necessarie con  l’intestazione disattivata.

Bot cattivissimi!

Odiamo il traffico malware e i bot maligni. Per noi, combatterli in ogni modo possibile si è rivelato uno sforzo costante. Sto citando i bot qui, perché se ricevi spam da essi, l’intestazione Vary: User-Agent potrebbe determinare il grado di successo del loro attacco e il grado con cui il crawling da parte dei bot influirà sulle prestazioni del tuo sito web.

Puoi considerare un bot come un browser che effettua azioni automatizzate sul tuo sito web. Può raccogliere dati per il proprio indice, cercare le vulnerabilità, provare a compilare e inviare moduli, ecc.  L’User-Agent del Bot è semplicemente una porzione di testo aggiunto dal suo creatore. Sistemi di crawling rinomati come il bot di Google sono impostati correttamente, mentre altri possono tentare di imitare il bot di Bing o il bot di Google o addirittura generare un user agent in maniera casuale.

Se il bot inizia ad eseguire il crawling del tuo sito web e disponi dell’intestazione Vary: User-Agent, ogni richiesta che fa al tuo sito web costituirà un elemento dinamico e consumerà le tue risorse. D’altra parte, se l’intestazione non viene utilizzata, mostreresti ai bot le richieste in cache direttamente dal caching dinamico.

Come visualizzare le tue intestazioni di risposta

Prima di tutto, dovresti controllare le intestazioni che il tuo sito web sta restituendo ai visitatori. Di solito, uso la scheda Network di FireBug nel mio browser, ma esiste un comodo checker online (http://www.webconfs.com/http-header-check.php) che puoi utilizzare anche tu. L’intestazione Vary presenta valori multipli e l’user-agent è semplicemente uno di essi. Se non disponi di un’intestazione Vary o quest’ultima include solo il valore Accept-Encoding (che aiuta il corretto funzionamento della compressione gZIP), non dovresti preoccuparti. Tuttavia, se visualizzi User-Agent o un qualsiasi altro valore (Cookie, Referrer o *), ti consigliamo di rimuoverli dalla tua intestazione.

Come configurare l’intestazione Vary

Generalmente, l’approccio migliore sarebbe quello di capire quale parte del tuo sito web la sta generando e riconfigurarla. Tuttavia, ciò potrebbe richiedere alcune capacità di risoluzione dei problemi e potrebbe non essere un compito molto facile. Quindi, se sei su WordPress, potresti controllare le tue intestazioni, e quindi sostituire la risposta con solo quello che desideri, aggiungendo le seguenti righe al tuo file function.php:

function replace_wp_headers($headers) {
$headers['Vary'] = 'Accept-Encoding';
return $headers;
}

add_filter(‘wp_headers’, replace_wp_headers);

In alternativa, è possibile provare a utilizzare le regole .htaccess per disattivare le intestazioni Vary non necessarie:

<ifModule mod_headers.c>
Header unset Vary
Header set Vary “Accept-Encoding”
</ifModule>

Facendo questo, rimuoverai tutte le intestazioni dal tuo sito web e lascerai solo quelle specificate nel tuo codice Accept-Encoding. Naturalmente, puoi aggiungere altre regole ma assicurati sempre di averne veramente bisogno: non c’è altro modo per ottenere il risultato che stai cercando!