Det går med mye energi både når nettsider leses av i et datasenter, og når data overføres til og fra datasenteret. Valg av datasenter har stor innvirkning på både energieffektiviteten og nettsidehastigheten. Det er derfor viktig at du tenker gjennom punktene nedenfor når du skal velge datasenter.

Velg mellomlagringsservere (server caching) som reduserer energiforbruket

Nettsider som bruker et CMS, for eksempel WordPress eller Drupal, blir generert dynamisk hver gang noen besøker siden. Dette er veldig ineffektivt fordi det krever serverprosessering for hver visning av siden, noe som øker energiforbruket i webserveren.

Mellomlagringsteknologier som Varnish generer statiske versjoner av hver side på forhånd, slik at belastningen på serveren kan reduseres betydelig for de fleste brukerne. Dette reduserer energiforbruket til serveren betraktelig, og utgjør en stor forskjell for innlastningstidene til nettsidene.

Slike mellomlagringsteknologier kan være kompliserte å sette opp, men flere nettlagringsoperatører, som Kinsta og WP Engine, tilbyr dette som en tilleggstjeneste (off the shelf feature). Det betyr at du med relativt liten innsats kan øke både energieffektiviteten og ytelsen på nettstedet.

Velg webhotell med høy PUE-vurdering

Datasentre blir vurdert på energieffektivitet med måleenheten PUE, som står for Power Usage Efficiency. PUE-vurderingen blir beregnet ved å dele mengden energi som går inn i datasenteret på mengden energi som går med til å kjøre datamaskinene inni datasenteret. Slik ser vi hvor mye energi som blir«kastet bort» på aktiviteter som ikke har noe med datasystemene å gjøre (non-computational activities), som for eksempel nedkjøling.

En typisk PUE for et datasenter er rundt 1,67, som betyr at for hver 1,67 watt som går inn i datasenteret, blir kun 1 watt brukt for å gi strøm datasystemene. Høyeffektivitetsdatasentre, som brukes av for eksempel Google, kan ha PUE på så lite som 1,11.

Videre lesning
Is PUE too long in the tooth?
Efficiency (Google Data Center)

Velg datasenter i nærheten av sluttbrukerne

Mye av energiforbruket ved internettbruk skjer i forbindelse med at data overføres over telenettet. Jo lenger informasjonen må reise, desto mer energi brukes på veien.

Et eksempel: La oss si at du finner en billig webhotellpakke fra et selskap i USA, mens de fleste brukerne dine befinner seg i Norge eller et annet land i Europa. Da kastes det bort mye energi på å flytte informasjon over Atlanterhavet. I tillegg kan den store avstanden bidra til å forlenge lastetiden på nettsidene.

Velger du et datasenter i nærheten av sluttbrukerne, vil det altså være positivt for både brukeropplevelsen og planeten.

Bruk CDN

Å velge datasentre i nærheten sluttbrukerne er god praksis, men hva gjør du når brukerne er spredt over hele verden?

Content delivery networks (CDNs), eller nettverk for innholdslevering på godt norsk, er en god løsning. Med CDN lagres bildefiler på et nettverk av datasentre flere steder i verden. Dermed vil de største datafilene i de fleste tilfeller lastes fra CDN-lokasjonen i nærheten av der brukeren befinner seg. Slik reduseres avstanden dataene må reise hver gang en nettside blir lastet inn – noe som igjen er positivt for både energieffektiviteten og lastetiden til siden.

Verktøy du kan bruke for å sjekke om nettsider kjører på grønne datasentre

Website Carbon Calculator er en anerkjent og mye brukt kalkulator du kan bruke for å sjekke hvordan en nettside påvirker planeten. Kalkulatoren sjekker karbonavtrykket til nettsiden du taster inn, og den viser om nettsiden kjører på en grønn nettvert. Websitecarbon.com har også informasjon og artikler om tiltak du kan gjøre for å forbedre avtrykket til nettsiden. The Green Web Foundation har en veldig god oversikt overdatasenterleverandører som hevder at de bruker grønn energi.

Slik finner du et grønt datasenter

• Start med det du allerede vet. Hvilken tilnærming til bærekraft har de leverandørene du bruker i dag? Kanskje du blir positiv overrasket.

• Hvis du leter etter en ny leverandør, kan du bruke The Green Web Foundations database. Der finner du rundt 500 datasentre som har forpliktet seg til å bruke grønn energi. Men ikke stol blindt på dem – sjekk selv hvilke leverandører som oppfyller kravene du har til tekniske spesifikasjoner, tjenestenivåer og kostnader.

• Ting du bør sjekke når du vurderer nye datasentre:

  > Har leverandøren offentliggjort bærekrafts- og miljøpolitikken sin
  
  > Bruker leverandøren grønn energi og/eller sørger for karbonkompensasjon i anleggene sine?
  
  > Hvilken PUE-vurdering har leverandøren?
  
  >Tilbyr leverandøren verktøy som kan effektivisere webapplikasjonene dine?

Les mer om hvordan du går frem for å velge et grønt datasenter.

Du som utvikler har stor innflytelse på energieffektiviteten til nettstedene du lager og vedlikeholder. Selv om noen avgjørelser tatt av designere og innholdsdesignere er utenfor din kontroll, kan du optimalisere innholdet og designene du får.

Skriv ren kode

Hold koden ren og enkel, unngå duplisering og skriv effektive spørringer. Koden bak kulissene skal være et veloljet maskineri.

Husk at dette ikke bare gjelder koden du skriver, men også koden du låner. Hvis du bruker eksisterende rammer og biblioteker, må du sørge for at også de er skreddersydd for å levere den funksjonaliteten du trenger. Unngå unødvendige plugins som gir oppblåsthet – velg plugins som minimerer serverbelastningen og ikke legger unødvendig vekt på fronten.

Bruk mindre JavaScript

JavaScript (JS) påvirker nettstedets effektivitet på to måter:

• Det legger til filvekt (størrelse) på nettsiden.

• Det øker mengden prosessering enheten til brukeren krever.

Punkt 2 gjelder mye mer for JS enn for andre typer filer. Funksjonalitet som drives av JS, behandles på brukerens dataenhet og øker CPU-bruken, noe som igjen øker energiforbruket til enhten. Hører du at kjøleviftene på den bærbare datamaskinen din suser? Det er energi som blir kastet bort.

Prøv derfor å oppnå frontend-interaksjoner, funksjonalitet og animasjoner ved hjelp av mer effektive teknologier som CSS. Går ikke det, må du i det minste bruke JS effektivt.

Webinspektøren i Safari har et nyttig verktøy for å vurdere energipåvirkningen av en nettside på sluttbrukerenheten. Artikkelen How web content can affect power usage fra Apples WebKit-utviklere gir noen detaljerte råd.

Optimaliser bilder

Bilder er en av de største bidragsyterne til datamengden som overføres på de fleste nettsider. Du som utvikler kan ta flere tekniske beslutninger som reduserer filstørrelsen på bildene, noe som automatisk også reduserer både energiforbruket og lastetiden for siden:

• Last opp bilder i riktig skala istedenfor å lene deg på at CSS endrer størrelsen.

• Bruk verktøy som TinyPNG eller ShortPixel for å komprimere bilder uten synlig tap av kvalitet.

• Bruk det mest effektive filformatet for hvert bilde, for eksempel WebP istedenfor jpeg.

• Bruk vektorgrafikk og CSS-effekter for å skape en visuelt engasjerende opplevelse med mye mindre filer enn jpeg og gif.

• Last opp store medier til miljøvennlige tredjepartsleverandører.

• Sett en begrensning på hvor store bildefiler det er mulig å laste opp på siden, slik at ingen har mulighet til å laste opp større bilder enn nødvendig.

Videre lesning:

How to optimize images for web and performance
Why and how to use lossy compression on your WordPress images

Bygg statiske nettsider

Som vi allerede har nevnt, er en løsning å bruke en mellomlagringsserver. Men noen ganger er det mulig å vise en statisk nettside som ikke bruker noen database. Det gjør du ved å skrive nettsiden som en statisk fil i HTML, CSS og JS, eller ved å bruke en statisk sidegenerator eller et datasenter som spesialiserer seg på statiske nettsider. De konverterer nettsiden som bruker CMS til en statisk fil isteden.

Eksempler på statiske nettsted-rammeverk:

Next.js
Gatsby

Bruk Progressiv Web App

Progressiv Web App-teknologi (PWA) gjør det mulig for nettsteder å benytte seg av funksjonalitet som normalt bare ses i native apper.

En av kjernefunksjonene i en PWA er muligheten til å cache filer på brukerens enhet, slik at innhold og «assets» ikke må lastes inn på nytt hver gang den samme brukeren besøker en nettside. Dermed reduseres datamengden brukeren overfører. Dette gjelder særlig på mobile enheter, som bruker mer energi på dataoverføring enn kablede tilkoblinger. I tillegg kan det bidra til å forbedre lastetiden og brukeropplevelsen.

Vurder å bruke lazy loading

«Lazy loading» betyr å utsette innlastingen eller initialiseringen av ressurser til de faktisk trengs. Dette forbedrer ytelsen og sparer systemressurser.

Et eksempel: En nettside har et bilde nederst på siden, og brukeren må skrolle for å se det. I mange tilfeller vil brukeren klikke seg vekk fra siden uten å skrolle helt ned til bildet. Dermed er det kastet bort energi og ressurser på å laste inn bildet uten at brukeren har sett det. En løsning er derfor å legge inn en placeholder for bildet, og bare laste det inn dersom brukeren skroller seg ned til det.

Noen fordeler med lazy loading:

• Det reduserer nettsidens størrelse og laster dermed inn siden raskere.

• Det sparer båndbredde fordi det bare leverer innhold til brukeren når det trengs.

• Det sparer systemressurser fordi kun noen bilder og JavaScript samt noe annen kode må behandles og utføres.

Slik implementerer du lazy loading: Det finner flere opensource-biblioteker du kan bruke. Her er noen eksempler:

• blazy.js– lettvektig JavaScript-bibliotek.

• LazyLoad – skript som automatisk laster inn bilder når de er synlige i vinduet.

• How to use LazyLoad.Js

• Lazy Loading Scripts

Ulike metoder for implementering:

• Lazy initialization: Setter objekter til null. Objektdataen blir kun lastet inn når den blir påkalt ved å sjekke om den er null. Hvis ikke laster den inn objektet.

• Virtuell proxy: Når du skal aksessere et objekt, kan du kalle på et virtuelt objekt med samme grensesnitt som det ekte objektet. Når det virtuelle objektet blir kalt, laster du inn det ekte objektet, og deretter delegerer du til det.

• Spøkelse: Laster inn kun et skall av objektet (delvis tilstand), kun med en identifikator. Den første gangen objektet blir kalt, kan den fullstendige dataen lastes inn.

• Verdiholder: Oppretter et generisk objekt som håndterer lazy loading-oppførsel. Objektet bør vises istedenfor objektets datafelt.

Videre lesning
Lazy loading på imperva.com

• Gjør nettstedet mobilvennlig. Rundt 60 prosent av alle Google-søk utføres på mobil.

• Sørg for at lastetiden på hver nettside er så kort som mulig.

Vurder å bruke AMP

Accelerated Mobile Pages (AMP) sørger for at innhold laster inn raskere på mobile enheter, ved å fjerne unødvendig kode og filvekt. Dermed får brukeren en minimalistisk versjon av den originale nettsiden.

Google prioriterer AMP-innhold i søkeresultater på mobiltelefoner og nettbrett, spesielt for nyhetsrelaterte emner. Dette kan derfor hjelpe til med å øke synligheten til innholdet ditt.

Men merk at AMP er et kraftig verktøy som må brukes med forsiktighet. Ulempene er at innholdet vises på et Google-domene, og at noe av det som blir fjernet av AMP kan være viktig for brukeren.

Hjelpeverktøy for SEO

schema.org
moz.com
Google Search Console

Videre lesning

Best practices: search engine optimization and usability
Moz artikler og blogg

Du kan redusere sporing og annonseringskode, som konsumerer data uten å gi særlig verdi til brukeren. Finn ut hvordan du kan analysere tredjepartsytelse.

En tredjeparts ekstern tjeneste er en tjeneste som kommuniserer med nettsider fra utsiden av sidenes egen server. Her er noen eksempler mange bruker hver eneste dag:

• Sosiale medier: Facebook, Instagram, Twitter osv.

• Tredjeparts annonsenettverk, som Google Adsense, Media.net, BuySellAds og Amazon Associates.

• Nettsideanalyseverktøy som Google Analytics, Crazy Egg og Hotjar.

• A/B test-verktøy som Optimizely, VWO og Unbounce.

• Wordpress kommentarsystemer som Disqus, Jetpack og Facebook comments.

• Sikkerhetskopierings- og sikkerhetsverktøy som VaultPress, Sucuri og CodeGuard.

• Sosiale delingsverktøy som SumoMe og HelloBar.

• CDN nettverk som KeyCDN, Amazon CloudFront, CDN77 og StackPath.

• JavaScript som kjører eksternt.

Slik skaper eksterne tjenester problemer

Hvis du som utvikler bruker mange eksterne tjenester, må du laste ned alle og vente på informasjonen fra dem for hver innlasting av en ny side. Jo flere kall du har, desto lenger må du vente. Belastningen på din egen server blir høyere, og sannsynligheten for at siden har flere problemer øker.

I noen tilfeller vil innlastingen av nettsiden vente til etter at dataoverføringen er fullført mellom siden og den eksterne tjenesten. Hvis tjenesten blir kalt på i headeren og så blir avbrutt, vil siden nekte å laste inn.

Det finnes tiltak som får det til å gå raskere, som å laste inn kode asynkront. Men i de fleste tilfeller vil volumet av ekstra data være det største problemet du må løse når du feilsøker tredjeparts ytelsesproblemer.

• Lag gjenbrukbar arkitektur.

• Bruk utskiftbare komponenter.

• Bruk kjente standarder.

• Sett opp automatisk skalering for applikasjoner.

• Tilstandsløse (stateless) apper bør du skalere ut.

• Tilstandsfulle (statefull) apper er bedre å skalere opp.

• Velg en skalerbar serverløs (serverless) arkitektur hvis mulig.

• Gjør en CO2-beregning for systemet ditt. Bruk for eksempel Microsofts CO2-kalkulator. Lag et referansepunkt og bruk det for å måle CO2-utslippskostnadene for hver nye funksjon. Gjør tiltak for å redusere energiforbruket.

• Sjekk skyserverplasseringene. Skyservere i Asia er kjent for å slippe ut mer CO2enn de i resten av verden.

• Undersøk tid for å erstatte manuelt arbeid med AI der det passer.

• Ikke flytt data rundt i systemet mer enn nødvendig.