Hoe maak je een duurzame website? 5 praktische stappen

Waarom een duurzame website?

Onlangs ben ik gestart met de training ‘Bovendrijven in het nieuwe Google‘ bij Weblish. Eén van de onderdelen die aan de orde kwam, was de duurzaamheid van websites.

Ik heb mijn eigen website getest via Website Carbon en later Ecograder. De eerste uitslag was niet goed: score D. Dat staat ongeveer gelijk aan het energieverbruik van 4512 kopjes thee per jaar.

Dat voelde eerlijk gezegd niet goed. Als technisch VA wil ik juist dat mijn websites efficiënt, snel en toekomstbestendig zijn. Dus besloot ik mijn website stap voor stap te verduurzamen.

Niet alleen voor het milieu, maar ook omdat Google steeds meer kijkt naar snelheid, efficiëntie en technische kwaliteit van websites.

In deze blog neem ik je mee in wat ik heb aangepast.

Hoe maak je een website duurzamer?

Je kunt een website duurzamer maken door technische keuzes die het energieverbruik van een pagina verlagen. Denk bijvoorbeeld aan:

• afbeeldingen optimaliseren
• onnodige plug-ins en scripts verwijderen
• system fonts gebruiken in plaats van externe fonts
• caching gebruiken
• externe icon libraries beperken

Een duurzame website is vaak sneller, efficiënter en gebruikt minder energie.

Waarom een duurzame website belangrijk is

Elke website die wordt geladen gebruikt energie. Bezoekers laden afbeeldingen, scripts en code. Dat kost dataverkeer en serverkracht. Hoe zwaarder een website is, hoe meer energie er nodig is.

Een duurzame website betekent meestal ook:

• een snellere website
• betere gebruikerservaring
• betere vindbaarheid (SEO)
• minder technische ballast

Kort gezegd: goed voor de planeet én goed voor je website.

Stap 1: Afbeeldingen optimaliseren

Afbeeldingen zijn vaak verantwoordelijk voor het grootste deel van het dataverbruik van een website. Ik heb daarom eerst gekeken naar mijn afbeeldingen.

Wat ik heb gedaan

Ik gebruik nu Imagify (Infinite plan) om alle afbeeldingen automatisch te optimaliseren. Dit is de betaalde versie van Imagify om in één keer alles te optimaliseren.

Daarnaast:

• afbeeldingen worden automatisch omgezet naar AVIF
• maximale breedte ingesteld op 2048px
• bestaande afbeeldingen opnieuw geoptimaliseerd

AVIF is een modern bestandsformaat dat veel kleiner is dan JPG of PNG, zonder zichtbaar kwaliteitsverlies.

Door deze aanpassingen zijn mijn afbeeldingen gemiddeld ongeveer 67% kleiner geworden. Dat scheelt veel dataverkeer bij elke paginaload.

Stap 2: Een “digital diet” voor mijn website

Een duurzame website is ook een opgeruimde website. Veel websites laden scripts, modules en functies die eigenlijk nooit gebruikt worden. Dat kost onnodig energie.

Wat ik heb gedaan

In mijn pagebuilder (Beaver Builder) en modules zoals PowerPack en UABB heb ik kritisch gekeken naar wat ik echt gebruik.

Ik heb:

• ongebruikte modules uitgezet
• overbodige functies verwijderd
• kritisch naar mijn plug-ins gekeken

Elke plug-in en elke module betekent extra code. Minder code = minder energieverbruik.

Stap 3: Fonts simpeler maken

Fonts lijken een klein detail, maar kunnen verrassend veel impact hebben. Veel websites laden externe fonts (bijvoorbeeld Google Fonts). Dat betekent extra verzoeken naar externe servers.

Mijn keuze

Ik ben overgestapt op system fonts, zoals Arial.

Voordeel:

• geen externe requests
• sneller laden
• minder dataverkeer

Voor veel websites is dit een simpele manier om je website efficiënter te maken.

Stap 4: Techniek en server optimaliseren

Naast de website zelf speelt ook de techniek erachter een rol.

Mijn technische verbeteringen

Mijn website draait op:

• PHP 8.3 – sneller en efficiënter voor de server
• caching via WP-Optimize – pagina’s worden opgeslagen zodat de server minder hoeft te rekenen

Caching zorgt ervoor dat bezoekers sneller een pagina zien en dat de server minder energie gebruikt.

Stap 5: Minder externe scripts en icon libraries

Een website laadt vaak meer externe bronnen dan je denkt. Denk bijvoorbeeld aan:

• fonts
• icon libraries
• tracking scripts
• video embeds
• externe widgets

Elke keer dat een browser een externe bron moet ophalen, wordt een extra server aangesproken. Dat betekent meer dataverkeer, meer energieverbruik en vaak ook een langzamere website.

Door kritisch te kijken naar deze externe bronnen kun je je website efficiënter maken.

Wat ik zelf al heb aangepast

In mijn geval heb ik bijvoorbeeld:

• Google Fonts vervangen door system fonts (Arial)
• onnodige scripts verwijderd
• kritisch gekeken naar plug-ins en modules

Hierdoor hoeft de browser van een bezoeker minder externe bestanden te laden.

Tip: let ook op icon libraries

Veel websites laden een complete icon library, zoals Font Awesome. Zo’n library kan honderden iconen bevatten en soms meer dan 100 KB aan bestanden laden. Terwijl je er in de praktijk vaak maar een paar gebruikt.

Een efficiëntere oplossing is om alleen de iconen die je nodig hebt te gebruiken als SVG-bestand. Websites zoals Tabler Icons en Lucide bieden gratis iconen die je eenvoudig kunt downloaden of waarvan je de SVG-code kunt kopiëren.

Voordelen van SVG-iconen:

• een SVG bestaat vaak uit slechts een paar regels code
• veel kleinere bestandsgrootte dan een icon-font
• minder externe bestanden die geladen moeten worden
• meer controle over kleur en grootte

Voor een paar iconen op je website is dit vaak een veel efficiëntere oplossing.

Veel pagebuilders ondersteunen tegenwoordig ook het gebruik van losse SVG-iconen, waardoor je geen complete icon library hoeft te laden.

Gebruik je veel iconen op je website? Dan kan een icon library nog steeds handig zijn. Maar voor een paar iconen is een losse SVG vaak efficiënter.

De resultaten

Mijn eerste meting gaf een score D bij Website Carbon. Dat was voor mij het startpunt om mijn website verder te optimaliseren.

Sommige tools lopen iets achter met nieuwe metingen, maar een rapport via Ecograder laat duidelijk zien dat de aanpassingen effect hebben gehad.

Uit de test blijkt:

• Ecograder score: 87/100
• CO₂-uitstoot per paginaload: 0,43 gram
• Groene hosting: 100/100
• Totale paginagrootte: 1,28 MB

Als je dit terugrekent naar het energieverbruik, scheelt dat behoorlijk. Bij ongeveer 10.000 bezoekers per maand daalt de uitstoot van ongeveer 33,3 kg CO₂ naar 4,3 kg CO₂ per jaar. Dat betekent een reductie van ongeveer 87%.

Dat laat zien dat relatief kleine technische verbeteringen een grote impact kunnen hebben.

Ook de snelheid van mijn website is verbeterd. In Google PageSpeed Insights ging mijn score omhoog naar 74 op mobiel en 97 op desktop.

Duurzamer werken is een proces

Mijn website is nog niet perfect en ik blijf verder optimaliseren. Denk bijvoorbeeld aan:

• minder server requests
• nog kritisch kijken naar scripts
• blijven letten op paginagrootte

Maar deze eerste stappen laten al zien dat je met relatief eenvoudige technische aanpassingen veel kunt verbeteren.

Voor mij is dat precies waar techniek om draait:
slimmer werken, minder verspillen en een website bouwen die efficiënt en toekomstbestendig is.

Wat jij vandaag al kunt doen om de CO₂-uitstoot van je website te verlagen

Wil je jouw website ook duurzamer maken? Begin met het testen van je website. Vul de URL van je website bijvoorbeeld in bij deze tools. Daarmee kun je zien hoeveel CO₂-uitstoot jouw website veroorzaakt en waar je website nog verbeterd kan worden.

• Website Carbon
  Deze tool berekent hoeveel CO₂-uitstoot een webpagina veroorzaakt en geeft een carbon score (van A tot F).
• Ecograder
  Ecograder kijkt breder naar de duurzaamheid van je website, zoals paginagrootte, prestaties en groene hosting.
• PageSpeed Insights
  Met deze tool van Google kun je zien hoe snel je website laadt op desktop en mobiel en waar nog verbeterpunten liggen.

Heb je een lage score? Geen zorgen. Veel websites kunnen met een paar technische aanpassingen al flink verbeteren.

Begin bijvoorbeeld met deze stappen:

• optimaliseer je afbeeldingen
• verwijder plug-ins die je niet gebruikt
• gebruik caching
• houd je website technisch up-to-date

Je hoeft je website niet compleet opnieuw te bouwen. Kleine verbeteringen maken samen een groot verschil.

Een website die beter werkt

Voor mij is een duurzame website geen marketingterm. Het gaat om efficiëntie, snelheid en slimme techniek.

En dat zijn precies de dingen waar ik als technisch VA graag mee bezig ben.

Ik blijf mijn website de komende tijd verder optimaliseren. Zodra mijn score opnieuw verbeterd is, deel ik dat natuurlijk ook.

Een duurzame website begint bij goede techniek

Een duurzame website gaat niet alleen over het milieu. Het gaat ook over een website die technisch goed in elkaar zit.

Een lichte en efficiënte website betekent meestal ook:

• een snellere website
• minder technische problemen
• een betere gebruikerservaring
• en vaak ook betere vindbaarheid in Google

Bij het bouwen en onderhouden van WordPress websites let ik daarom altijd op zaken zoals snelheid, efficiëntie en digitale toegankelijkheid.

In mijn vervolgblog leg ik uit waarom deze duurzame keuzes niet alleen goed zijn voor de planeet, maar ook zorgen voor een betere ervaring voor je bezoekers en een hogere score in Google.
Lees hier waarom een duurzame website beter werkt voor Google en je bezoeker

Wil je dat ik eens meekijk naar de techniek van jouw website? Dan kun je hier lezen hoe ik ondernemers help met het bouwen en optimaliseren van WordPress websites.

💡Nog even dit:
Een website helemaal CO₂-neutraal maken is in de praktijk bijna onmogelijk. Maar met slimme technische keuzes kun je het energieverbruik wel flink verminderen.