Elke keer als een bezoeker jouw website bezoekt, worden er kilobytes op en neer gestuurd. Hoe zwaarder jouw website (aantal te downloaden kilobytes) des te meer elektriciteit er verbruikt wordt en er meer CO2 uitstoot plaatsvindt. Om jouw website duurzamer te maken moet je deze minder zwaar maken. 

Een eerste stap is daarom om te achterhalen wat een bezoeker allemaal download als hij of zij jouw website bezoekt. 

Dit kun je doen door in een browser (zoals Chrome) een pagina op jouw website te inspecteren. 

• In Chrome open je deze inspectie tool door op de rechtermuisknop te klikken en te kiezen voor ‘Inspecteren’ (je kan ook de sneltoets CTRL+SHIFT+i gebruiken)
• In de inspector navigeer je naar het tabje ‘Network’. Druk op CTRL+F5 om de pagina te herladen. 
• Je krijgt nu te zien welke bestanden er gedownload worden elke keer als een unieke bezoeker jouw pagina bekijkt. 
• Door de bestanden te sorteren op ‘Size’ kun je zien wat de grootste bestanden (en dus boosdoeners) zijn.

Actie 1: Video vervangen voor afbeeldingen

Als jouw website video’s toont die vanzelf afspelen is de kans groot dat deze bovenaan het lijstje staan. Het beste is om de video te vervangen voor een statische afbeelding of er in ieder geval voor te zorgen dat de bezoeker zelf kan kiezen of de video afgespeeld wordt, dus niet automatisch. 

Dit laatste is overigens een vereiste als je wil dat jouw website voldoet aan de toegankelijkheidseisen. Deze geven aan dat de gebruiker de optie moet hebben om video’s en animaties langer dan vijf seconden te pauzeren.

Daarnaast moet je bij elke video die geplaatst wordt jezelf afvragen of deze niet beter als (interactieve) infographic getoond kan worden. Sommige video’s proberen een complex probleem uit te leggen, maar niet iedereen heeft altijd tijd om een video te kijken. Of ze zijn niet in de gelegenheid om de video te beluisteren als ze bijvoorbeeld op kantoor zijn. Een infographic biedt uitkomst. De bezoeker kan op eigen tempo de informatie tot zich nemen.

Ook bestaan er tegenwoordig technieken waarmee je SVG’s kan animeren. Hiermee hou je het speels door iets te animeren, maar kost het beduidend minder kilobytes. 

Afbeeldingen optimaliseren

Afbeeldingen kunnen grote bestanden zijn. Als je echter slim omgaat bij de optimalisatie van afbeeldingen kun je veel kilobytes besparen door bijvoorbeeld:

• Afbeeldingen aan te bieden in een modern bestandsformaat zoals WebP. Dit formaat wordt door alle grote browsers ondersteund en levert dezelfde kwaliteit beelden zoals een JPEG of PNG maar dan met een betere compressie
• Vectorbestanden te gebruiken zoals SVG wanneer een afbeelding voornamelijk uit abstracte figuren bestaat. Het voordeel hieraan is dat de afbeeldingen ook altijd haarscherp schalen als ze groter gemaakt worden waarbij een JPEG of PNG wazig wordt
• De compressie van JPEG- en PNG afbeeldingen in te stellen op 85% in plaats van 100%. Het kwaliteitsverschil is voor het menselijk oog nauwelijks zichtbaar maar het levert een aanzienlijke besparing aan het aantal kilobytes dat de gebruiker moet downloaden
• Ervoor te zorgen dat afbeeldingen op het correcte formaat getoond worden. Bij een website waar ik aan gewerkt heb werden alle 12 afbeeldingen op de homepage ingeladen op 1200 pixels breed. Echter werden de afbeeldingen door middel van CSS op verschillende formaten aan de bezoeker getoond. Een profielfoto bij een quote werd bijvoorbeeld op 75 pixels breed getoond. Door een kleine technische aanpassing werden de afbeeldingen op het juiste formaat geladen en getoond. Dit had een gigantische impact op de grootte van de homepage

Groene hosting

Als je een website hebt ontkom je er niet aan dat deze energie verbruikt. Een groot gedeelte van deze energie is de stroom om de server online te houden waar jouw website op draait. Het is daarom belangrijk om altijd te kiezen voor een hostingpartij die groene stroom gebruikt. Let dan ook op dat dit door een onafhankelijke instantie gecheckt wordt. Elke hostingpartij kan claimen dat ze groene stroom gebruiken, maar dan hoeft dat niet de (hele) waarheid te zijn. Op deze lijst vind je alle hosting providers die door de Green Web Foundation gecontroleerd zijn.

Daarnaast kun je de website het beste hosten in het land waar de meeste bezoekers van jouw website vandaan komen. Hoe minder ver de kilobytes hoeven te reizen des te minder elektriciteit er verbruikt wordt.

Content opruimen

Zorg ervoor dat bezoekers niet meer op pagina’s kunnen komen die geen waarde hebben. Denk bijvoorbeeld aan een oud nieuwsbericht dat niet meer relevant is of een product pagina van een product dat niet meer wordt aangeboden. Elke keer als een bezoeker namelijk per ongeluk op deze pagina terechtkomt, wordt deze in het geheel gedownload.

In je statistiekenpakket (zoals Google Analytics, Piwik of Matomo) kun je nagaan welke pagina’s niet of slecht converteren. Let daarbij op dat je niet kijkt naar 'vanity metrics' zoals paginaweergaven. Een pagina die vaak bezocht wordt, maar nauwelijks converteert is in feite waardeloos. Zo heb ik ooit een blog geschreven over DuckDuckGo. In de zoekresultaten van Google werd deze blog boven een verwijzing naar DuckDuckGo gezet met als gevolg honderden bezoekers die eigenlijk op zoek waren naar de privacy vriendelijke zoekmachine. Met een enorme verspilling aan data als gevolg, omdat bezoekers binnen enkele milliseconden weer wegklikken.

ABC: Always Be Caching

Om het dataverbruik van je website te beperken moet je ervoor zorgen dat je de cache goed geregeld hebt. Met cache kun je ervoor zorgen dat een bezoeker bij een paginabezoek niet de hele pagina hoeft te downloaden maar alleen de gedeelten die afwijkend zijn. 

Bekende Content Management Systemen zoals Drupal en Wordpress kennen een goed ingebouwd caching systeem. Zorg er dus voor dat dit aanstaat. Maar het is de moeite waard om diensten te onderzoeken zoals Cloudflare of Fastly. 

Naast dat deze diensten de website cachen zorgen ze er ook voor dat jouw website op meerdere plekken in de wereld te benaderen is. Als iemand in Amerika jouw website bezoekt wordt deze door een server in Amerika geserveerd. Dit maakt het voor jouw Amerikaanse bezoeker sneller, maar ook duurzamer omdat de data minder ver hoeft te reizen en het kost daarom minder elektriciteit. Ook bieden beide diensten de optie om afbeeldingen (verder) te optimaliseren.

Het basispakket van Cloudflare is gratis te proberen.

Aan de slag

Hopelijk kun je direct aan de slag met deze verbeteringen om je website minder vervuilend te maken. Heb je zelf nog goede tips? Deel ze hieronder door een reactie achter te laten.