Wat hebben plugins, Google Analytics, geanimeerde elementen en andere ‘leukigheidjes’ op de website gemeen? Een wat is hun impact op het energie verbruik?
We gaan onze website eens kritisch bekijken op het gebruik van scripts. Via digitalbeacon.co zagen we reeds in een eerder artikel dat scripts op afbeeldingen na het meeste gewicht hadden met in totaal 434.14 kilobytes. Bijna een halve MB.
Wat bedoelen we met ‘scripts’
Met scripts verwijs ik naar de code die gedownload word om vervolgens op jouw apparaat uitgevoerd te worden. Ik richt me nu op het gewicht van de code (de hoeveelheid) en niet op de uitvoering van het script op je apparaat.
Vaak worden scripts gebruikt om de gebruikservaring van de website te verbeteren, de User eXperience ofwel UX.
Op onze website vinden we weinig toepassingen waar scripting echt grote meerwaarde biedt. Waar we het gebruiken zouden we met 100 regels aan scripts moeten toekunnen (grove schatting). Laten we het ruim nemen, 10 kb (~10.000 tekens aan scripts) lijkt me ruim. Toch hebben we 43x meer gewicht.
Hoe komen we aan die scripts?
We gebruiken voor de website WordPress met een thema en plugins. Niets daarvan hebben we zelf geschreven. Het is bij elkaar gezocht en aan elkaar geknoopt. Elk onderdeel is weer door een andere ontwikkelaar gemaakt. Velen hebben hun eigen manier van ontwikkelen. Verder komen plugins vaak met heel veel mogelijkheden die zelden allemaal gebruikt worden – de scripts daarvoor komen soms wel in zijn geheel in de website. Dan heb je nog de frameworks die vaak echt overbodig zijn. Zie dat als scripts om scripts te helpen maken. Ook hier komt gemak met een prijs. Een prijs die wij dus in veel situaties te hoog vinden, onnodig verbruik van energie.
In de onderstaande afbeelding het gewicht van enkele frameworks. Dat is de prijs dus om iets mogelijk te maken, maar het moet nog wel gemaakt worden.
Bron: https://dev.to/swiip/the-weight-of-js-1aad
Overigens een mooie post voor ontwikkelaars die meer willen weten over het ‘gewicht’ van JS frameworks.
Deze rommelige situatie die ontstaat pleit voor een stukje maatwerk en bewuste keuzes. Dat moet gemakkelijker worden in de toekomst. Eén van onze doelstellingen is het creëren van bewustwording bij ontwikkelaars, zij kunnen heel veel betekenen in het groener maken van internet. Ik zoom vooral nu even in op wat we redelijk makkelijk zelf kunnen doen zonder al te veel concessies te maken.
Wat gedaan
We hebben als eerste onnodige plugins uitgeschakeld of waar we prima zonder mee konden leven. Hier en daar hebben we gekozen voor een andere manier van presenteren, misschien minder fancy, maar ook lichter en sneller. Zo hebben we de slideshow uitgeschakeld in de header en er 1 afbeeldingen van gemaakt. Dat scheelt ook nog eens het laden van 3 afbeeldingen. Ook hebben we een plugin uitgeschakeld die op een ‘fancy’ wijze ons team presenteert. Dat ‘opleuken’ mbv scripts kan met een hoop onnodige overhead komen.
Tussenstand
Het gewicht van onze website is 669,02 KB.
En verder
Het meten van het bezoek aan je website doen we allemaal. Google Analytics wordt vaak gebruikt en komt ook met scripting – het script wat geladen wordt wat de data naar Google Analytics stuurt. We vervangen deze voor Cabin. Cabin is licht, privacy first en maakt een schatting van de co2 uitstoot per pagina. Het is basic, maar bevat alles voor een kleine website. Deze scripts vallen overigens onder ‘Third Party’ requests in de afbeelding hierboven. Cabin is zo’n 26x lichter.
Omdat we nu geen cookies plaatsen en niets opslaan wat persoonlijk is, oftewel, we tracken niet kan ook onze cookie notice uitgeschakeld worden.
Schoon, netjes en met respect voor bezoeker. Een ander voordeel is dat met het niet plaatsen van een cookie de website beter gecached kan worden en deze nog sneller en energiezuiniger wordt.
Verder heb ik Cufon uitgeschakeld, dit kwam met ons thema mee. Cufon is een verouderde manier om een eigen lettertype weer te geven. Er zijn meer moderne manieren om dit te bereiken. Wees je er echter van bewust dat lettertypes ook data zijn!
Tot slot heb ik een plugin geïnstalleerd die grote winst kan betekenen. Lazy loading voor afbeeldingen en iframes. Dit zorgt ervoor dat afbeeldingen op een pagina alleen geladen worden als de bezoeker daadwerkelijk naar beneden scrolt om en ze in beeld komen. Soms kan een oplossing zo simpel zijn.
Eindstand
Na de tussenstand heb ik met de genomen maatregelen nog meer dan 50% winst kunnen behalen. De eindstand is nu: Schoner dan 84% van de webpagina’s getest door websitecarbon.com.
