Herning Kommune – Digital bæredygtighed

Baggrund

Herning Kommune arbejder med bæredygtighed i mange afskygninger, og gør mange tiltag som offentlig institution, der bidrager til samfundet. Det er gennem de seneste år blevet en fast del af kommunens DNA, som de ønskede også skulle være repræsenteret på deres website.

På verdensplan udleder ”internettet” lige så meget CO2 som alt verdens flytrafik. Og det tal stiger.

Det gav derfor god mening at kigge på, om vi kunne mindske CO2-aftrykket for de årlige 2.5 mio. sidevisninger på herning.dk.

Med udgangspunkt i filosofien "Climate First" vil vi skabe et nyt fundament for den måde, hjemmesiden bliver bygget på. "Climate First" har fokus på dataforbruget og forsøger at mindske dette i alle afskygninger.

I løsningen har vi arbejdet ud fra dette princip og skabt funktionen “Klimavenlig visning” som skraber det unødvendige indhold væk for at spare så meget data som muligt. Målet med “Klimavenlig visning” er at reducere den mængde CO2, Herning Kommunes hjemmesider udleder.

Udledningen sker under produktion af den strøm, hjemmesiden bruger. Jo mere datatung hjemmesiden er, jo mere strøm skal der til, og jo mere CO2 bliver der udledt. Når vi skærer ned i mængden af data, kan vi altså også mindske CO2-udledningen.

Løsning

Når du trykker på “Klimavenlig visning”, bliver alle datatunge elementer (billeder, video, kort m.m.) skjult bag et ”overlay”, der fortæller dig, hvilket element der er bagved.

Hvis du ønsker det, kan du altså aktivere hvert element (for eksempel en video) på et oplyst grundlag.

Derudover er der skåret ned for mængden af forskellige farver på hjemmesiden. Særligt er der fokuseret på at nedbringe farven hvid, da det kræver mest energi fra brugerens skærm.

Vi ændrer også fonten til en Google-font, der er indbygget i de fleste browsere og derfor ikke skal downloades til brugerens computer eller mobil.

Arbejdet med at nedbringe CO2-udledningen fra hjemmesiden begrænser sig ikke kun til de tiltag, der bliver slået til, når du trykker på "Klimavenlig visning". Vi har også foretaget nogle generelle rettelser på hjemmesiden, som også nedbringer dataforbruget og dermed CO2-udledningen, selvom hjemmesiden bliver vist i sit normale design:
- Lazy load af billeder, video og iframes: Vi indfører lazy load, som betyder, at de mest data-tunge elementer som for eksempel billeder, iframes og videoer først bliver indlæst, når elementerne er synlige på skærmen. Det betyder, at en film i bunden af en side ikke bliver indlæst, hvis ikke den besøgende scroller ned til bunden af siden. Sagt med andre ord – vi indlæser ikke elementer, før brugeren ser dem.
- Nyt billedformat: Vi benytter webp-billedformat i stedet for de gamle .jpg og .png. Webp er udviklet af Google med det formål at sikre hurtigere indlæsningstider, da formatet fylder op mod 34 % mindre end de gængse billedformater.
- Gennemskrivning af Umbraco forms: Forms er hjemmesidens formularsystem, og det er særligt tungt i forhold til data. Vi gennemgår modulets html (kodning) og skriver det om efter ”Climate First”-princippet.
- Caching af grafiske elementer: Vi sætter en længere udløbsdato på serveren på billeder, javascript og css, der ikke ændrer sig. På den måde fortæller vi brugernes browsere, at de ikke behøver at hente dem igen ved næste besøg. Derved sparer vi ressourcer på serveren og undgår at bruge unødvendig internettrafik. Det har samtidig den sideeffekt, at brugeren vil opleve sitet som hurtigere.
- Benytter ren javascript i stedet for jQuery: Vi skifter jQuery javascriptbiblioteket ud og omkoder funktioner til ren javascript. På den måde kan vi lave mere optimerede funktioner, der kun gør det, vi skal bruge.