Hoe maak je een duurzame website?

Na meer dan tien jaar is Lowtech Magazine aan een nieuw webdesign toe. We grijpen die gelegenheid aan om een website te ontwikkelen die bij de inhoud past. Het nieuwe Lowtech Magazine -- voorlopig alleen toegankelijk in het Engels -- draait op 100% zonne-energie en gaat off-line bij aanhoudend slecht weer. 

---

---

Het energieverbruik van internet blijft toenemen. Enerzijds omdat we sinds de komst van mobiele telefoons, tablets en draadloos internet steeds vaker online zijn.  Vroeger hadden we alleen maar toegang tot het internet als we thuis, op kantoor of in de bibliotheek aan een desktop computer zaten.

Anderzijds blijft de zogenaamde ‘bitsnelheid’ van online media stijgen. Zo vraagt het downloaden van een webpagina nu gemiddeld drie keer meer dataverkeer dan in 2010. Dat is onder meer te wijten aan steeds grotere afbeeldingen en video's in steeds hogere resolutie. Maar ook reclamebooschappen, cookie-waarschuwingen en slordig geschreven code zijn met de vinger te wijzen.

Hernieuwbare energie is niet genoeg

Datahotels laten draaien op zonne-energie of windenergie -- zoals bijvoorbeeld Greenpeace voorstelt in haar jaarlijkse Click Clean rapport -- volstaat niet om het groeiende energieverbruik van internet aan banden te leggen. Om te beginnen verbruikt het internet al drie keer meer energie dan alle windturbines en zonnepanelen wereldwijd produceren.

Daarbij zijn er fossiele brandstoffen nodig om windturbines en zonnepanelen te maken, dus zolang het dataverkeer toeneemt, stijgt ook het gebruik van fossiele brandstoffen. En omdat er niet altijd zon of wind is, moet er ook infrastructuur worden gebouwd voor de opslag van energie – ook dat kost fossiele brandstoffen.

Het zonnepaneel.

Het inzetten van hernieuwbare energie is uiteraard geen slecht idee, maar tegelijk moet ook de kern van het probleem worden aangepakt. De nieuwe website van Low-tech Magazine wil laten zien dat dit perfect mogelijk is. Ze werd gemaakt in samenwerking met web designer Marie Otsuka en kunstenaar Roel Roscam Abbing.

Een afgeslankte website

De nieuwe website is zodanig "afgeslankt" dat de gemiddelde paginagrootte nu zes keer lager ligt dan op de oude website, en ongeveer drie keer lager dan die van de gemiddelde webpagina in 2018.

Dat deden we onder meer door de keuze voor een statische website, een techniek uit de jaren 1990 die veel zuiniger is dan een dynamische website op basis van een database (zoals WordPress). We maken ook gebruik van standaard lettertypes die in de browser zitten.

Verder werden de afbeeldingen ongeveer tien keer "lichter" gemaakt door een oude printtechniek toe te passen: lageresolutiebeelden worden omgezet naar zwart-wit en krijgen dan een steunkleur. 

Zelf Website Hosten

Omdat de nieuwe blog zo energiezuinig is, kan de website bij de auteur thuis in Barcelona worden ‘gehost’, op de eigen internetverbinding én op zonne-energie. Met een op WordPress draaiende blog zou dat te veel energie kosten, maar met een afgeslankte statische website kan het perfect. Bovendien zijn statische websites makkelijker te onderhouden en een stuk moeilijker te hacken.

De website draait op een Olimex A20, een mini-computer die slechts 1 tot 2 watt elektriciteit verbruikt, afhankelijk van het aantal bezoekers. Het actuele energieverbruik van de computer kan op de blog worden geraadpleegd.

De benodigde elektriciteit (24 tot 48 Wh/dag) wordt geleverd door een zonnepaneel van 50 watt-piek op het balkon. Het paneel ontvangt maximaal zes tot zeven uur direct zonlicht, en door de opstelling is de elektriciteitsproductie erg beperkt bij bewolking.

De website, de webserver en de zonneregelaar.

De batterijcapaciteit is zo klein mogelijk gehouden om fossiele brandstoffen te sparen. Voorlopig draait de server op een Li-Po batterij van 24 watt-uur, wat voldoende is om de website 12 tot 24 uur online te houden, afhankelijk van het aantal bezoekers.

Binnenkort wordt de opslagcapaciteit verdubbeld -- zelfs in Barcelona is er 's winters gemiddeld genomen vier keer minder zon dan 's zomers. Bij aanhoudend slecht weer gaat de blog off-line.

We mikken op een "uptime" van 90%, wat betekent dat de website naar schatting 35 dagen per jaar off-line zal zijn. Een batterijmeter en weersvoorspelling helpen de lezers hun bezoek aan de website te plannen. 

Overal Toegankelijk

Een laag energieverbruik is niet het enige voordeel van een afgeslankte website. Ten eerste gaat het downloaden van een webpagina erg snel, ook al staat de server niet op een centrale locatie in het internet. 

Ten tweede is een afgeslankte website ook beter toegankelijk voor mensen met oude computers en trage internetverbindingen. De doorsnee website is nu onbereikbaar voor zowat de helft van de wereldbevolking. Bovendien versnellen steeds "zwaardere" websites de veroudering van computers.

Dat een piepkleine server aangedreven door een zonnepaneel op het balkon heel veel verkeer aan kan, werd al snel na de lancering duidelijk. Of zelfs voor de lancering, want de website belandde op de voorpagina van Hackernews toen ze nog in de steigers stond.

Het resultaat waren meer dan 35.000 bezoekers op 24 uur tijd. Zoveel verkeer zou geheid problemen opleveren met dynamische websites geplaatst bij webhostingbedrijven, tenzij er fors wordt betaald voor extra bandbreedte of een upgrade -- ook al is die maar af en toe nodig.

Broncode en Handleiding

Eén zuinige website maakt het verschil niet, en dus ondernemen we de nodige stappen zodat in principe iedereen het design kan toepassen en aanpassen. Daartoe hebben we de broncode van het design vrijgegeven.

Een vergelijking van dezelfde webpagina op de oude (boven) en nieuwe (beneden) website. De paginagrootte is bijna 7 keer kleiner en de pagina laadt tien keer sneller. Bron: Pingdom.

Roel Roscam Abbing, die zich concentreert op de zogenaamde "back-end" van de website (alles wat achter de schermen zit), schreef een technische handleiding voor zowel hardware als software. Marie Otsuka, die de "front-end" van de website maakt (alles wat zichtbaar is), schrijft een handleiding voor het werken met statische websites.

Ook de zonne-installatie wordt gedocumenteerd. De opbrengst van de zonnepanelen wordt bijgehouden en er wordt momenteel nog met verschillende opstellingen geëxperimenteerd. Het verslag daarvan wordt later gepubliceerd. De blog is een werk in uitvoering en zal dus nog verder worden aangepast. Veranderingen worden geactualiseerd op de About pagina, waar ook alle reacties werden verzameld. 

Wanneer in het Nederlands?

Het nieuwe Low-tech Magazine is voorlopig alleen te raadplegen in het Engels. Hoewel hetzelfde design op de Nederlandstalige blog kan worden toegepast, moeten er ook meer dan 400 artikels van HTML naar Markdown worden omgezet. Dat kost doorgaans een uur per artikel, wat betekent dat er zeker nog 400 uur werk (50 volle werkdagen) in het verschiet liggen.

Dat is wellicht niet realistisch, tenzij het werk kan worden uitbesteed -- en dat kost geld. Of er ook een Nederlandstalige versie komt, en hoe snel dat gaat, zal dus ook in grote mate afhangen van de lezers: zijn jullie bereid om mee te betalen, of niet? Hoewel ook de Nederlandstalige blog dringend aan vernieuwing toe is, kan dat ook veel goedkoper worden opgelost met een dynamische website (met een hoger energieverbruik).

Omdat een lowtech webdesign niet compatibel is met advertentiediensten, staan er op de nieuwe blog geen reclameboodschappen van Google Adsense meer. We hopen die inkomsten te vervangen door donaties, zowel via PayPal als via Patreon. Tot nu toe is ongeveer 20% van de investering in de nieuwe website terugverdiend. 

Kris De Decker

Links: 

• solar.lowtechmagazine.com
• How to build a low-tech website?
• How to build a low-tech website? Software and hardware
• Low-tech Magazine switches to a low-tech, low carbon website [Treehugger]
• The future of web design is less, not more. [Fast Company]

Verwante artikels: 

• Bouw een lowtech internet
• Een internet op zonne-energie
• Een snelheidslimiet voor het internet?
• Hoeveel energie kost de productie van digitale technologie?
• Batterijen maken van zonne-energie een CO2-intensieve energiebron
• Zonnepanelen: steeds goedkoper, maar ook minder duurzaam
• Een huishouden op gelijkstroom?

---

Comments

[Geplaatst door: h.honnest]

Super interessant, integer, innovatief, bewonderenswaardig en nastrevenswaardig.

Enige wat ik me afvraag is of die 35 ingecalculeerde offline dagen niet zullen gaan leiden tot minder raadplegen van de website en dus ook van al die interessante artikelen die erop staan...
In dat geval zou deze lovenswaardige switch van Low Tech Magazine mogelijk juist kunnen leiden tot een vertraging in de omslag naar een duurzamere wereld...
Misschien dan toch maar een concessie doen om de boel 365 dagen per jaar in de lucht te houden? Of zou dat leiden tot al te ver afdwalen van het ideaal? (lastige kwestie kan ik me voorstellen)

[Geplaatst door: Anna Vester]

Geachte lezer
Kan ik doneren door overmaking op een bankrekeningnummer?
Met vriendelijke groet
Anna

[Geplaatst door: danielle]

gaaf en het levert ook een eigenzinnig mooi beeld op.

maar hoe houd je de bots in toom: de niet menselijke bezoeker die inmiddels meer dan 50% van een website bezoek uitmaakt en een behoorlijke bandbreedte aan energie verspilt?

[Geplaatst door: YJoris]

Deze mededeling en tegelijk info over een duurzame website was eigenlijk te verwachten Kris, als je consequent wil blijven met het onderwerp. Dank je dat je inzicht geeft van het hoe achter de schermen van een website.
Zelf ben ik nog niet aan een website toe, gezien ik ook al jaren in transitie leef; dwz complete omschakeling van fossiele brandstoffen naar duurzamer leven. Niet simpel allemaal: mijn aardgas heb ik een 4tal jaren laten afsluiten en dus alle verwarming & koken hier op groene stroom, maar ook de batterij van mijn e-scooter laat ik daarmee op; naast mijn fiets en trein/OV het enige vervoermiddel. Spijtig genoeg geen eigen zonnepanelen, ik neem stroom af van ecopower.
Nu ben ik ook toe aan nieuwe batterijen, wat niet goedkoop is.
Betreffende mijn internet? Nog steeds per kabel, niks wifi; ook bewust geen smartphone en gsm gebruik ik slechts één keer op twee maanden of zo, bij een verdere verplaatsing dan nomaal. Ik heb tot op het laatste steeds telefoonkaarten gebruikt in de telefooncabines, tot die dienst ook volledig verdween...
Betreffende websites, zou best een internationaal symbool verplicht moeten gebruikt worden en gezet op elke website, zodat de surfer onmiddellijk kan zien of deze website duurzaam/op groene stroom draait of niet.
Proficiat met Uw aanpak en openheid!
Zelf zit ik er niet zo mee in dat de website soms onbereikbaar is, noch dat het in het Engels moet (maar Nederlands is makkelijker natuurlijk). Groeten.

[Geplaatst door: Henk]

We zullen eraan moeten wennen dat energie niet altijd en onbeperkt beschikbaar is, dat zal een klap geven. Met een batterij-lampje een boek lezen en het reisje uitstellen tot de accu van de e-bike is opgeladen met zonne- of windstroom. Maar de meesten zullen blijven dromen van waterstof en atoomenergie.

[Geplaatst door: kris de decker]

@ h. honnest

De website af en toe off-line laten gaan is inderdaad een risico. Niet alleen om de reden die je aanhaalt, maar ook omdat zoekmachines je daarvoor straffen.

Maar net het feit dat de site af en toe off-line gaat, heeft er voor gezorgd dat ze in de belangstelling komt te staan. We hebben gemiddeld vijfduizend bezoekers per dag, dat is ongeveer het dubbele van de oude blog. Dus tot nu toe is het resultaat positief.

En we hopen dat bezoekers later terugkomen als de site tijdelijk off-line is.

@ danielle

De bots vormen geen probleem omdat ook zij afgeslankte webpagina's bezoeken. We blokkeren bovendien alle zoekmachines, zodat de site niet wordt geïndexeerd -- je kan ze dus niet vinden via Google, al krijg je dan wel artikels van anderen over het project te zien.

Het enige probleem met bots is dat sommige mensen ze gebruiken om de server aan te vallen. Ze sturen heel veel verkeer op korte tijd in de hoop dat de server het verkeer niet langer aankan en plat gaat.

Maar zoals gezegd: door de afgeslankte pagina's kan de blog heel veel verkeer aan. Zelfs tijdens de hoogste pieken werd slechts 30% van de processorkracht gebruikt.

[Geplaatst door: Toon]

Een boeiend experiment, en een passend pleidooi voor statische sites, die vaak ruim voldoen. Voor veel 'dynamische' sites geldt uiteraard nu ook al dat hetgeen een bezoeker te zien krijgt in feite een statische versie is, vanuit de/een server cache. Energie, bandbreedte, processorkracht, geheugen, etc. kosten namelijk ook geld, dus dit is een afweging die louter commerciële uitbaters van website ook wel maken. Alleen niet dermate doorgedreven zoals in jouw voorbeeld (omdat de arbeidskosten om een site hyperzuinig te maken op een bepaald punt niet meer opwegen tegen de uitgespaarde energiekosten).

Reacties van bezoekers zijn in een 100% statisch verhaal uiteraard niet (meer) nogelijk zonder dat je een externe dienst als Disqus of zo gaat gebruiken. Dat lijkt me toch een belangrijk nadeel. Valt m.i. wel goed op te lossen door een eigen reactiesysteem te schrijven waarbij de site opnieuw gegenereerd wordt, wanneer er een reactie wordt gesubmit. Je zou dat dan 'dynamisch' kunnen noemen, maar het is alleszins zonder database.

Qua afbeeldingen denk ik dat je beter een andere oplossing had gekozen. De transparante grijswaarden-afbeeldingen die je nu gebruikt zijn dithered, wat ervoor zorgt dat de compressie niet optimaal is. Een full-color jpeg met een gemiddelde kwaliteit en optimale compressie haalt gelijkaardige bestandsgrootten. Daarnaast kan je ook het png-compressie-algoritme handig inzetten door illustraties met veel volvlakken te gebruiken, die zien er superscherp uit en zijn slechts enkele kilobytes groot. Je afbeeldingen zien er momenteel erg grof en korrelig uit. Ik zou dan eerder voor meer kleur maar minder detail, en dus meer stilering gekozen hebben.

Ik weet niet hoe het precies zit in Pelican, maar in Jekyll kan je ook prima HTML in artikels zetten, dus dan hoeft die hele omzetting naar Markdown niet noodzakelijk. Het hangt er natuurlijk wel vanaf hoe netjes die oorspronkelijke HTML is, maar die kan je wss in bulk met een paar goeie regexen strak zetten.

[Geplaatst door: kris de decker]

Lezers die liefst doneren via bankrekening: stuur een mail en je ontvangt de nodige gegevens. Dank.

[Geplaatst door: kris de decker]

@ Toon

Reacties zijn inderdaad een beetje problematisch. Voorlopig worden ze manueel geplaatst. Dat vraagt wel wat werk, maar dat is meestal beperkt tot de eerste dagen na de publicatie van een nieuw artikel.

Op termijn willen het proces stroomlijnen en ook de reeds bestaande reacties op vorige artikels integreren. Een plugin zoals Disques is niet compatibel met onze filosofie.

Langs de andere kant hebben we gemerkt dat reacties via email een andere toon hebben. Ze worden zorgvuldiger geschreven en we krijgen geen domme, snel geplaatste commentaren.

Het klopt dat de afbeeldingen ook op andere manieren kunnen worden gecomprimeerd, maar de "dithered" beelden zijn ook een ontwerpkeuze. Smaken verschillen en dus vindt niet iedereen dat mooi. Maar dat is prima.

We gaan onderzoeken of de Nederlandstalige blog kan worden gemigreerd zonder een omzetting naar Markdown. Het is intussen duidelijk dat het de Nederlandstalige lezers niet kan schelen hoeveel energie de site verbruikt. Beetje deprimerend, maar c'est la vie.

[Geplaatst door: Pien]

Dank voor de inspiratie! Ga gelijk kijken in hoeverre ik dit op mijn eigen site kan toepassen, had er nooit bij stilgestaan dat een CMS zoveel stroom gebruikt...

[Geplaatst door: Kris]

Hey
Er bestaat wel html naar markdown software die je omzetting misschien kan versnellen.
Groeten
Kris