Sales

Webpagina compressie met Brotli

Sena Sonat

Sena Sonat

PlusClouds Auteur

Brotli ile web sayfası sıkıştırma

Brotli, ontwikkeld door Google, is een verliesloze en open-source compressie-algoritme. Oorspronkelijk ontworpen om de grootte van webfonts te verkleinen, is Brotli tegenwoordig uitgegroeid tot een algemeen gegevens compressieformaat. Brotli biedt dezelfde snelheid als gzip en Deflate, maar levert kleinere bestanden.

Een korte geschiedenis van Brotli


Brotli is oorspronkelijk ontwikkeld voor het comprimeren van WOFF2-webfonts. Het is de opvolger van Zopfli, een compressie-algoritme dat ook door Google is ontwikkeld en compatibel is met gzip, zlib en Deflate. Zopfli en Brotli hebben een veel hogere compressieverhouding, hoewel ze meer CPU-kracht verbruiken. Door in de loop der tijd af te stappen van compatibiliteit heeft Brotli de overgang gemaakt naar zijn eigen bestandsformaat met de extensie .br. Wat Brotli uniek maakt, is dat het alleen gebruikt kan worden met veilige verbindingen. Dit komt door tussenkomst (middleboxen) die onbeveiligd HTTP-verkeer stoppen en scannen. Sommige tussenkomsten die een Brotli-bestand tegenkomen, proberen het Content-Encoding header (inhoudscodeerkop) van br naar gzip om te zetten om het bestand door te laten. Google, door Brotli te beperken tot HTTP, heeft deze tussenkomst geëlimineerd en zo de adoptie van Brotli versneld.

Vergelijking


In vergelijking met Deflate biedt Brotli een aanzienlijk hogere compressieverhouding. Hiervoor gebruikt het echter veel meer CPU. Volgens een onderzoek van Google in 2015 is het maximale compressieniveau van Brotli 29% hoger dan het maximale compressieniveau van Deflate. Echter, bij dit niveau zijn de compressie- en decompressiesnelheid van Brotli respectievelijk 97% en 17% lager dan die van Deflate (0,5 en 289,5 MB/s tegen 15,5 en 347,3 MB/s).

Vanwege de aanzienlijk lagere compressiesnelheid geven bedrijven de voorkeur aan het vooraf comprimeren van bestanden bij het gebruik van Brotli. In 2017 slaagde Dropbox erin de grootte van de statische inhoud op Dropbox.com gemiddeld met 20-25% te verkleinen door over te schakelen naar Brotli. Omdat de inhoud statisch is, kan Dropbox de gegevens al in de voorbereidingsfase vooraf comprimeren en direct aan de gebruikers aanbieden.

Hoe gebruik je Brotli?


Veel van de populairste webservers ondersteunen Brotli rechtstreeks of via modules. Veel CDN (Content Delivery Network) ondersteunen ook Brotli.

Net als gzip, zlib en Deflate biedt Brotli verschillende compressieniveaus. Hogere niveaus bieden doorgaans hogere compressieverhoudingen met een lagere snelheid. Niveau 1 is de langzaamste, niveau 11 is de snelste. Niveau 5, dat een goede balans biedt tussen snelheid en bestandsgrootte, wordt bijzonder aanbevolen voor degenen die op zoek zijn naar dynamische compressie.

Apache


Apache ondersteunt Brotli met de mod_brotli module die bij versie 2.4.26 is geïntroduceerd. Om Brotli te activeren, kun je het volgende in je virtuele adressering configureren:

Comprimeer veelvoorkomende op tekst gebaseerde MIME-typen

 AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript

Sla inhoud over die al gecomprimeerd is

 SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-brotli

Stelt het compressieniveau in (standaard 5)

 BrotliCompressionQuality 6

mod_brotli opent gegevens bij elk verzoek. Om vooraf gecomprimeerde gegevens aan te bieden, kopieer je de Brotli-bestanden naar een map die toegankelijk is voor Apache. Vervolgens kun je een rewrite condition in je virtuele adressering configureren die met deze bestanden in plaats van gzip-varianten werkt.

Dien gecomprimeerde CSS-bestanden in brotli aan als ze bestaan en de client brotli accepteert.

 RewriteCond "%{HTTP:Accept-encoding}" "br"
 RewriteCond "%{REQUEST_FILENAME}\.br" "-s"
 RewriteRule "^(.*)\.css" "$1\.css\.br" \.js" "$1\.js\.br" $">

Dien het juiste coderings type aan.

Header append Content-Encoding br

 Forceer proxies om brotli &
 non-brotli css/js-bestanden apart te cachen.

Header append Vary Accept-Encoding

 
Nginx


Nginx ondersteunt Brotli met de ngx_brotli-module. De module bestaat eigenlijk uit twee aparte modules. De ene is voor on-the-fly compressie en de andere voor voorcompressie. Om Brotli te gebruiken, moet je Nginx en de gegeven module compileren.

brotli on; # Schakelt on-the-fly compressie in.

brotli_static on; # Schakelt de levering van voorgecomprimeerde bestanden in.

brotli_types *; # Schakelt compressie in voor alle MIME-typen. text/html reacties worden altijd gecomprimeerd.

brotli_comp_level 6; # Stelt het compressieniveau in (standaard 6).


Microsoft IIS


Het is mogelijk om Brotli te gebruiken met de open-source “Brotli Compression Scheme Plugin” module in IIS. Het installatie-script automatiseert de installatie en configuratie van Brotli voor alle ISS-sites. Je kunt de compressieparameter configureren door het applicationHost.config-bestand te openen en naar de sectie te gaan.

 
 
 
 
 

...

 
 
 

...

 
 

Op het moment van schrijven van dit artikel zijn de enige beschikbare opties voor compressie alleen statische en dynamische compressieniveaus.

CDN's


Veel CDN's, zoals Key CDN en Akami, ondersteunen Brotli expliciet. Andere CDN's kunnen echter geen met Brotli gecomprimeerde bestanden decompressie uitvoeren en kunnen zelfs proberen om terug te converteren naar gzip. Tijdens een test van Brotli door LinkedIn op de hele site bleek dat vijf van hun CDN's, zelfs wanneer Brotli-bestanden werden aangeboden, de Accept-Encoding Header terugzetten naar gzip. Daarnaast waren de contentservers van LinkedIn verward omdat hun reacties verwerkt zijn als Content-Encoding: br, waardoor de CDN's de gegevens niet konden cachen.

Om dit probleem op te lossen, heeft LinkedIn de Brotli-bestanden naar een andere URL verplaatst en de Content-Encoding: br-header verwijderd. Nadat het bestand door de CDN was gecachet, werd de header opnieuw toegevoegd aan elke reactie aan de klant. Hoewel dit het probleem niet volledig oplost, werd er een verbetering van 2-6,5% in de prestaties gezien, wat vooral een positieve impact had op mobiele gebruikers.

Browsers


Brotli wordt ondersteund door de meeste moderne browsers, met uitzondering van Internet Explorer 11 en Opera Mini. Google ondersteunt het sinds versie 50, Firefox sinds versie 44, Edge sinds versie 15, Opera sinds versie 38, en Safari sinds versie 11. Wereldwijd ondersteunt 84,25% van de browsers Brotli, terwijl het in de VS 83,42% is.

De browsers die Brotli niet ondersteunen, zullen echter geen Brotli aanvragen in de Accept-Encoder headers en zullen alternatieve compressie-algoritmes gebruiken.

Conclusie


Brotli heeft een nieuwe generatie benadering van gegevenscompressie en opslag geïntroduceerd. Met het potentieel om de grootte van websites met 20% te verkleinen, biedt Brotli de mogelijkheid van een snellere en kleinere webervaring. Je kunt meer informatie over Brotli vinden op de officiële GitHub pagina.