Hållbar Webbdesign: Hur man skapar hållbara webbplatser

Sonja Hoffmann Senast uppdaterad den 21 december 2020
7 Min.
Hållbar Webbdesign
Senast uppdaterad den 21 december 2020

Vad exakt betyder "Hållbar webbdesign"? Hur vet du hur ekologisk din webbplats är? Hur kan du göra dina webbplatser mer hållbara och vilka fördelar medför detta för dina kunder? Jag har samlat svaren och några viktiga verktyg i den här artikeln.

Fakta om internet power-eater

Vad vår digitala förbrukning kostar när det gäller energi

Enligt webbplatsen carbon förbrukar Internet 416,2 terawattimmar (TWh) per år. Det är ungefär lika mycket som Tyskland ensamt konsumerar. Om Internet var ett land skulle det redan ha den sjätte största elförbrukningen ivärlden i dag.

Men hur kan det egentligen vara så? Har vi inte blivit extra digitala för att skydda vår miljö? Verkligheten här är något annorlunda: Tyvärr betyder digital inte automatiskt "grön". Från servergrupper till datacenter till den faktiska slutpunkten förbrukar allt energi för att fungera.

En genomsnittlig webbplats beräknas producera 1,76 gram CO2. Med 10 000 besökare per månad får du 211 kg CO2 per år – för en enda sida! 

Har du någonsin tänkt på hur många resurser som behövs för din webbplats? Garanterat mer än du tror! Varje begäran som din webbplats skickar tas emot, behandlas, returneras och, om nödvändigt, lagras någonstans. Det är så mycket faller på plats.

Våra webbplatser måste vara grönare – men hur?

1. Värd

Under tiden deltar många värdleverantörer och förlitar sig på förnybar energi. Eftersom det är tydligt: webbhotell förbrukar energi och säkerställer ett betydande utsläpp av koldioxidutsläpp. På RAIDBOXES hållbarhet och klimatskydd är inte en tom fras, utan en integrerad del av företagskulturen.

Grön hosting för WordPress På RAIDBOXES

När du driver en webbplats eller onlinebutik förbrukar du mycket resurser. RAIDBOXES kontroller, å andra sidan, med klimatpositiv hosting för WordPress Och WooCommerce .

Du kan enkelt avgöra om din webbplats är grön med det här verktyget från The Green Web Foundation. Om resultatet är negativt kanske du vill byta värdleverantörer. Du kan se en jämförelse här. 

Den gröna webbstiftelsen
RAIDBOXES är beroende av hållbar, certifierad grön el från vattenkraft.

2. Design

Rätt design kan förhindra att onödig energi används, till exempel när din webbplats inte laddar ner onödigt och oönskat innehåll i första hand. Hur kan du förena design och hållbarhet och spara resurser?

Mobile First

På Mobile First du optimerar ditt innehåll från början på användningen av smartphones. Optimerade sidor behöver inte läsa in överdimensionerade media på mobila enheter. Dessa är programmerade så att skrivbordsstilar inte behöver skrivas över, men är utformade direkt för den minsta enheten.

Användarupplevelse

Jag har redan berättatom fördelarna med en välplanerad användbarhet. En välfungerande användarupplevelse hjälper dig och dina kunder att göra din webbplats mer hållbar. Du minimerar oavsiktliga omvägar för dina användare. Helst laddas bara de sidor som användaren faktiskt vill besöka. Att minska oönskade klick skickar färre databegäranden och förbrukar därför mindre energi.

Sidomkrets

Även här kan du arbeta med din hållbarhet när du planerar webbplatsen. Generellt sett, ju färre sidor som behöver läsas in, desto färre databegäranden skickas. Förutom att göra din sida lättare att navigera är det också meningsfullt ur ekologisk synvinkel att sammanfatta innehållet och minska antalet sidor.

Vi bör använda media som bilder, animationer och videor mer medvetet och målmedvetet. Ger alla bilder, videor, ikoner och animationer som du har planerat för din webbplats verkligen mervärde? Eller klarar du dig utan några av dem?

3. Utveckling

Pagespeed (pagespeed)

Pagespeed har varit en del av den lilla 1×1 av webbdesignen under en tid. Varför är det bra för miljöskyddet att uppmärksamma en bra prestation? En sida som laddas snabbare är konsekvensen av lite data att ladda!

Snabbare webbplatser - bättre för klimatet

Detta gör det ännu viktigare att du optimerar din webbplats och din butik väl. Detta är ditt personliga bidrag till klimatskyddet. Du kan ta reda på mer i vår e-bok Page Speed & Performance.

Varför din pagespeed är långsam kan vara av flera skäl. Förutom analys ger många verktyg dig också lösningar för mer prestanda.

För den här artikeln har jag lagt min egen sida genom dess steg. Som du kommer att se från mitt självtest kan en analys till och med vara helt motsatt – beroende på vilken applikation som testas. Så du bör tänka på vilka mål du kommer att uppnå med testerna.

google fyr
Detta resultat ger mig det populära verktyget PageSpeed Insights .
gllighthouse (gllighthouse)
Google Lighthouse testar också min webbplats för bland annat tillgänglighet.

Här som jämförelse Chrome Developer Tool Google Lighthouse och Google PageSpeed Insights . Båda verktygen är användbara referenspunkter för optimering på sidan.

ekograder
Ecograder ger goda metoder för optimering på sidan.

Ecograder skapades specifikt för att testa hållbarheten på webbplatser. Personligen tycker jag att Ecograder är den mest användarvänliga. Informationen presenteras på ett kortfattat och begripligt sätt, tipsen för att förbättra sidhastigheten är användbara.

Carbon Calculators webbplats testar också hållbarhet. Jag ser positivt på bilden av resultatet. Jämförelserna med mindre abstrakta måttenheter gör det lättare att bli något mer medveten om omfattningen av hans arbete.

Även om jag i allmänhet tycker att webbplatsen Carbon är informativ, saknar jag de individuellt skräddarsydda detaljerna eftersom jag känner till den från Google Tools såväl som Ecograder. Dessutom anser jag att jämförelsen med andra testade webbplatser som ett mått på professionella projekt och argument är otillräcklig.

webbsidatest
Det populära testverktyget för webbsidor går in i stort djup.

Speciellt för utvecklare är webbsidestestning ett utmärkt verktyg, eftersom det går in i mycket detaljer. Du kan testa här från olika förinställningar. Från "Enkel testning" till "Avancerade inställningar", som ger dig möjlighet att utesluta olika komponenter på din webbplats eller att lägga till utdrag via kod, och samtidigt tillhandahålla en Google Lighthouse-rapport till jämförelsetestning av två webbplatser, "allt" är möjligt här först. Resultaten är också uppdelade i minsta detalj tekniskt sett. Denna webbplats används därför för avancerad testning, medan Google och Co. är mer allmänna i sin analys.

Bilder och andra medier

Jag har redan nämnt hur man omprövar innehållet som erbjuds. Nu handlar det om att integrera bilderna optimalt. 

Tinypng fungerar underbart för att komprimera bilder – och mestadels utan någon märkbar kvalitetsförlust. Du kan uppnå samma resultat med Photoshop och inställningen "Exportera för webben". Om du redan har konverterat dina bilder till ett CMS, till exempel WordPress , kan därefter kopplas till en Plugin , till exempel Smush, optimerar fortfarande upplösningen.

Om du har många bilder eller ikoner kan du hantera CSS-sprites. De fungerar på samma sätt som sprites i datorspelsutveckling. Här integreras bilder med hjälp av ett spriteark. CsS bestämmer sedan vilka koordinater som finns under vilken bild. Mer om detta ämne finns här.

Sprite-ark är flera bilder/ikoner som slås samman till en enda fil. Ofta grupperar formgivarna sina bilder tematiskt. Baserat på motsvarande x- och y-koordinater är arken indelade och integrerade i enlighet därmed. Detta läser in ett enda dokument som spelar upp olika visuella komponenter.

Lazy Load är en annan variant för optimal laddning av bilder. Här laddas bilder när besökaren behöver dem. För WordPress det finns nu otaliga (gratis och betald) Plugins .

WordPress

Naturligtvis frågar vi oss också när företagens ekologiska tillvägagångssätt är autentiska: Finns det ett hållbart Internet över ens? Hur "grön" kan WordPress Faktiskt? I artikeln WordPress och hållbarhet hittar du ett uppdaterat diskussionstillstånd i den tyskspråkiga WP-gemenskapen.

Hållbar WordPress : Gå med oss

RAIDBOXES redan från början, är engagerad i attHållbar WordPress A. Se bland annat våra tips på WordPress & Hållbarhet samt Gröna Onlinebutiker. Vill du ta mer ansvar själv? Läs sedan ditt bidragGrön hosting för WordPress Av.

Vilket bidrag kan vi ge till hållbar och effektiv webbdesign? Vilka är de viktigaste spakarna i vardagsdesign för att spara resurser? Några Plugins och en lättviktare Theme här är de bästa tipsen.

Genomsnittliga WordPress Webbplatser kommer till cirka 600 KB. Välja rätt Themes och med hänsyn till det tidigare förklarade tillvägagångssättet kan du spara 50 procent eller mer. Ett litet urval av testade Themes du hittar den här.

Om din webbplats redan är på plats och ändringen av en Themes är uteslutet kan du WordPress Förbättra prestandan med hjälp av dessa 10 justeringsskruvar.

Så här får du dina kunder att gå med

 Egentligen bör följande nyckelord räcka för att övertyga dina kunder om hållbar webbdesign: 

  • Förbättrad användbarhet och användarupplevelse,
  • tydliga och lättförståeande mönster, 
  • bättre SEO-rankning, 
  • kortare laddningstid och 
  • Mobiloptimerade sidor. 

Om du fortfarande behöver fler argument erbjuder olika stiftelser också så kallade märken, som du kan integrera på dina kunders sidor.

När du väljer en värdleverantör som använder hållbar, certifierad grön el kan detta märke inkluderas:

Till exempel erbjuder WebsiteCarbon också ett märke som du kan integrera på dina sidor för att visa att ditt innehåll är hållbart och ekologiskt.

Slutsats, mer extrema tillvägagångssätt och läsmaterial

Under min forskning om detta ämne snubblade jag över oräknelig statistik. Att skicka ett e-postmeddelande har därför samma inverkan på vår miljö som användningen av en plastpåse. Böcker är därför ofta mer miljövänliga än e-böcker. Att köpa musikalbum är mer skonsamt mot våra resurser än att strömma diesel. Listan är oändlig. Framför allt skakar denna statistik något av vår tidigare allmänna förståelse för att digitalt också betyder "grönt".

Förutom att vi som webbdesigners och utvecklare naturligtvis spelar en stor roll i hur webben utvecklas i framtiden, kan vi också börja med oss själva och använda Internet lite mer medvetet.

Ta reda på vilka av dina appar som är gröna och vilka som behöver rengöras snabbt: Greenpeaces ClickClean-verktyg ger dig en intressant översikt över dina (favorit) appar och hur ekologiskt värdefulla de är.

Bidrag som skapar mer medvetenhet för en grönare framtid: 

Vi får inte heller glömma de positiva effekter som Internet har på vår miljö. På så sätt sparar användningen av videokonferenser oss resvägar. Särskilt under de senaste månaderna måste alla ha blivit medvetna om hur vi kan använda Internet för att undvika att använda transportmedel och därmed minska koldioxidutsläppen. 

Dessutom finns det kontor som kan minskas tack vare hemmakontoret. Dessutom ger nätverket oss möjlighet att samarbeta med andra: till exempel kan vi använda bildelningsplattformar och boka "homestays" som AirBnB, som är mer miljövänliga än hotell.

Spridningen av information om hållbarhet och miljöskydd underlättas också mycket av Internet. Att erbjuda och förvärva miljövänliga produkter (som vi annars skulle ha mindre tillgång till) är naturligtvis en av de positiva effekterna av den digitala industrin – för att bara nämna några.

Om du vill fördjupa dig i ämnet rekommenderar jag att webbplatsen sustainablewebdesign.org som utgångspunkt. I tydliga punkter förklaras de viktigaste punkterna här och möjliga tekniska lösningar för genomförandet av dessa erbjuds.

Hållbar webbdesign: Vilka frågor har du till Sonja?

Använd kommentarsfunktionen. Vill du bli informerad om nya bidrag till webbdesign och utveckling? Följ oss sedan på Twitter, Facebook eller via vårt nyhetsbrev.

Efter att ha studerat speldesign och kreativt skrivande i lummiga Auckland, Sonja Hoffmann specialiserar sig på webb- och appdesign och dess utveckling. Hennes fokus ligger på gamification och utforska användarmotivation och dess erfarenhet, tillsammans med en passion och nyfikenhet för tekniska trender.

Liknande artiklar

Kommentarer om den här artikeln

Skriva en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *.