Gzip: hetzelfde versturen in een kwart van de bytes
Snelheidsadvies gaat bijna altijd over afbeeldingen. Terecht, want daar zit het meeste gewicht. Maar er is een tweede laag die vaak vergeten wordt. Je code, je opmaak en je scripts zijn samen ook een flink pakket. Die zijn met een enkele instelling fors te verkleinen.
Het gekke is dat het meestal al kan. Er hoeft niets gebouwd of gekocht te worden. Er moet alleen iemand een vinkje zetten.
Bij Harm en Es liep ik daar tegenaan. Ik verzorgde daar het webdesign en de vindbaarheid. De site was netjes gebouwd en de afbeeldingen waren al aangepakt.
Toch bleef er ruim honderd kilobyte aan tekstbestanden over per paginaweergave. Met compressie ging dat naar ongeveer een kwart. Er is niets herbouwd en niemand ziet verschil, behalve in de laadtijd.
Compressie verstuurt hetzelfde in een kwart van de bytes.
Wat is gzip?
Gzip is een manier om bestanden te verkleinen voordat ze verstuurd worden. Je server perst ze samen, de browser pakt ze weer uit.
Je bezoeker merkt daar niets van, behalve dat de pagina eerder klaar is. Het is een serverinstelling, geen aanpassing aan je website.
Hoe het werkt
Compressie zoekt naar herhaling. In code staat veel dat vaak terugkomt: dezelfde woorden, dezelfde haakjes, dezelfde inspringing.
Dat wordt vervangen door een verwijzing. Hoe meer herhaling, hoe groter de winst. Daarom werkt het uitstekend bij tekst en code.
Wat het oplevert
Bij het tekstbestanden comprimeren haal je vaak zeventig tot tachtig procent reductie. Een stijlbestand van honderd kilobyte wordt er een van vijfentwintig.
Voor een bezoeker op een snelle verbinding scheelt dat een fractie. Op mobiel internet buiten de stad merk je het wel. En het scheelt je bezoeker dataverbruik beperken, wat bij een databundel iets betekent.
Het is geen wondermiddel. Als je pagina vier megabyte aan foto’s laadt, valt deze winst in het niet. Kijk daarom eerst bij pagespeed waar je gewicht echt zit.
Waar het niet voor werkt
Niet voor afbeeldingen, video of pdf. Die zijn intern al gecomprimeerd, dus er valt weinig te winnen.
Sterker nog, comprimeren van een al gecomprimeerd bestand kost rekentijd zonder resultaat. Een goede serverinstelling doet dat daarom niet.
Brotli is de nieuwere variant en comprimeert beter, zo’n tien tot twintig procent extra. Alle moderne browsers ondersteunen het.
Je hoeft niet te kiezen. Server en browser overleggen bij elke aanvraag wat ze allebei kunnen. Kan het nieuwe, dan gebruiken ze dat. Zo niet, dan valt het terug op gzip.
Controleren en aanzetten
Bij de meeste moderne hosting staat het al aan. Toch kom ik nog regelmatig sites tegen waar het niet gebeurt.
Je controleert het in de ontwikkelaarstools van je browser. Kijk bij een bestand naar de verstuurde en de werkelijke grootte. Zijn die gelijk, dan gebeurt er niets.
Staat het uit, vraag het dan aan je hostingpartij. Het is een instelling op de server en dus geen bouwwerk. Bij goede webhosting is dat een mailtje. Meer over die kant lees je bij backend.
Combineer het met een cache, dan hoeft die compressie niet bij elk bezoek opnieuw te gebeuren.
Waarom dit vaak blijft liggen
Het is niemands taak. Je bouwer denkt dat de hosting het regelt. De hosting denkt dat jij het zelf aanzet.
Daardoor kom ik nog steeds sites tegen zonder compressie. Terwijl het gratis is en al jaren standaard hoort te zijn.
Controleer het na een verhuizing
Verhuis je naar een andere hostingpartij, dan verhuizen serverinstellingen niet automatisch mee. Ze staan namelijk niet in je website maar op de server.
Dat geldt ook voor je cachinginstellingen en je beveiligingsregels. Loop ze na in de week na je verhuizing, want anders merkt niemand dat ze weg zijn.
Meer vragen over Gzip
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is gzip?
Hoeveel scheelt gzip in laadtijd?
Hoe controleer je of gzip aanstaat?
Wat is het verschil tussen gzip en Brotli?
Werkt gzip ook voor afbeeldingen?
Hoe zet je compressie aan op je website?
Wat is gzip?
Bij tekstbestanden haal je vaak zeventig tot tachtig procent reductie. Een stijlbestand van honderd kilobyte wordt er een van vijfentwintig.
Wat dat betekent in seconden hangt af van je bezoeker. Op een snelle glasvezelverbinding scheelt het een fractie die niemand voelt.
Op mobiel internet buiten de stad merk je het wel degelijk. Daar telt elke kilobyte, zeker bij een matig bereik.
Er is nog een voordeel dat vaak wordt vergeten. Je bezoeker verbruikt minder data, en bij een beperkte bundel is dat iets waard.
Zet het in verhouding tot je totale pagina. Weegt je pagina twee megabyte waarvan honderdvijftig kilobyte tekst, dan is dit een kleine winst. Bestaat je pagina vooral uit code, dan is het aanzienlijk.
Kijk naar de verhouding binnen je eigen pagina. Bestaat die vooral uit beeld, begin daar. Bestaat hij vooral uit code, dan is dit je snelste winst. Meet dat een keer in plaats van het te schatten.
Hoeveel scheelt gzip in laadtijd?
Gzip is een manier om bestanden te verkleinen voordat ze naar je bezoeker gaan. Je server perst ze samen, de browser pakt ze weer uit.
Je bezoeker merkt daar niets van, behalve dat de pagina eerder klaar is. Het is een serverinstelling en geen aanpassing aan je website zelf.
Compressie werkt door te zoeken naar herhaling. In code staat veel dat vaak terugkomt: dezelfde woorden, dezelfde haakjes, dezelfde inspringing. Dat wordt vervangen door een korte verwijzing.
Hoe meer herhaling, hoe groter de winst. Daarom werkt het uitstekend bij tekst en code, en nauwelijks bij foto’s.
Het is geen wondermiddel. Als je pagina vier megabyte aan afbeeldingen laadt, valt deze winst in het niet. Kijk daarom eerst waar je gewicht echt zit. Meer daarover lees je bij pagespeed.
Vraag je hostingpartij simpelweg of compressie aanstaat. Dat is een mailtje en het antwoord kost je niets, terwijl het je bezoekers laadtijd scheelt. Zo weet je snel of hier nog winst te halen valt.
Hoe controleer je of gzip aanstaat?
Met de ontwikkelaarstools van je browser, en dat kost je een minuut.
Open je website, klik met de rechtermuisknop en kies inspecteren. Ga naar het tabblad met netwerkverkeer en ververs de pagina.
Klik daarna op een bestand met de extensie css of js. Je ziet dan twee getallen: de verstuurde grootte en de werkelijke grootte.
Zijn die twee gelijk, dan wordt er niets gecomprimeerd. Scheelt het een factor drie of vier, dan staat het goed.
Je kunt ook kijken naar de kopregels van het antwoord. Daar staat welke methode is gebruikt. Zie je daar niets over compressie staan, dan is het uit.
Doe die controle na elke verhuizing opnieuw. Instellingen gaan bij een overstap regelmatig verloren zonder dat iemand het merkt.
Doe die controle na elke verhuizing opnieuw. Serverinstellingen verhuizen namelijk niet automatisch mee naar een nieuwe partij. Zet die controle op je lijstje na elke overstap. Vraag je hostingpartij daarbij om een bevestiging op papier.
Wat is het verschil tussen gzip en Brotli?
Brotli is de nieuwere variant en comprimeert beter, zo’n tien tot twintig procent extra bij dezelfde bestanden.
Alle moderne browsers ondersteunen het inmiddels. Je hoeft dus niet bang te zijn dat je bezoekers erbuiten vallen.
Het mooie is dat je niet hoeft te kiezen. Server en browser overleggen bij elke aanvraag wat ze allebei aankunnen.
Kan de browser Brotli, dan wordt dat gebruikt. Zo niet, dan valt het automatisch terug op gzip. En kan hij geen van beide, dan gaat het bestand gewoon ongecomprimeerd.
Als ondernemer hoef je hier geen keuze in te maken. Vraag je hostingpartij simpelweg of beide aanstaan. Meer over die kant lees je bij backend.
Vraag of beide varianten aanstaan en niet alleen de oude. De nieuwere levert nog eens tien tot twintig procent extra op, gratis. Dat kost je niets extra en het werkt direct voor iedereen. Zo haal je alles uit een instelling die er toch al is, zonder enige verbouwing.
Werkt gzip ook voor afbeeldingen?
Nee, en dat is geen gebrek maar logica. Afbeeldingen, video en pdf zijn intern al gecomprimeerd.
Er valt in zo’n bestand nauwelijks herhaling meer te vinden, dus er is niets te winnen. Sterker nog, het opnieuw comprimeren kost rekentijd zonder resultaat.
Een goed ingestelde server slaat die bestandstypen daarom over. Staat je server ze wel te comprimeren, dan verlies je zelfs een fractie.
Voor beeld gebruik je andere technieken. Een modern bestandsformaat, de juiste afmetingen en niet groter aanleveren dan nodig.
Daar zit ook veruit de meeste winst. Compressie van je code is de afwerking, je afbeeldingen zijn het hoofdgerecht. Combineer het geheel met een cache, dan hoeft het werk niet bij elk bezoek opnieuw.
Besteed je tijd naar verhouding. Een uur aan je afbeeldingen levert vrijwel altijd meer op dan een uur aan compressie van je code. Begin dus altijd bij het zwaarste onderdeel van je pagina. Dat scheelt je uren aan werk met weinig resultaat.
Wil je weten of jouw website alles doet wat er zonder verbouwing mogelijk is? Stuur me de link via het formulier hieronder. Ik controleer je compressie, je cache en je afbeeldingen en stuur je terug wat er nog open staat. Vaak zijn het instellingen en geen bouwwerk. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Compressie, gzip-compressie, Brotli
