Aangesloten webbouwers maken het web groener.

Hoezo bomen planten? Er ligt ook een rol bij webbureau's, die middels technieken helpen de uitstoot te verminderen.

De succescriteria Duurzame webbureau's

Intro
  • Netwerk

    Verschil maken naar de server

    Buiten groene hosting staan servers continue aan. Daar kan een verduurzamings-schep bovenop.

    • je webbureau verkiest HTTP/2 boven nóg een CDN en past server side caching met minifying toe
    • dit leidt tot minder betrokken servers en minder belasting per server
  • Browser

    Verminder uitstoot in de browser

    Als webbureau kun je invloed uitoefenen op wat er in de browser gebeurt.

    • Client side caching is toegepast en web-animaties vermijden de CPU bij je bezoekers
    • Browsers hoeven minder hard te werken en accuduur van je bezoekers gaat langer mee
  • Media

    Verduurzamen in beeldmateriaal

    Bronnen die niet direct benut worden hoef je niet vooraf te laten downloaden door je bezoekers.

    • Automatisch afspelen van video staat uit, afbeeldingen zijn gecomprimeerd, Webp, responsive of SVG en benutten native lazyloading
    • Besparing in directe download van afbeeldingen en video's betekent minder dataverkeer
  • Gebruiker

    Invloed van je bezoekers

    Huidige browser-toepassingen staan het toe om voorkeuren van je gebruikers uit te lezen.

    • Gebouwde websites bieden een dark-mode en downloaden via saveData minder kilobytes
    • Bezoekers houden controle en kunnen zo hun footprint bij websitebezoek beïnvloeden

Heeft jouw webbureau deze duurzame superkrachten?

Meld je aan als partner om het web nog groener te maken!

Meld je als groene webbouwer aan

Groen webbouwers criteria

Groene webbureau partner worden? Een partnerschap komt in twee vormen. Wanneer voldaan wordt aan de criteria met een hele ster, wordt je opgenomen als premium partner.

Algemeen

  • Conform de websitecarbon test ligt de CO2 uitstoot van pagina's van website onder de 50 gram. Uit het portfolio voldoet 75% van de sinds ingangsdatum gebouwde sites van de partnerschap hier aan.

  • Je maakt als webbouwer voor minimaal 50% van eigen opdrachten waarbij hosting of conversie-disciplines benodigd is, gebruik van groene partners.

    Uiteraard geldt dit alleen voor opdrachten waarbij één van deze disciplines niet vast staan vanuit de opdrachtgever en via jouw agency worden gedetacheerd.

  • Je maakt als webbouwer voor minimaal 80% van eigen opdrachten waarbij hosting of conversie-disciplines benodigd is, gebruik van groene partners.

    Uiteraard geldt dit alleen voor opdrachten waarbij één van deze disciplines niet vast staan vanuit de opdrachtgever en via jouw agency worden gedetacheerd.

Over het netwerk

  • Een CDN oplossing plaatst content op meerdere servers, zodat er een server is die dichter bij de bezoeker staat dan de bronserver. Dit vermindert de afstand en latency dat met dataverkeer gemoeid gaat, wat een positieve uitwerking heeft op CO2 uitstoot.

  • Een CDN kan dus een goede oplossing zijn. Veelal wordt echter onbewust meerdere CDN oplossingen gebruikt voor verschillende libraries, waar dat ook over één of twee CDN's kan worden verdeeld. Profiteer van HTTP/2 door en voorkom gebruik van onnodige CDN's, zodat er niet meer servers dan nodig betrokken hoeven te worden bij een paginabezoek.

  • Het komt nog voor in Nederland: het sterk verouderde HTTP/1 protocol. Het HTTP/1 protocol levert echter een beperking in gelijktijdige downloads op, waardoor er meer latency bij komt kijken. Hierdoor is het minder efficient en minder duurzaam dan zijn opvolgers HTTP/2 en HTTP/3. Zorg dat websites geen gebruik maken van HTTP/1.

  • Dit reduceert niet zozeer omdat het slotje van oudsher bekend staat als 'het groene slotje'. Dataverkeer over een niet-beveiligde verbinding vindt automatisch plaats over het HTTP/1 protocol. HTTP/1 is echter minder efficient dan zijn opvolgers.

  • in beide gavellen worden HTML pagina's klaargezet op de server, waardoor de server niet bij elke nieuwe pagehit code hoeft uit te voeren om HTML on-the-fly te genereren. Dit zorgt voor minder belasting op de server. Een gevolg is dat een server meer gelijktijdige bezoekers af kan handelen en beter met pieken om kan gaan, zonder outage of benodigde server-opschaling.

  • Door in te stellen dat (specifieke) bestanden gecached mogen worden, wordt voorkomen dat dergelijke bestanden bij elke paginabezoek door dezelfde gebruiker opnieuw worden gedownload. Dit bespaart dataverkeer, terwijl tegelijkertijd de achterliggende server minder vaak wordt aangesproken. Dit heeft als gevolg dat minder CPU benodigd is, minder koeling, minder pieken zullen zijn en een server meer gelijktijdige bezoekers af kan (blijven) handelen.

  • Woff en Woff2 kennen een hogere compressiemethoden dan TTF of OTF bestanden. Woff2 is de opvolger van Woff, en daarmee ook een slag kleiner, waardoor er minder data gedownload en gecached hoeft te worden. Indien er gebruik wordt gemaakt van Google Fonts gebeurt dit automatisch. Heb je zelf fonts ingeregeld, dan kun je zelfs overwegen om voor oudere browsers een systeem-font voor te schotelen.

  • Elk font kent meerdere varianten, bij gebruik van verschillende fonts kan het aantal bestanden als ook kilobytes exponentieel toenemen. Ga bijvoorbeeld voor de font voor je kopteksten na of het echt nodig is ook cursief of meerdere diktes te downloaden. Overigens zijn browsers hierin veelal al slim genoeg om bestanden van ongebruikte font-varianten niet te downloaden.

  • Variabele fonts is een nieuwe techniek waarbij meerdere font-varianten in één bestand zijn verwerkt. Als gevolg zijn deze bestanden groter dan non-variabele fonts. Gebruik pas variabele fonts wanneer de optelsom van meerdere gewenste losse font-varianten gelijk is aan één bestand voor een variabele font.

  • Minder 404 meldingen betekent minder werk voor een CMS of een server. Bovendien worden soms hele HTML documenten geretourneerd, ook wanneer een afbeelding of font-bestand niet gevonden kan worden. Hierdoor gaat er in de regel meer dataverkeer gepaard met 404 meldingen dan nodig is. Het voorkomen en oplossen van 404 meldingen is dan het beste remedie, ook voor zoekmachine bots en dus zoekmachine optimalisatie.

In de browser

  • Alle code, waaronder ook HTML, moet verwerkt worden door een browser. De hoeveelheid HTML elementen als ook diepte speelt een rol bij de verwerking ervan, wat CPU kost. Houd de hoeveelheid DOM-nodes onder de 1500 en de DOM diepte onder de 32. Dit betreft tevens een criterium in Lighthouse performance tooling.

  • Time to Interactive (afgekort tot TTI) is een Lighthouse danwel PageSpeed Insights metric en meet de tijd tot wanneer de pagina en de aanwezige content volledig geladen is. Hiermee wordt uitgedrukt hoe lang de website bezig is bronnen te downloaden en te verwerken. Meer bronnen, iframes, video's of bijvoorbeeld JavaScript zorgt voor een hogere TTI waarde. Houdt deze waarde onder de 5 seconden.

  • Soms worden libraries groter, alhoewel libraries zich ook steeds meer evolueren in libraries die eenvoudiger op te knippen zijn. jQuery is hier helaas geen voorbeeld van, maar is wel een voorbeeld van een library waarvan andere libraries afhankelijk zijn. Daar is soms bijvoorbeeld weer een tussenkoppeling in de vorm van jquery.migrate.js voor nodig.

    Ga in Lighthouse na of er binnen een website sprake is van achterhaalde libraries en werk deze bij.

  • Dit heet Hardware Acceleration waarbij animatie van elementen gebeurt via transition in combinatie met transform of opacity. Daaronder vallen ook animaties van schaduwen, sticky headers, et cetera.

  • Native lazyloading betekent dat iframes en afbeeldingen die zich verder op de pagina bevinden niet direct gedownload worden. Browsers zijn hier beter in geworden, terwijl JavaScript libraries voor extra rekenwerk in de browser zorgt. Onder meer Google Maps en video's kunnen via iframes worden ingeladen, die veelal zwaar van stuk kunnen zijn. De gemoeide dataverkeer en CPU wordt bespaard wanneer ze gelazyloaded worden. Gebruik bovendien native lazyloading in plaats van JavaScript libraries, zodat zelfs voor de eigenlijke lazyloading strategie geen JavaScript benodigd is.

  • Het meegeven van een noopener als attribuut-waarde voor het attribuut "rel" op externe links, voorkomt dat er een verbinding tussen je eigen site en de externe site open blijft. Hiermee is er geen CPU benodigd om de koppeling, die er van oudsher door browsers ingebakken wordt, in stand blijft.

    Het gebruik van noopener verbetert als direct gevolg ook de pagespeed. Ook privacy gaat er op vooruit, doordat externe sites via JavaScript geen acties meer kunnen uitvoeren op jouw site of shop, waar men oorspronkelijk vandaan kwam.

In beeld

  • comprimeer afbeeldingen. Gebeurt dit bijvoorbeeld niet automatisch via het CMS of een build-proces, zorg dan dat je tools gebruikt zoals TinyJpg of ReSmushIt, bijvoorbeeld handmatig of geautomatiseerd via hun API. SGVOMG kan gebruikt worden voor SVG's.

  • Webp is een bestandsformaat van afbeeldingen met een compressie techniek waarmee een gelijke afbeelding gemiddeld 39% en 45% kleiner wordt, voor respectievelijk JPG en PNG afbeeldingen, zo geeft Wikipedia aan. Serveer naast conventionele afbeelingstypen als JPG en PNG ook een Webp voor browsers die dit formaat ondersteunen.

    Dit kan via HTML als ook vanuit de hosting ondervangen worden. In laatstgenoemde geval controleert een server automatisch of een browser webp ondersteunt. Indien dit het geval is wordt ondanks de aanduiding van PNG of JPG onder meer via HTTP headers toch een webp afbeeldingen geserveerd en afgedwongen.

  • SVG's zijn tekstbestanden en zijn beduidend kleiner dan PNG of JPEG afbeeldingen. Gebruik bijvoorbeeld https://convertio.co/nl/png-svg/ om PNG's om te zetten naar SVG's.

  • Pas responsive afbeeldingen toe waarbij kleinere bestanden op kleinere viewports worden geserveerd. Gebruik deze techniek ook voor achtergrondafbeeldingen.

  • Niet zelf-startende carousels voorkomt dat afbeelding onnodig in beeld komen en dus onnodig gedownload worden. Bovendien is aangetoond dat zelf startende slideshows ten koste gaat van conversie.

  • .

  • Video's worden op groene platformen als youtube gehost in plaats van Vimeo.

  • Voorkom autoplay van video's. Video's beginnen namelijk veelal pas te streamen wanneer ze worden afgespeeld. Wanneer ze automatisch starten zal het dataverkeer en CPU vergen aan de zijde van server en browser, ook wanneer een gebruik niet actief kijkt.

  • CSS sprites en icons fonts zijn een verzameling van kleinere afbeeldingen of iconen. Zelfs vlaggetjes voor taal-aanduiding kennen vaak een CSS alternatief: https://www.google.com/search?q=pure+css+flags

De gebruiker

  • Dit betreft een meerdere vliegen in één klap criterium. Voldoen aan de AVG houdt in dat sommige tags danwel third tracking mechanismen niet zonder toestemming ingeladen mogen worden. Dit heeft het automatisch gevolg dat browsers minder code hoeven uit te voeren, minder hard hoeven te werken en daarmee bijvoorbeeld accuduur van smartphones toeneemt.

  • Pixels worden door een browser ingetekend en kost bovendien rekenkracht. Dit was ook bij het gebruik van donkere kleuren het geval op LCD schermen, maar OLED-schermen gaan hier weer anders mee om: elke pixel wordt afzonderlijk opgelicht. Op deze schermen komt het gebruik van donkere kleuren CPU en stroomverbruik dus ten goede. Bouw de website standaard in een donkere modus, of voorzie in een mogelijkheid naar een donkere modus te schakelen, al dan niet geautomatiseerd op basis van door de gebruiker doorgegeven voorkeuren: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

  • Gebruikers kunnen voorkeuren opgegeven, waarmee ze ook zelf een rol krijgen in verkleinen van hun footprint. Een voorbeeld hiervan is de saveData flag. Laat de website acteren op deze instelling door standaard minder bronnen te verbruiken. Schotel bijvoorbeeld enkel thumbnails voor in plaats van video's en bespaar op custom lettertypes: https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/saveData