Snelheid is belangrijk voor elke website. Als je doel is om online zo snel mogelijke laadtijden te halen, dan zijn er verschillende technologieën om ons te helpen. Eén benadering is om de onderliggende code die je site zal gebruiken te minimaliseren zonder de werking ervan te beïnvloeden. GZIP compressie is een manier om dit te doen, maar Brotli compressie is een alternatieve, jongere methode die steeds meer de aandacht trekt.
Het is een door Google ontwikkelde oplossing die een aantal voordelen lijkt te bieden ten opzichte van (evenals een alternatief voor) GZIP compressie. De details in dit artikel gaan in op wat de technologie precies biedt, maar heel kort gezegd is Brotli compressie snel en efficiënt – en het voldoet aan alle eisen. Tijd om er eens naar te kijken dus.
Bekijk onze videogids over Brotli compressie
Voor deze tutorial gaan we kijken naar Brotli compressie en laten we je zien hoe je kunt controleren of je site deze gebruikt en hoe je deze indien nodig kunt inschakelen. Eerst gaan we Brotli bespreken met betrekking tot het compressie-algoritme en waarna we het zullen hebben over waarom je het boven andere oplossingen zou willen gebruiken.
Datacompressie voor het web
Heel kort door de bocht neemt datacompressie de code voor een website of app en minimaliseert de bestandsgrootte. Dit geeft je lichtere bestanden die zich over het web moeten bewegen en vermindert zo de tijd die nodig is om een website te laden en weer te geven. Je zult merken dat er veel manieren zijn om de data te comprimeren, afhankelijk van het bestandstype waarmee je werkt.
Een veel voorkomende benadering is ‘minificatie’. Dit is waar een algoritme de code van je site ontdoet van enkele van de overbodige elementen. Het idee is dat aspecten zoals inspringingen, opmerkingen, witruimte en meer de bestandsgrootte en dus de laadtijden vergroten.
Het verwijderen van deze elementen heeft in de meeste situaties geen invloed op de gebruikerservaring (UX). Het maakt het echter wel eenvoudiger voor de computers die de code moeten compileren en weergeven. Neem bijvoorbeeld deze reeks code:
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' );De bovenstaande code gebruikt elementen zoals spaties en regelterugloop om het voor mensen leesbaar te maken, maar een computer heeft deze niet nodig om deze code te begrijpen. Bovendien nemen deze batches witruimte en regeleinden kostbare ruimte in beslag die, als je ze verwijdert, je een prestatieverbetering kan geven.
Als je deze code minimaliseert, ziet het er heel anders uit:
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' );De basis van wat deze code doet, is echter nog steeds hetzelfde.
Je zult merken dat andere bestandstypen manieren hebben om data te comprimeren. Afbeeldingen krijgen bijvoorbeeld vaak te maken met veel compressie om ze te verkleinen zonder veel degradatie van de afbeelding zelf:
GZIP compressie is een standaardmanier om de grootte van bundels bestanden te minimaliseren – denk aan pakketten zoals ZIP of Linux .tar bundels. Maar tot nu toe waren er geen echte alternatieven. We zullen later meer praten over waarom er een alternatief zou moeten bestaan, maar laten we je eerst kennis laten maken met de ‘concurrent’ van GZIP.
Brotli compressie
Kort samengevat is Brotli een algoritme voor datacompressie. Als dit echter alles is wat we te zeggen hebben, zou er geen reden zijn om het te onderzoeken.
Het biedt “lossless” compressie en is ontwikkeld door Google onder een MIT licentie. Het bedrijf loopt vaak voorop op het gebied van web-advanced technologie, dus het is geen verrassing dat Brotli probeert te nemen wat GZIP doet, het te verbeteren en een verbeterde ervaring te bieden aan gebruikers en sites.
Brotli compressie gebruikt dezelfde basistechnologieën als GZIP compressie, namelijk:
- Het LZ77 algoritme
- Huffman codering en decoderen
Als je deze twee technologieën combineert, krijg je het DEFLATE format dat als basis dient voor zowel GZIP als Brotli compressies. Het is iets waar we extreem diep op ingaan in onze post over GZIP compressie.
Kortom, niet-gecomprimeerde bestanden doorlopen de LZ77 en Huffman algoritmen als onderdeel van het DEFLATE proces om ze in een Brotli format te comprimeren. Van daaruit zal een INFLATE proces de bestanden indien nodig opnieuw decomprimeren.
Hoewel Brotli momenteel de belangrijkste concurrent van GZIP is, zijn er andere vergelijkbare technologieën die ook DEFLATE gebruiken. In het volgende gedeelte zullen we het hebben over wat Brotli onderscheidt.
Brotli compressie versus GZIP compressie
Zoals vermeld gebruiken zowel Brotli als GZIP de DEFLATE methode om data te comprimeren (en decomprimeren). Dit kan veel mensen in verwarring brengen, omdat dit op zichzelf staand geen omschakeling rechtvaardigt.
Google bouwt echter voort op DEFLATE en biedt zo verbeterde technieken om data te comprimeren tot een grotere, snellere standaard.
Hoe Brotli woordenboeken gebruikt om datacompressie te verbeteren
Een technisch aspect van datacompressieformats is de manier waarop Brotli compressie bestaande bekende taal en tekst in datawoordenboeken gebruikt om het algoritme te gebruiken.
Ontwikkelaars zullen vaak een woordenboek met sleutel-waardeparen gebruiken om data op te slaan, omdat het efficiënt, flexibel en schaalbaar is. Dit is hoe een PHP woordenboek (een “array” genoemd) eruit zou zien:
$cats = get_categories(
array(
'taxonomy' => 'link_category',
'hierarchical' => 0,
'include' => $link_cat,
)
);Terwijl GZIP geen woordenboeken gebruikt, gebruikt Brotli er twee.
Brotli’s statische woordenboek
De eerste is een statisch (d.w.z. vooraf gedefinieerd) woordenboek met algemene codetermen die dienen als referentie voor de HTML, CSS en JavaScript tekst.
Er zijn meer dan 13.000 woorden in zes verschillende talen en Brotli zal deze gebruiken als verwijzingen naar punten in de code. Het is niet helemaal hetzelfde, maar je kan het vergelijken met de manier waarop een WordPress hook verwijst naar een grotere reeks code.
Als zodanig hoeft de encoder de code niet byte voor byte te doorzoeken. In plaats daarvan kan het reageren op de verwijzingen, de definitie uit het woordenboek halen en doorgaan naar de volgende.
Je zult ook merken dat er echte zinnen in het woordenboek staan, evenals code die niet vaak compressie zou tegenkomen. Dit helpt sommige tags zoals <HTML> en parameters zoals type="text/javascript" compressie te gebruiken en je wat meer winst te geven.
Er zijn ook enkele “transformaties” in het woordenboek: gedeeltelijke, onvolledige en andere soorten zinnen die met een nieuw voorvoegsel, achtervoegsel of hoofdlettergebruik een geheel nieuw woord worden – bijvoorbeeld “Werk” transformeert naar “Werkt” of “html ” naar “HTML.”
Brotli’s dynamisch woordenboek
Het dynamische woordenboek parset content en code bij de source, wat goed is voor kleinere apparaten, maar niet zo goed voor grotere bestanden. Het wordt ook wel een “sliding window” genoemd en kan tot 16 MB groot zijn. Dit is waar het compressie-algoritme enkele van de meest recente data ‘cachet’ om ernaar te verwijzen. Dit is ultra-dynamisch omdat het voortdurend verandert.
Als je dit vergelijkt met het GZIP sliding window van ongeveer 32 KB, zul je zien dat de mogelijkheden voor realtime ontleden en compressie enorm zijn. Sterker nog, de meeste typische praktijken gebruiken een Brotli sliding window van ongeveer 4 MB, wat nog steeds gigantisch is in vergelijking met concurrerende algoritmen.
Brotli compressie versus GZIP compressie: prestaties en support
Als het gaat om pure gebruikersaantallen, is GZIP compressie nog steeds nummer één. Brotli compressie wordt echter elke dag meer gebruikt. Dit is gedeeltelijk te wijten aan bredere adoptiemaatregelen door de belangrijkste browsers; de opkomst van op Chromium gebaseerde browsers helpt ook.
Bekijk onze videogids over Brotli compressie versus GZIP compressie
De Can I Use… website legt vast welke technologieën browsers gebruiken en biedt een soort geschiedenis. Deze site merkt op dat meer dan 95% van de browsers Brotli compressie gebruikt bij het huidige schrijven, inclusief alle belangrijke versies.
In ons artikel over GZIP compressie hebben we een benchmarktest genoemd waarbij Brotli een betere compressieverhouding had in vergelijking met concurrerende algoritmen, maar achterbleef in compressie- en decompressietijd:
De Squash Benchmark tests laten echter een ander verhaal zien – een verhaal dat genuanceerder ligt. Het echte voordeel is dat Brotli over het algemeen flexibeler is dan GZIP, met een over het algemeen hogere compressieverhouding.
Hier is de samenvatting van de bevindingen van Squash Benchmarks:
- Brotli heeft een betere compressieverhouding (d.w.z. het produceert kleinere gecomprimeerde bestanden) op elk compressieniveau.
- Hoewel GZIP Brotli meestal op snelheid verslaat, zijn de resultaten afhankelijk van het niveau waarop je comprimeert.
De analyse van Paul Calvano geeft meer details, maar de crux is dat Brotli meer CPU kracht nodig heeft om een grotere factor van bestandscompressie te bieden. Dit is te zien bij zowel het hoogste als het laagste compressieniveau. De benchmarking van Cloudflare ondersteunt dit: veel kleinere bestanden, met betere vergelijkende compressiesnelheden.
Houd er ook rekening mee dat sommige testtools zoals Pingdom en sommige content delivery networks (CDN’s) Brotli nog niet ondersteunen. Dit kan de data die anderen verzamelen over hoe Brotli werkt, vertekenen. Je kunt “false negatives ” zien als je tests uitvoert: hogere paginasnelheidscijfers die de bestandscompressie die je gebruikt, negeren.
Voordelen van Brotli compressie
We hebben nu enorm veel informatie gegeven over Brotli compresie. We kunnen echter samenvatten wat je moet weten over waarom je Brotli zou moeten verkiezen boven GZIP:
- Het neemt dezelfde technologie die ook GZIP gebruikt en verbetert het met moderne methoden.
- Brotli’s op woordenboeken gebaseerde parsing betekent dat het meer van je bestanden naar een dieper niveau kan comprimeren.
- Hoewel Brotli meer rekenkracht nodig heeft in vergelijking met GZIP, zorgt dit voor kleinere bestanden.
- Op de compressieniveaus die de meeste webhosts gebruiken – iets in het middensegment zoals niveau vier of vijf – presteert Brotli moeiteloos beter dan GZIP.
- Je zult merken dat Brotli door bijna elke browser wordt ondersteund, en ook door de meeste meeste benchmarktools.
- Brotli is gratis te gebruiken en open source. Dit is een voordeel als je een Brotli-compatible CDN gebruikt, zoals Cloudflare.
Het is vermeldenswaard dat Cloudflare Brotli compressie op al zijn servers gebruikt. Sterker nog, het gebruikt een aangepaste en geoptimaliseerde versie van Brotli om je verdere voordelen te bieden met betrekking tot snelheid en bestandslevering.
Omdat Kinsta Cloudflare integratie biedt bij alle abonnementen, gebruikt elke gehoste site bij ons standaard Brotli. Dit is slechts één reden waarom Kinsta een van de toonaangevende en beste hostingproviders is die er zijn.
Zo kun je controleren of je site Brotli compressie gebruikt
Omdat Brotli compressie nog niet standaard is (hoewel het er bijna is), wil je waarschijnlijk weten of je site het al gebruikt. Er zijn een paar manieren om dit te achterhalen.
1. Gebruik een online tool
De eenvoudigste manier om te controleren of je site Brotli compressie gebruikt, is via een online tool. Hoewel er een paar zijn om uit te kiezen, wil je iets dat snel en eenvoudig te gebruiken is en je ook een heleboel informatie over je installatie geeft.
Gift of Speed is onze keuze om te controleren op Brotli compressie.
Het bepaalt of je site GZIP, Brotli of helemaal geen compressie gebruikt, en biedt een paar andere statistieken om je te helpen beslissen wat je vervolgens moet doen. Deze statistieken bieden belangrijk inzicht, omdat je niet alleen wilt overwegen of de server van je site de juiste “smaak” van compressie gebruikt.
Er zijn veel elementen waaruit een website bestaat, en zelfs externe bibliotheken en afhankelijkheden. Je kunt ervoor kiezen om ze te leveren met een CDN, en als dat het geval is, moet dit ook Brotli compressie gebruiken voor de best mogelijke prestaties.
Als je Gift Of Speed gebruikt om individuele assets te testen, kun je de Server waarde bekijken om te zien hoe deze wordt geleverd.
Alle Kinsta sites gebruiken het door Cloudflare aangedreven Kinsta CDN. Als zodanig zal elke site ook Brotli compressie gebruiken in de hele keten en serverarchitectuur.
2. Gebruik de devtools van je browser om te checken
De meeste ontwikkelaars zullen weten dat een browser een aantal fantastische tools biedt om je te helpen bij allerlei soorten webgerelateerd onderzoek en troubleshooting. Een snelle controle die je kunt uitvoeren, is of je site (of een specifiek item) Brotli compressie gebruikt.
Voor alle belangrijke browsers zoals Brave, Edge, Firefox of Chrome, kun je naar het Network > All scherm.
In het begin zie je niets met betrekking tot contentheaders – je moet aan de linkerkant een item of verzoek selecteren. Als je door de lijst blijft kijken en naar beneden scrolt, zie je een venster dat standaard is ingesteld op de Headers informatie.
Scroll hier door de uitvoer totdat je de content-encoding: br regel ziet.
In het kort: als je content-encoding: br ziet, geeft dit aan dat Brotli actief is voor die site.
Zo schakel je Brotli compressie in voor je site
In deze laatste paar secties laten we je een aantal verschillende manieren zien om Brotli compressie voor je site in te schakelen. De eerste is de aanpak die we aanbevelen voor de meeste WordPress sites die geen Kinsta gebruiken – en de laatste is wat we aanbevelen voor elke site die de eerste aanpak niet kan gebruiken!
1. Gebruik een WordPress plugin
Vrijwel elke WordPress site gebruikt ten minste één plugin – vaak meer, afhankelijk van de functionaliteit die de site nodig heeft. Caching is een use case voor plugins en er zijn er nog veel meer. Niet met alle cacheplugins kan je echter Brotli compressie inschakelen, dus je moet verstandig kiezen en bereid zijn om vanuit jouw favoriete oplossing over te stappen.
Voordat je wijzigingen aan een site aanbrengt, moet je eraan denken een volledige back-upte maken voor het geval je deze later moet herstellen. Voor deze methode gebruiken we W3 Total Cache omdat het eenvoudig is om de juiste instelling te vinden.
Je moet naar de pagina Performance > Browser Cache in WordPress gaan:
Dit scherm toont twee instellingen. Degene die je wilt kiezen, is Enable HTTP (brotli) Compression:
Dit zal echter niet voor elke site en situatie geschikt zijn. Kinsta optimaliseert bijvoorbeeld zijn servers om zo snelle, goed presterende, betrouwbare hosting te leveren. Als zodanig zijn er een aantal plugins die je niet nodig hebt, en sommige andere zijn zelfs uitgesloten van gebruik op Kinsta sites.
In deze gevallen wil je een andere aanpak kiezen.
2. Brotli inschakelen op de server
Als het gaat om het kiezen van een servertype, is Nginx vs Apache een langdurige strijd waarvan (voorlopig) de eerste wint. Hoe dan ook, beide servertypen kunnen Brotli compressie inschakelen en op beide doe je dit op een andere manier.
Voordat je naar de handmatige aanpak kijkt, zijn er een paar vereisten die je moet weten:
- Je wilt weten hoe je toegang krijgt tot je configuratiebestanden voor jouw specifieke server.
- Kennis van de opdrachtregel is nuttig, vooral als het gaat om Apache servers. Om opdrachten uit te voeren, moet je een rootgebruiker zijn met
sudorechten. - Je hebt misschien een teksteditor nodig, maar voor snelle wijzigingen zoals deze zou het goed moeten komen.
- In sommige gevallen heb je je inloggegevens nodig als Secure Shell (SSH) gebruiker op de server zelf. Je kunt deze vinden in je hostingconfiguratiescherm of je kunt contact opnemen met support om ernaar te vragen.
Als je twijfels hebt over de handmatige aanpak, raden we je aan een andere optie te bekijken of contact op te nemen met je host voor hulp. Hoe dan ook, we zullen om de beurt een kort overzicht geven van het proces voor elke server, te beginnen met Nginx.
Nginx
Om Brotli compressie op Nginx servers in te schakelen, moet je eerst het nginx.conf bestand vinden. Het zal een van deze locaties zijn:
/usr/local/nginx/conf/etc/nginx/usr/local/etc/nginx
Als je het bestand open hebt, voeg je het volgende toe aan de onderkant:
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;Deze suite zal Brotli inschakelen en gebruiken om statische bestanden te leveren. De brotli_comp_level instelling is er een die je kunt wijzigen, afhankelijk van je gebruiksscenario en behoeften. Hogere cijfers bieden een betere compressie die een minder presterende site kan uitbalanceren.
Apache
Omdat Apache flexibel is als het gaat om configuraties, kun je Brotli compressie zonder al te veel poespas inschakelen.
Volg hiervoor deze stappen:
- Log in op je server met behulp van een opdrachtprompt of terminalapplicatie, als root
sudo. - Voer de opdracht
a2enmod brotliuit om de compressie in te schakelen. - Voeg binnen Apache VirtualHost of je serverconfiguratie de regel
AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascripttoe om de juiste bestandstypen in te stellen die je wilt comprimeren.
Hoewel Apache statische compressie niet ondersteunt, kun je het niveau van Brotli compressie dat je aanbiedt wijzigen met behulp van de BrotliCompressionQuality LEVEL-NUMBER regel. Je moet echter de plaatsaanduiding “LEVEL-NUMBER” vervangen door een nummer tussen 1-11.
3. Gebruik een webhost die het al ondersteunt
De eenvoudigste manier om Brotli compressie voor je site in te schakelen, is ervoor te zorgen dat je host dit standaard doet. Kinsta biedt standaard Brotli compressie dankzij de integratie met CDN van Cloudflare.
Het Kinsta CDN zit bij alle pakketten inbegrepen en draait op de infrastructuur van Cloudflare – dus elke site gebruikt Brotli compressie zonder dat je het hoeft in te schakelen.
Je wil dus checken de door jou gekozen host Brotli compressie biedt en op welk niveau je deze moet configureren. Om de meest performante, stabiele en veilige site te runnen, is goede hosting essentieel.
Samenvatting
Datacompressie is een noodzakelijk onderdeel van het ontwikkelen en gebruiken van het moderne web. Bestandsgroottes kunnen enorm oplopen vanwege de rijke en complexe bestandstypen die je zult gebruiken om een website samen te stellen. Ze hebben allemaal een vorm van compressie nodig.
De typische aanpak was tot nu toe GZIP, maar er is een nieuw alternatief.
Brotli compressie baseert zijn technologie op dezelfde basis als GZIP, maar biedt enkele prestatieverhogende voordelen. Zoals we hebben besproken, gebruikt het contextmapping om een compressieverzoek sneller te verwerken, en een woordenboek dat van dynamische populatie gebruikmaakt. Dit is veel meer dan wat GZIP kan bieden, en laat ook mobiele gebruikers profiteren van de compressie.
Het goede nieuws is dat elke Kinsta site kan profiteren van Brotli compressie vanwege onze unieke Cloudflare integratie. Dit betekent dat je door Kinsta gehoste site sneller is dan je concurrenten die GZIP gebruiken en snel laadt voor mensen op kleinere apparaten.
Heb je vragen over Brotli compressie? Vraag maar raak in de commentsectie hieronder!
Salman Ravoof is een autodidactische webdeveloper, schrijver, creator en een groot bewonderaar van Free and Open Source Software (FOSS). Naast techniek is hij enthousiast over wetenschap, filosofie, fotografie, kunst, katten en eten. Lees meer over hem op zijn website en kom in contact met Salman op X.
Laat een reactie achter