Hoe (on)duurzaam is een grote stylesheet?

Wanneer je naar de duurzaamheid van een website kijkt, kun je je aandacht op heel veel verschillende dingen richten. De hosting bijvoorbeeld. Hoe groot de website is, of wat er allemaal op staat. Hoe efficiënt je website voor je werkt. Het zijn allemaal dingen die in meer of mindere mate duurzaam of onduurzaam kunnen zijn, en afhankelijk van je perspectief kun je er ook meer of minder prioriteit aan geven. Vandaag nemen we de duurzaamheid van de stylesheet onder de loep.

Een tijdje geleden had ik het met mijn vader over een website die ik in het allereerste begin van mijn webdesigncarière had gebouwd. Als tryout, of ik dit leuk vond om voor anderen te doen. Om een beetje feeling te krijgen met het samenwerkingsproces. Toen ik nog totaal niet bezig was met duurzaamheid implementeren in webdesign, dat moet ik er wel even bij zeggen.

Papa is ook geen onbekende met computers, websites, code. I mean, hij werkt zelf in de ICT als developer. (Maar dan op een totaal ander gebied.) We hadden het erover dat ik me tegenwoordig focus op duurzaam webdesign, en hij vertelde dat het hem opviel dat die eerste website die ik had gebouwd “zo’n grote stylesheet heeft als ik hem in developer mode bekijk”.

Een legit opmerking, en ik snap waar hij vandaan komt. Maar in mijn ogen lag de focus totaal verkeerd.

Wat is een stylesheet?

Een webpagina bestaat in principe uit twee stukken code: de HTML, die de structuur aangeeft, en de CSS, die over de opmaak gaat. De CSS, dat is de stylesheet. Normaal gesproken heeft een website voor alle pagina’s een overkoepelende stylesheet waar constant naar verwezen wordt, zodat al die pagina’s netjes hetzelfde worden opgemaakt. Dan hoef je dat niet overal apart te doen. Gaat gewoon automatisch goed.

Webdesign vroeger en nu

Maar nu zitten we met een mooi stukje perspectiefverschil tussen verschillende generaties. Mijn vader is natuurlijk van de generatie waar computers net in opkomst waren, en in eerste instantie websites nog from scratch met de hand in elkaar getypt werden. Voor machines die allemaal zo ongeveer dezelfde schermgrootte hadden. In een tijd dat bepaalde moderne functionaliteitein nog helemaal niet bestonden. Natuurlijk is dat qua code veel lichtgewichter. Ik heb als tiener en begin twintiger ook nog from scratch mijn eigen persoonlijke websites gebouwd, voordat ik WordPress leerde kennen.

Maar ontwikkelingen op het gebied van technologie en internet gaat zo bizar snel. Tegenwoordig moeten websites responsive zijn, zich kunnen aanpassen aan iedere mogelijke schermgrootte. Ieder merk en model telefoon, tablet of computer is weer anders. Dat is al wat meer code dan vroeger.

Het oog wil ook wat – waar je in de beginperiode van het internet nog wel wegkwam met basic, onopgemaakte tekst, is dat allang niet meer zo. Als je als bedrijf of organisatie een website hebt, moet die aansluiten op je huisstijl, je branding. Een stukje herkenbaarheid voor je bezoeker.

En daarnaast natuurlijk een hoop nieuwe, moderne, advanced functionaliteiten om de gebruikservaring prettiger, gemakkelijker of veiliger te maken. Denk aan sticky headers, webshops, persoonlijke accounts.

Natuurlijk heb je tegenwoordig fijne systemen die dit allemaal toegankelijk maken, zoals WordPress. Zo hoef je niet zelf voor iedere pagina die je bouwt al die code te typen voor je header, footer, body, en ook nog eens te denken aan die responsive layout en veiligheid. I mean, niemand in zijn right mind gaat opnieuw het wiel uitvinden als er supergoede flexibele, aanpasbare systemen bestaan.

Die stylesheet is helemaal niet zo groot

Ja, vergeleken met een ouderwetse website bestaan moderne, met WordPress gebouwde websites uit flink meer code. Dat ga ik niet ontkennen. Maar die hoeveelheid code is – ook nu nog – slechts een fractie van de totale grootte van een webpagina. Op voorwaarde dat je werkt met een goed, efficiënt geschreven, lichtgewicht WordPress thema en eventueel een net zo efficiënte en lichtgewichte aanvullende “blokkendoos”.

De grootte van een webpagina, als die opgevraagd word door de computer van de bezoeker, en vervolgens wordt verstuurd door de server, die wordt veel meer bepaald door de inhoud. En dan niet de tekst, maar vooral de media. Afbeeldingen. Audio. Video. Hoe groot, hoeveel, en hoe zijn ze geïmplementeerd? Dáár zit de hoofdmoot van je data en dus de CO2-uitstoot.

Doorgaans niet in je stylesheet, tenzij je daar écht heel heel héél rare dingen doet.

Duurzaamheidscheck

Ik heb de homepagina van de betreffende website even door de inspector van Cabin gehaald. (Eerst door Beacon, maar die gaf een vertekend beeld door bepaalde cachingplugins.) Dit is wat daar uit komt:

Om dat een beetje in perspectief te plaatsen: Beacon hanteert de volgende guidelines:

Tegenwoordig streef ik er altijd naar om op zijn minst onder die 1.0 gram te blijven, liefst natuurlijk zo laag mogelijk, maar dat is voor een deel natuurlijk ook afhankelijk van de wensen van de klant.

Puur bij toeval heb ik destijds die specifieke pagina best behoorlijk duurzaam ontworpen. For the record: Vandaag zou ik dat totaal anders doen, maar dat is altijd met alles wat je creëert en na een paar jaar weer tegenkomt… Zo gaat dat als je constant bezig bent met nieuwe dingen leren.

Zoals je kunt zien zijn het niet de stylesheets die voor de meeste data zorgen. Dat zijn de afbeeldingen, by far.

(Voor de beginner: Er gaan 1000 bytes (B) in een kilobyte (kB) en 1000 kilobytes in een megabyte (MB).)

Na even een stapje verder kijken bleek dat de titelfoto wel erg groot was. Daar valt dus nog een hoop winst te behalen. Zelf upload ik paginabrede foto’s eigenlijk niet groter dan 1440 pixels breed, met uitzondering 1920 pixels als de kwaliteit wat meer prioriteit heeft.

Tips voor een “duurzame” stylesheet

In mijn ogen is een stylesheet niet per se duurzaam of onduurzaam. Het is veel zinniger om te kijken naar losse, complete webpagina’s, en te kijken waar de verbeterpunten zitten.

Wel kun je, om de grootte te beperken (en daarmee het energieverbruik en de uitstoot) hierop letten: