Je wilt aan de slag om je website duurzamer te maken. Terecht, want alle kleine beetjes helpen om de wereld een stukje beter te maken. Of je nou een nieuwe website wil laten maken die duurzaam is, of je bestaande website wil verduurzamen, ik geef je praktische tips waar je mee aan de slag kunt. En, spoiler alert: je website wordt er ook nog eens razendsnel van!
Denk je nou: “Een duurzame website, wat is dat?” Lees dan vooral eerst even mijn pagina ‘Wat is een duurzame website?‘.
Hulp nodig?
Als mijn tips je doen duizelen maar je wil wel aan de slag, schakel dan iemand in met ervaring en specialistische kennis rondom duurzame websites. Ik help je graag verder.
De basis
Als je aan de slag wil met het verduurzamen van je website, handel dan vanuit de principes van het Sustainable Web Manifesto:
- Schoon: de website draait op duurzame energie
- Efficiënt: de website gebruikt zo min mogelijk energie
- Open: de website is toegankelijk
- Eerlijk: de website is niet misleidend qua inhoud of ontwerp
- Regeneratief: de website ondersteunt een economie die mens en planeet voedt
- Veerkrachtig: de website functioneert op de momenten en plaatsen waar mensen ze het meest nodig hebben
Sommige van deze punten zijn makkelijker door te voeren (of te begrijpen) dan anderen. Hieronder zal ik vooral praktische aanknopingspunten geven.
Concept
In de conceptfase van een website denk je na over de inhoud, structuur, functionaliteit en de doelen. Een duurzame insteek krijg je onder andere door jezelf de volgende vragen te stellen:
- Welke inhoud is nodig om te voldoen aan de doelen van de organisatie én aan de belangen van de bezoekers?
- Hoe kan ik de hoeveelheid media (afbeeldingen, video’s, etc.) tot een minimum terugbrengen zonder daarbij voorbij te gaan aan de behoeften van de organisatie en bezoekers? (‘Less is more’-principe)
- Hoe kan ik bezoekers informatie gemakkelijk laten vinden en tot zich laten nemen, om zo het websitebezoek zo efficiënt mogelijk te maken?
- Hoe kan ik de functionaliteit en het ontwerp toegankelijk maken voor alle bezoekers?
Maak met behulp van deze vragen een plan voor het opzetten van een duurzame website, of voor het verduurzamen van je bestaande website.
Ontwikkeling
Bij de ontwikkeling van een duurzame website zorg je ervoor dat de techniek achter de website zo efficiënt mogelijk werkt, zodat er zo min mogelijk dataoverdracht is. Alvast excuses voor het gebruik van enkele vaktermen.
Ik beperk me hier tot de ontwikkeling van een WordPress website, omdat daar mijn specialisme ligt.
Het template / thema
WordPress websites gebruiken een ’thema’. Dit is een verzameling bestanden waar het uiterlijk van de website én (een deel van) de functionaliteit is gedefinieerd. Deze bestanden zijn opgebouwd uit code, zoals php, html, css en javascript. Hoe minder bestanden en hoe kleiner deze bestanden, hoe minder energie (en tijd) het kost om een pagina te laden.
Thema kiezen
Gebruik een thema die weinig bijgevoegde bestanden gebruikt of die hier goed bij optimaliseert (zie verderop). Een thema met een zogenaamde ‘page builder’, zoals Elementor of WPBakery Page Builder heeft vaak erg veel onnodige bestanden, dus dat is iets om op te letten. Soms is er in de instellingen een ‘performance mode’ die onnodige bestanden vermindert.
Maatwerk
Als je écht wil optimaliseren (en duurzaam wil zijn) kies je niet voor een thema wat je ergens van een website downloadt, maar laat je een thema op maat maken. Als dit gebeurt kan de ontwikkelaar de code zo efficiënt mogelijk schrijven en alleen die bestanden gebruiken die noodzakelijk zijn om de website te laten functioneren en eruitzien zoals beoogd. Daarnaast kan er ook aandacht worden besteed aan toegankelijkheid door het gebruik van goed kleurcontrast en technieken zoals toetsenbord-navigatie.
Plugins
Een plugin is een invoegtoepassing van het WordPress-systeem. Denk aan contactformulieren, kaarten en webshops. Net als met thema’s maken plugins ook vaak gebruik van extra bestanden die niet altijd nodig zijn. Stel jezelf in eerste instantie af: heb ik deze plugin écht nodig.
Aan de slag
Tijd om aan de slag te gaan met de inhoud en techniek van de website. Deze tips helpen je met de verduurzaming van jouw website.
Wordt het je te technisch maar wil je wel aan de slag met verduurzaming? Ik help je graag verder. Bel me gerust op 055 - 208 51 30, dan denk ik met je mee.
1. Verminder onnodige bestanden
Sommige WordPress thema’s of plugins gebruiken veel javascripts (.js bestanden) om alles mogelijk te maken. Datzelfde geldt voor stylesheets (.css bestanden), die nodig zijn voor de opmaak van de website. Soms heb je er in de praktijk maar een paar nodig, dus weg ermee!
Als je niet in de code wil duiken kun je een WordPress plugin zoals Asset CleanUp gebruiken.
Mocht je niet terugdeinzen van wat code, gebruik dan de ‘wp_dequeue_script‘ of ‘wp_dequeue_style‘ functie. (Ik ga het niet té technisch maken, dus zoek vooral verder.)
2. Afbeeldingen
Media zoals afbeeldingen en video’s zorgen voor veel dataoverdracht dus naast het reduceren van het aantal media kun je ook bezig met het verkleinen van de bestanden zelf. Dit kan enorm veel schelen! Met deze dingen maak jij de boel beter:
- Verklein de afbeeldingsgrootte tot het formaat waarop het wordt weergegeven. Foto’s die op volledig beeld weergegeven worden hoeven niet groter te zijn dan 2560×1440 pixels.
- Maak gebruik van bestandscompressie. Bij het opslaan van afbeeldingen kun je soms de mate van compressie kiezen (meestal geeft tussen de 70 en 80 een goede balans tussen kwaliteit en bestandsgrootte). Hiernaast zijn er diverse plugins die de bestandsgrootte van afbeeldingen automatisch verkleinen. De meest gebruikte zijn Smush, TinyPNG, en EWWW Image Optimizer.
- Gebruik het juiste bestandsformaat. Afhankelijk van de afbeelding kun je kiezen voor webp, avif, png, svg of jpg. Voor foto’s is webp of avif meestal het beste, voor afbeeldingen met minder kleuren werkt png vaak goed, of svg als het een simpele vectorafbeelding is. Je kunt afbeeldingen converteren om de bestandsgrootte en kwaliteit te vergelijken. Hier zijn verschillende ‘online converters’ voor te vinden.
Vergelijking
Om te laten zien hoeveel effect deze stappen hebben heb ik als voorbeeld de foto van mijn eigen homepagina stapsgewijs geoptimaliseerd:
| 1 Origineel | 2 Geschaald | 3 Compressie | 4 WebP formaat |
|---|---|---|---|
| 9198×3245 px | 2560×903 px | 2560×903 px | 2560x903px |
| kwaliteit: 100 | kwaliteit: 100 | kwaliteit: 80 | kwaliteit: 80 |
| formaat: jpg | formaat: jpg | formaat: jpg | formaat: webp |
| 3.280 KB | 350 KB | 214 KB | 90 KB |
De uiteindelijke afbeelding is slechts 3% van de grootte van het origineel en bijna 75% kleiner dan de geschaalde afbeelding. Dat is nogal wat winst, terwijl de kwaliteit er amper op achteruit is gegaan.
3. Lettertypes
Lettertypebestanden zorgen er (als het goed is) voor dat de typografie er niet oersaai uitziet en mooi aansluit bij jouw huisstijl, maar deze kunnen tegelijkertijd ook veel onnodige ballast aan een website toevoegen. Bedenk je bijvoorbeeld dat veel lettertypebestanden speciale karakters bevatten uit andere talen die je helemaal niet nodig hebt.
Reduceren: aantal lettertypebestanden
Zorg er allereerst voor dat je alleen die lettertypebestanden gebruikt die je écht nodig hebt. Vooral met meerdere variaties van een font (lettertype) zoals regular, medium, bold en italic tikt de bestandsgrootte snel aan. De relatief nieuwe techniek rondom ‘variabele fonts‘ kan ook aanzienlijk schelen. Hierbij zijn de variaties in het font grotendeels in één bestand verwerkt en heb je vaak maar 2 bestandjes nodig om het volledige scala aan lettertypevariaties te kunnen gebruiken.
Lokale fonts vs. externe font-websites
Het gebruiken van font-websites zoals Google Fonts zorgt voor extra data-overdracht omdat een andere bron wordt aangesproken. Zorg ervoor dat jouw fonts op dezelfde server staat als de rest van jouw website. Handige WordPress tools zijn bijvoorbeeld Custom Fonts en Local Google Fonts. Nog beter is natuurlijk om de lettertypes te integreren in de code van je Thema.
Verkleinen: woff2 en subsetting
Het woff2 bestandsformaat is het meest efficiënt qua bestandsgrootte en wordt door alle moderne browsers ondersteund. Gebruiken dus!
Als je nog een stap verder wil gaan kun je de lettertypebestanden nog subsetten. Dit is het verwijderen van onnodige karakters uit het lettertypebestand. Let wel op, dit is echt voor degenen met de nodige technische aanleg en ervaring om dit gebied.
Iconenfonts
Vergeet hier niet de iconenfonts. Soms gebruikt een site wel 3 of 4 iconenfonts, terwijl in de opmaak maar 10 iconen worden gebruikt. Stel je eigen iconenfont gemakkelijk samen via de IcoMoon app. Je moet ook hier wel goed weten wat je aan het doen bent.
4. Optimalisatietechnieken
Er zijn behoorlijk wat technieken en tools om de bestandsgrootte van code en bestanden te verkleinen. Ik noem er een aantal.
Caching
Caching is een techniek waarmee een soort tijdelijke opslag wordt gemaakt voor bepaalde gegevens. Hiermee worden sommige processen sterk verminderd en kunnen bestanden sneller worden overgedragen. Er zijn verschillende vormen en technieken die, afhankelijk van de mogelijkheden van de server, kunnen worden toegepast. In WordPress is het meestal het handigst om te werken met een caching-plugin, zoals WP Fastest Cache, W3 Total Cache, Autoptimize of LiteSpeed Cache (werkt alleen op specifieke LiteSpeed-hosting).
Code-compressie
In een caching-plugin heb je vaak de mogelijkheid om verschillende technieken te gebruiken voor het comprimeren van gebruikte code. Denk aan het verwijderen van onnodige code, het samenvoegen van soortgelijke bestanden en het comprimeren van gegevens in de overdracht (zoals je dat ook kunt doen met zip-bestanden, bijvoorbeeld). Hier is aan te raden om de functies van de gebruikte plugin te gebruiken, of handleidingen van jouw hosting voor te raadplegen.
Lazy-loading
Met deze techniek worden afbeeldingen en video’s pas geladen (gedownload) wanneer ze ‘in beeld’ komen. De meeste afbeelding-compressie plugins zoals Smush en EWWW Image Optimizer hebben hier een functie voor ingebouwd. Hetzelfde geldt voor sommige caching-plugins die ik hierboven al noemde.
5. Statistieken
Het verzamelen van gegevens van websitebezoekers is waardevol voor inzicht in het gebruik van jouw website. Er zijn verschillende diensten die deze gegevens verzamelen om ze in statistieken weer te geven. Helaas zorgen deze diensten er vaak voor dat er een bult extra gegevens heen en weer gestuurd worden, waarmee er weer meer energie wordt gebruikt; om nog maar te zwijgen van de vertraging die je website hierdoor krijgt.
De meest gebruikte website-statistiekendienst is Google Analytics. Als je hiervan gebruik maakt kun je met de plugin Flying Analytics al flink wat besparen op gegevensoverdracht. Deze laadt de benodigde bestanden direct vanaf je eigen server, namelijk.
Een paar goede, lichtgewicht alternatieven voor Google Analytics zijn Fathom Analytics en Plausible Analytics. Helaas zijn beide diensten niet gratis.
6. Zoekmachineoptimalisatie (SEO)
Ontzettend veel mensen gebruiken zoekmachines om te vinden wat ze zoeken. Als je zorgt dat jouw website goed gevonden wordt op de juiste zoektermen kun je ervoor zorgen dat mensen sneller relevante informatie vinden en daardoor minder stroom verbruiken. Hierdoor is ook zoekmachineoptimalisatie (SEO) een middel om je website duurzamer te maken.
7. Webteksten en structuur
Net zoals met zoekmachineoptimalisatie heeft de tekstuele informatie om jouw website invloed op hoe snel een gebruiker op de juiste plek terecht komt. Het duidelijk structureren en goed formuleren (schrijven) van de informatie kan betekenen dat een bezoeker veel minder pagina’s bezoekt en daardoor weer minder energie verbruikt (en er ook nog eens een fijner gevoel aan over houdt 😉 ).
Hosting
Zoals ik al op de pagina ‘Wat is een duurzame website‘ had aangestipt: om jouw website beschikbaar te maken zijn er computers nodig die dag en nacht draaien. Deze servers verbruiken een boel stroom en hebben koelingssystemen nodig omdat ze ook nog eens veel restwarmte produceren.
Wanneer de datacenters waar de servers staan worden voorzien van groene stroom zou je al kunnen spreken van groene hosting. Als hiernaast ook nog restwarmte wordt teruggeleverd aan omliggende panden of de gebruikte computers worden hergebruikt zijn ze natuurlijk helemaal goed bezig. Kortom: door een hostingpartij te kiezen die aandacht heeft voor deze aspecten wordt je website weer een stukje duurzamer.
Ook de locatie van de datacenters heeft invloed op de hoeveelheid energie die wordt gebruikt. Als jouw bezoekers vooral in Nederland zitten is het zonde om jouw website op een computer in Amerika te laten draaien, omdat er dan meer energie nodig is om de gegevens in Nederland te krijgen. Over het algemeen geldt: hoe lokaler, hoe beter.
Op de website van The Green Web Foundation staat een lijst met geverifieerde groene hostingpartijen. Je kunt ook testen of een website op groene energie draait via hun Green Web Check.
Aan de slag met duurzame websites?
Ik kan me voorstellen dat bovenstaande informatie je snel te veel wordt. Toch aan de slag? Natuurlijk denk ik graag met je mee. Bel me gerust op 055 - 208 51 30 of kom eens langs. Waarschuwing: geen slappe praatjes, wel altijd waardevol advies!