Een energiezuinig web

Hoeveel weet je over energie?

Waarom kosten websites energie? Natuurlijk moeten ze worden ontworpen, ontwikkeld, geïmplementeerd en uitgevoerd op servers en apparaten. Maar laten we het bekijken vanuit een natuurkundig perspectief. Wat verbruikt eigenlijk energie? Het is een CPU of GPU die berekeningen moet uitvoeren, het is een netwerk van servers, routers en wifi-antennes die met elkaar moeten verbinden, het zijn schermen die fotonen moeten produceren om een website op te lichten en weer te geven. Dus in elke fase van een website, vanaf het begin tot het bezoek van een gebruiker, moeten we deze aspecten minimaliseren of volledig vermijden.

Energie-effici├źntie begint bij het ontwerp

Afbeeldingen, video's, aangepaste lettertypes, ze kosten allemaal energie om te downloaden, te verwerken en weer te geven. Hoe minder bronnen je gebruikt, hoe meer energie je bespaart.

En niet elk item heeft dezelfde footprint:

  1. afbeeldingen hebben minder energie nodig dan videos
  2. tekst vereist minder dan afbeeldingen
  3. een systeemlettertype vereist minder dan een aangepast lettertype

Minder hulpbronnen zijn niet alleen een goede manier om energie te besparen. Lichtgewicht sites zijn sneller, wat geweldig is voor gebruikers en SEO. Daarnaast zijn sites met veel tekst doorgaans beter toegankelijk.

Herinner je je die fotonen nog? De donkere modus kan tot 20-30% besparen op OLED-schermen. Dus misschien is het tijd om een donker thema voor je website te ontwerpen? Dat staat bij ons in ieder geval hoog op de agenda.

Energiezuinige webontwikkeling in de jaren '20

Weer zijn weer terug in de roaring twenties. Voorbij zijn de dagen dat een ontwikkelaar de ontworpen bronnen eenvoudigweg bewerkt en naar een webserver kopieert. In plaats daarvan vertrouwen we op pakketbeheerders, bouw tools, continuous integration servers, cloud services (zoals een headless CMS), preview-omgevingen en tot slot onze eigen website. Waarschijnlijk is het je wel duidelijk dat al deze dingen energie verbruiken. Het is moeilijk om te ontdekken hoeveel precies, omdat het web afhankelijk is van onderdelen, die weer van andere onderdelen afhankelijk zijn, enzovoorts.

Het mooie is dat we deze moderne ontwikkeltools ook kunnen gebruiken om energie te besparen. We kunnen automatisch kleinere versies van dezelfde video's en afbeeldingen maken, we kunnen ongebruikte code uit onze styling, scripts en lettertypebestanden verwijderen en statische versies van onze sites genereren die alleen die verbonden cloudservices gebruiken tijdens het bouwen.

Kies uit de verschillende opties om energie te besparen

Websites effici├źnt laten draaien

  • Veel webpagina's zijn voor elke bezoeker hetzelfde. Het heeft dus geen zin om elke keer een nieuwe versie van de pagina te genereren. In plaats daarvan genereren we alleen een nieuwe versie van de pagina wanneer de inhoud verandert. Hiervoor gebruiken we statische site generators. Hetzelfde kunnen we doen met server-side caching en een goede cache-busting-strategie. Hierdoor hoeft de server alleen de vooraf gegenereerde / in de cache opgeslagen webpagina te tonen. Dit bespaart veel energie, vooral op veelbezochte sites.

  • Wanneer een gebruiker een pagina bezoekt, moet deze via het netwerk worden getoond. Een verzoek begint in de browser van de gebruiker, gaat via het netwerk naar de server en terug naar de gebruiker. Dit is soms een volledige wereldreis. Om die reis korter te maken, gebruiken we een wereldwijd content delivery network (CDN) om webpagina's te tonen vanaf een server in de buurt van de gebruiker. CDN's zijn heel gemakkelijk te gebruiken met statische sites, omdat ze eenvoudig een kopie van de vooraf gegenereerde pagina's kunnen opslaan. We gebruiken ook zo min mogelijk energie van het netwerk door bronnen te comprimeren met gzip en brotli.

  • Voor dynamische pagina's gebruiken we cloud functions (lambdas) op een edge network. Net als CDN draaien ze dicht bij onze gebruikers. In tegenstelling tot een reguliere server, wordt een cloud function alleen uitgevoerd wanneer deze een verzoek ontvangt. Wanneer er meer verzoeken tegelijkertijd worden gedaan, draaien er meer instanties van de cloud function. Op het moment dat de verzoeken afnemen, worden de cloud functions kleiner. Zo gebruiken we de energie die we nodig hebben alleen wanneer we die nodig hebben.

  • Zodra een gebruiker een bron heeft ontvangen, zorgen we ervoor dat deze deze nooit meer opgevraagd hoef te worden. Dit bereiken we met behulp van client-side caching. We zorgen ervoor dat een resource nooit verandert (of herzien de resourcenaam als dat wel het geval is). Vervolgens vertellen we de browser dat hij het bestand "voor altijd" kan houden (met behulp van 'Cache-Control', 'public, max-age=31536000, immutable').

  • Aan het eind van de dag hebben onze websites nog steeds andere websites nodig om te draaien. Het beste wat we kunnen doen, is ervoor zorgen dat ze op duurzame energie draaien. Onze websites maken deels gebruik van groene hosting providers, dus hier hebben we nog wat werk aan. Controleer of jouw site groene hosting heeft.

Zet in op energiezuinige websites

We blijven de energie-effici├źntie van onze websites verbeteren. En we zetten onze ontwerppartners, hostingproviders en klanten ertoe aan hetzelfde te doen. We streven naar een duurzamer internet. Daarom hebben we bij De Voorhoede allemaal het Sustainable Web Manifesto ondertekend. Dat zou jij ook moeten doen.

Nu tekenen