Gerry McGovern fragte, ob ich Einblicke in den Energieverbrauch und Websites hätte. Er hat schließlich ein Buch über die digitalen Kosten für den Planeten. Er fragte sich nach den Besonderheiten von Webtechnologien, wie...
Wenn Sie dies in HTML tun, verbraucht es 3-mal so viel Energie, aber wenn Sie es in JavaScript tun, verbraucht es 10-mal so viel.
Ich würde denken, wenn Sie *wirklich* suchen und *genau* wüssten, wie man es misst, könnten Sie solche Beispiele finden. Nehmen wir an, ich möchte ein Element über den Bildschirm bewegen. Wenn ich eine setInterval-Schleife in JavaScript schreibe, die die left-Position des relativ positionierten Elements um eine Millisekunde erhöht, bin ich mir zu 99 % sicher, dass dies mehr buchstäblichen Strom verbraucht, als wenn Sie eine CSS-@keyframes-Animation über dieselbe Zeit durchführen würden, bei der Sie den Wert transform: translateX() ändern. In diesem Beispiel denken wir normalerweise mehr über Leistung als über Energieverbrauch nach, aber das ist sofort interessant: **Führt gute Leistung zu einem geringeren Energieverbrauch?** Wahrscheinlich.
Forschungen haben sich damit beschäftigt.
Wir stellen eine statistisch signifikante negative Korrelation zwischen Leistungswerten und dem Energieverbrauch mobiler Webanwendungen (mit mittleren bis großen Effektstärken) fest, was impliziert, dass eine Erhöhung des Leistungswerts tendenziell zu einer Verringerung des Energieverbrauchs führt.
Sie testeten mobile Webanwendungen unter Android mit Lighthouse-Scores. Ich kann vermuten, dass dies gut auf andere Plattformen und andere Leistungsmetriken zutrifft.
Ich bin froh, dass die bisherige Forschung mit dem übereinstimmt, was ich logischerweise für wahr halten würde. Dinge, die zu schlechter Leistung führen, sind Dinge, die Energie verbrauchen. Stellen Sie sich Bilder vor. Sie werden bei Leistungswerten dafür bestraft, dass Sie zu große oder nicht optimierte Bilder ausliefern. Stellen Sie sich die Leistungsauswirkungen davon vor. Auf einem Server liegen zwei Bilder, eines groß und eines klein. Welches verbraucht mehr Strom, um zum Computer eines Benutzers zu gelangen? Das große. Welches benötigt mehr Rechenleistung zum Parsen und Anzeigen? Das große. Welches belegt mehr Speicher (der Strom verbraucht), solange es auf dem Bildschirm zu sehen ist? Das große.
Weniger über das Netzwerk, weniger Strom.
Weniger Ihr Browser tun muss, weniger Strom.
Eine Anzeige, die sich alle paar Sekunden automatisch aktualisiert? Nicht nur, dass sie nervig ist, sie ist auch bandbreitenintensiv und damit Strom verschwendend. Jedes Mal, wenn Sie auf Abfragen (d. h. wiederholtes Anfordern von Netzwerkanfragen) zurückgreifen müssen, anstatt auf ereignisbasierte Mechanismen wie Web-Sockets? Das verbraucht Strom, den Sie möglicherweise nicht hätten verbrauchen müssen.
Wir wissen, dass CDNs auch gut für die Leistung sind. Anstatt dass eine Datei (wie ein Bild) um die ganze Welt reisen muss, kommt sie von einem Server, der geografisch viel näher ist und für diese Aufgabe konzipiert wurde. Hier wird es für mich etwas unklarer.
Mit Leistung als Ziel: Ziel erreicht. Mit niedrigem Energieverbrauch als Ziel, sind wir da?
Es wurde untersucht, aber leider kann ich allein aus dem Abstract keine Schlussfolgerung ziehen. Meiner Meinung nach wird die Sache dadurch kompliziert, dass Server auf der ganzen Welt Kopien dieser Assets speichern und wenn sich die Assets ändern, werden nicht nur ein Server aktualisiert, sondern wieder Server auf der ganzen Welt. Es muss ein Gleichgewicht zwischen der Verbreitung und der duplizierten Speicherung geben, was die Einsparungen betrifft, die durch die Effizienz der Speicherung von Anfragen erzielt würden.
Apropos Speichereffizienz, ich bin mir sicher, dass reiner Speicher auf der Festplatte viel weniger Strom verbraucht als Dateien, die über Netzwerke gesendet werden – aber es kostet immer noch etwas. Sagen Sie, Sie speichern eine Kopie jeder Datei, jedes Mal, wenn Sie sie ändern. Sagen Sie, Sie speichern eine vollständige Kopie Ihrer Website jedes Mal, wenn Sie sie bereitstellen. Nützlich? Sicher. Kostet das Strom? Muss es. Dort muss ein Gleichgewicht gefunden werden.
Gerry hat mich jedoch nach bestimmten Technologien gefragt. Mir fällt noch eine weitere große Sache im CSS-Bereich ein: Dunkelmodus! Auch hier wurde es untersucht. Dunkelmodus spart Strom.
Dunkelmodus kann die Anzeigeleistung bei voller Helligkeit für die von uns getesteten beliebten Android-Apps tatsächlich um bis zu 58,5 % reduzieren! In Bezug auf die Reduzierung des gesamten Akkuverbrauchs des Telefons entspricht dies Einsparungen von 5,6 % bis 44,7 % bei voller Helligkeit und 1,8 % bis 23,5 % bei 38 % Helligkeit.
Und wie vergleicht man Technologien? Ich vermute, es geht viel mehr darum, was diese Technologie (oder Sprache) tut, als um die Sprache selbst. Ich kann zum Beispiel einen kleinen Bereich erstellen, der sich in HTML mit einem <details>-Element öffnet und schließt. Ist das energieeffizienter als die Erstellung dieses Bereichs durch Anhängen eines Klick-Handlers an eine Schaltfläche, die die Klasse eines Elements umschaltet, das es visuell öffnet und schließt? Ich bezweifle das irgendwie. Ich wette, der Strom, der bei den Neuanstrich-/Neurender-Schritten des Browsers und den zugrunde liegenden Sprachen verbraucht wird, ist weniger relevant. Und doch! Wenn ich den Browser dazu bringen würde, eine 50 KB JavaScript-Bibliothek herunterzuladen, nur um mein kleines Öffnen/Schließen-Element zu implementieren, dann ja, es spielt eine Rolle, und die JavaScript-Version ist weniger effizient.
Auf diese Weise gehe ich davon aus, dass, genauso wie gute Leistung *im Allgemeinen* zu geringerem Energieverbrauch führt, die Einhaltung der Regel des geringsten Stromverbrauchs im Allgemeinen ebenfalls zu geringerem Energieverbrauch führt.
Haben Sie es satt, dass ich rate? Ganz recht.
Jack Lenox' Artikel „How Improving Website Performance Can Help Save The Planet“ auf Smashing ist eine bessere Untersuchung. Er verweist auf Websites, die Ihre Seite testen. Website Carbon Calculator ist ein Beispiel und besagt
Die Berechnung der Kohlenstoffemissionen einer Website ist eine Herausforderung, aber anhand von fünf Schlüsseldaten können wir eine ziemlich gute Schätzung vornehmen
1. Datenübertragung über die Leitung
2. Energieintensität von Webdaten
3. Energiequelle des Rechenzentrums
4. Kohlenstoffintensität von Strom
5. Website-Traffic
Der Testcode ist Open Source.
„Führt gute Leistung zu einem geringeren Energieverbrauch? Wahrscheinlich.“
hängt von der Definition guter Leistung ab
schnelle Effekte zu erzielen kann manchmal ineffizient sein und wir sehen es oft, besonders bei Desktop-Grafikkarten, deren Taktraten und Spannungen weit über den Punkt abnehmender Erträge hinaus eingestellt sind
andererseits hat die Minimierung des Ressourcenverbrauchs auf Kosten längerer Berechnungszeiten ihren Preis in längeren Laufzeiten konstanter Systemteile wie des Bildschirms, und es ist unmöglich, seine Berechnungen universell zu drosseln, um zu verhindern, dass Prozessoren ihre optimalen Frequenzen überschreiten und den Rest des Systems für die beste Effizienz zu berücksichtigen
aber im Hinblick auf das, was Sie im Web tun können, ist „je kürzer, desto besser“ eine gute Schätzung für Energie und bringt den offensichtlichen Vorteil, dass der Benutzer kürzer warten muss
Das gilt insbesondere für Webgrafiken.
Eine SVG zum Beispiel ist sehr effizient in Bezug auf die Größe, aber es dauert länger und erfordert mehr Rechenleistung, um sie zu rendern, als ein Rasterbild.
Ich habe sogar Engpässe auf großen Listing-Seiten mit vielen wiederholten Inline-SVGs gefunden, die das DOM einfach vergrößern und die Renderzeit erhöhen.
Ich frage mich über Ihr
setInterval/leftvs.@keyframes/translateX-Beispiel. Was im Browser passiert, um die beiden zu unterscheiden, ist, dass die zweite wahrscheinlich die Seite in separate Ebenen aufteilt.Dies verbraucht weniger Rechenleistung (und dauert weniger Zeit), da die Übersetzung nur einen Kompositionsschritt auslöst, aber keine Neuanstrich. Andererseits benötigt es mehr Speicher, um die zusätzliche Ebene zu speichern. Der Energieverbrauch für beide Strategien scheint sich also auszugleichen. Gibt es eine klare Antwort, welche energieeffizienter sein wird?
(Übrigens habe ich Details über den Browser-Layout-/Paint-/Composite-Prozess aus einem Vortrag von Martin Splitt gelernt, siehe https://www.youtube.com/watch?v=A16g16bTtjA für eine englische Version dieses Vortrags, den er auf der HolyJs Moscow 2017 gehalten hat.)
Es sollte beachtet werden, dass die Energieeinsparungen im Dunkelmodus vollständig von der Bildschirmtechnologie abhängen. Die in dieser Studie verwendeten OLED-Bildschirme benötigen weniger Strom, um dunkle Farben anzuzeigen als helle Farben. Das gilt jedoch nicht für LCD-Bildschirme, die etwa 6 % mehr Energie zum Anzeigen von Schwarz als von Weiß benötigen. Die Zukunft könnte durchaus OLED sein, und ich denke, das Anbieten von dunklen und hellen Modi ist eine Usability-Funktion, die wir alle implementieren sollten. Aber wenn so viele Benutzer immer noch auf LCD-Bildschirme schauen (wie die meisten Mittelklasse- und Low-End-Android-Telefone und fast alle PCs), denke ich, ist es schwierig zu behaupten, dass der Dunkelmodus derzeit Nettoeinsparungen erzielen würde.
Das ist etwas, worüber ich in letzter Zeit viel nachgedacht habe. Als ich meine persönliche Website durch den CO2-Rechner laufen ließ, hieß es, dass der Wechsel zu einem Hosting-Anbieter, der 100 % erneuerbare Energie nutzte, offensichtlich die Kohlenstoffemissionen reduzieren würde. Da ich jedoch bei Netlify bin, erhalte ich ein kostenloses CDN und konnte keine 100 % erneuerbaren CDN-Anbieter finden. Wie groß ist der Unterschied zwischen dem Senden von etwas über eine kurze Strecke mit schmutzigem Strom und einer langen Strecke mit sauberem Strom? Ich weiß es nicht, aber ich wäre sehr daran interessiert, es herauszufinden. Es wäre großartig, wenn wir eine Art Leitfaden für den Aufbau energieeffizienter Websites entwickeln könnten.
Vor einiger Zeit habe ich auch einen sehr unwissenschaftlichen Test mit den Websites einiger populärer Zeitungen hier in Großbritannien durchgeführt: https://pinopticon.net/blog/carbon-and-pagespeed/; dabei verglichen wir ihre verschiedenen PageSpeed-Insights-, Pingdom- und CO2-Rechner-Ergebnisse. Die Ergebnisse schienen tatsächlich eine starke Korrelation zu zeigen, wobei eine bessere Leistung im Allgemeinen zu weniger CO2 führte, aber auch dies basiert nur auf dem, was diese Tools uns sagen können.