Data di pubblicazione: 14 maggio 2025
Il trasporto del dizionario di compressione è un nuovo standard che ci consente di comprimere i contenuti ripetuti nelle richieste ed è stato rilasciato in Chrome 130 alla fine del 2024. La Ricerca Google ha adottato questa nuova tecnologia e ha riscontrato enormi miglioramenti.
L'opportunità
Nelle pagine web che visitiamo sono presenti molte duplicazioni. Molte pagine dello stesso sito web sono costituite da grandi parti dello stesso codice, che si tratti di HTML, CSS o JavaScript, con la sola modifica dei contenuti tra tutto questo codice. Sebbene ogni risultato sia una combinazione unica di centinaia di funzionalità che generano contenuti completamente unici, esiste comunque una grande quantità di codice comune inviato al browser per produrli.
Visivamente, la maggior parte delle pagine dei risultati di ricerca sono in qualche modo simili, indipendentemente dal termine di ricerca inserito: nella parte superiore abbiamo il logo Google, la barra di ricerca e alcuni controlli. Al centro abbiamo alcune schede per il tipo di ricerca e poi un elenco di risultati di ricerca a sinistra intervallati da vari widget per aiutare l'utente e un contesto aggiuntivo a destra con i riquadri "Informazioni su":
Infine, in basso, abbiamo le opzioni di paginazione e il piè di pagina standard. Questo è solo ciò che è disponibile visivamente: dietro le quinte c'è molto codice (HTML, CSS e JavaScript) per produrre questa pagina. Gran parte di questo codice è inlined direttamente nell'HTML della pagina come ottimizzazione delle prestazioni. Sebbene ciò consenta un caricamento più rapido della pagina, comporta il costo di non condividere il codice tra le diverse pagine dei risultati, come consentirebbe una risorsa memorizzata nella cache esternamente.
Compressione sul web
La compressione è una tecnologia ampiamente utilizzata per il web. La compressione delle risorse con gzip o algoritmi più recenti come Brotli o Zstandard consente di evitare la ripetizione all'interno di un file con la compressione senza perdita per comprimere tutte le informazioni il più possibile sul server prima dell'invio. Il browser può quindi decomprimere i byte compressi per ripristinare i contenuti originali. Per le immagini, la compressione con perdita offre vantaggi simili rimuovendo i byte aggiuntivi che potrebbero non essere percepibilmente diversi per gli utenti.
Fino a poco tempo fa, la compressione sul web era limitata alla compressione all'interno delle risorse. Non era possibile comprimere risorse diverse e, certamente, non pagine diverse. Questa è stata a lungo riconosciuta come una limitazione che gli ingegneri web hanno cercato di risolvere.
Il trasporto del dizionario di compressione in soccorso!
Il trasporto del dizionario di compressione è un nuovo standard che consente la compressione tra le risorse con l'utilizzo di "dizionari" condivisi che consentono di sostituire le sequenze di byte comuni con riferimenti da quel dizionario condiviso.
Gli algoritmi di compressione moderni come Brotli e Zstandard supportano l'utilizzo di dizionari di termini comuni che consentono una maggiore compressione sostituendo questi termini con un riferimento più piccolo al dizionario. Brotli viene fornito anche con un dizionario integrato di termini web comuni. Il trasporto del dizionario di compressione si basa su questo fornendo modi per il server e il browser di condividere dizionari personalizzati.
I dizionari personalizzati possono essere una risorsa già utilizzata sul sito. Ad esempio, puoi utilizzare app.v1.js come dizionario quando scarichi app.v2.js per scaricare sostanzialmente solo la differenza (spesso nota come "compressione delta"). In alternativa, è possibile specificare una risorsa del dizionario separata con un <link rel="compression-dictionary"> tag (o un'intestazione HTTP Link equivalente).
In questo modo è possibile ridurre drasticamente le dimensioni di download delle risorse con molti contenuti o codice condivisi, come le pagine dei risultati di ricerca menzionate in precedenza.
Utilizzo dei dizionari di compressione da parte della Ricerca Google
Il team della Ricerca Google è costantemente alla ricerca di migliorare le prestazioni della Ricerca. È stato uno dei primi ad adottare i dizionari di compressione, in quanto ha visto il potenziale di questa tecnologia.
La Ricerca utilizza la compressione Brotli condivisa per le pagine dei risultati con un file di dizionario separato creato da un campione rappresentativo di risultati di ricerca. Una pipeline automatizzata robusta garantisce che il dizionario rimanga aggiornato, tenendo il passo con i contenuti delle pagine dei risultati di ricerca che cambiano frequentemente e vengono rilasciati più volte al giorno. Puoi utilizzare DevTools per vedere esattamente come funziona.
Quando un client carica per la prima volta una pagina dei risultati di ricerca, il server fornisce un link al dizionario utilizzando l'intestazione HTTP Link: con un tipo di rel=compression-dictionary:
Link nella scheda ReteSe il client supporta la compressione del dizionario Brotli, ma non ha ancora memorizzato nella cache il dizionario condiviso, il browser scarica questo dizionario durante il tempo di inattività. La risposta del dizionario include l'intestazione della risposta Use-As-Dictionary che indica al browser per quali risorse può utilizzare questo dizionario:
Use-As-Dictionary nella scheda ReteIl dizionario utilizzerà la semantica cache-control standard e sarà disponibile per tutte le risorse che corrispondono alle regole definite in quell'intestazione, in questo esempio le pagine che iniziano con /search.
Per i futuri caricamenti delle pagine dei risultati di ricerca, il browser può comunicare al server di avere un dizionario utilizzando l'intestazione della richiesta HTTP Available-Dictionary. Se ricarichi la pagina, vedrai questa intestazione in azione:
Available-Dictionary nella scheda ReteCon la casella di controllo Conserva log attivata e il filtro, possiamo confrontare le due risposte:
In questo esempio, la prima richiesta è la risposta completa di 107 kB e utilizza la compressione Brotli (br), mentre la seconda richiesta di ricaricamento è quasi la metà delle dimensioni, ovvero 60 kB, e utilizza la compressione Brotli compressa con dizionario (dcb), con conseguente riduzione del tempo di download.
In Chrome, puoi visualizzare la pagina chrome://net-internals/#sharedDictionary per visualizzare i dizionari condivisi e cancellarli se vuoi ripetere questo esempio dall'inizio.
#sharedDictionaryI risultati
La modifica è stata implementata per gli utenti della Ricerca nella primavera del 2025, inizialmente per gli utenti di Chrome. In questo modo, le dimensioni medie del payload HTML per tutti gli utenti di Chrome sono state ridotte del 23% rispetto alla compressione Brotli standard. Questa media complessiva include sia i risultati non compressi con dizionario (ad esempio, gli utenti che utilizzano la Ricerca per la prima volta senza un dizionario) sia i risultati di ricerca compressi con dizionario. Per i risultati compressi con dizionario, i risparmi sono ancora maggiori, come abbiamo visto con il miglioramento di quasi il 50% nell'esempio precedente.
Ciò ha comportato un miglioramento della metrica Largest Contentful Paint (LCP) dell'1, 7% complessivo e fino al 9% sulle reti ad alta latenza. Potrebbe sembrare poco, ma la Ricerca Google è un sito iper-ottimizzato, quindi i guadagni di questa entità sono enormi. Altri siti potrebbero riscontrare miglioramenti ancora maggiori con questa tecnologia.
Provala sul tuo sito!
Il trasporto del dizionario di compressione è ora pronto per l'uso in tutti i browser basati su Chromium (Chrome, Edge, Opera e così via). Si tratta di un potenziamento progressivo che verrà ignorato dai browser non supportati, ma man mano che altri browser lo supporteranno, potranno trarne vantaggio.
Le sfide che questa tecnologia affronta non sono specifiche della Ricerca Google. Molti siti possono trarre vantaggio dal trasporto del dizionario di compressione, sia con un dizionario separato come quello utilizzato dalla Ricerca, sia utilizzando una risorsa esistente come dizionario (come la versione precedente di un'app durante il lancio di una nuova versione).
Consulta la guida su MDN per maggiori dettagli su come funziona questa tecnologia e su come puoi implementarla sul tuo sito.
Per creare risorse compresse basate su dizionario e pubblicarle in modo appropriato, è necessaria una configurazione sul server o nel processo di compilazione, ma i risultati possono essere davvero impressionanti in termini di prestazioni.