Duurzaam webdesign draait erom dat verbruik klein te houden, zonder dat je website er minder om wordt. Sterker nog, een lichtere site laadt sneller en werkt voor iedereen prettiger. Hieronder leg ik uit wat het is, en laat ik zien hoe ik het zelf aanpak als ik een site bouw of onderhoud.
Wat is duurzaam webdesign?
Duurzaam webdesign is het bouwen van een website die goed werkt en daarvoor zo min mogelijk stroom nodig heeft. Dat zit niet in één ding, maar in de hele keten, van het ontwerp en de code eronder tot de hosting waarop de site draait en de inhoud die je toont. Elke onderdeel van de keten kan lichter, en samen maakt dat een merkbaar verschil.
Misverstand: duurzame websites zijn saai
Om meteen een misverstand de wereld uit te helpen, het gaat niet om een kale of minimalistische website. Het gaat om efficiëntie, waarbij je er als bouwer voor kiest om geen data laten laden die niets toevoegt. Wat niet alleen goed is voor de duurzaamheid van je website, maar ook voor de snelheid en toegankelijkheid.
Waarom is duurzaam webdesign belangrijk?
Servers draaien 24 uur per dag, verbruiken stroom en moeten gekoeld worden, waar vaak ook veel water voor nodig is. Met de groei van video en AI komen er steeds meer datacenters bij, plus een groeiende berg elektronisch afval. Bij elkaar is het internet goed voor een paar procent van de wereldwijde uitstoot, en dat aandeel groeit.
Sneller en beter vindbaar
Daarnaast is er ook iets wat jij als ondernemer zelf direct kunt merken. Op een zware, traag ladende website haken bezoekers af die niet willen wachten. Maar dat is niet het enige, want de snelheid en een goede structuur van je website zijn belangrijke onderdelen waarop de bots van Google en bijvoorbeeld AI-tools je website beoordelen.
Een duurzame website is dus niet alleen beter voor het milieu, maar ook voor je bezoekers.
Duurzame webhosting
Welke stroom er gebruikt wordt voor de servers waarop een website draait, maakt een groot verschil. Groene webhosting providers gebruiken hernieuwbare energie en / of compenseren hun uitstoot. Ook de plek waar de server fysiek staat telt hierbij mee. Staat die dichter bij je bezoekers, dan legt je data een kortere weg af en is er minder stroom nodig. Je site is hierdoor ook een stukje sneller. Het is een van de grote knoppen waar je als website-eigenaar zelf aan kunt draaien.
Hoewel ik zelf geen webhosting regel voor mijn klanten, geef ik hier wel regelmatig advies over. Ik raad aan om een host te kiezen die servers heeft in Nederland én die op de website informatie beschikbaar stelt over de duurzaamheidsstappen die zij nemen.
Welke webhosting ik gebruik
Zelf gebruik ik SiteGround. Dat draait op de infrastructuur van Google Cloud, dat zijn stroomverbruik volledig met hernieuwbare energie compenseert en toewerkt naar servers die dag en nacht op CO2-vrije stroom draaien. Ik kan er bovendien zelf de serverlocatie kiezen, zodat die dicht bij de bezoekers staat.
Hoe ik duurzaam webdesign toepas
Naast duurzame webhosting heb ik mijn werkwijze aangepast om websites zo licht mogelijk aan klanten op te leveren. Dit is wat ik doe als ik een nieuwe website bouw.
Een vast pakket plugins
Allereerst werk ik met een vast pakket betaalde plugins. Dat doe ik om twee redenen. De eerste is veiligheid, want ik wil voorkomen dat een site gehackt wordt. De tweede is snelheid en grip. Ik weet precies wat elke plugin doet en wat ik aan of uit kan zetten, zodat er niets meelaadt wat niet nodig is.
Bricks Builder voor de opbouw
Voor het bouwen maak ik gebruik van Bricks Builder. Dit is een page-builder waarmee ik visueel websites kan ontwikkelen. Het fijne aan Bricks Builder is dat ik hiermee veel vrijheid heb als het aankomt op de code die ingeladen wordt. Waar veel page-builders in de basis al een flinke lading code inladen, is dit bij Bricks Builder minimaal.
De efficiënte code houdt de pagina licht, en helpt daarnaast meteen de digitale toegankelijkheid van de website te verbeteren. Schone code is namelijk beter te lezen voor bijvoorbeeld een schermlezer.
Tegelijk geeft Bricks me volledige vrijheid als het gaat om het ontwerp van de website. Een duurzame site hoeft er dus niet kaal uit te zien.
Passend bij je branche
Zoals eerder in dit artikel al even aangehaald, wordt duurzaam webdesign vaak gezien als saaie, minimalistische websites. Ik kijk daar zelfs wat anders naar. Een website moet passen bij de branche waarin je werkt. Draait je werk om beeld, of heb je foto’s nodig om vertrouwen te wekken, dan horen die gewoon op je website. Ik zal dan niet zeggen dat het niet kan omdat het minder duurzaam zou zijn. Ik zoek naar manieren om die beelden zo licht mogelijk te maken, zonder dat je inlevert op kwaliteit.
Afbeeldingen
Op de meeste websites zijn de afbeeldingen het zwaarst. Vaak worden ze niet verkleind voordat ze geüpload worden, waardoor je site trager laadt en meer stroom vraagt om ze te tonen. Gelukkig los je dat op zonder fotobewerkingsprogramma.
Een gratis tool die ik hiervoor gebruik is Bulk Resize Photos. Het oogt wat rommelig, maar het werkt snel en je kunt meerdere foto’s tegelijk verwerken. Zelf maak ik een mapje met foto’s aan en upload ik alles in één keer. In het tabje breedte stel ik in dat de foto’s maximaal 2000 pixels breed mogen zijn. Op de meeste schermen zijn ze dan nog scherp, en toch een stuk kleiner dan wat er rechtstreeks van je telefoon af komt. Voor kleinere afbeeldingen, bijvoorbeeld beeld naast een tekst, houd ik 1000 pixels aan.
Naast het verkleinen, laat ik foto’s automatisch omzetten van jpg of png naar WebP. Dat bestandstype is voor het internet ontwikkeld en is ongeveer een kwart kleiner dan een jpg, bij hetzelfde beeld. Ik gebruik daarvoor de plugin Converter for Media, die in mijn vaste pakket zit. Nieuwe afbeeldingen die je later uploadt, gaan dan vanzelf mee.
Video pas laden als iemand kijkt
Video is vaak een van de zwaarste elementen die je op een pagina kunt plaatsen. Daarom geef ik een video een “poster”, een stilstaande afbeelding die je eerst ziet, en laat ik het videobestand zelf pas afspelen als iemand op play drukt of als de rest van de pagina geladen is. Wie langs scrollt, haalt zo een lichte afbeelding binnen in plaats van een zwaar videobestand. Dit werkt ook bij bijvoorbeeld een video die opgehaald moet worden van YouTube of Vimeo.
Lettertypes en iconen
Veel sites laden een compleet lettertypepakket of een hele icon-library in, terwijl er maar een klein deel van gebruikt wordt. Dat is zonde, omdat er hierdoor veel ingeladen wordt waar je geen gebruik van maakt.
De keuze voor lettertypes maak ik al tijdens de ontwerpfase. Ik kies er bewust voor om één maximaal twee lettertypes te gebruiken. Daarnaast exporteer ik icoontjes los uit het design bestand om ze vervolgens te uploaden in de website, de bestaande iconen bibliotheken in Bricks schakel ik uit. Ik zou er ook voor kunnen kiezen om de standaard iconen bibliotheek uit Bricks Builder wel te gebruiken, alleen worden daarmee honderden iconen ingeladen die ik nooit gebruik.
Hoewel het lijkt alsof dit maar kleine puntjes zijn, kan dit al gauw 100 tot 200kb schelen op een pagina. Wat zorgt voor langzamere laadtijden, terwijl je er niets voor terugkrijgt.
Caching
Caching betekent dat een bezoeker een opgeslagen versie van je pagina krijgt, in plaats van dat de server die elke keer opnieuw opbouwt. Dat scheelt werk voor de server, en dat werk kost stroom. De browser van je bezoeker bewaart bovendien bestanden zoals je lettertypes en afbeeldingen, zodat die bij een volgend bezoek niet opnieuw opgehaald worden. Het resultaat is een pagina die sneller laadt en minder data heen en weer stuurt.
Caching biedt vaak geen one size fits all oplossing. Het is nauw verbonden aan de hosting waarop je website draait. Als de hostingprovider geen informatie over caching beschikbaar heeft op de website adviseer ik mijn klanten vaak om even contact op nemen met de webhosting provider voor meer informatie. Slecht ingestelde caching kan er namelijk juist voor zorgen dat je website traag wordt en veel energie verbruikt.
Meten hoe duurzaam je website is
Tijdens het bouwen én achteraf controleer ik regelmatig het resultaat van m’n werk. Daarvoor gebruik ik tools als GTmetrix en Digital Beacon om een pagina te kunnen meten. In mijn browser heb ik de extensie Website Footprint geïnstalleerd. Deze geeft met een letter van A tot F aan of een pagina te zwaar wordt. Zo zie ik meteen of een keuze in de praktijk uitpakt zoals ik wil.
Aan de slag met duurzaam webdesign
Je hoeft dit niet allemaal in één keer te doen. De grootste winst zit meestal in je afbeeldingen en in een goede host, dus daar is een logisch startpunt. De rest bouw je er rustig omheen. Ik bouw sites standaard op deze manier. Wil je een website die licht en snel is en dat ook blijft, kijk dan eens bij het laten maken van een duurzame website, of laat weten waar je tegenaan loopt.
