Compressione Brotli: un'alternativa veloce alla compressione GZIP
Pubblicato: 2022-04-22La velocità è importante per qualsiasi sito web. Nella ricerca del web di tempi di caricamento rapidi, abbiamo una serie di diverse tecnologie per aiutarci. Un approccio consiste nel ridurre al minimo il codice sottostante che il tuo sito utilizzerà senza influire sul suo funzionamento. La compressione GZIP è un modo per farlo, ma la compressione Brotli è un metodo alternativo alle prime armi che attira l'attenzione.
È una soluzione sviluppata da Google che cerca di fornire una serie di vantaggi rispetto (oltre a un'alternativa) alla compressione GZIP. I dettagli in questo articolo esamineranno esattamente ciò che offre la tecnologia, ma la compressione Brotli è veloce ed efficiente, il che soddisfa tutte le esigenze per esaminarla.
Per questo tutorial, esamineremo la compressione Brotli e ti mostreremo come verificare se il tuo sito lo utilizza e come abilitarlo se necessario. Innanzitutto, collocheremo Brotli all'interno dello spazio dell'algoritmo di compressione e parleremo del motivo per cui vorresti usarlo su altre soluzioni.
Compressione dei dati per il Web
Nella sua forma più semplice, la compressione dei dati prende il codice per un sito Web o un'app e riduce al minimo le dimensioni del file. Ciò ti dà file più leggeri per spostarti sul Web e riduce il tempo necessario per caricare e visualizzare un sito Web. Scoprirai che ci sono molti modi per comprimere i dati a seconda del tipo di file con cui stai lavorando.
Un approccio comune è la "minificazione". È qui che un algoritmo rimuove dal codice del tuo sito alcuni dei suoi elementi superflui. L'idea è che aspetti come rientri, commenti, spazi bianchi e altro aumenteranno le dimensioni dei file e quindi i tempi di caricamento.
La rimozione di questi elementi non influisce sull'esperienza utente (UX) nella maggior parte delle situazioni. Tuttavia, rende le cose più semplici per i computer che devono compilare ed eseguire il rendering del codice. Ad esempio, prendi 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 precedente utilizza elementi come spazi e ritorni a capo per renderlo leggibile dall'uomo, ma un computer non ne ha bisogno per comprendere il codice principale. Inoltre, questi lotti di spazi bianchi e interruzioni di riga occuperanno spazio prezioso che, rimosso, può darti un aumento delle prestazioni.
Se riduci a icona questo codice, sembra 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, i fondamenti di ciò che fa questo codice sono sempre gli stessi.
Scoprirai che altri tipi di file hanno modi per comprimere i dati. Ad esempio, le immagini spesso richiedono molta compressione per ridurre le dimensioni senza molto degrado dell'immagine stessa:
La compressione GZIP è un modo standard per ridurre al minimo le dimensioni dei bundle di file: pensa a pacchetti come ZIP o Linux .tar bundle. Ma fino ad ora non c'erano vere alternative. Parleremo di più del motivo per cui dovrebbe esistere un'alternativa in seguito, ma prima ti presentiamo il "concorrente" di GZIP.
Compressione Brotli
In poche parole, Broti è un algoritmo di compressione dati. Tuttavia, se questo è tutto ciò che avremmo da dire, non ci sarebbe motivo di indagare.
Fornisce una compressione "lossless" ed è sviluppato da Google con una licenza MIT. L'azienda è spesso all'avanguardia nella tecnologia di avanzamento del Web, quindi non sorprende che Brotli cerchi di prendere ciò che fa GZIP, migliorarlo e offrire un'esperienza migliorata a utenti e siti.
La compressione Brotli utilizza le stesse tecnologie di base di base della compressione GZIP, ovvero:
- L'algoritmo LZ77
- Codifica e decodifica di Huffman
Infatti, se si combinano queste due tecnologie, si ottiene il formato DEFLATE che funge da base per le compressioni GZIP e Brotli. È qualcosa che approfondiamo con estrema profondità nel nostro post sulla compressione GZIP.
In breve, i file non compressi vengono eseguiti 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.
Sebbene Brotli sia attualmente il principale contendente di GZIP, esistono altre tecnologie simili che utilizzano anche DEFLATE . Nella prossima sezione parleremo di ciò che distingue Brotli.
Compressione Brotli vs Compressione GZIP
Come accennato, sia Brotli che GZIP utilizzano il metodo DEFLATE per comprimere (e decomprimere) i dati. Questo può confondere molte persone, perché questo da solo non garantisce un passaggio.
Tuttavia, Google si sta basando su DEFLATE per offrire tecniche avanzate e comprimere i dati secondo uno standard maggiore e più veloce.
Come Brotli utilizza i dizionari per migliorare la compressione dei dati
Un aspetto tecnico dei formati di compressione dei dati è il modo in cui la compressione Brotli utilizza la lingua e il testo conosciuti esistenti all'interno dei dizionari di dati per utilizzare il suo algoritmo.
Gli sviluppatori utilizzeranno un dizionario di coppie chiave-valore per archiviare i dati, poiché è efficiente, flessibile e scalabile. Ecco come sarebbe un dizionario PHP (chiamato "array"):
$cats = get_categories( array( 'taxonomy' => 'link_category', 'hierarchical' => 0, 'include' => $link_cat, ) );Sebbene GZIP non utilizzi dizionari, Brotli ne usa due .
Dizionario statico di Brotli
Il primo è un dizionario statico (cioè predefinito) di termini di codice comuni che fungono da riferimento per il testo HTML, CSS e JavaScript.
Ci sono oltre 13.000 parole in sei lingue diverse e Brotli le userà come riferimenti ai 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ù ampia.
In quanto tale, il codificatore non deve setacciare il codice byte per byte. Invece, può agire sui riferimenti, estrarre la definizione dal dizionario e passare a quella successiva.
Troverai anche che ci sono frasi del mondo reale all'interno del dizionario e codice che spesso non vedrebbero la compressione. Questo aiuta alcuni tag come <HTML> e parametri come type="text/javascript" a ricevere un po' di compressione e a darti maggiori guadagni.
Ci sono anche alcune "trasformazioni" all'interno del dizionario: parziale, incompleta e altri tipi di frasi che con un nuovo prefisso, suffisso o maiuscolo diventano una parola completamente nuova, ad esempio "Lavoro" che si trasforma in "Funzionante" o "html ” in “HTML”.
Dizionario dinamico di Brotli
Il dizionario dinamico analizza il contenuto e il codice all'origine, il che è utile per i dispositivi più piccoli, ma non per i file più grandi. Viene anche chiamata "finestra scorrevole" e può avere una dimensione massima di 16 MB. È qui che l'algoritmo di compressione 'mecca nella cache' alcuni dei dati più recenti per farvi riferimento. È ultra-dinamico in quanto cambia costantemente.
Se lo confronti con la finestra scorrevole di GZIP di circa 32 KB, vedrai che l'ambito per l'analisi e la compressione in tempo reale è enorme. In effetti, la maggior parte delle pratiche tipiche utilizza una finestra scorrevole Brotli di circa 4 MB, che è ancora gigantesca rispetto agli algoritmi concorrenti.
Compressione Brotli vs Compressione GZIP: prestazioni e supporto
Quando si tratta di numeri utente puri, la compressione GZIP è ancora la numero uno. Tuttavia, la compressione Brotli viene utilizzata ogni giorno di più. Ciò è in parte dovuto a più ampie misure di adozione da parte dei principali browser; anche l'ascesa dei browser basati su Chromium aiuta.
Il sito web Can I Use… registra le tecnologie adottate dai browser e fornisce una sorta di cronologia. Questo sito rileva che oltre il 95% dei browser utilizza la compressione Brotli al momento della scrittura, comprese tutte le versioni principali.
Nel nostro articolo sulla compressione GZIP, abbiamo notato un test di riferimento in cui Brotli aveva un rapporto di compressione migliore rispetto agli algoritmi concorrenti, ma era rimasto indietro nel tempo di compressione e decompressione:
Tuttavia, i test di Squash Benchmark mostrano una storia diversa, più sfumata. Il vero vantaggio è che nel complesso Brotli è più flessibile di GZIP, con un rapporto di compressione generalmente più elevato.
Ecco il riepilogo dei risultati di Squash Benchmarks:
- Brotli ha il miglior rapporto di compressione (cioè produce file compressi più piccoli) a tutti i livelli di compressione.
- Mentre GZIP batte Brotli in velocità per la maggior parte del tempo, il livello che comprimi in fattori fattori nei risultati che vedrai.
La ripartizione di Paul Calvano fornisce ulteriori dettagli, ma il punto cruciale è che Brotli ha bisogno di più potenza della CPU per fornire un fattore maggiore di compressione dei file. Questo mostra sia il livello di compressione più alto che quello più basso. Il benchmarking di Cloudflare lo conferma: file molto più piccoli, con numeri di velocità di compressione comparativi più vicini.
Inoltre, considera che alcuni strumenti di test come Pingdom e alcune reti di distribuzione dei contenuti (CDN) non supportano ancora Brotli. Ciò può distorcere i dati che altri raccolgono sul modo in cui Brotli opera. Puoi vedere "falsi negativi" se esegui i test: cifre di velocità della pagina più elevate che ignorano la compressione del file che utilizzi.
Vantaggi della compressione Brotli
Ci sono molte informazioni da prendere in considerazione finora sulla compressione Brotli. Tuttavia, possiamo riassumere ciò che devi sapere sul motivo per cui dovresti scegliere Brotli su GZIP:
- Prende la stessa tecnologia utilizzata da GZIP e la migliora con metodi moderni.
- L'analisi basata su dizionario di Brotli significa che può comprimere più file a un livello più profondo.
- Sebbene Brotli necessiti di una maggiore potenza di calcolo rispetto a GZIP, i risultati significano file più piccoli.
- Ai livelli di compressione utilizzati dalla maggior parte degli host Web, qualcosa di medio come il livello quattro o cinque, Brotli si comporta meglio di GZIP senza sudare.
- Scoprirai che Brotli ha un supporto quasi universale su tutti i browser, se non alcuni degli strumenti di benchmark a cui sei abituato.
- Brotli è gratuito e open source. Questo è un vantaggio se utilizzi una CDN compatibile con Broti, come Cloudflare.
Vale la pena notare che Cloudflare utilizza la compressione Brotli su tutti i suoi server. In effetti, utilizza una versione modificata e ottimizzata di Brotli per darti ulteriori vantaggi in termini di velocità e consegna dei file.
Poiché Kinsta offre l'integrazione di Cloudflare su tutti i piani, ogni sito ospitato utilizza Brotli per impostazione predefinita. Questo è solo uno dei motivi per cui Kinsta è uno dei migliori provider di hosting leader di mercato in circolazione.
Come verificare se il tuo sito utilizza la compressione Brotli
Poiché la compressione Brotli non è ancora standard (anche se è quasi arrivata), probabilmente vorrai sapere se il tuo sito la utilizza. Ci sono alcuni modi per capirlo.
1. Utilizzare uno strumento online
Il modo più semplice per verificare se il tuo sito utilizza la compressione Brotli è tramite uno strumento online. Anche se ce ne sono alcuni tra cui scegliere, vorrai qualcosa che sia veloce e semplice da usare che ti dia anche un sacco di informazioni sulla tua configurazione.
Gift of Speed è la nostra scelta per verificare la compressione Brotli.
Determina se il tuo sito utilizza GZIP, Brotli o nessuna compressione e fornisce alcune altre metriche per aiutarti a decidere cosa fare dopo. Queste metriche offrono informazioni importanti, perché non vuoi solo considerare se il server del tuo sito utilizza il giusto "sapore" di compressione.
Ci sono molti elementi che compongono un sito Web e persino librerie e dipendenze di terze parti. Potresti scegliere di servirli utilizzando un CDN e, in tal caso, è necessario utilizzare anche la compressione Brotli per le migliori prestazioni possibili.
Se utilizzi Gift Of Speed per testare singole risorse, puoi dare un'occhiata al valore Server per vedere come viene servito.
Tutti i siti Kinsta utilizzano il Kinsta CDN basato su Cloudflare. Pertanto, ogni sito utilizzerà anche la compressione Brotli nell'intera catena e nell'architettura del server.
2. Seleziona Utilizzo degli strumenti per sviluppatori del tuo browser
La maggior parte degli sviluppatori saprà che un browser offre alcuni strumenti fantastici per aiutarti con ogni tipo di indagine e risoluzione dei problemi relativi al Web. Un rapido controllo che puoi effettuare è se il tuo sito (o una risorsa specifica) utilizza la compressione Brotli.
Per tutti i principali browser come Brave, Edge, Firefox o Chrome, puoi andare alla schermata Rete > Tutto .
All'inizio, non vedrai nulla relativo alle intestazioni dei contenuti: dovrai selezionare una risorsa o una richiesta dal lato sinistro. Se continui a cercare e scorrere l'elenco, vedrai un pannello che si apre per impostazione predefinita con le informazioni sulle intestazioni .
Qui, scorri verso il basso l'output fino a visualizzare la content-encoding: br line:
In breve: se vedi content-encoding: br , questo ti dice che Brotli è attivo per quel sito.
Come abilitare la compressione Brotli per il tuo sito
In queste ultime sezioni, ti mostreremo diversi modi per abilitare la compressione Brotli per il tuo sito. Il primo sarà l'approccio che consigliamo per la maggior parte dei siti WordPress che non utilizzano Kinsta, e l'ultimo è quello che consigliamo per ogni sito che legge il primo approccio!
1. Usa un plugin per WordPress
Quasi tutti i siti WordPress utilizzeranno almeno un plug-in, spesso di più a seconda delle funzionalità di cui il sito ha bisogno. La memorizzazione nella cache è un caso d'uso per i plug-in e ce ne sono molti in giro. Tuttavia, non tutti ti permetteranno di abilitare la compressione Brotli, quindi dovrai scegliere saggiamente ed essere pronto a cambiare la tua soluzione preferita.
Prima di apportare modifiche a un sito, ricorda di eseguire un backup completo nel caso in cui sia necessario ripristinarlo in seguito. Per questo metodo, useremo W3 Total Cache perché è semplice trovare l'impostazione giusta.
Dovrai andare alla pagina Prestazioni > Cache del browser all'interno di WordPress:
Questa schermata mostra due impostazioni. Quello che vorrai scegliere è Abilita compressione HTTP (brotli) :
Tuttavia, questo non sarà adatto per ogni sito e situazione. Ad esempio, Kinsta ottimizza il proprio server per un hosting veloce, ad alte prestazioni e affidabile. In quanto tali, ci sono un certo numero di plugin di cui non avrai bisogno e alcuni altri sono persino vietati dall'uso sui siti Kinsta.
In questi casi, ti consigliamo di adottare un altro approccio.
2. Abilita Brotli sul server
Quando si tratta di scegliere un tipo di server, Nginx vs Apache è una battaglia di lunga data che (per ora) sta vincendo il primo. Indipendentemente da ciò, entrambi i tipi di server possono abilitare la compressione Brotli e ci sono approcci diversi per ciascuno.
Prima di esaminare l'approccio manuale, ci sono alcuni prerequisiti che dovresti conoscere:
- Ti consigliamo di capire come accedere ai file di configurazione per il tuo server specifico.
- La conoscenza della riga di comando sarà utile, specialmente quando si tratta di server Apache. Per eseguire qualsiasi comando, devi essere un utente root con privilegi
sudo. - Potresti aver bisogno di un editor di testo, ma per modifiche rapide come questa, dovresti andare bene.
- In alcuni casi, avrai bisogno delle tue credenziali di accesso come utente Secure Shell (SSH) sul server stesso. Puoi trovarli all'interno del tuo pannello di controllo dell'hosting o contattare l'assistenza per chiedere.
In caso di dubbi sull'approccio manuale, ti consigliamo di prendere in considerazione un'altra opzione o di contattare il tuo host per chiedere aiuto. Indipendentemente da ciò, forniremo una breve panoramica del processo per ciascun server a turno, a partire da Nginx.
Nginx
Per abilitare la compressione Brotli sui server Nginx, devi prima trovare il file nginx.conf . Sarà una delle poche location:
-
/usr/local/nginx/conf -
/etc/nginx -
/usr/local/etc/nginx
Quando hai il file aperto, aggiungi 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 accenderà Brotli e lo utilizzerà per servire file statici. L'impostazione brotli_comp_level è quella che puoi cambiare a seconda del tuo caso d'uso e delle tue esigenze. Numeri più alti offrono una migliore compressione bilanciata con un sito meno performante.
Apache
Poiché Apache è flessibile quando si tratta di configurazioni, puoi abilitare la compressione Brotli senza troppi problemi.
Per fare ciò, attenersi alla seguente procedura:
- Accedi al tuo server utilizzando un prompt dei comandi o un'applicazione Terminale, come utente
sudoroot. - Esegui il comando
a2enmod brotliper attivare la compressione. - All'interno di Apache VirtualHost o della configurazione del tuo server, aggiungi la
AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascriptper impostare i tipi di file corretti che desideri comprimere.
Sebbene Apache non supporti la compressione statica, puoi modificare il livello di compressione Brotli che offri utilizzando la BrotliCompressionQuality LEVEL-NUMBER . Tuttavia, dovrai sostituire il segnaposto "LEVEL-NUMBER" con un numero compreso tra 1 e 11.
3. Utilizzare un host web di supporto
Il modo più semplice per abilitare la compressione Brotli per il tuo sito è assicurarsi che il tuo host lo faccia per impostazione predefinita. Kinsta offre la compressione Brotli come standard grazie alla sua integrazione con la CDN di Cloudflare.
Kinsta CDN è alimentato dall'infrastruttura di Cloudflare su tutti i piani, quindi ogni sito utilizza la compressione Brotli senza che tu debba abilitarla.
Ti consigliamo di verificare se l'host scelto offre la compressione Brotli e a quale livello è necessario configurarlo. Per eseguire il sito più performante, stabile e sicuro, un buon hosting è essenziale.
Sommario
La compressione dei dati è una componente necessaria per lo sviluppo e l'utilizzo del Web moderno. Le dimensioni dei file possono salire alle stelle a causa dei tipi di file ricchi e complessi che utilizzerai per mettere insieme un sito web. Tutti hanno bisogno di una qualche forma di compressione.
L'approccio tipico è stato GZIP fino ad ora, ma c'è un nuovo ragazzo sul blocco.
La compressione Brotli basa la sua tecnologia sulle stesse basi di GZIP, ma include alcuni vantaggi per il miglioramento delle prestazioni. Come discusso, utilizza la mappatura del contesto per elaborare una richiesta di compressione più velocemente e un dizionario che utilizza la popolazione dinamica. Questo è molto più grande di quello che GZIP può offrire e consente anche agli utenti mobili di beneficiare della compressione.
La buona notizia è che ogni sito Kinsta può trarre vantaggio dalla compressione Brotli grazie alla nostra esclusiva integrazione con Cloudflare. Ciò significa che il tuo sito ospitato da Kinsta è più veloce della concorrenza utilizzando GZIP e si carica rapidamente per quelli su dispositivi più piccoli.
Hai domande sulla compressione Brotli? Sentiti libero di chiedere nella sezione commenti qui sotto!