Wat is een duurzame website?

Geplaatst op: 18 Jun 2024

Ik ben een groot voorstander van duurzame webontwikkeling. Niet alleen om de milieuimpact die het web heeft op de planeet aan te pakken, maar ook om een positieve impact te maken op de gebruikerservaring.

Als het internet een land was, zou het de 4e grootste vervuiler zijn.

Sustainable Web Manifesto

Als je je zorgen maakt dat duurzaamheid je ontwerpmogelijkheden zou kunnen beperken, wees dan gerust. Focussen op duurzaamheid kan eigenlijk leiden tot een schoner, meer gefocust ontwerp en een sterkere merkidentiteit. Hier zijn enkele praktische tips om een duurzamere website te creëren zonder in te boeten op ontwerpkwaliteit.

Websites gebruiken vaak veel visuele elementen die niet per se waarde toevoegen aan de gebruikerservaring of de merkidentiteit. Het is cruciaal om afbeeldingen en video's strategisch te plaatsen waar ze echt je content en merk versterken. Door dit te doen profiteer je ook van een schoner ontwerp, betere leesbaarheid en een algeheel betere gebruikerservaring.

• Gebruik sterke typografie, kleuren en vectorillustraties om je merkidentiteit over te brengen
• Voeg afbeeldingen en video's toe waar ze de content echt versterken en niet alleen ter decoratie

Natuurlijk wil je dat je afbeeldingen en video's zo scherp mogelijk zijn. Media van hoge resolutie kan echter de voetafdruk van een website aanzienlijk vergroten. Om dit te beperken is het cruciaal om het juiste afbeeldingsformaat te kiezen: gebruik .svg voor vectorafbeeldingen en .webp voor rasterafbeeldingen, en zorg ervoor dat je videobestanden gecomprimeerd zijn.

• Optimaliseer bestandsgrootte en resolutie gebaseerd op apparaatgrootte. Je kunt dit eenvoudig bereiken door de <img> tag met het srcset attribuut te gebruiken.
• Zorg ervoor dat video's van platforms zoals YouTube of Vimeo alleen laden wanneer ze zichtbaar worden op het scherm. Er is geen noodzaak om video-inhoud te laden als deze niet bekeken wordt.
• Vermijd autoplay voor video's, vooral die met geluid, omdat dit kan resulteren in onnodig datagebruik en sommige bezoekers kan afleiden.

De nieuwste CSS-functies maken het mogelijk om websites te creëren die de ontwerpen die haalbaar zijn met Figma of Sketch overtreffen terwijl ze sneller laden. Het zou een goed moment kunnen zijn om zware frameworks en libraries op te geven ten gunste van een op maat gemaakt CSS-thema.

• Gebruik Figma of Sketch voor initiële ontwerpschetsen, maar breid je ontwerpmogelijkheden uit met code.
• Laat zware libraries vallen en benut de nieuwste CSS-eigenschappen.

Veel sites voeren al hun JavaScript uit op elke pagina, wat onnodig is en de site kan vertragen. Door scripts alleen te laden wanneer een component zichtbaar is, kun je laadtijden verbeteren en client-side berekeningen verminderen, wat mogelijk de batterijduur van je bezoekers bespaart. Bijvoorbeeld, mobiele navigatie is alleen nodig op mobiele apparaten, dus laad de benodigde JavaScript alleen wanneer de mobiele navigatie zichtbaar is.

• Splits je javascript op in modules en laad ze alleen op de componenten die het nodig hebben.
• Heb je echt al die externe javascript nodig?

Groene hosting verwijst naar webhostingdiensten die hernieuwbare energiebronnen gebruiken om hun datacenters van stroom te voorzien. Deze hosts investeren in wind-, zonne- of andere hernieuwbare energieprojecten, of ze kopen hernieuwbare energiecertificaten (REC's) om hun uitstoot te compenseren.

• Verminderde voetafdruk: Door hernieuwbare energie te gebruiken, vermindert groene hosting aanzienlijk de uitstoot die gepaard gaat met het runnen van een website.
• Ondersteuning voor Hernieuwbare Energie: Het kiezen van groene hosting ondersteunt de hernieuwbare energie-industrie en bevordert verdere investeringen en ontwikkeling in duurzame energiebronnen.
• Positieve Branding: Toont een toewijding aan duurzaamheid, wat de reputatie van je merk kan versterken bij milieubewuste consumenten.

Website Carbon Calculator

Het creëren van een duurzame website begint met bewuste keuzes maken over hoe je je content toont. Zorgvuldig selecteren van afbeeldingen en video's, optimaliseren van je CSS en JavaScript, en kiezen van een groene hostingprovider zijn slechts enkele van de vele manieren waarop je een positieve impact op het milieu kunt maken.

Zelfs als je momenteel een performante website hebt, is het altijd voordelig om een bewuste inspanning te leveren om deze duurzamer te maken.

---