Webkode kan gøre en forskel på 40 watt i strømforbrug for den besøgende

En softwareudvikler har gennemgået forskellige nyhedshjemmesiders energieffektivitet og fundet stor forskel, selv uden Flash.

Mange moderne hjemmesider har så omfattende eller dårlig kode, at det belaster energiforbruget på internetbrugeres computere. Det konkluderer softwareudvikleren Santeri Paavolainen på sin blog.

Ved at bruge en energimåler og en bærbar computer med Flash deaktiveret har han vurderet en række populære hjemmesider.

Paavolainen udtaler, at hjemmesider fra New Scientist og BBC er de mest energieffektive, imens The Guardian og især The New York Times er strømslugere.

De bedste hjemmesider ligger under 10 watt. YouTube og Vimeo videoer ligger på 20 watt, og The New York Times kræver 48 watt af den besøgende.

Energiforbrug forårsaget af dårlig programmering fik i 2012 EU til at støtte en række offentlige og private initiativer. Fx fik projektgruppen ENTRA tilskud til at udvikle et program, der kan analysere kode for at vurdere det sandsynlige energiforbrug.

Roskilde Universitetscenter deltager som koordinator for initiativet, der har deadline til september 2015.

Tips og korrekturforslag til denne historie sendes til tip@version2.dk
Kommentarer (28)
sortSortér kommentarer
  • Ældste først
  • Nyeste først
  • Bedste først
#2 Ivo Santos
  1. Hvad er så forskellen med og uden reklame, det burde vel også testes.
  2. Hvor stor er forskellen, hvis man slår javascript fra, samt hvis javascript er slået til, lige der bør der også være en stor forskel vil jeg mene.

Det er de to ting jeg kom til at tænke på efter jeg havde læst artiklen.

  • 7
  • 0
#3 Ivan Skytte Jørgensen

Dårlige webprogrammører kan lave slamkode i javascript, flash, silverlight, java-applets, webGL, ... Flash er mest brugt til grafisk intensive animationer, og det har givet det et dårligt ry mht. CPU-forbrug. Men jeg har set slam-javascript, som lavede en latterlig animation med giffer, og brugte 100% CPU.

Selv har jeg for et stykke tid siden lavet noget 3D-visning med WebGL/three.js, og hvis man følger "standard-måden" at skedulere rendering, så forsøger siden at genberegne grafikken 60 gange i sekundet. Det blev ret hurtigt fikset så det kun sker når der er en ændring. (pudser glorien)

Noget, som kunne skubbe websiderne i den rigtige retning var hvis browserne detektede hvis en side brugte mere end 30% CPU efter 10 sekunder, og så automatisk stoppede gif-animationer, flash, video, lyd, og viste en rød bjælke øverst med teksten "denne side bruger urimeligt mange resourcer" (med mulighed for at slå fra pr. websted). Så ville der være en chance for at webudviklerne fik lov til at optimere ting.

  • 12
  • 0
#4 Rune Jensen

Hvor er den webside, hvor jeg kan teste mine sider for WATT forbruget?

Det siger sig selv, at laver man en web APP, så vil netop strømforbruget være ret relevant. Hvem gider have et image som strømsluger? Men hvordan TESTER man det selv? Som udvikler?

Før der er sådan en funktion, enten remote service eller måske endnu bedre indbygget i browseren, som er nem at bruge, så vil det ikke rigtigt give nogen mening i bredere forstand med disse oplysninger.

Det er fedt at se DK indblandet i netop strømsparing ogoptimering på websider/APPs, men vi mangler konklusionen. Noget som nemt kan finde fejlene eller hjælpe os med det.

Man kunne vel lave en liste over forskellige CSS/JS funktioners "rene" Watt forbrug (bare de vel 50 værste). F.eks. vil CSS3 skygger i visse tilfælde trække tænder ud. Men hvor meget for en "standard skygge"?

  • 1
  • 2
#5 Christian Nobel

Nu er det i det hele taget ret håbløst at udtrykke sig i Watt, da det helt afhænger af den pågældende computer - det havde være lidt mere seriøst at tale om relativt strømforbrug.

Men en mulighed er jo at bruge strømforbrugsgrafen på en bærbar som kører på batteri, samtidig med man checker de pågældende hjemmesider, det giver et meget godt fingerpeg.

Observerede for nogle år siden (tror det er fixet, men ingen bruger det mere), at noget så simpelt Marquee text kunne få Firefox til at gå helt i koma, så processorbelastning røg helt i top.

  • 6
  • 0
#6 Rune Jensen

Ups. Nu tog jeg GnomeMonitor, og kørte en test. Firefox bruger 50% CPU på alle fire cores i load af APPen. Det er næppe godt..

Så fandt jeg denne: http://www.html5rocks.com/en/tutorials/memory/effectivemanagement/

Men jeg synes Chromes Heap Profiler, hvor fantastisk og effektiv og alt det der den er, så er den også mega avanceret at forstå. Helt ærligt, jeg er bare webkoder, det har aldrig været nødvendig for mig før at forstå hvordan en browser virker internt. Kunne det ikke gøres mere brugervenligt.

Er sådan set kun ude på at fidne de leakende funktioner, så de kan rettes. Men det er lidt i overkanten det her.

  • 2
  • 0
#7 Jesper Høgh

Ville det ikke være mere retvisende, og dermed seriøst, hvis det samlede energiforbrug for klient og server(e) blev undersøgt.

I dag er det jo stort set umuligt, at finde et site, som ikke pusher enorme mængder af 3. parts add-, spy- og crabware.

  • 3
  • 0
#10 Rune Jensen

Men en mulighed er jo at bruge strømforbrugsgrafen på en bærbar som kører på batteri, samtidig med man checker de pågældende hjemmesider, det giver et meget godt fingerpeg.

Som jeg forstår det, så er problemet, at hver gang man poller batteri-APIet, så bruges der strøm. Sådan, at man faktisk har opgivet at gå den vej for at måle og profilere.

I stedet kunne man se på, hvordan ens JS opfører sig, samt hvordan man bruger CSS, ikke mindst animation.

Jeg ville mene, der er en vis sammenhæng imellem hastighed og energiforbrug, og ja, lige pt- der er der flest, som (åbenbart) interesserer sig for at profilere sine APPs for hastighed. Kunne man (gen)bruge nogle af de samme guide lines?

Der er masser af værktøjer til hastighedsoptimering, ikke rigtigt nogle, som specifikt fokuserer på strømforbruget.

Men f.eks. at man ikke laver unødvendgige reflow, og så at man gør det muligt at off loade animering til GPUen.

SVJV ting, som gør en side hurtigere, men ville det ikke også hjælpe på strømforbruget?

Iøvrigt, jeg fandt en artikel, hvor en person havde sat sig ned og lavet en systematisk test af alle CSS3 funktioner hver for sig, som jeg foreslog. Og dette er så heller ikke så ligetil at måle.

F.eks. så vil box-shadow: 1px 2px 3px black

være ganske meget kvikkere og vel i princippet også koste mindre strøm, end hvis man bruger 2px 3px 4px

Og det bliver langt værre med kombination af rounded corners. Det er ikke bare a+b, men a+b og ganget med en faktor.

Ja, jeg er nørd, jeg researcher nørd-sider.

Men kunne man ikke få bare nogle generelle guide lines til, hvordan man får strømforbruget ned, i hvert fald med CSS og JS. Ligesom der er med hastighed, f.eks. http://www.webpagetest.org/. Det felt er ret godt researched og afprøvet efterhånden.

  • 3
  • 0
#12 Rune Jensen

Prøv at lade din batterigraf køre, og så start noget Flash snask i din browser - det er ret så synligt.

Jo, fair nok, selvfølgelig kan man selv sidde og se på batterimåleren imens man kører sin APP og få et "rough estimate" :)

Men at implementere det i en test-suite, sådan man kan få egentlig benchmarking/profiling, så man kan se nøjagtigt hvor i APPen det går galt med strømforbruget - tror det var det, som fik folkene bag idéen til at opgive den direkte vej, for så skal man polle det API ret tit.

Betyder selvfølgelig ikke, der ikke er andre, som ville prøve det, og heller ikke at det ikke kan lade sig gøre :)

Men hvad jeg mente iøvrigt før, jeg glæder mig til en egentlig konklusion på det. Hvad er guide lines for lavere strømforbrug - for man kan ikke bare sige "sluk for javascript og lad være med at bruge CSS3".

Det er klart, hvis man laver en side med ren tekst, så vil den både være hurtig, og nok også det tætteste man kommer på lavt strømforbrug.

Det bliver bare en ret kedelig web APP så.

I stedet må man se på helt generelt, hvad det er, som webudviklere gør forkert. Hvis de gerne vil være strømbevidste.

Jeg savner, at V2 går lidt dybere ind i sagen, og giver os baggrunden. Artiklen synes mig lidt overfladisk som den er. En opridsning af et klart problem, men ingen rigtige løsninger.

Giv os nogle hints eller guidelines. Det må være muligt.

  • 2
  • 0
#13 Rune Jensen

Energiforbrug forårsaget af dårlig programmering fik i 2012 EU til at støtte en række offentlige og private initiativer. Fx fik projektgruppen ENTRA tilskud til at udvikle et program, der kan analysere kode for at vurdere det sandsynlige energiforbrug.

Det er dét, jeg mener. Hvor er det program? Jeg kan ikke finde det. Er det på Github eller noget?

Analysen begyndte i 2012. De da have udviklet et eller andet nu...

  • 2
  • 0
#15 Jesper Høgh

Og i øvrigt er frameworks, som f.eks. Drupal jo enormt server-tunge.

Men chefen - ham djøf'eren - han vil hellere se et site, som giver ham nogle cool feedbacks, som f.eks. flot grafik fra GoogleAnalytics, end han vil se et site, som rent faktisk fungerer.

Og derfor ansætter han hellere en konfiguratør end en programmør.

Og det kan der vel i grunden ikke gøres noget ved(?)

  • 0
  • 0
#16 Steen Frank Jensen

Det ser ud til, at effekt og energi bliver blandet sammen.

Effekt måles i Watt. Hvis min computer bruger 40 Watt i 0.0000001 sekund, så betyder det intet for min elregning, da jeg ikke betaler for effekten.

Energi beregnes ved at gange effekt med tid og måles i Watt sekunder, kilo watt timer (kWh) eller lignende.

Hvis hjemmesiden sender data i en time hvor min PC bruger 40 watt, så bruger jeg 40 Watttimer eller 0,040 kWh, hvilket er den måleenhed der står på elregningen og som jeg betaler for.

  • 1
  • 0
#18 Johnnie Hougaard Nielsen

Hvor er den webside, hvor jeg kan teste mine sider for WATT forbruget?

Jeg ved godt at det næsten er for banalt, men start med en computer uden batteri, stationær eller bærbar hvor det kan pilles ud, og køb en billig strømmåler hos Harald Nyborg eller lignende. Der kan sikkert også findes mere avancerede målere, men det er principielt svært for et stykke software at måle strømforbruget, fordi det ville kræve tæt integration med både CPU, chipset og måske især grafikkort. Med andre ord ville jeg ikke have den store tillid til sådan et tal.

Husk i øvrigt at test-maskinen ikke skal være "for" ny og avanceret, en effekt som ikke får nyeste generation til at stønne, kan stadig være hård kost for en stor del af virkelighedens client maskiner.

  • 1
  • 0
#21 Rune Jensen

Jeg ved godt at det næsten er for banalt, men start med en computer uden batteri,

Det giver kun svaret på,om der er noget galt. Og det er der altid alligevel når man tror man er færdig.

Så mit udgangspunkt er, at når jeg er færdig med en side/APP, så bruger den for meget strøm.

Så er det bare at finde ud af hvor det går galt.

Hvis man kigger på, hvordan standarderne er bygget, også de uofficielle, så har der været researched grundigt og fundet best practices for:

  • Brugervenlighed: useit.com og WAIG er gode ressourcer, ligesom ARIA standarden (hvis man ellers forstår den, men så kan man finde blogs som fortæller det i lettere tilgængeligt sprog)

  • Sikkerhed: oWASP er den første kilde jeg går til her, omend der i visse dele af W3C-standarden faktisk er lagt vægt på sikkerhed, Men youtube har ganske mange tech talks om det, givetvis pga. DefCon og BlackHat.

  • Hastighed:Forskellige JAVA/javascript-eksperter har youtube-videoer om netop hastighed. Og der er generelle best practices udfra studier fra både Yahoo (ySlow) og Google (webpagespeed). Google har f.eks. denne: https://developers.google.com/speed/docs/insights/rules

Hvor er de generelle best practices for god udnyttelse af strømforbrug?

Der er sandsynligvis en vis forbindelse imellem god hastighed og lavt strømforbrug. Men det er ikke altid åbenlyst.

F.eks. så bruger NewScientist ikke minifying, og de laver interne @-imports, som i terorien sløver. Alligevel er den ganske kvik og altså også med lavt strømforbrug.

Jeg er ganske klar over, at i JS, der er DOM-manipulation og global variables "the devil" når gælder hastighed. Og sikkerhedsmæssigt, der kan innerHTML udnyttes til morphed XSS og eval "is just evil".

Ligesåvel som at W3C validatoren vil skrige, hvis jeg ikke putter alt på mine IMGer.

Men strømforbrug? Aner ikke en klap om, hvilke guide lines der er for det...

Hvad med en tutorial i brug af heap profiling? Hvordan man finder lækkende funktioner og CSS eller konstante reflows som dræner batteriet? Eller er det for avanceret at lave?

  • 1
  • 0
#23 Troels Henriksen

Hvor er de generelle best practices for god udnyttelse af strømforbrug?

Der er sandsynligvis en vis forbindelse imellem god hastighed og lavt strømforbrug. Men det er ikke altid åbenlyst.

Jeg tror nu at hvis man bare prøver at holde CPU-belastningen nede, så har man opnået 90% af den mulige strømbesparelse. En anden vigtig ting er ikke kun at fokusere på total CPU-belastning, men også på at samle belastningen i korte perioder, så maskinen kan gå være i en strømbesparingstilstand det meste af tiden. Dette kræver at man ikke konstant modtager og sender små beskeder for at holde småting opdateret - selvom det måske ikke er så beregningstungt at spørge Twitter om opdateringer hvert 10. sekund, så forhindrer det potentielt CPU'en i at skrue ned for frekvensen.

  • 1
  • 0
#24 Mathias Hagensen

Et aspekt artiklen ikke får med er at størstedelen af strømforbruget skyldes reklamer. Reklamer kan udgøre over 90% af det samlede forbrug og de er typisk ikke lavet af programmører, men i stedet reklamefolk, som benytter sig af et værktøj til generering af banneret.

Ifølge min erfaring kan HTML5 være lige så slem som Flash, da der ved gennemgang forefindes en masse automatisk genereret slamkode, som ikke engang udnytter hardware accelereret grafik, men går direkte på CPU'en.

Pointen er, at det sjældent giver ret meget for den samlede oplevelse, hvis man laver alle de anbefalede tricks (komprimere CSS, JSS, billeder osv.), når man alligevel skal have en masse ting ind på siden, som er uden for ens kontrol.

  • 2
  • 0
#25 Rune Jensen

Njah. Altså ifølge testene, så vil man altid kunne spare strøm ved at bruge JPEG i stedet for andre formater, ligesom at hvis man bygger sin hjemmeside i HTML table, så behøver computeren ikke lave så mange beregninger og så sparer man strøm.

Ifht. usability kan det godt klares at lave en tableopbygget hjemmeside, som også er tilgængelig. Men fleksibiliteten ryger. Så måske nok kun brugbart på 1-side APPs.

Videre, så vil rene HTML links være langt mere effektive end at bruge javascript til links.

OK, så. Det er i forvejen best practice, fordi ren HTML altid er lettere at få brugervenligt end javascript.

Så er der forholdet imellem desktop og mobil.

Her vil det måske glæde brugere af Opera og Opera Mini, at Operas "turbo mode" kan spare ganske meget energi. På clienten. Men over all tror jeg ikke det kan svare sig ifht. på forhånd at skalere hovedbillederne i måske 5-6 forskellige størrelser.

Det skal nemlig så kun gøres én gang. Operas Turbo-mode, vil nedskalere billeder hver eneste gang et billede går igennem proxien. I det lange løb tror jeg det koster på det samlede energiforbrug.

Men godt for mobilbrugeren selvfølgelig.

Ellers, så anbefales ifht. energiforbrug at lave én side til desktop, én side som er optimeret mobil.

Det strider så lidt imod fleksibilitets-idéen i CSS3, hvor det hele kan lægges i styles. Men rent brugervenlighedsmæssigt, kunne jeg godt forestille mig visse sider, som blev bedre af en specifik opdelt optimering efter platform.

Men det er nok efter smag. Jeg foretrækker CSS3 til at samle det hele, både desktop og mobil. Måske ændrer jeg mening, hvis jeg finder ud af, HVOR meget energi mit CSS3 style bruger:)

PS. Og nu hvor Opera er konverteret til webkit-religionen - får vi så en Turbo-mode i Google også?

PPS. Der ER kommet noget ud af det EU støttede projekt, om ikke andet så som en sidegevinst. Og det er open source... Om det så virker, ved jeg ikke, da jeg ikke har kigget nærmere på det. HEr: https://www.youtube.com/watch?v=HJykiFtCiow

Men umiddelbart ser det for mig ud til, at viden omkring strømforbrug ifht. kodning pt. er ca. 3-5 år bagefter viden om f.eks. sikkerhed og brugervenlighed.

  • 0
  • 0
#26 Kjeld Flarup Christensen

Hvis vi alle stadigt sad og kodede i assembler, så var det her ikke noget problem. Det ville omvendt tage en del mere tid at kode det. Softwareudviklingen har altid bevæget sig imod mere og mere kompleks kode, hvor man lænede sig op ad kraftigere og kraftigere CPU'er. Og med kraftigere menes også flere instruktioner/watt Så den webside som i dag bruger 40W bruger måske kun 4W om et par år.

Det er dog også mulig at browserne bliver mere effektive til at gennemskue slam kode. Igen for at tage analogien til assembler, så er en C compiler/optimizer bedre til at skrive assembler end et menneske. Det kunne være interessant om målingen på Financial times var lavet på flere platforme Linux,Mac,Windows med Firefox,Chrome,Safari,IE. Der ville med garanti være forskel der. Typisk udvikles en web applikation på en platform, og testes kun nødtørftigt på andre, hvorfor den sagtens kan vise sig at være dybt ineffektiv på nogle platforme.

Løsningen findes næppe hos udviklerne. Det er browserne som skal køre mere effektivt.

  • 0
  • 1
#27 Lars Petersen

Jeg er spændt på at se konklusionen på undersøgelsen når den engang offenliggøres. I indlæggene fra jer alle er der meget lidt fakta som I baserer jeres udsagn på. For at imødegå dette har jeg prøvet at teste med en strømmåler. Forbruget afhænger naturligvis af indholdet websiderne og de anvendte "teknologistakke" så ansvaret for strømforbruget ligger både hos udviklerne af operativsystemerne, udviklerne af browserne og sidst men ikke mindst hos udviklerne af websiderne. En side som f.eks. bt.dk med masser af reklamer øger min stationære PC's strømforbrug med 40-60 W lige så længe siden vises. Prøv evt. selv at lave nogle målinger og lad os så se om den officielle undersøgelse når frem til samme resultat senere i år.

  • 2
  • 1
Log ind eller Opret konto for at kommentere