Webpagina’s sneller maken met gzip compressie

De snelheid van een website is tegenwoordig steeds meer bepalend voor het succes. Gebruikers zijn verwend geraakt; als ze niet binnen een paar tellen vinden wat ze zoeken zijn ze weg. Eén van de oorzaken hiervan is dat websites (ook die van mij) nu meer vanaf mobiele apparaten worden bekeken dan vanaf desktops/laptops. Het inschakelen van gzip compressie is een deel van de oplossing. Naast gedegen WordPress onderhoud.

Snelheid optimalisatie website

Het is daarom van groot belang dat websites worden geoptimaliseerd naar snelheid. Afbeeldingen moeten de juiste afmetingen en compressie hebben, pagina’s ge-cached, scripts ge-minified en back-end systemen vereenvoudigd. Ik zal daar komende tijd meer aandacht aan besteden, omdat veel van mijn recente opdrachtgevers hier interesse in hebben. Deze keer gaat het over een van de meest eenvoudige – maar effectieve – stappen:

Gzip compressie activeren

Een gemiddelde server gebruikt Apache als webserver. Hierin kan je eenvoudig compressie inschakelen door het volgende aan het .htaccess bestand in de root folder toe te voegen:

  # Comprimeer HTML, CSS, JavaScript, Text, XML en fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
 
  # Fix browser bugs
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent

ALTERNATIEF:

  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_include handler ^cgi-script$

Het inschakelen van compressie heeft altijd nut, ongeacht of je statische pagina’s, WordPress of een ander systeem gebruikt.

Testen of gzip compressie werkt

Vervolgens kan je met een eenvoudig testje checken of alles werkt. Gebruik hiervoor de handige tool checkgzipcompression.com. In bovenstaande afbeelding zie je dat ik met deze eenvoudige aanpassing de homepage van rogierdejong.com met wel 79% heb gecomprimeerd!

Gzip compressie werkt niet

Lukt het je niet om de compressie werkend te krijgen? Dan ligt dat waarschijnlijk aan een afwijkende serverconfiguratie. Hier is niet een eenvoudig antwoord op.

Wil je hulp bij het optimaliseren van de snelheid van jouw website? Ik help je graag met het inschakelen van gzip compressie! Neem contact op met Rogier de Jong.