Gepubliceerd: 14 mei 2025
Compressie Dictionary Transport is een nieuwe standaard waarmee we herhaalde inhoud tussen verzoeken kunnen comprimeren en werd eind 2024 uitgebracht in Chrome 130. Google Zoeken heeft deze nieuwe technologie overgenomen en enorme verbeteringen gezien.
De kans
Er is veel dubbel werk op de webpagina's die we bezoeken. Veel pagina's op dezelfde website bestaan uit grote delen van dezelfde code, of het nu HTML, CSS of JavaScript is, waarbij alleen de inhoud tussen al deze code verandert. Hoewel elk resultaat een unieke combinatie is van honderden functies die resulteren in totaal unieke inhoud, is er nog steeds veel gemeenschappelijkheid in de code die naar de browser wordt gestuurd om deze te produceren.
Visueel lijken de meeste pagina's met zoekresultaten enigszins op elkaar, ongeacht de ingevoerde zoekterm: bovenaan hebben we het Google-logo, de zoekbalk en enkele bedieningselementen. In het midden hebben we enkele tabbladen voor het zoektype, en vervolgens een lijst met zoekresultaten aan de linkerkant, afgewisseld met verschillende widgets om de gebruiker te helpen, en aanvullende context aan de rechterkant met "over"-panelen:

Tenslotte hebben we onderaan de pagineringsopties en de standaardvoettekst. Dit is precies wat visueel beschikbaar is: achter de schermen is er veel code (HTML, CSS en JavaScript) om deze pagina te produceren. Een groot deel van deze code wordt rechtstreeks in de HTML van de pagina geplaatst als prestatie-optimalisatie. Hoewel dit het sneller laden van pagina's mogelijk maakt, brengt dit de kosten met zich mee die gepaard gaan met het niet delen van die code tussen verschillende resultatenpagina's, zoals een extern in de cache opgeslagen bron zou toestaan.
Compressie op internet
Compressie is een veelgebruikte technologie voor internet. Door bronnen te comprimeren met gzip, of nieuwere algoritmen zoals Brotli of Zstandard, kan herhaling binnen een bestand worden vermeden met verliesvrije compressie om alle informatie zo strak mogelijk op de server te verpakken voordat deze wordt verzonden. De browser kan vervolgens de gecomprimeerde bytes uitpakken om de originele inhoud te herstellen. Voor afbeeldingen biedt compressie met verlies vergelijkbare voordelen door extra bytes te verwijderen die voor gebruikers misschien niet waarneembaar verschillen.
Tot voor kort was compressie op internet beperkt tot compressie binnen bronnen. Het was niet mogelijk om over verschillende bronnen heen te comprimeren, en zeker niet over verschillende pagina's. Dit wordt al lang erkend als een beperking die webingenieurs probeerden op te lossen.
Compressiewoordenboek Transport schiet te hulp!
Compressiewoordenboektransport is een nieuwe standaard die compressie tussen bronnen mogelijk maakt met behulp van gedeelde "woordenboeken" waarmee gemeenschappelijke reeksen bytes kunnen worden vervangen door verwijzingen uit dat gedeelde woordenboek.
Moderne compressie-algoritmen zoals Brotli en Zstandard ondersteunen het gebruik van woordenboeken met veelgebruikte termen die een grotere compressie mogelijk maken door die termen te vervangen door een kleinere verwijzing naar het woordenboek. Brotli wordt zelfs geleverd met een ingebouwd woordenboek met veelgebruikte webtermen. Compression Dictionary Transport bouwt hierop voort door manieren te bieden waarop de server en browser aangepaste woordenboeken kunnen delen.
Aangepaste woordenboeken kunnen een bron zijn die al op de site wordt gebruikt. U kunt app.v1.js
bijvoorbeeld als woordenboek gebruiken bij het downloaden van app.v2.js
, zodat u in principe alleen het verschil kunt downloaden (vaak bekend als "delta-compressie"). Als alternatief kan een afzonderlijke woordenboekbron worden opgegeven met een <link rel="compression-dictionary">
tag (of een gelijkwaardige Link
HTTP-header).
Dit kan de downloadgrootte van bronnen met veel gedeelde inhoud of code dramatisch verminderen, zoals de eerder genoemde pagina's met zoekresultaten.
Het gebruik van compressiewoordenboeken door Google Zoeken
Het Google Zoeken-team probeert voortdurend de prestaties van Zoeken te verbeteren . Ze waren een van de eersten die compressiewoordenboeken gebruikten omdat ze het potentieel van deze technologie zagen.
Zoeken maakt gebruik van gedeelde Brotli-compressie voor hun resultatenpagina's met een afzonderlijk woordenboekbestand dat is opgebouwd uit een representatief voorbeeld van zoekresultaten. Een robuuste geautomatiseerde pijplijn zorgt ervoor dat het woordenboek actueel blijft en gelijke tred houdt met de vaak veranderende SRP-inhoud die meerdere keren per dag wordt vrijgegeven. U kunt DevTools gebruiken om te zien hoe dit precies werkt.
Wanneer een client voor het eerst een zoekresultatenpagina laadt, biedt de server een link naar het woordenboek met behulp van de Link:
HTTP-header met het type rel=compression-dictionary
:

Link
op het tabblad Netwerk Als de client Brotli-woordenboekcompressie ondersteunt, maar het gedeelde woordenboek nog niet in de cache heeft opgeslagen, downloadt de browser dit woordenboek tijdens inactiviteit. Het woordenboekantwoord bevat de Use-As-Dictionary
-antwoordheader die de browser vertelt voor welke bronnen hij dit woordenboek kan gebruiken:

Use-As-Dictionary
op het tabblad Netwerk Het woordenboek gebruikt standaard semantiek cache-control
en zal beschikbaar zijn voor alle bronnen die overeenkomen met de regels die in die header zijn gedefinieerd. In dit voorbeeld beginnen pagina's met /search
.
Als de pagina met zoekresultaten in de toekomst wordt geladen, kan de browser de server laten weten dat hij een woordenboek heeft met behulp van de HTTP-verzoekheader Available-Dictionary
. Als u de pagina opnieuw laadt, wordt dit in actie weergegeven:

Available-Dictionary
op het tabblad NetwerkAls het selectievakje Logboek behouden is ingeschakeld en is gefilterd, kunnen we de twee reacties vergelijken:

In dit voorbeeld is het eerste verzoek het volledige antwoord van 107 kB en wordt er gebruik gemaakt van Brotli ( br
) -compressie, terwijl het tweede herlaadverzoek met 60 kB bijna de helft zo groot is en gebruikmaakt van Dictionary-Comfused Brotli ( dcb
) -compressie, wat resulteert in een snellere downloadtijd.
In Chrome kunt u de pagina chrome://net-internals/#sharedDictionary
bekijken om gedeelde woordenboeken te bekijken en deze te wissen als u dit voorbeeld vanaf het begin wilt herhalen.

#sharedDictionary
paginaDe resultaten
De wijziging werd in het voorjaar van 2025 uitgerold naar zoekgebruikers, in eerste instantie naar Chrome-gebruikers. Hierdoor werd de gemiddelde grootte van de HTML-payload voor alle Chrome-gebruikers met 23% verminderd in vergelijking met standaard Brotli-compressie. Dit algemene gemiddelde omvat zowel resultaten die niet in een woordenboek zijn gecomprimeerd (bijvoorbeeld nieuwe gebruikers zonder woordenboek) als in een woordenboek gecomprimeerde zoekresultaten. Voor resultaten die zijn gecomprimeerd met woordenboeken zijn de besparingen zelfs nog groter, zoals we zagen bij de verbetering van bijna 50% in het vorige voorbeeld waar we naar keken.
Dit resulteerde in een verbetering van de Largest Contentful Paint (LCP) van 1,7% in totaal, en tot 9% op netwerken met hoge latentie. Dit lijkt misschien klein, maar Google Zoeken is een hyper-geoptimaliseerde site, dus de winsten van deze omvang zijn enorm. Andere sites kunnen met deze technologie zelfs nog grotere verbeteringen zien.
Probeer het op uw site!
Compression Dictionary Transport is nu klaar voor gebruik in alle Chromium-gebaseerde browsers (Chrome, Edge, Opera enzovoort). Het is een progressieve verbetering die door niet-ondersteunende browsers zal worden genegeerd, maar naarmate meer browsers dit ondersteunen, kunnen zij er ook van profiteren.
De uitdagingen die deze technologie aanpakt, zijn verre van specifiek voor Google Zoeken. Veel sites kunnen profiteren van Compression Dictionary Transport, hetzij met een afzonderlijk woordenboek zoals Search, of door een bestaande bron als woordenboek te gebruiken (zoals de vorige versie van een app bij het uitrollen van een nieuwe versie).
Bekijk de gids op MDN voor meer informatie over hoe deze technologie werkt en hoe u deze op uw site kunt implementeren.
Dit vereist enige configuratie op uw server of bouwproces om op woordenboeken gebaseerde gecomprimeerde bronnen te creëren en deze op de juiste manier te gebruiken, maar de resultaten kunnen serieus indrukwekkend zijn in termen van prestaties!