Weekend. Paul en ik zitten op de bank. “Jezus, deze webpagina is gewoon 105 MB!”
“Wait, what? Megabyte? Niet kilobyte?”
“Nee serieus, megabyte!”
“Welke website? Heb je hem door Digital Beacon getrokken?”
“Ja. Onder De Radar Festival.”
“Ohjezus, stuur door, die wil ik wel eens even door de Ecotool trekken.”
Disclaimer: Deze blogpost is niet bedoeld om te shamen. Ik streef er altijd naar om het te brengen als een leermoment, en niet alleen te benoemen wat er beter kan, maar daar ook daadwerkelijk actionable tips bij te geven.
En ik dacht dat de 51 MB die ik laatst had gemeten voor een webpagina al dramatisch was… Iemand in de WhatsApp conversatie waar Paul in zat, gaf nog een sneer richting WordPress. Onterecht in mijn ogen – met WordPress kun je ook heel nette, lichtgewicht, energiezuinige websites bouwen. Als je een beetje weet wat je doet.
WordPress is een heel gebruikersvriendelijk platform. Zo gemaakt dat iedereen en iedereens moeder een website kan bouwen. Zonder ook maar enige kennis te hebben van best practices, of je bewust je zijn van de impact en de nadelen van een slechtgebouwde website.
Zo’n zware website is namelijk niet alleen slecht voor het milieu, maar ook voor je websitesnelheid, gebruikerservaring, zoekmachineoptimalisatie. Stel dat je daar op het festival zelf staat, je wilt het programma checken op je telefoon, met de brakke overbelaste wifi die ze daar hebben opgehangen, dan duurt het echt retelang voordat je iedere pagina hebt geladen. Bekijk je deze website op 3-4-5G, dan ben je met enkele pagina’s bekijken al door je halve data-abonnement heen! Zuur.
Maargoed, ik was benieuwd of de hele website zo’n drama was, of alleen de homepage. En of de resultaten van de Ecotool en Digital Beacon het ongeveer met elkaar eens waren. En het is natuurlijk een fantastisch leermoment voor iedereen die websites bouwt.
Ecotool resultaten voor onderderadarfestival.nl
Het is geen heel uitgebreide website, er zijn 17 pagina’s doorgemeten.
| Paginagewicht | CO2-uitstoot per bezoek | Energielabel | |
|---|---|---|---|
| Gemiddelde paginagrootte | 26,918.06 kB = 26,9 MB | 9.614 g | F |
| Zwaarste pagina | 94,912.51 kB = 94,9 MB | 33.897 g | F |
| Lichtste pagina | 12,862.42 kB = 12,9 MB | 4.594 g | F |
De Ecotool heeft net wat andere parameters dan Digital Beacon, dus die meet geen 105 MB, maar 95 MB voor de homepage, en 27 MB gemiddeld per pagina is nog steeds niet mals!
Hoe komt dit? Wat gaat hier verkeerd?
Afbeeldingen
Er worden op iedere pagina ongelofelijk veel en vooral zware, ongeschaalde en ongeoptimaliseerde afbeeldingen gebruikt. Zelfs op de pagina’s met de privacy policy en de cookie policy worden respectievelijk 30 en 24 afbeeldingen ingeladen, goed voor 22 en 20 MB aan gewicht. Dat verbaasde mij enorm, omdat dit doorgaans pagina’s zijn met enkel tekst (hooguit een paar logo’s en icoontjes in header en footer) die slechts enkele kB zwaar zijn.
Ga ik echter naar de privacy policy pagina, dan zie ik daar 3-4 afbeeldingen: Het Onder De Radar logo in de header, een Basic Grooves logo in de footer, en rechtsbovenin nog een icoontje met de Nederlandse vlag voor taalkeuze (maar die functie werkt niet, bij nadere inspectie). En een favicon.
Er worden echter enorm veel foto’s ingeladen die helemaal niet getoond worden. Ongeschaald, ongeoptimaliseerd, sommige zelfs in PNG-formaat. Waarom?! Ook is de achtergrond een PNG-afbeelding van meer dan 3 MB, en niet een HEX-kleur of gradient, wat slechts enkele tekens in de CSS code is.
Cookie policy pagina precies hetzelfde verhaal.
De homepagina slaat echt alles met meer dan 77 MB aan afbeeldingen. 119 stuks in totaal. Veel foto’s ongeschaald, veel foto’s in PNG-formaat (argh!), en slechts enkele foto’s zijn lazy loading.
Media
De homepage heeft een automatisch afspelende video above the fold, goed voor 16,6 MB. Ouch. Ik heb een mening over automatisch afspelende video’s, namelijk dat het niet cool is om je bezoekers dat door de strot te duwen, en hier kun je lezen waarom + hoe het beter kan.
Scripts
Scripts zijn consequent behoorlijk zwaar, ongeveer 784 kB op iedere pagina.
Vergelijking met Digital Beacon
Paul had dus voor de lol die homepagina even door Digital Beacon getrokken, en daar kwam 105 MB uit. Ecotool geeft 95 MB aan. Waar zit dat verschil in?
| Digital Beacon | Ecotool | |
|---|---|---|
| Afbeeldingen | 89,41 MB | 167 stuks | 77285.42 kB (77,3 MB) | 119 stuks |
| Scripts | 4,69 MB | 63 stuks | 784.72 kB | 33 stuks |
| Stylesheets | 240.41 kB | 13 stuks | 53.80 kB | 9 stuks |
| Fonts | 207.4 kB | 12 stuks | 64.99 kB | 2 stuks |
| Document | 191.37 kB | 8 stuks | 46.30 kB | 9 stuks |
| Media | 10.98 MB | 2 stuks | 16652.96 kB (16,7 MB) | 1 stuks |
| Fetch / XHR | 138.92 kB | 36 stuks | 0 kB | 0 stuks |
| Overig | 2.85 kB | 5 stuks | 24.31 kB | 11 stuks |
| Totaal | 105.85 MB | 94912.51 kB (94,9 MB) |
Je zit dat de algemene vibe van deze resultaten wel overeenkomt, maar dat er toch behoorlijke verschillen in zitten. Waar kan dat door komen? Iedere website CO2-tool heeft bepaalde parameters, randvoorwaarden, om een meting uit te voeren. Ik kan helaas niet de code van Digital Beacon inzien, maar dit zijn mijn theorieën van dingen die kunnen meespelen:
Tips
Okee, leuk uitstapje, die vergelijking van Ecotool en Digital Beacon, maar wat kan Onder De Radar Festival nou verbeteren aan hun website?
Afbeeldingen
Een classic, waar ik het al heel vaak over heb gehad. Wees kritisch in wat je daadwerkelijk nodig hebt, en schaal + optimaliseer voordat je je afbeeldingen uploadt. En please please please zorg ervoor dat afbeeldingen die niet getoond worden, ook niet geladen worden op een pagina!
Ik heb hier een enorme hoeveelheid tips en tutorials voor:
Scripts
Media
Kies er bij voorkeur voor om geen automatisch afspelende video’s te gebruiken, hoe leuk het ook is. En zorg voor de juiste preload instellingen. Ook hier heb ik meerdere artikelen aan gewijd:
Wil jij een website of webshop laten bouwen die niet alleen mooi en functioneel is, maar ook met aandacht voor duurzaamheid gebouwd is? Digihobbit at your service!