Wat maakt een website duurzaam?

Voordat we beginnen met het ontwerpen en bouwen van een duurzame Drupal website moeten we eerst kijken naar de factoren die een website duurzaam maken. Tom Greenwood heeft hier het zeer nuttige boek Sustainable Web Design over geschreven.

In het kort komt het hier op neer:

1. Gebruik een duurzame hosting partij. De elektriciteit die verbruikt wordt bij het hosten van jouw website heeft deze meeste impact. Zorg er daarom voor dat de hosting partij die je gebruikt zich inzet voor een beter klimaat.
2. Maak de pagina's zo klein mogelijk. Des te groter het bestand een bezoeker moet downloaden, des te meer elektriciteit dit van beide kanten kost.
3. Maak ontwerpkeuzes die minder elektriciteit kosten. Slimme keuzes met betrekking tot je webdesign hebben een positieve impact op de duurzaamheid van je website.
4. Laat alleen pagina's zien die nuttig zijn voor de bezoeker. Verwijder content die niet meer relevant of bruikbaar is.

Laten we eens kijken hoe een webdesigner dit kan toepassen op een Drupal website.

Duurzame Drupal hosting

Een duurzame host kiezen kan lastig zijn. Een goed startpunt is dit artikel over het kiezen van een groene web host door Tom Greenwood, ook de auteur van het boek dat ik hierboven noemde.

Mijn site, bijvoorbeeld, wordt gehost op de servers van Digital Ocean die in een groen datacentrum van Equinix staan in Amsterdam. Zij claimen op 100% schone en hernieuwbare energie te draaien. Als dit jou ook een goede optie lijkt check dan Cloudways*. Met Cloudways kun je gemakkelijk een website opzetten op de servers van Digital Ocean. Probeer Cloudways nu gratis*.

Hoe maak je jouw Drupal webpagina's zo klein mogelijk

Dan heb ik het over het aantal kilobytes dat een bezoeker moet downloaden om jouw webpagina's te bekijken.

1. Zet de cache aan. Dit moet je standaard doen voor elke Drupal website je hebt/maakt omdat het je website sneller maakt. Snelheid is een belangrijke factor in hoe jouw Drupal website gerankt wordt in zoekmachines zoals Google. Cache aanzetten kan in de backend onder Performance (Prestaties) en dan Bandwidth Optimization (Bandbreedte optimalisatie). Je kan zelf een stap verder gaan en de Advanced CSS/JS Aggregation module installeren die je ongekend veel mogelijkheden geeft om je cache instellingen verder te optimaliseren.
2. Gebruik afbeeldingen en video's met mate. Media is de grootste factor als het aankomt op het aantal kilobytes dat een bezoeker moet downloaden om jouw website goed te kunnen bekijken. Vraag je bij elke afbeelding en video die je plaatst dus goed af of deze echt nodig zijn. Als een webdesigner ben ik overtuigd van de kracht van goede afbeeldingen, dus vind ik ze in veel gevallen noodzakelijk. Achtgrond video's die automatisch afspelen zijn echter een no go. 
3. Gebruik SVG waar mogelijk. Als jouw afbeeldingen voornamelijk uit iconen en illustraties bestaan dan kun je beter het vector bestandsformaat SVG gebruiken. Deze bestanden zijn over het algemeen kleiner dan JPEG, PNG of GIF bestanden.
4. Gebruik systeem fonts. Of, als je je website een andere uitstraling wil geven met Google fonts, zorg er dan tenminste voor dat je ze lokaal host in plaats van gebruik te maken van een CDN.

Richtlijnen voor een duurzaam Drupal thema

1. Gebruik donkere kleuren. Nu OLED schermen snel op weg zijn om de standaard te worden, kan het gebruik van donkere kleuren in jouw Drupal thema zorgen voor energiebesparing. Bij OLED schermen worden de donkere pixels namelijk uitgeschakeld. Probeer bijvoorbeeld een thema te maken met een donkere achtergrond en lichtere tekst. De implementatie van dark mode bij browsers en mobiele telefoons zijn een indicatie dat gebruikers ook de voorkeur geven aan donkerdere kleuren.
2. Gebruik moderne CSS technieken. Door technieken zoals flexbox en grid te gebruiken kun je het aantal regels CSS dat je nodig hebt terugbrengen. Deze nieuwe technieken zijn namelijk efficiënter en worden goed ondersteund door de meeste browsers.
3. Gebruik de responsive image module. Met de responsive image module kan je afbeeldingen tonen in afmetingen die bepaald worden op basis van de breedte van het scherm. Dat wil zeggen dat wanneer iemand jouw website op een mobiele telefoon bekijkt, je de breedte van de afbeeldingen kan beperken. Een afbeelding die bijvoorbeeld op een desktop als 1920 x 1080 pixels wordt getoond, kan je op een mobiele telefoon als 600 x 400 pixels tonen. Dit verkleint de bestandsgrootte van de afbeelding die de bezoekers moeten downloaden. Een duurzamere website, een tevreden bezoeker en een pluim van Google wanneer je de prestaties van je websites checkt met PageSpeed Insights.
4. Vermijd overbodige JavaScript. Je website volproppen met allerlei stukjes JavaScript kan de bestandsgrootte van je pagina snel doen oplopen. Gebruik je bijvoorbeeld nog steeds een jQuery Carousel om belangrijke informatie op de homepage te tonen? Stop het. Usability experts zeggen dat het niet werkt. Of ben je misschien vergeten dat ene tracking script te verwijderen voor die dienst die je al een paar maanden niet meer gebruikt? Tijd om kritisch al je JavaScripts te beoordelen die je in de loop der tijd hebt toegevoegd aan je Drupal website.

Check je content

Elke keer als een bezoeker op een pagina van jouw website komt dan kost dat elektriciteit. En dit heeft een negatieve impact op de Co2 uitstoot. Daarom is het belangrijk om alleen pagina's beschikbaar te stellen die waarde heeft voor jouw bezoekers.

Verwijder waardeloze content

Heb je pagina's met een hoge bounce rate? Een bezoekers 'bounct' wanneer ze slechts één pagina van jouw website bekijken in hun sessie. Een goed voorbeeld is iemand die jouw pagina vindt via Google, op de link klikt, de pagina een paar seconden bekijkt en weer terug klikt naar de zoekresultaten. Dit kan een indicatie zijn dat de bezoeker niet de juiste informatie heeft gevonden. Desondanks is toch de hele pagina gedownload.

Ik heb ooit een blog geschreven over DuckDuckGo. Omdat ik de eerste was in Nederland die hier over schreef kreeg de blog een hoge positie in de zoekresultaten van, heel ironisch, Google. De  blog werd zelfs boven een daadwerkelijke link naar DuckDuckGo geplaatst. De blog kreeg extreem veel traffic, maar deze was waardeloos. Bezoekers waren niet op zoek naar mijn blog, maar naar DuckDuckGo. Uiteindelijk hebben we besloten de blog te verwijderen omdat het meer problemen gaf dan dat het opleverde.

Wees niet bang om content te verwijderen. In het geval van Drupal kun je het ook altijd tijdelijk uitschakelen zodat het alleen voor de bezoekers niet meer beschikbaar is. Het zal je SEO ook niet schaden maar eerder een boost geven. Dit was ook het geval bij Search Engine Journal. Hun pageviews en organisch verkeer hebben met 60+ procent toegenomen door 'flink te hakken' in hun oude content.

Voorwaarts richting groenere Drupal websites

Nu heb je geen excuus meer om te starten met de verduurzaming van jouw Drupal website. Begin bij de hosting, maak jouw pagina's kleiner, pas je thema aan en verwijder onnodige content.

Als je vragen hebt over het bovenstaande dan kun je hieronder een reactie achterlaten. Als je op de hoogte wil blijven van ontwikkelingen op het gebied van duurzame Drupal websites, schrijf je dan in op mijn Drupal nieuwsbrief :)

* Dit is een affiliate link. Als je deze gebruikt krijg ik een kleine bijdrage die ik gebruik om deze site te hosten.