Thijs Avatar

Schone, duurzame code

Snelle, converterende websites zijn duurzamer dan trage, niet converterende websites. Win-win dus als je professionele developers inschakelt om de CO2 footprint van je website te beperken.

Elk websitebezoek kost energie. Ook dit bezoek.

In ons vorige blog ‘Verklein je CO₂-footprint met duurzaam design’ schreven we al dat er valt te werken aan de CO2 footprint van je website. En dat dat begint bij de vormgeving. Een vormgeving die bezoekers aanzet tot duurzaam gedrag. Als de designer alle checks heeft afgevinkt is development aan de beurt.

En die checklist voor de developer is ook een serieuze:

  • Schrijf schone code
  • Gebruik duurzame bestandsformaten
  • Maak gebruik van caching
  • Voorkom onnodige bestanden
  • Maak gebruik van structured data
  • Laad geen onnodige marketingcookies in

🧼 Schrijf schone code

Onnodige code is... niet nodig. Schone code is niets anders dan het schrijven van code die minimaal noodzakelijk is. Elk bezoek roept namelijk de server aan waar de website staat opgeslagen. Bevat je website veel onnodige code, dan kost dat bij ieder bezoek extra tijd en energie.

  • Dat heeft gevolgen voor de laadtijd.
  • Dat heeft gevolgen voor de gebruikerservaring.
  • Dat heeft gevolgen voor de conversie.

Datzelfde geldt voor CSS bestanden, waar kleuren, lettertypen, marges enzovoort in worden doorgegeven. Bevat je website meerdere CSS bestanden, dan kost dat - net zoals bij onnodige code - extra verzoeken bij de server met de bijbehorende gevolgen. Verstandig dus om de CSS bestanden te combineren in één bestand*.

Dan heb je ook nog de HTML. Schoon je code op met het comprimeren van je HTML bestand. Hiermee verwijder je spaties, nieuwe regels, opmerkingen, oftewel: onnodige ruimte. Je HTML bestand wordt kleiner. Je verzoek bij de server wordt sneller volbracht.

📼 Gebruik duurzame bestandsformaten

Iedere website bevat afbeeldingen, illustraties en video’s. Beeld zegt nu eenmaal meer dan 1000 woorden, maar bevat ook ook heel wat meer bytes dan woorden. Ze nemen daarmee de grootste ruimte in op de server.

Ze zijn het meest intensief om op te roepen.Daar valt veel te winnen. Als webredacteur met het uploaden van het juiste formaat - vraag gerust de ideale formaten op bij je webbureau.

Als developer met het gebruik maken duurzame bestandsformaten - in plaats van png, jpg en mp4. Bestandsformaten met een hoge kwaliteit, dankzij betere compressie, met een veel kleiner bestandsformaat dan de traditionele bestandstypen:

  • SVG voor logo’s, illustraties, icons en graphics;
  • WebP voor afbeeldingen; en
  • WebM voor video’s.

Google ontwikkelde WebP en WebM om laadtijden te verminderen.

🧐 Maak gebruik van caching

Gegevens opslaan voor hergebruik. Klinkt duurzaam. Dat is het ook.

Stel, je bezoekt een website. Dan gebeurt er van alles: de server ontvangt en verwerkt je verzoek, maakt een HTML-bestand van de pagina en stuurt deze naar de browser waar jij naar kijkt. Dat kost allemaal energie.

Als de website gebruik maakt van caching en je gaat later nog eens naar diezelfde pagina, dan toont de server het HTML-bestand dat hij al eerder heeft aangemaakt. Dan hoeft de server de pagina niet opnieuw samen te stellen, en kan hij de vorige versie meteen oplepelen

Zonder dat jij er iets van merkt.

Goed voor de performance, goed voor de conversie, goed voor de positie in zoekmachines. Én het kost veel minder rekenkracht. Win-win-win-win dus.

Caching kan toegepast worden op browserniveau én op serverniveau. Daarnaast zijn er verschillende technieken. Mooie termen om een apart blog aan te wijden.

📂 Voorkom onnodige bestanden

Je website is geen archief. Alles wat je niet gebruikt, weg ermee.

Onnodige thema’s, plugins die je niet gebruikt, pagina’s die al maanden in concept staan en een grote hoeveelheid afbeeldingen in je media-library die je niet gebruikt. Hoe meer onnodige bestanden, hoe meer energie er gaat naar opslag.

Dat kan nooit duurzaam zijn. Wat wel duurzaam is, misschien nog wel duurzamer dan opschonen: oude content updaten!

🧱 Gestructureerde data

Marketeers kennen de term: structured data. Deze data geeft extra context aan de inhoud van je website. Met specifieke tags en markup aan elementen helpt dit zoekmachines beter te begrijpen waar je website over gaat.

Met behulp van structured data stemmen zoekmachines het zoekgedrag veel beter af op de inhoud van websites. Dat betekent dat bezoekers minder websites hoeven te bezoeken om in hun behoefte te voorzien.

Dat is duurzaam.

🍪 Laad geen onnodige marketingcookies in

Als marketeer wil je alles weten van je bezoekers.

Want als je weet hoe je bezoekers de website gebruiken en welke reis ze afleggen om over te gaan tot conversie, kun je daarop inspelen.

En die conversie omhoog krikken. Maar… het inladen van marketingcookies, zoals bijvoorbeeld facebook pixel, Analytics, Hotjar kost energie. En dat - daar is ie weer:

  • heeft gevolgen voor de laadtijd.
  • heeft gevolgen voor de gebruikerservaring.
  • heeft gevolgen voor de conversie.

Dus als je niets met die data doet of je hebt er geen plan mee: weg ermee.

Als dit allemaal is afgevinkt hoef je alleen nog voor een duurzame host te kiezen. Oh.. en redactioneel is het ook geen overbodige luxe om je te verdiepen in een duurzame aanpak! Daarover in een volgend blog meer.

💡 *Gebruik je http/1 dan is het - omdat je niet tegelijkertijd meerdere bestanden kan inladen - verstandig om de CSS bestanden te combineren in één bestand. Gebruik je http/2 dan kan dat wel. In dat geval wordt je site juist sneller als je je de CSS bestanden opknipt, omdat het al die bestandjes tegelijkertijd kan binnenhalen. Gelukkig wordt http/2 steeds vaker gebruikt.
Thijs Avatar

Thijs Leydens is mede-oprichter van Slik en begeleidt alweer zo’n twaalf jaar stagiairs en afstudeerders. Hij is binnen Slik verder verantwoordelijk voor creatieve, commerciële en personele zaken.