Bæredygtig Webudvikling

Året er 2024, og der er flere hjemmesider og webapps end nogensinde før. Over 5 milliarder mennesker bruger internettet hver eneste dag. Men vidste du godt, at hver gang du besøger en hjemmeside eller åbner din favoritapp på din telefon, udleder du en lille smule CO2? I 2022 blev det beregnet, at internettet var ansvarligt for 3,7% af hele verdens CO2-udslip, og man forventede, at dette tal ville fordoble sig i 2025. (Kilde: Climate Impact)

Med andre ord bør vi alle overveje, hvordan vi kan gøre vores online liv mere bæredygtigt for den verden, vi deler. Når vi hos Creative Oak beskæftiger os med digital markedsføring, herunder udvikling af hjemmesider, har vi sat os ind i, hvordan man kan tænke mere grønt, når man bygger digitale projekter. Denne viden ønsker vi ikke at holde for os selv, da vi alle deler et fælles ansvar for at integrere bæredygtighed i vores digitale handlinger.

‍

Internettet 101

Internettet fungerer i overordnede træk ret simpelt. Når du indtaster en URL i din browser og trykker "enter", sender din browser (f.eks. Chrome, Firefox, Microsoft Edge) en anmodning til en server, der befinder sig et eller andet sted i verden. Serveren sender derefter et "svar" tilbage, som består af det, der vises på din skærm - farver, layout, billeder, video, tekst osv.

Dette udgør grundlæggende set et simpelt kald-svar samspil, der normalt ikke er den største synder, når det kommer til CO2-udledning. Der kan optimeres på serversiden med hensyn til placering, køling og valg af strømkilde. Desværre ligger disse beslutninger ofte uden for udviklernes kontrol, da de sjældent hoster webprojekter selv. Det er dog værd at overveje valget af hostingudbyder og sikre, at de anvender grøn energi, men der er også mange tiltag, som udviklere selv kan implementere for at sikre et grønnere fodspor.

Font, farver & fotos

Når du skriver en adresse (URL) i din browser og trykker "enter", sender din browser en slags besked til en computer et eller andet sted. Den computer svarer så med alt det, der vises på din skærm - billeder, farver, tekst og så videre.

Som udvikler bestemmer du, hvad der skal vises. Vi mener ikke, at hjemmesider skal være kedelige uden billeder eller farver, fordi vi kan lave fantastiske ting på internettet. Men der er nogle ting, du kan gøre for at gøre det mere miljøvenligt, og det vil vi gerne dele med dig.

Font

Fonte er mere komplekse end man tror - de er små programmer der indeholder skrifttyper i forskellige variationer. Der er store, små, italic, understreget, forskellige tykkelser osv.

(Kilde: Thinking With Type 2nd Ed)

Når du "henter" en font til din hjemmeside, henter du faktisk en hel pakke med alle disse variationer. Det er ret almindeligt at se, at kun 1 eller 2 variationer af en font bliver brugt, selvom hele pakken er downloadet.

Her kan du virkelig gøre en forskel ved kun at downloade de variationer, du faktisk skal bruge. Hvis du for eksempel bruger Google Fonts, en samling af gratis skrifttyper, kan du vælge kun at downloade den præcise tykkelse eller variation, du har brug for. Det er en god idé at holde antallet af fonte på din hjemmeside så lavt som muligt, uden at gå på kompromis med designet. Dette kan hjælpe med at reducere unødvendig dataoverførsel og gøre din hjemmeside mere effektiv.

‍

Farver

Farverne på din hjemmeside påvirker faktisk også dit CO2-aftryk, men ikke på grund af den datamængde, der skal sendes fra server til computer. Det skyldes, at din skærm bruger mere energi på at vise farver end blot sort/hvid. Selvom det kan virke lidt paradoksalt, da denne hjemmeside er meget farverig, tror vi på, at dit brand og identitet betyder så meget, at det kan opveje det ekstra energiforbrug, der følger med farverige hjemmesider. Det betyder dog ikke, at der ikke er plads til forbedringer.

Ved at optimere farverne på din hjemmeside kan du stadig reducere energiforbruget og dermed bidrage til grøn webudvikling. Det handler om at finde den rette balance mellem visuel appel og miljøhensyn.

Fotos & Video

En af de store dataforbrugere på din hjemmeside er billeder og videoer. Her handler det primært om at optimere dem, så de ser skarpe ud uden at optage for meget plads. Vi vil differentiere mellem logoer og fotos - logoer er grafik, mens fotos er billeder som dem, du tager med et kamera.

For at optimere dine fotos kan du komprimere dem og sikre, at størrelsen er korrekt. Hvis du f.eks. viser et billede på din hjemmeside med dimensionerne 500 x 500 pixels, skal billedet også være 500 x 500 pixels og ikke større. Det er nemlig muligt at "loade" et stort billede og derefter "vise" det i en mindre version, men det betyder, at du henter mere data, end du faktisk viser.

Samtidig kan du sikre, at dine billeder er optimalt komprimerede. Den moderne standard lige nu er ".webp," som er en stærk komprimering uden tab af kvalitet (Google WebP). Du kan benytte gratis tjenester til at konvertere dine fotos til .webp-format og bruge dem på din hjemmeside for at reducere dataforbruget (se f.eks. CloudConvert). En ekstra fordel er, at dette også vil gøre din hjemmeside hurtigere.

‍

Når det kommer til logoer eller anden grafik på din hjemmeside, ser man sommetider, at man bruger ".png"-filer til dette, hvilket ikke betragtes som best practice. PNG-filer fylder en del og skalerer ikke optimalt. Her kan det være en fordel at konvertere din grafik eller logo til vektorgrafik, også kaldet SVG (Scalable Vector Graphic), eller sikre dig, at grafikken eller logoet er lavet i dette format fra starten af. Dette optimerer datamængden betydeligt, samtidig med at din grafik kan skaleres uendeligt. Med andre ord vil det se lige godt ud, uanset om det er 5000 x 5000 pixels eller 100 x 100 pixels.

Du kan benytte en service som f.eks. Convertio til at konvertere dine grafikfiler fra PNG til SVG-format. Dette kan forbedre ydeevnen og hastigheden på din hjemmeside, samtidig med at det giver større fleksibilitet med hensyn til skalering.

Videoer er i dag meget udbredt på hjemmesider, f.eks. som baggrund, der tilfører bevægelse og liv til din side. Dog fylder videoer ofte meget og kan bremse hastigheden på din side, samtidig med at de kan forøge CO2-aftrykket. Her er det vigtigt at komprimere dine videoer, så de optager så lidt plads som muligt.

En af de bedste komprimeringsværktøjer til videoer findes på YouTube. Du kan uploade din video til YouTube, vente på, at de komprimerer den, og derefter downloade den igen. Alternativt kan du forsøge at reducere antallet af billeder pr. sekund i videoredigeringsprogrammer. Nogle gange kræver det ikke mere end 15-20 billeder pr. sekund for at bevare en jævn videooplevelse uden hakken.

Du kan også overveje, om et billede med en lille animation i stedet for en video kan give den samme effekt på din side. Dette kan være en mere energieffektiv måde at skabe bevægelse på uden at påvirke hastigheden og miljøpåvirkningen negativt.

‍

Caching

Sidst, men bestemt ikke mindst, bør man overveje caching. Grundlæggende set indebærer caching, at du gemmer noget af indholdet fra en hjemmeside lokalt på din computer. Næste gang du besøger siden, behøver indholdet ikke blive hentet igen. Derfor er det en god idé at opsætte caching på din side, især hvis du bruger mange billeder og videoer.

Mange hjemmesidebyggere bruger allerede caching uden, at du behøver at gøre meget. Hvis du for eksempel bruger WordPress, kan det dog være en fordel at downloade et plugin som W3 Total Cache, der kan hjælpe med at implementere en caching-strategi. Dette kan forbedre hastigheden på din hjemmeside ved at reducere den tid, det tager at indlæse indholdet, og samtidig mindske den mængde data, der overføres mellem serveren og din computer.

‍

Data-hoarderen

Som nævnt i begyndelsen er internettet overordnet set ret simpelt - man sender en forespørgsel og modtager et svar. Men hvis din server sender flere forespørgsler til andre tjenester, vil der blive skubbet mere data over netværket, hvilket øger CO2-aftrykket. Dette gælder, hvis du bruger eksterne tjenester som f.eks. Google Analytics eller andre tjenester, der hoster noget på andre servere. Her bør man overveje, i hvilken grad man indsamler data - bruger man det overhovedet?

Ofte ser vi, at man indsamler data om besøgende uden et egentligt formål. Man kunne overveje at slå nogle af disse tjenester fra eller eventuelt aktivere dem i perioder, f.eks. under en specifik kampagne. Alternativt kan man udvikle sin egen dataindsamling, hvor man selv gemmer den information, man finder nyttig. Men her skal man være opmærksom på lovgivningen, især GDPR (som man i øvrigt altid skal overholde). Det er vigtigt at være ansvarlig og transparent i forhold til, hvordan man håndterer og anvender besøgendes data.

‍

Kode Optimering

Hvis du har udviklet din hjemmeside uden at bruge et værktøj, får du kudos for det! Men i så fald bør du gennemgå din kode og sikre, at der ikke er nogen kludret kode, der bruger unødvendig meget energi. Det er vigtigt at optimere din kode så meget som muligt og undgå unødvendig og ubrugt kode.

En hurtig måde at optimere din CSS og JS er ved at "minify" det. Dette indebærer at fjerne al unødvendig plads og linjeskift. Du kan bruge online tjenester som f.eks. Minifier til dette formål. Vær dog opmærksom på, at din kode bliver ulæselig i processen. Heldigvis kan du altid omvende processen, hvis du skal lave ændringer senere. Optimering af din kode kan hjælpe med at forbedre din hjemmesides ydeevne og reducere dens energiforbrug.

‍

Hvad med fremtiden?

Fremtiden inden for dette felt udvikler sig konstant, og vi håber på at finde bedre og mere bæredygtige løsninger til at drive servere. Der forskes allerede intensivt i dette område. For eksempel har virksomheden Grow Your Own Cloud udviklet en metode til at gemme data i planter, hvilket repræsenterer en grøn tilgang til serverdrift. Alternativt kan teknologier som blockchain eller decentraliserede netværk også spille en rolle i fremtidens serverløsninger.

Generelt er det vigtigt at være nysgerrig og holde sig opdateret på kommende muligheder. Dette kan omfatte nye komprimeringsmetoder, nye standarder og hostingmuligheder. Ved at være opmærksom på og omfavne disse innovationer kan vi alle bidrage til at gøre internettet mere bæredygtigt og miljøvenligt.