La velocità è importante per qualsiasi sito web. Per ottenere tempi di caricamento veloci sul web, esiste una serie di tecnologie diverse che ci aiutano. Un approccio è quello di ridurre al minimo il codice sottostante che il vostro sito userà senza influenzare il suo funzionamento. La compressione GZIP è un modo per farlo, ma la compressione Brotli è un recente metodo alternativo che richiede attenzione.
È una soluzione sviluppata da Google che sembra fornire una serie di vantaggi rispetto alla compressione GZIP (oltre a essere una sua alternativa). Con questo articolo approfondiranno tutti i dettagli su ciò che la tecnologia offre: la compressione Brotli è veloce ed efficiente e vale la pena studiarla.
Guarda la Nostra Video-Guida alla Compressione Brotli
Per questo tutorial, esamineremo la compressione Brotli e vi mostreremo come verificare se il vostro sito la usa e come abilitarla se necessario. Per prima cosa, collocheremo Brotli nello spazio degli algoritmi di compressione e parleremo del perché usarla rispetto ad altre soluzioni.
Compressione Dati per il web
Nella sua forma più elementare, la compressione dei dati prende il codice di un sito web o di un’applicazione e minimizza la dimensione del file. Questo vi dà file più leggeri da spostare sul web e riduce il tempo necessario per caricare e visualizzare un sito web. Scoprirete che esistono molti modi per comprimere i dati a seconda del tipo di file con cui state lavorando.
Un approccio comune è la “minificazione”, il processo per cui un algoritmo spoglia il codice del vostro sito di alcuni dei suoi elementi superflui. L’idea è che aspetti come rientri, commenti, spazi bianchi e altri elementi non essenziali aumentano le dimensioni del file e di conseguenza i tempi di caricamento.
Nella maggior parte delle situazioni, la rimozione di questi elementi non influisce sull’esperienza utente (UX). Tuttavia, rende le cose più semplici per i computer che devono compilare e rendere il codice. Per esempio, prendete questa suite di codice:
define( 'WP_INSTALLING', true );
/** Sets up the WordPress Environment. */
require __DIR__ . '/wp-load.php';
require __DIR__ . '/wp-blog-header.php';
if ( ! is_multisite() ) {
wp_redirect( wp_registration_url() );
die();
}
$valid_error_codes = array( 'already_active', 'blog_taken' );Il codice qui sopra usa elementi come spazi e ritorni a capo per facilitare la leggibilità per gli esseri umani, ma un computer non ne ha bisogno per interpretare il codice di base. Inoltre, questi lotti di spazi bianchi e interruzioni di riga occupano spazio prezioso che, rimosso, può portare a un aumento delle prestazioni.
Se minimizzate questo codice, appare completamente diverso:
define( 'WP_INSTALLING', true ); /** Sets up the WordPress Environment. *
/ require __DIR__ . '/wp-load.php';
require __DIR__ . '/wp-blog-header.php';
if ( ! is_multisite() ) {
wp_redirect( wp_registration_url() );
die();
}
$valid_error_codes = array( 'already_active', 'blog_taken' );Tuttavia, le funzionalità svolte tramite questo codice sono ancora le stesse.
Scoprirete che altri tipi di file hanno i loro modi per comprimere i dati. Per esempio, le immagini spesso richiedono una pesante compressione per ridurre le dimensioni senza degradare l’immagine stessa:
La compressione GZIP è un modo standard per ridurre al minimo la dimensione dei pacchetti di file: pensate a pacchetti di file .tar come ZIP o Linux. Finora non c’erano vere alternative. Parleremo più avanti del perché dovrebbe esistere un’alternativa, ma prima vi presentiamo il “concorrente” di GZIP.
Compressione Brotli
In poche parole, Brotli è un algoritmo di compressione dati. Tuttavia, se questo fosse tutto ciò che abbiamo da dire, non ci sarebbe motivo di parlare di lui.
Fornisce una compressione “lossless” (senza perdite) ed è sviluppato da Google sotto una licenza MIT. L’azienda è spesso all’avanguardia nella tecnologia per il progresso del web, quindi non è una sorpresa che Brotli cerchi di prendere ciò che fa GZIP, migliorarlo e offrire un’esperienza migliore sia agli utenti che ai siti.
La compressione Brotli usa le stesse tecnologie di base della compressione GZIP, ovvero:
- L’algoritmo LZ77
- Decodifica e codificaHuffman
Infatti, se combinate queste due tecnologie, ottenete il formato DEFLATE che serve come base per entrambe le compressioni GZIP e Brotli. È qualcosa che approfondiamo molto nel nostro articolo sulla compressione GZIP.
In breve, i file non compressi passano attraverso gli algoritmi LZ77 e Huffman come parte del processo DEFLATE per comprimerli in un formato Brotli. Da lì, un processo INFLATE decomprimerà nuovamente i file quando necessario.
Anche se Brotli è attualmente il principale concorrente di GZIP, ci sono altre tecnologie simili che usano anche DEFLATE. Nella prossima sezione parleremo delle caratteristiche che distinguono Brotli.
Compressione Brotli vs Compressione GZIP
Come detto, sia Brotli che GZIP usano il metodo DEFLATE per comprimere (e decomprimere) i dati. Questo aspetto può confondere molte persone, visto che, da solo, non è un elemento sufficiente a giustificare la scelta tra l’uno e l’altro.
Tuttavia, Google si sta basando su DEFLATE per offrire tecniche migliorate e comprimere i dati a uno standard maggiore e più veloce.
Come Brotli Usa i Dizionari per Migliorare la Compressione Dati
Un aspetto tecnico dei formati di compressione dati è il modo in cui la compressione Brotli usa il linguaggio conosciuto e il testo esistente all’interno dei dizionari di dati per impiegare il suo algoritmo.
Gli sviluppatori usano un dizionario di coppie chiave-valore per memorizzare i dati perché è efficiente, flessibile e scalabile. Ecco come sarebbe un dizionario PHP (chiamato “array”):
$cats = get_categories(
array(
'taxonomy' => 'link_category',
'hierarchical' => 0,
'include' => $link_cat,
)
);GZIP non usa dizionari, mentre Brotli ne usa due.
Il Dizionario Statico di Brotli
Il primo è un dizionario statico (cioè predefinito) di termini comuni del codice che agiscono come riferimento per il testo HTML, CSS e JavaScript.
Contiene più di 13.000 parole in sei lingue diverse e Brotli le userà come riferimento per i punti del codice. Non è un’analogia esatta, ma è simile al modo in cui un hook di WordPress fa riferimento a una suite di codice più grande.
Per questo, l’encoder non deve passare al setaccio il codice byte per byte. Può invece agire sui riferimenti, estrarre la definizione dal dizionario e passare a quella successiva.
Scoprirete anche che ci sono frasi del mondo reale all’interno del dizionario così come codice che non verrebbe compresso spesso. Questo aiuta alcuni tag come <HTML> e parametri come type="text/javascript" a prendere un po’ di compressione e a darvi guadagni maggiori.
Il dizionario include anche alcune “trasformazioni”: frasi parziali, incomplete o di altri tipi che con un nuovo prefisso, suffisso o sequenza di minuscole/maiuscole si trasformano in una parola completamente nuova; per esempio, “Work” che si trasforma in “Working” o “html” in “HTML”.
Dizionario Dinamico di Brotli
Il dizionario dinamico analizza il contenuto e il codice alla fonte, il che funziona bene per i dispositivi più piccoli, ma non tanto per i file più grandi. È anche chiamato “finestra scorrevole” (sliding window) e può avere una dimensione massima di 16 MB. Questo è il punto in cui l’algoritmo di compressione salva in cache alcuni dei dati più recenti per farvi riferimento. È ultra-dinamico nel senso che cambia costantemente.
Se lo confrontate con la finestra scorrevole di GZIP di circa 32 KB, vedrete che la possibilità di analizzare e comprimere in tempo reale è enorme. Infatti, la maggior parte delle pratiche tipiche usa una finestra scorrevole di Brotli di circa 4 MB, che è ancora enorme rispetto agli algoritmi concorrenti.
Compressione Brotli vs Compressione GZIP: Prestazioni e Supporto
Quando si tratta di puri numeri di utenti, la compressione GZIP è ancora la numero uno. Tuttavia, la compressione Brotli si sta facendo strada ed è sempre più utilizzata. Questo è in parte dovuto a misure di adozione più ampie da parte dei principali browser; anche l’aumento dei browser basati su Chromium aiuta.
Guarda la Nostra Guida-Video alla Compressione Brotli vs. Compressione GZIP
Il sito Can I Use… registra le tecnologie che adottano i browser e fornisce una sorta di storia. Questo sito nota che oltre il 95% dei browser usa la compressione Brotli al momento della scrittura, incluse tutte le versioni principali.
Nel nostro articolo sulla compressione GZIP, abbiamo notato un test di benchmark in cui Brotli aveva un miglior rapporto di compressione rispetto agli algoritmi concorrenti, ma era indietro nel tempo di compressione e decompressione:
Tuttavia, i test di Squash Benchmark mostrano una storia diversa, un po’ più articolata. Il vero risultato è che, nel complesso, Brotli è più flessibile di GZIP, con un rapporto di compressione generalmente più alto.
Ecco il riassunto dei risultati di Squash Benchmarks:
- Brotli ha il miglior rapporto di compressione (cioè produce file compressi più piccoli) a ogni livello di compressione.
- Mentre GZIP batte Brotli in velocità per la maggior parte del tempo, il livello a cui comprimete è un fattore che influisce sui risultati che vedrete.
La ripartizione di Paul Calvano fornisce ulteriori dettagli, ma il punto cruciale è che Brotli ha bisogno di più potenza della CPU per fornire un maggiore fattore di compressione dei file. Questo si vede sia ai livelli di compressione più alti che a quelli più bassi. Il benchmarking di Cloudflare lo conferma: file molto più piccoli, con numeri di velocità di compressione comparativi più vicini.
Inoltre, considerate che alcuni strumenti di test come Pingdom e alcune Content Delivery Network (CDN) non supportano ancora Brotli. Questo può distorcere i dati che gli altri raccolgono sul modo in cui opera Brotli. Potete vedere dei “falsi negativi” se eseguite dei test: cifre sulla velocità di pagina più alte che ignorano il tipo di compressione dei file che impiegate.
Vantaggi della Compressione Brotli
Ci sono molte informazioni da prendere in considerazione sulla compressione Brotli. Tuttavia, possiamo riassumere ciò che c’è da sapere sul perché dovreste scegliere Brotli rispetto a GZIP:
- Usa la stessa tecnologia utilizzata da GZIP e la migliora con metodi moderni.
- L’analisi basata sul dizionario di Brotli significa che può comprimere più file a un livello più profondo.
- Anche se Brotli ha bisogno di più potenza di calcolo rispetto a GZIP, i risultati mostrano file più piccoli.
- Ai livelli di compressione usati dalla maggior parte dei web host (qualcosa di medio come il livello quattro o cinque) Brotli si comporta meglio di GZIP e senza troppo sforzo.
- Scoprirete che Brotli ha un supporto quasi universale per tutti i browser, se non per alcuni degli strumenti di riferimento a cui siete abituati.
- Brotli è gratuito e open source. Questo è un vantaggio se usate un CDN compatibile con Brotli, come Cloudflare.
Vale la pena notare che Cloudflare usa la compressione Brotli su tutti i suoi server. In effetti, usa una versione modificata e ottimizzata di Brotli per darvi ulteriori guadagni per quanto riguarda la velocità e la consegna dei file.
Poiché Kinsta offre l’integrazione di Cloudflare su tutti i piani, ogni sito ospitato usa Brotli per impostazione predefinita. Questo è solo uno dei motivi per cui Kinsta è uno dei leader di mercato e dei migliori fornitori di hosting in circolazione.
Come Verificare Se il Vostro Sito Usa la Compressione Brotli
Visto che la compressione Brotli non è ancora uno standard (anche se manca poco), probabilmente vorrete sapere se il vostro sito la usa. Ci sono alcuni modi per scoprirlo.
1. Usare uno Strumento Online
Il modo più semplice per controllare se il vostro sito usa la compressione Brotli è tramite uno strumento online. Ce ne sono diversi tra cui scegliere, ma vi servirà qualcosa che sia veloce e semplice da usare e che vi dia anche molte informazioni sulla vostra configurazione.
Gift of Speed è la nostra scelta per controllare la compressione Brotli.
Determinerà se il vostro sito usa GZIP, Brotli, o nessuna compressione, e fornirà alcune altre metriche per aiutarvi a decidere cosa fare dopo. Queste metriche offrono una visione importante, perché non volete solo considerare se il server del vostro sito usa il giusto livello di compressione.
Ci sono molti elementi che compongono un sito web e anche librerie e dipendenze di terze parti. Potreste scegliere di servirli usando una CDN e se è così, anche questa deve usare la compressione Brotli per offrire la migliore prestazione possibile.
Se usate Gift Of Speed per testare le singole risorse, potete dare un’occhiata al valore Server per vedere come viene servito.
Tutti i siti Kinsta usano il CDN Kinsta alimentato da Cloudflare. Per questo ogni sito userà anche la compressione Brotli in tutta la catena e l’architettura del server.
2. Verifica Tramite gli Strumenti di Sviluppo del Browser
La maggior parte delle persone che lavorano nello sviluppo sa che il browser offre alcuni fantastici strumenti per realizzare qualsiasi tipo di indagine e risoluzione dei problemi legati al web. Un rapido controllo che potete fare è se il vostro sito (o una specifica risorsa) usa la compressione Brotli.
Per tutti i principali browser come Brave, Edge, Firefox o Chrome, potete andare alla schermata Network > All.
All’inizio non vedrete nulla relativo agli header dei contenuti: dovrete selezionare una risorsa o una richiesta dal lato sinistro. Se continuate a guardare e a scorrere l’elenco, vedrete aprirsi un pannello con le informazioni relative agli header.
Qui, scorrete verso il basso l’output finché non vedete la riga content-encoding: br:
In breve: se vedete la stringa content-encoding: br, significa che Brotli è attivo per quel sito.
Come Abilitare la Compressione Brotli per il Vostro Sito
In queste ultime sezioni, vi mostreremo una serie di modi per abilitare la compressione Brotli per il vostro sito. Il primo sarà l’approccio che raccomandiamo per la maggior parte dei siti WordPress che non usano Kinsta, mentre l’ultimo è quello che raccomandiamo per ogni sito che si affida al primo approccio!
1. Usare un plugin WordPress
Quasi ogni sito WordPress userà almeno un plugin, spesso di più a seconda delle funzionalità di cui il sito ha bisogno. Il caching è un caso d’uso per i plugin e ce ne sono molti in giro. Tuttavia, non tutti vi permetteranno di abilitare la compressione Brotli, quindi dovrete fare una scelta oculata e prepararvi a cambiare la vostra soluzione preferita.
Prima di intraprendere qualsiasi modifica a un sito, ricordatevi di fare un backup completo nel caso abbiate bisogno di ripristinarlo in seguito. Per questo metodo, useremo W3 Total Cache perché è semplice trovare l’impostazione giusta.
Dovrete andare alla pagina Performance > Browser cache all’interno di WordPress:
Questa schermata mostra due impostazioni. Quella che dovrete scegliere è Enable HTTP (brotli) Compression:
Tuttavia, questo metodo non sarà adatto a ogni sito e situazione. Per esempio, Kinsta ottimizza il suo server per un hosting veloce, performante e affidabile. Di conseguenza, ci sono diversi plugin di cui non avrete bisogno e alcuni altri sono addirittura vietati sui siti Kinsta.
In questi casi, vi conviene adottare un altro approccio.
2. Abilitare Brotli sul Server
Quando si tratta di scegliere un tipo di server, la scelta tra Nginx e Apache è una lunga battaglia che (per ora) sta vincendo il primo dei due. Indipendentemente da ciò, entrambi i tipi di server possono abilitare la compressione Brotli e ci sono diversi approcci per ognuno.
Prima di esaminare l’approccio manuale, ci sono alcuni prerequisiti che dovreste conoscere:
- Vi serve capire come accedere ai file di configurazione per il vostro server specifico.
- La conoscenza della riga di comando sarà utile, specialmente quando si tratta di server Apache. Per eseguire qualsiasi comando, dovrete essere un utente root con privilegi
sudo. - Potreste aver bisogno di un editor di testo, ma per modifiche veloci come questa dovreste essere a posto.
- In alcuni casi, avrete bisogno delle vostre credenziali di accesso come utente secure shell (SSH) sul server stesso. Potete trovarle all’interno del vostro pannello di controllo di hosting o contattare il supporto per chiedere.
Se avete dei dubbi sull’approccio manuale, vi raccomandiamo di cercare un’altra opzione o di contattare il vostro host per un aiuto. Indipendentemente da ciò, daremo una breve panoramica del processo per ogni server, iniziando con Nginx.
Nginx
Per abilitare la compressione Brotli sui server Nginx, dovrete prima trovare il file nginx.conf. Ci sono poche posizioni in cui cercare:
/usr/local/nginx/conf/etc/nginx/usr/local/etc/nginx
Quando avete il file aperto, aggiungete quanto segue in fondo:
brotli on;
brotli_static on;
brotli_comp_level 9; # You can change this from 1–11. 4–9 offers good performance balance.
brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;Questa suite attiverà Brotli e lo userà per servire i file statici. L’impostazione brotli_comp_level è un’impostazione che potete cambiare a seconda del vostro caso d’uso e delle vostre esigenze. Numeri più alti offrono una migliore compressione bilanciata con un sito meno performante.
Apache
Poiché Apache è flessibile quando si tratta di configurazioni, potete attivare la compressione di Brotli senza troppe difficoltà.
Per farlo, seguite questi passi:
- Accedete al vostro server usando un Prompt dei comandi o un’applicazione Terminal, come utente root
sudo. - Eseguite il comando
a2enmod brotliper attivare la compressione. - All’interno di Apache VirtualHost o nella configurazione del vostro server, aggiungete la linea
AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascriptper impostare i tipi di file che volete comprimere.
Anche se Apache non supporta la compressione statica, potete cambiare il livello di compressione Brotli che offrite usando la linea BrotliCompressionQuality LEVEL-NUMBER. Tuttavia, dovrete sostituire il segnaposto “LEVEL-NUMBER” con un numero tra 1-11.
3. Usare un Host Web di Supporto
Il modo più diretto per abilitare la compressione Brotli per il vostro sito è quello di assicurarvi che il vostro host lo faccia di default. Kinsta offre la compressione Brotli come standard grazie alla sua integrazione con il CDN di Cloudflare.
Il CDN di Kinsta è alimentato dall’infrastruttura di Cloudflare su tutti i piani, così ogni sito usa la compressione Brotli senza che voi dobbiate abilitarla.
Dovrete controllare se il vostro host scelto offre la compressione Brotli e a quale livello è necessario configurarla. Per avere il sito più performante, stabile e sicuro, un buon hosting è essenziale.
Riepilogo
La compressione dei dati è una componente necessaria per sviluppare e usare il web moderno. Le dimensioni dei file possono salire alle stelle a causa dei ricchi e complessi tipi di file che userete per mettere insieme un sito web. Tutti loro hanno bisogno di una qualche forma di compressione.
Finora l’approccio tipico è stato GZIP, ma c’è una novità.
La compressione Brotli basa la sua tecnologia sulle stesse fondamenta di GZIP, ma include alcuni benefici per migliorare le prestazioni. Come abbiamo discusso, usa la mappatura del contesto per elaborare una richiesta di compressione più velocemente e un dizionario che utilizza una popolazione dinamica. È qualcosa di molto più ampio di quello che può offrire GZIP e permette anche agli utenti da dispositivi mobili di beneficiare della compressione.
La buona notizia è che ogni sito Kinsta può beneficiare della compressione Brotli grazie alla nostra unica integrazione con Cloudflare. Questo significa che il vostro sito ospitato da Kinsta è più veloce della concorrenza che usa GZIP e si carica rapidamente anche sui dispositivi più piccoli.
Avete qualche domanda sulla compressione Brotli? Chiedete liberamente nella sezione commenti qui sotto!
Lascia un commento