Wat betekent "Duurzaam Webdesign" precies? Hoe weet je hoe ecologisch je site is? Hoe kun je je website duurzamer maken en wat zijn de voordelen voor je klanten? De antwoorden op deze vragen en enkele belangrijke hulpmiddelen heb ik voor je gebundeld in dit artikel.

Feiten over de energieverslinder Internet

Maar hoe kan dat eigenlijk? Zijn we niet extra digitaal gegaan om ons milieu te redden? De realiteit is hier enigszins anders: Helaas betekent digitaal niet automatisch "groen". Van serverparken tot datacenters tot het eigenlijke eindapparaat - alles verbruikt energie om te functioneren.

Een gemiddelde website produceert naar schatting 1,76 gram CO₂. Met 10.000 bezoekers per maand komt dit neer op 211 kg CO₂ per jaar - voor één pagina! 

Heb je er wel eens over nagedacht hoeveel middelen er nodig zijn voor je website? Meer dan je denkt, gegarandeerd! Elk verzoek dat je website verstuurt wordt op elk moment ontvangen, verwerkt, teruggestuurd en zo nodig opgeslagen. Dat levert veel op.

Onze websites moeten groener worden

1. WordPress Hosting en duurzaam webdesign

Ondertussen doen veel WordPress hosting providers mee en vertrouwen op hernieuwbare energie. Want één ding is duidelijk: WordPress hosting verbruikt energie en veroorzaakt een aanzienlijke CO₂-uitstoot. Bij Raidboxes zijn duurzaamheid en klimaatbescherming geen holle frasen, maar een integraal onderdeel van de bedrijfscultuur.

Je kunt gemakkelijk bepalen of je website "groen" is met behulp van dit hulpmiddel van The Green Web Foundation. Als het resultaat negatief is, moet je van WordPress hosting provider veranderen. Je kunt hier een vergelijking zien. 

2. ontwerp en duurzaam webdesign

Het juiste ontwerp kan onnodig energieverbruik voorkomen, bijvoorbeeld als je website niet in de eerste plaats onnodige en ongewenste inhoud laadt. Hoe kun je ontwerp en duurzaamheid verenigen en grondstoffen besparen?

Mobile First

Op Mobile First optimaliseert u uw inhoud vanaf het begin voor smartphonegebruik. Geoptimaliseerde pagina's hoeven geen oversized media te laden op mobiele apparaten. Zij zijn zo geprogrammeerd dat desktopstijlen niet hoeven te worden overschreven, maar rechtstreeks zijn ontworpen voor het kleinste toestel.

gebruikerservaring

Ik heb je al verteld over de voordelen van een goed geplande bruikbaarheid. Een goed werkende gebruikerservaring helpt jou en je klanten om je website duurzamer te maken. Je minimaliseert ongewenste omwegen door je gebruikers. Idealiter worden alleen die pagina's geladen die de gebruiker daadwerkelijk wil bezoeken. Als je ongewenste klikken vermindert, stuur je minder gegevensverzoeken en verbruik je dus minder energie.

Aantal pagina's

Ook hier kun je werken aan je duurzaamheid terwijl je de website plant. In het algemeen geldt: hoe minder pagina's er geladen moeten worden, hoe minder gegevensverzoeken er verstuurd worden. Behalve dat het je site overzichtelijker maakt, is het ook uit ecologisch oogpunt zinvol om de inhoud te bundelen en het aantal pagina's te verminderen.

Wij moeten media zoals beelden, animaties en video's bewuster en doelgerichter gebruiken. Hebben alle afbeeldingen, video's, iconen en animaties die u voor uw site hebt gepland echt een toegevoegde waarde? Of kun je zonder sommige van hen?

3. ontwikkeling en duurzaam webdesign

Pagespeed

Pagespeed maakt al lang deel uit van de kleine 1×1 van webdesign. Waarom is het ook goed voor het milieu om aandacht te besteden aan een goede prestatie? Een pagina die sneller laadt is het gevolg van weinig te laden gegevens!

Waarom uw pagespeed traag is kan verschillende redenen hebben. Veel hulpmiddelen bieden u niet alleen de analyse, maar ook oplossingen voor betere prestaties.

Voor dit artikel heb ik mijn eigen site aan de tand gevoeld. Zoals u zult zien in mijn zelftest, kan een analyse zelfs volledig tegengesteld uitvallen - afhankelijk van de toepassing waarmee wordt getest. U moet dus bedenken wat uw doelen zijn met de tests.

Hier ter vergelijking de Chrome Developer Tool Google Lighthouse en Google PageSpeed Insights. Beide hulpmiddelen zijn nuttige oriëntatiepunten voor onpage-optimalisatie.

Ecograder is speciaal gemaakt om de duurzaamheid van websites te testen. Persoonlijk vind ik Ecograder het meest gebruiksvriendelijk. De informatie is beknopt en gemakkelijk te begrijpen, en de tips om de paginasnelheid te verbeteren zijn nuttig.

Ook de website Carbon Calculator toetst vooral op duurzaamheid. De picturale weergave van het resultaat vind ik positief. De vergelijkingen met minder abstracte meeteenheden maken het gemakkelijker om je iets meer bewust te worden van de omvang van je werk.

Ik vind de service van Website Carbon over het algemeen informatief, maar ik mis de individueel toegesneden details die ik zowel van Google Tools als van Ecograder ken. Bovendien vind ik de vergelijking met andere getoetste websites als maatstaf voor beroepsprojecten en argumentatie onvoldoende.

Webpagetest is een uitstekend hulpmiddel, vooral voor ontwikkelaars, omdat het zeer gedetailleerd te werk gaat. Je kunt hier uit verschillende presets testen. Van "Eenvoudig testen" tot "Geavanceerde instellingen", waarmee je verschillende onderdelen van je website kunt uitsluiten, of om precies te zijn, toevoegen via code snippet, en tegelijkertijd een Google Lighthouse Rapport kunt leveren, tot het vergelijken van twee websites, "alles" is hier mogelijk. De resultaten zijn ook technisch tot in het kleinste detail uitgesplitst. Deze website wordt daarom gebruikt voor geavanceerde tests, terwijl Google en co. hun analyse wat algemener maken.

Afbeeldingen en andere media

Om de aangeboden inhoud te heroverwegen, heb ik al eerder aan de orde gesteld. Nu is het zaak de beelden optimaal te integreren. 

Tinypng werkt wonderwel om beelden te comprimeren - en meestal zonder merkbaar kwaliteitsverlies. U kunt hetzelfde resultaat bereiken met Photoshop en de instelling "Export for Web". Als u uw afbeeldingen al hebt geïntegreerd in een CMS, zoals WordPress , kunt u de resolutie achteraf nog optimaliseren met een Plugin, zoals Smush.

Als je veel afbeeldingen of iconen hebt, kun je CSS sprites gebruiken. Zij werken vergelijkbaar met sprites in computerspelontwikkeling. Hier worden afbeeldingen eenmaal per sprite sheet geïntegreerd. Daarna bepaalt CSS onder welke coördinaten welke afbeelding zich bevindt. Meer over dit onderwerp is hier te vinden.

Sprite sheets zijn meerdere afbeeldingen/iconen die in een enkel bestand zijn samengevoegd. Ontwerpers groeperen hun beelden vaak thematisch. Op basis van de bijbehorende x- en y-coördinaten worden de bladen dienovereenkomstig verdeeld en opgenomen. Op die manier wordt één enkel document geladen dat verschillende visuele componenten weergeeft.

Lazy Load is een andere variant voor het optimaal laden van afbeeldingen. Hier worden afbeeldingen geladen wanneer de bezoeker ze nodig heeft. Voor WordPress zijn er nu ook talloze (gratis en betaalde) Plugins.

WordPress

Natuurlijk vragen ook wij ons af wanneer ecologische benaderingen van bedrijven authentiek zijn: Bestaat er eigenlijk wel een duurzaam internet? Hoe "groen" kan WordPress echt zijn? In het artikel WordPress en duurzaamheid vindt u een actuele stand van zaken van de discussie in de Duitstalige WP-gemeenschap.

Welke bijdrage kunnen wij leveren aan duurzaam, efficiënt webdesign? Wat zijn de belangrijkste hefbomen in het dagelijks ontwerp om hulpbronnen te besparen? Weinig Plugins en een lichtgewicht Theme zijn hier de beste tips.

Gemiddelde WordPress websites komen op ongeveer 600 KB. Door de juiste Themes te kiezen en rekening te houden met de eerder toegelichte aanpak, kunt u 50 procent of meer besparen. Een kleine selectie van geteste Themes vindt u hier.

Als je website al draait en het veranderen van thema's niet aan de orde is, kun je je WordPress prestaties verbeteren met behulp van deze 10 tweaks.

Hoe overtuig je anderen om mee te doen

 Eigenlijk zouden de volgende trefwoorden al genoeg moeten zijn om je klanten te overtuigen van duurzaam webdesign: 

• Verbeterde bruikbaarheid en gebruikerservaring,
• duidelijke en gemakkelijk te begrijpen ontwerpen, 
• betere SEO rankings, 
• kortere laadtijd en 
• Mobiel geoptimaliseerde pagina's. 

Als u nog meer argumenten nodig hebt, bieden verschillende stichtingen ook zogenaamde badges aan, die u op de pagina's van uw klanten kunt integreren.

Als je een WordPress hosting provider kiest die duurzame, gecertificeerde groene stroom gebruikt, kan deze badge erbij zitten:

• https://www.thegreenwebfoundation.org/ (per code)
• https://wordpress.org/plugins/the-green-web-widget/ (per Plugin)

WebsiteCarbon biedt bijvoorbeeld ook een badge die je op je pagina's kunt integreren om te laten zien dat je inhoud duurzaam en ecologisch is.

Conclusie over duurzaam webdesign

Tijdens mijn onderzoek naar dit onderwerp, kwam ik talloze statistieken tegen. Het versturen van een e-mail heeft dezelfde impact op ons milieu als het gebruik van een plastic zak. Boeken zijn vaak milieuvriendelijker dan e-boeken. Muziekalbums kopen is beter voor onze middelen dan ze streamen. De lijst is eindeloos. Bovenal schudden deze statistieken onze gangbare opvatting dat digitaal ook "groen" betekent, door elkaar.

Afgezien van het feit dat wij als webdesigners en -ontwikkelaars natuurlijk een grote rol spelen in hoe het web zich in de toekomst ontwikkelt, kunnen we ook bij onszelf beginnen en het internet wat bewuster gebruiken.

Zoek uit welke van uw apps groen zijn en welke dringend aan een schoonmaakbeurt toe zijn: Met de ClickClean tool van Greenpeace kun je een interessant overzicht krijgen van je (favoriete) apps en erachter komen hoe ecologisch waardevol ze zijn.

Bijdragen die meer bewustzijn creëren voor een groenere toekomst: 

• Dus Jack Lenox heeft een gebouwd WordPress -Theme die slechts 7 KB licht is. 
• Brad Frost moedigt ons op zijn blog DeathToBullshit aan om het zonder te stellen, maar met een humoristische noot. 
• Heydon Pickering geeft coderingstips om je site slanker te maken.

We mogen ook de positieve effecten van het internet op ons milieu niet vergeten. Het gebruik van videoconferenties bespaart ons bijvoorbeeld reizen. Vooral in de afgelopen maanden zou iedereen zich bewust moeten zijn geworden van de manier waarop we met behulp van internet het gebruik van vervoermiddelen kunnen vermijden en zo de CO2-uitstoot kunnen verminderen. 

Bovendien hebben we kantoorruimte die kan worden ingekrompen dankzij thuiskantoren. Bovendien biedt het netwerk ons de mogelijkheid om onze krachten met anderen te bundelen: We kunnen bijvoorbeeld gebruik maken van autodeelplatforms en "homestays" zoals AirBnB boeken, die milieuvriendelijker zijn dan hotels.

Het internet maakt het ook veel gemakkelijker om informatie over duurzaamheid en milieubescherming te verspreiden. Het aanbieden en kopen van milieuvriendelijke producten (waar we anders misschien minder toegang toe zouden hebben) behoren natuurlijk ook tot de positieve effecten van de digitale industrie - om er maar een paar te noemen.

Als je je in het onderwerp wilt verdiepen, raad ik de website sustainablewebdesign.org aan als startpunt. De belangrijkste punten worden hier in duidelijke paragrafen uitgelegd en er worden mogelijke technische oplossingen voor de uitvoering ervan geboden.