Vriend Nico wees me laatst op de website van saint-gobain.com: Ze zeggen een duurzame website te hebben, maar hij vroeg zich af of dat ook echt zo is. Hij stuurde een pagina mee waarin ze meer uitleg geven over de duurzame stappen die ze op dit moment zetten, en uit nieuwsgierigheid heb ik natuurlijk deze site even door mijn eigen Ecotool gehaald. Kleine disclaimer: Dit artikel niet bedoeld om te shamen of te bashen – het is puur nieuwsgierigheid, waar je een paar lessen uit kunt halen!
Over Saint-Gobain
Ik ben niet bekend met Saint-Gobain, maar na een minuutje inlezen begrijp ik dat ze zich bezig houden met duurzame bouw en renovatie: circulariteit, en zo weinig mogelijk resources zo efficient mogelijk gebruiken. Klinkt goed! Heb verder niet onderzocht of dat echt waar is of greenwashing. Dat is niet mijn taak. Ik kies ervoor om mensen te vertrouwen.
Wat zeggen ze zelf op hun website?
Nico was zo vriendelijk om de betreffende pagina even mee te sturen met zijn berichtje: https://www.saint-gobain.com/en/eco-conception. Hier doet Saint-Gobain uit de doeken wat ze doen om hun website te verduurzamen: “Met eco-design richten we ons op digitale efficiëntie: onze tools moeten met zo weinig mogelijk resources hun doel vervullen.”
Deze stappen hebben ze zelf al gezet:
Wat vind ik hiervan?
Ik heb de site bekeken in Firefox op een Macbook. Mijn feedback is daarop gebaseerd.
Dark mode
Dark mode is zinvol als een website wordt bekeken op een oled-scherm, of met een andere techniek waar je daadwerkelijk de losse pixels aan en uit kunt zetten. Dan kan dark mode serieus energie besparen op het apparaat van de eindgebruiker. Als je een scherm met een backlight hebt, maak het geen verschil.
De dark mode knop is in de “above primary header” sectie geplaatst. Op zich een logische plek, maar om meer effect te hebben, zou ik die sectie sticky maken, of de knop lostrekken en sticky maken. Of nog beter: dark mode first! Dus dat je bewust de switch om moet zetten als je light mode wilt bekijken.
Reducing the number of elements
Ik weet natuurlijk niet waar ze mee begonnen, maar zorgen dat je pagina’s uit minder assets bestaat is bijna altijd wel zinvol. Hoe groter de reductie, hoe meer impact.
Voor iedere asset waaruit een pagina bestaat, doet de browser een verzoekje aan de server (request). De server antwoordt dan door de asset terug te sturen (response). Iedere asset die geladen wordt, heeft een request- en response header met belangrijke informatie voor de server en voor de browser. Per asset gaat dit grofweg om 2 kB. Niet heel veel dus.
Maar als een pagina dus uit heel veel assets (“elements”) bestaat, dan dat dus flink oplopen! Ik heb ook wel eens pagina’s doorgemeten die uit meer dan honderd assets bestaan, dat is dus al meer dan 200 kB alleen aan headers.
Optimizing fonts
Ook altijd zinvol. Iedere optimalisatie die een reductie van het aantal kilobytes inhoudt, is goed! Voor zover ik kan zien zijn al hun fonts in het WOFF2 formaat en mooi licht van gewicht.
Om nog verder te optimaliseren, zouden ze er nog voor kunnen kiezen om universal system fonts te gebruiken op plekken waar het verschil voor de branding niet zoveel uitmaakt of niet/nauwelijks opgemerkt zou worden. Dan hoeven er überhaupt minder fonts als asset meegestuurd te worden.
Reducing the number of steps
Ook een zinvolle actie, die een hoop verschil kan maken. Simpelweg door te zorgen dat mensen sneller kunnen vinden wat ze zoeken, reduceer je het aantal nutteloze paginabezoeken.
Optimising network queries
Dit is zo’n algemene stelling dat je er niet echt iets over kunt zeggen.
Reducing the use of Javascript
Ook een zinvolle optimalisatie. Soms wordt Javascript gebruikt voor zinvolle interactie. Soms alleen om fancy te doen. Het verminderen van Javascript zorgt dat er minder processing power nodig is om een pagina te bezoeken / gebruiken. Op dit vlak geldt: meer statisch = meer duurzaam.
Optimising the management of our CMS
Sint Gobain maakt gebruik van Drupal. Ik heb daar te weinig ervaring mee om er iets over te kunnen zeggen wat betreft mogelijkheden om te verduurzamen. Wel ervaar ik dat hun site significant sneller is dan een andere Drupal-site waar ik als vrijwilliger veel mee te maken heb.
Maar dat kan meerdere oorzaken hebben, dat kan ook aan iets anders liggen dan het gebruike CMS, en in hoeverre dat wel of niet is geoptimaliseerd. En geoptimaliseerd voor wat precies, eigenlijk? Snelheid hoeft niet per se energiezuiniger te zijn namelijk.
No video hosted directly on our servers
Dit vind ik niet echt een verduurzaming. Het hangt er heel erg van af hoe je de video toont. Of je de video nou op je eigen server of op andermans server (Youtube, Vimeo) host, ruimte neemt hij toch wel in. Wat dat betreft scheelt het alleen in je eigen hostingkosten, omdat je serverruimte minder snel volloopt.
Als je je video zelf host en de preload setting op “auto” laat staan, of nog erger: automatisch afspeelt, dan is dat inderdaad niet zo duurzaam. Video’s worden dan sowieso van de server gedownload, of je ze als bezoeker nou wel of niet bekijkt. Dat kan om vele megabytes gaan. Vergelijk je dit met hosten bij Youtube/Vimeo en je video vervolgens embedden, dan is dat inderdaad duurzamer. Dat laatste is nog steeds aan de zware kant (je zit met behoorlijk zware scripts voor de geavanceerde playerfuncties en tracking scripts), maar waarschijnlijk lichter dan je video’s op de zonet genoemde manier zelf hosten.
Host je je video’s zelf en maak gebruik van preload=none of preload=meta, en je speelt niks automatisch af, dan wordt het een heel ander verhaal. Ik heb een onderzoekje gedaan met audio (Spotify embed versus zelf hosten), waarin je goed kunt zien wat het effect van al deze verschillende methodes is. Principe is hetzelfde voor video.
No newsletters sent from our website
Ook dit is meer het verplaatsen van impact dan het verminderen. Wel kan het verschil maken als de plugin die je anders zou gebruiken voor het versturen van je nieuwsbrief vanaf je website, daadwerkelijk op iedere pagina onnodige scripts zou plaatsen. Maar dat is dan weer zo’n edge case dat ik denk van “tsja, moet ik echt deze hypothetische mogelijkheid gaan bespreken als concrete verduurzaming hier?” Ook als je externe software gebruikt voor je emailnieuwsbrief, ontkom je er niet aan dat er minimaal een klein scriptje geactiveerd moet worden wanneer iemand zich inschrijft, simpelweg om die gegevens te verzenden.
Wat ik mis: Optimizing images
Wat schittert door afwezigheid: Het optimaliseren van afbeeldingen. Saint-Gobain heeft een hele rits technische verbeteringen doorgevoerd, maar een van de makkelijkste dingen over het hoofd gezien. Ik heb de website even door mijn eigen Ecotool gegooid (zie resultaten hieronder) en hier valt nog een hoop te winnen voor ze.
Wat ze wel doen, is gebruik maken van de functie sourceset: dat er afhankelijk van de grootte van een viewport (heel kort door de bocht de grootte van je scherm) een andere grootte afbeelding wordt gebruikt. In de praktijk betekent dat dat er op mobiel doorgaans kleinere afbeeldingen worden geladen dan op een desktop.
Wat zeggen de cijfers?
Cijfers die Saint-Gobain deelt
Saint-Gobain deelt zelf 2 screeshots: 1 van websitecarbon.com en 1 van ecoindex.fr. Maar ik mis hier flink wat context, belangrijkste: voor welke pagina de resultaten zijn die ze tonen. Beide tools zijn namelijk gemaakt om losse webpagina’s door te meten, ze meten niet je volledige website. De getoonde getallen zeggen dus slechts alleen iets over de pagina die in de tool is ingevoerd. Helaas is die in beide gevallen van de screenshot afgeknipt.
Afgezien daarvan, zijn het geen heel slechte getallen. Maar wel selectief en niet 100% transparant en volledig.
Wat zegt de Digihobbit Ecotool?
Natuurlijk heb ik deze site ook even door mijn eigen Ecotool gegooid. Dit zijn de cijfers die daar uitkomen:
Paginagewicht | CO2-uitstoot per bezoek | Energielabel | |
---|---|---|---|
Gemiddelde paginagrootte | 1,076.94 kB | 0.385 g | C |
Zwaarste pagina | 3,417.61 kB | 1.221 g | F |
Lichtste pagina | 528.24 kB | 0.189 g | B |
In totaal zijn er 572 pagina’s doorgemeten. Hieronder een samenvatting van hoeveel pagina’s een bepaald energielabel hebben:
Label | Paginagewicht | Gram CO2 per pageview | Aantal pagina’s |
---|---|---|---|
A+ | < 272,51 kB | < 0,095 g | 0 |
A | 272,51 – 531,15 kB | 0,095 – 0,186 g | 0 |
B | 531,15 – 975,85 kB | 0,186 – 0,341 g | 347 |
C | 975,85 – 1410,39 kB | 0,341 – 0,493 g | 148 |
D | 1410,39 – 1875,01 kB | 0,493 – 0,656 g | 35 |
E | 1875,01 – 2419,56 kB | 0,656 – 0,846 g | 25 |
F | ≥ 2419,57 kB | ≥ 0,847 g | 17 |
Gemiddeld krijgt deze website een label C van de Digihobbit Ecotool. Als vuistregel houd ik aan “label A+ tot B is duurzaam”. Deze website is dus nog niet duurzaam te noemen, maar ook absoluut niet het slechtste wat ik heb gezien. Een groot deel van het paginagewicht van de zwaardere pagina’s komt door afbeeldingen.
Conclusie en verbeterpunten
Aan het eind van hun pagina zeggen ze dat ze enorme progress hebben gemaakt, en dat ze daarmee door willen gaan. Jammer dat ze geen getallen laten zien van hoe het er eerst voor stond (voor/na vergelijkingen doen het altijd goed), dus over die progress kan ik helaas niks zeggen.
Waar ze nu staan vind ik al behoorlijk goed! En ik vind het prijzenswaardig dat ze het niet als een project zien, maar als een proces.
Mijn advies zou zijn om nu eerst te focussen op het optimaliseren van afbeeldingen (en in sommige gevallen ook schalen, maar dat doen ze overall best prima). Zo zie ik bijvoorbeeld foto’s in PNG-formaat – een doodzonde! WEBP zou hier veel zuiniger zijn. Ook zou ik Saint Gobain aanraden om kritisch te kijken naar de hoeveelheid afbeeldingen op sommige pagina’s. Dit zijn er best wel veel. Je hebt lang niet overal foto’s nodig.
Bronnen
Wil jij inzicht in de CO2-uitstoot van jouw website? Kun jij wel praktische, persoonlijke handvatten gebruiken om jouw website te verduurzamen? Vraag dan een Website Sustainability Analyse aan!