Wat meet je precies?
Eigenlijk meet je vooral hoeveel data die de browser van een bezoeker binnenhaalt om jouw website (pagina) te kunnen zien. Hoe minder dat is, hoe minder stroom er nodig is. De meeste tools vertalen dat naar een getal, een cijfer of een schatting van de CO2 per bezoek.
Ecograder (uitgebreide website scan)
De eerste tool die ik vaak gebruik is Ecograder. Hierin krijgt je pagina een score van 0 tot 100, samen met een inschatting van de CO2-uitstoot per bezoek. Onder de globale uitkomsten vind je een lijst met concrete verbeterpunten voor je website.
Lijst met verbeterpunten
De verbeterpunten zijn taken als: verminder ongebruikte Javascript code, of verminder ongebruikte CSS code. Bij de verbeterpunten zie je ook de potentiële besparing van deze taak. Erg nuttige informatie als je bezig bent met het optimaliseren van een website.
Naast verbeterpunten ten behoeve van duurzaamheid, geeft Ecograder ook verbeterpunten mee voor de User Experience (UX). Hierin wordt onder andere gekeken naar digitale toegankelijkheid, SEO en of afbeeldingen technisch gezien ook de juiste afmetingen hebben.
Test meerdere pagina’s
Hoewel de homepage vaak een goed beeld geeft van je website, test ik ook altijd een andere andere pagina’s. Zoals bijvoorbeeld een blogpost of een dienstenpagina. Ook hiervoor geldt dat het cijfer een interessante eerste indruk geeft, maar de lijst met verbeterpunten eronder het nuttigst is. Daar staat bijvoorbeeld dat een afbeelding kleiner kan of dat een script het laden ophoudt. Pas je iets aan, dan haal je de pagina er opnieuw doorheen om te zien of het geholpen heeft.
Beta versie (Ecograder Pro)
Ecograder draait op dit moment een open beta van een nieuwe, betaalde versie, Ecograder Pro, waarvoor je een account nodig hebt. De oude gratis versie werkt (op dit moment) gewoon door en scant een losse pagina zonder dat je iets hoeft aan te maken.
Digital Beacon (snelle website scan)
Als ik even snel een pagina wil scannen, dan gebruik ik vaak Digital Beacon. Deze tool geeft je per pagina: de grootte in KB’s of MB’s, een schatting van de CO2-uitstoot per bezoek en een uitsplitsing naar wat die grootte veroorzaakt. Omdat de tool de website pagina voor pagina scant, begin ik meestal met de vaakst bezochte pagina: de homepage.
De totale grootte van de pagina
Eerst kijk ik naar de totale grootte. Voor een pagina met weinig beeld vind ik 200 tot 400 KB netjes. Staan er veel afbeeldingen op, dan loopt dat al snel op naar een MB, en dat is voor zo’n pagina prima, zolang de afbeeldingen goed geoptimaliseerd zijn en passen bij het ontwerp.
Uitsplitsing op techniek
Vervolgens kijk ik naar de techniek. In het rapport staat een uitsplitsing per onderdeel. Daarin zie je meteen of er ergens een uitschieter zit, bijvoorbeeld scripts, afbeeldingen of fonts die zwaarder wegen dan de rest. Springt er iets uit, dan duik ik in de pagina zelf om te achterhalen waar het vandaan komt. Hiervoor maak ik gebruik van de Chrome developer tools. Soms is het een afbeelding die nog strakker kan, soms iets dat op elke pagina meelaadt terwijl dat niet nodig is.
Google PageSpeed Insights
Een andere tool die ik vaak gebruik is Google PageSpeed. Dit is eigenlijk een snelheidstest, maar snelheid en gewicht liggen dicht bij elkaar. Een lichte pagina laadt sneller, dus de score zegt ook iets over hoe efficiënt je pagina is opgebouwd.
Ik kijk vooral naar de uitkomst, de score. Is die goed, dan is er weinig aan de hand. Valt hij tegen, dan lees ik de verbeterpunten eronder om te zien waar het aan ligt. Ik kijk daarbij meestal naar de desktopversie. Een score van 100 is mooi, maar het is geen doel op zich. Het gaat me erom of er een aandachtspunt is, en zo ja, waar.
Website Footprint
Website Footprint is een extensie voor Chrome die je een letter van A tot F geeft terwijl je op een pagina zit. Zelf vind ik dit erg handig voor een snelle indruk, zonder dat je eerst een aparte test hoeft te draaien.
Eén ding is goed om te weten. Als je ingelogd bent op je eigen WordPress-site, telt de extensie het beheergedeelte mee, waardoor de pagina zwaarder lijkt dan hij voor een gewone bezoeker is. Log dus even uit voordat je een oordeel velt.
Wat is een goede uitkomst van de meting?
Dat hangt af van de pagina. Een goede uitkomst voor een blogpost is iets anders dan voor een pagina die vol staat met beeld, en dat is precies waarom ik niet blind op één cijfer stuur.
Op een eenvoudige pagina met weinig afbeeldingen wil ik een A of B zien in Website Footprint, en in Beacon een grootte rond de 200 tot 400 kilobyte. Zie ik daar een D of lager, dan weet ik dat er iets niet klopt en ga ik op zoek naar de oorzaak.
Op een pagina met veel beeld ligt de lat anders. Daar staat de teller zo op een E of F, en dat hoeft geen probleem te zijn. De kunst is dan om elke afbeelding zo licht mogelijk te maken zonder dat dit ten koste gaat van de kwaliteit. Een zwaardere pagina is prima, zolang alle onderdelen op de pagina op de juiste manier geoptimaliseerd zijn.
Blijf je website meten
Een website is nooit af. Maak je een nieuwe pagina of vervang je afbeeldingen, blijf die dan net zo goed optimaliseren als de rest. Meet daarna even opnieuw, dan weet je zeker dat je site licht blijft. Benieuwd hoe je website er nu voor staat of wil je het liever uit handen geven, dan help ik je daar graag bij. Op de pagina je website duurzamer laten maken lees je meer over het verduurzamen van je wesbite.
