In den letzten sechs Monaten habe ich mich zunehmend für das Thema Web-Nachhaltigkeit interessiert. Der CO₂-Fußabdruck des Internets war etwas, worüber ich mir früher nicht viele Gedanken machte, was überraschend ist, wenn man mein Interesse an Umweltthemen und die Tatsache bedenkt, dass mein Beruf webbasiert ist.
Das Web in einer sich erwärmenden Welt
Um es kurz zusammenzufassen: Ich habe letztes Jahr an MozFest in London teilgenommen. Zwischen den Sitzungen habe ich ein Whiteboard gescannt, um zu sehen, was ansteht, und entdeckte eine Sitzung mit dem Titel „Building a Planet-Friendly Web.“ Ich war ein wenig fassungslos. Worum zum Teufel sollte es dabei gehen?
Ich nahm an der Sitzung teil und die Augen öffneten sich. Was mir jetzt offensichtlich erscheint – aber damals eine Offenbarung war – war der immense Energiebedarf des Internets. Dieser Bedarf macht es zur größten kohlebefeuerten Maschine der Erde, was bedeutet, dass seine CO₂-Emissionen wahrscheinlich mindestens dem globalen Flugverkehr entsprechen. Immer mehr Menschen gehen online, aber dies, gepaart mit dem Aufkommen immer fetterer Websites, bedeutet, dass der Energiebedarf des Internets exponentiell wächst. Jedes zusätzliche übertragene Byte bedeutet mehr Energie, was in den meisten Ländern mehr CO₂ bedeutet.
Es ist allgemein anerkannt, dass wir das Ausdrucken von E-Mails vermeiden sollten, um Bäume zu retten, aber das führt zu der falschen Annahme, dass das Web ein grünes Medium ist. Ich muss leider sagen, das ist es nicht.
Gibt es einen anderen Weg?
Die gute Nachricht ist, dass es nicht so sein muss. Seit 2009 prüft Greenpeace die Energieverbräuche von Internetunternehmen und lobbyiert sie, sich durch ihre Clicking Clean Kampagne zu verbessern. Die Green Web Foundation verfügt über eine ständig wachsende Datenbank von Hosting-Unternehmen, die erneuerbare Energien nutzen oder sich zumindest zur CO₂-Neutralität verpflichtet haben. Und neue Werkzeuge entstehen, die uns, die wir am Web arbeiten, helfen, die Umweltauswirkungen unserer Produkte zu messen.
Es gibt auch einige großartige Ressourcen, wie Tim Fricks Designing for Sustainability, drei Jahre voller Vorträge von der SustainableUX Konferenz und peripheres Material, das uns zwar nicht explizit auf Nachhaltigkeit fokussiert, aber helfen kann, kohlenstoffärmere Websites zu erstellen.
Einführung in Susty WP
Ich beschloss, mich selbst herauszufordern, um zu sehen, wie effizient ich eine WordPress-Website verpacken könnte. Während ich dabei war, dachte ich: „Warum nicht die Website über Nachhaltigkeit und WordPress machen?“ Ich weiß, WordPress/Nachhaltigkeits-Inception. Cool, oder?
Und so wurde sustywp.com geboren. Mit seinem dazugehörigen Theme, Susty. Ich bin ziemlich stolz darauf sagen zu können, dass ich es geschafft habe, die Ladezeit der Homepage auf 7 KB Datenübertragung zu reduzieren. Tatsächlich habe ich sie auf 6 KB reduziert, aber die Meta-Daten, die Yoast hinzufügte, haben sie um fast ein ganzes KB erhöht! 😛 Da ich jedoch versuche, eine Botschaft zu verbreiten, hielt ich dies für einen akzeptablen Kompromiss.
Bevor ich ins Detail gehe, möchte ich ein paar wichtige Fakten teilen
- sustywp.com erzielt 100/100 Punkte bei der Performance über Googles Lighthouse.
- Es erhält auf webpagetest.org durchweg A-Noten.
- Es zerstört die meisten Benchmarks mit einer durchschnittlichen Zeit bis zum ersten Byte (TTFB) von etwa 0,15 s und ist vollständig in 0,5 s gerendert.
- Es wird in einem Rechenzentrum gehostet, das zu 100 % mit erneuerbarer Energie betrieben wird.
Wie funktioniert das also?
Das Bemerkenswerte daran ist eigentlich, wie banal es ist. Stark inspiriert von Heydon Pickerings Eifer für weniger verdammten Code schreiben und Projekten wie Brad Frosts Death to Bullshit, habe ich eine radikale Entkernung von Underscores vorgenommen und alles entfernt, was ich nur konnte. Und um es klarzustellen: Es ist nicht so, als ob Underscores voller unnützem Kram wäre. Es ist ein sehr schlanker Ausgangspunkt für die Erstellung eines Themes. Ich bewundere es sehr und empfehle seine Nutzung uneingeschränkt. Es enthält jedoch bestimmte Annahmen, die nicht mit meinem spartanischen Ziel übereinstimmten, die kleinstmögliche WordPress-Website zu erstellen.
Wie zum Beispiel?
Navigation? Nein. Sidebar? Weg damit. Klassen? Nicht in meiner sozialistischen Utopie.
Angesichts der von mir gesetzten Einschränkungen musste alles, was in den DOM gelangte, einen sehr guten Grund haben, dort zu sein. Da dies ein Experiment war, verfolgte ich den etwas radikalen Ansatz, die Navigation auf eine eigene Seite zu verlagern. Das ist wunderbar befreiend und bedeutet, dass ich nicht den fast immer enttäuschenden Tanz durchlaufen musste, um zu überlegen, wie ich sie präsentabel mache, sie für die vielen Benutzer verstecke, die sich nicht darum kümmern, sicherstelle, dass sie robust genug für unendlich lange Listen mit endlosen Dropdowns ist usw.
Das bedeutet weniger HTML, weniger CSS und definitiv kein JavaScript! Gewinn, Gewinn, Gewinn.
Und die Sidebar? Nun, ich hatte schon immer eine Abneigung gegen Sidebars, also war das eine einfache Sache zu entfernen. Susty hat keinen Widget-Bereich. Ich bin sicher, es wird darüber hinwegkommen.
Gibt es noch mehr Fett, das wir abschneiden können? Nun, wenn wir kaum HTML haben wollen und minimales CSS wollen, brauchen wir dann wirklich all diese Klassen? Ich wollte versuchen, CSS so zu schreiben, wie es gedacht war, anstatt uns der Klassen- und Div-itis zu beugen, die die Branche durchdringen.
Sie brauchen vielleicht keine Web-Fonts
Neben Bildern, Videos und JavaScript ist ein weiterer Faktor, der zu aufgeblähten Websites geworden ist, Web-Fonts. Angesichts der Tatsache, dass es in Silicon Valley in Mode ist, dass jedes Startup als erste Geschäftstätigkeit seine eigene Schriftart in Auftrag gibt, scheint es, als ob jede besuchte Website eine Reihe von Schriftdateien herunterladen muss. Es mag nicht schlimm erscheinen, hundert Kilobytes für eine schöne Schriftart anzuhängen, aber wenn man dies mit den vielen verschiedenen Personen multipliziert, die Ihre Website auf verschiedenen Geräten und Browsern besuchen, können Schriften leicht Hunderte von Megabyte an Datenübertragung ausmachen – wenn nicht sogar Gigabyte/Terabyte/Petabyte für Websites mit höherem Traffic.
Benutzerdefinierte Web-Fonts sind auch ein potenzielles Antipattern für unsere Benutzer, für die
- Seitenaufrufe verlangsamen sich, da sie entweder einen Flash of unstyled text sehen oder, potenziell noch schlimmer, keinen Text, während die Schriftart geladen wird.
- Bis die Schriftart geladen ist, bemerken sie es nicht oder es ist ihnen egal.
Wenn Sie benutzerdefinierte Schriftarten verwenden müssen oder mit dem Flash of unstyled text kämpfen, ist font-display eine neue Eigenschaft, die den Browser anweisen soll, wie Schriftart-Downloads zu handhaben sind. Dieser Beitrag geht noch weiter darauf ein.
Fast jedes Gerät hat heutzutage einen halbwegs guten Satz installierter Schriftarten. Warum also nicht einen Stack potenzieller Schriftarten erstellen, die Sie sehen möchten, endend mit „serif“ oder „sans-serif“. Oder umarmen Sie diese Standard-Schriftarten ganz mit einem System-Schriftarten-Stack.
Ich wollte, dass Susty ein bisschen Swiss Style Ästhetik hat, also reicht mein Schriftarten-Stack von der perfekt proportionierten Helvetica (die alle Apple-Geräte standardmäßig haben) bis zu Sans-Serif, über Arial, Frutiger und Nimbus Sans L.
Als Ubuntu-Benutzer sehe ich Arial, was perfekt angenehm ist. Auf meinen Android-Geräten sehe ich die Standard-sans-serif-Schriftart (ich glaube, Droid Sans), die auf Mobilgeräten eigentlich recht gut funktioniert – man sollte fast denken, sie wurde dafür entwickelt!
Was noch? Standardkram. Wenig bis keine Bilder und SVG, wo möglich
Darüber hinaus ist es eigentlich nur Standard. Die Homepage von sustywp.com hat keine Bilder und nur ein SVG, das inline und nicht über eine HTTP-Anfrage geladen wird. Das CSS ist minimiert. Alles wird Gzipped. Der Server ist mit NGINX und Fast-CGI-Cache konfiguriert, um Inhalte aus dem Speicher zu liefern.
Bonus SPA-ähnliche Funktionen ohne Aufwand oder Code
Als ich meiner Freundin Daisy meine Pläne langweilte, fragte ich sie, wie sie konzeptionell dazu stehe, dass eine Website keine Navigation hat und stattdessen auf einer eigenen Seite über einen „Menü“-Button zu finden ist. Sie fand das in Ordnung. Als ich es ihr dann zeigte, sah ich gespannt zu, wie sie auf den Menülink klickte. Ihre Reaktion war, dass sie nicht wirklich darüber nachdachte, zum Menü zu klicken und das Menü erschien, als würde sie die Seite wechseln. Dies bestätigte eine meiner Befürchtungen, dass meine frühere Besessenheit, Seitenaufrufe beim Erstellen von Single-Page-Apps (SPAs) zu eliminieren, etwas ist, das nur wirklich Web-Developer-Typen stört. Die meisten Leute bemerken es nicht wirklich oder denken darüber nach. Wenn Sie also Ihre Website blitzschnell machen, sind die Seitenaufrufe selbst ohnehin fast unmerklich.
In diesem Fall dachte ich, warum nicht einfach so tun, als wäre es ein Menü-Overlay? Also fügte ich einen Schließen-Button und ein kleines bisschen JavaScript hinzu, um Sie vom Menü zurück zur vorherigen Seite zu bringen, wenn Sie darauf klicken. (Ich habe dies ursprünglich in PHP mit der `$_SERVER`-Superglobalen und `HTTP_REFERER` implementiert, aber dies bricht, wenn man etwas wie FastCGI-Cache zum Ausliefern von Seiten verwendet (d.h. für die Seiten, auf denen die `$_SERVER`-Superglobale nicht existiert).
Es kommt noch mehr
Wir alle wissen, dass Dinge immer besser sein können. Hier sind einige der Dinge, an denen ich arbeite, um Susty zu verbessern
- Jeremy Keiths Buch Going Offline fertig lesen, um einen Service Worker implementieren und Susty noch performanter machen zu können.
- Prüfen, wie ich Gutenberg implementieren kann. Es wird eine Menge Kilobytes hinzufügen, und das macht mich traurig! 😉
- Derzeit wird sustywp.com in einem Rechenzentrum in London gehostet und von dort global ausgeliefert. Das bedeutet, dass jemand in Wellington, Neuseeland, nicht das volle Erlebnis haben wird! Ich habe einen langfristigen Plan, mein eigenes kleines CDN von Edge-Servern einzurichten (jeder gehostet von einem 100% erneuerbare Energie betreibenden Host am jeweiligen Standort, wo ich einen finden kann), die nur NGINX betreiben und gecachte Versionen der Website ausliefern. Dies ist eine vereinfachte Version dessen, wie wir Dinge auf WordPress.com VIP machen.
Zusammenfassend
Susty ist ein Beispiel für die extreme Anwendung von Techniken des nachhaltigen Designs. Ich schlage nicht vor, dass wir alle Websites mit genau dieser Methode bauen sollten. Aber ich denke, Nachhaltigkeit sollte in der Webdesign-Branche eine viel höhere Priorität haben. Es ist gut, darüber nachzudenken, Kilobytes zu sparen, wo immer wir können, und in Kilobytes statt Megabytes zu denken. Wenn Sie eine JavaScript-Interface-Bibliothek verwenden möchten, probieren Sie doch Choo.js, das React-ähnliche Funktionen bietet und nur 4 KB groß ist. Denken Sie daran, die NASA hat es geschafft, einen Mann auf dem Mond zu landen, mit nur etwa 50 KB Speicherplatz zur Verfügung.
Das Beste daran ist, dass effiziente Websites schnellere Websites bedeuten, was bedeutet
- Glücklichere Benutzer
- Bessere Suchmaschinenplatzierung
- Glücklichere Server
Tolles Projekt!
Wäre es nicht sinnvoll, eine schwarze Variante mit weißem Text zu erstellen? Es würde den Stromverbrauch der Lichter eines Displays reduzieren..
Danke Jan! Ich verstehe, was Sie sagen, aber die meisten Recherchen hierzu haben ergeben, dass nur CRT-Monitore deutlich weniger Strom verbrauchten, um Schwarz darzustellen. Für die meisten modernen Displays ist der Unterschied zwischen beiden vernachlässigbar. Und einige Geräte verbrauchen tatsächlich mehr Strom, um Schwarz als Weiß darzustellen! Hier ist ein guter – wenn auch etwas veralteter – Artikel darüber: https://www.scientificamerican.com/article/fact-or-fiction-black-is/
Ich mag die Tatsache, dass Sie sich damit beschäftigt haben!
Jack, Sie haben sicherlich Recht. Aber darf ich hinzufügen, dass OLED-Displays, die hauptsächlich auf Smartphones verwendet werden, tatsächlich weniger Strom verbrauchen, wenn Schwarz dargestellt wird, weil die einzelnen Pixel ausgeschaltet werden können. Ich erkenne an, dass dies ein Randfall ist, aber es könnte in Zukunft häufiger vorkommen. Toller Artikel übrigens!
Ja, das stimmt, und es ist erwähnenswert. Danke Snd!
Herkömmliche LCD-Bildschirme haben ein helles weißes polarisiertes Licht hinter allen Pixeln, das immer an ist, und die Pixel können einzeln ihr Fenster „schließen“, um das Licht zu dimmen, was eine zusätzliche kleine Menge Strom erfordert. Dies geschieht durch Kristalle, die die Polarisation des Lichts einer bestimmten Farbe biegen, abhängig vom elektrischen Strom, den sie erhalten. Die gebogenen Lichtstrahlen passieren dann einen Polarisationsfilter, den man mit Gefängnisstäben vergleichen kann. Man kann ein Buch nur vertikal, nicht horizontal durch Gefängnisstäbe schieben.
Was für ein Vergnügen, diesen Artikel zu lesen. Ich weiß nicht, was ich sagen soll. Ich würde sagen, die Zeit der umweltfreundlichen Themen (EST) hat begonnen!
Ich würde mich für eine Schwarz-auf-Weiß- oder Dunkelversion entscheiden, aus einem ganz anderen Grund: Es ist besser für Ihre verdammten Augen! ;)
Nachhaltigkeit allein bedeutet nichts, wenn Benutzerfreundlichkeit und Barrierefreiheit auf der Strecke bleiben.
Abgesehen davon: Underscores ist eine sehr gute Hilfe, wenn es darum geht, „auf das Nötigste zu reduzieren“. Ich werde heute mit der Arbeit an einer Kundenwebsite beginnen und versuchen, deren Wahnsinnigen Bandbreiten-Verschwendung zu reduzieren, indem ich das aktuelle Theme nach Underscores portiere, mit einem sauberen, benutzerdefinierten Bootstrap darunter, und dabei etwa 60-70 % der Web-Performance-Alpträume durch die Überkomplexität und den Ballast, den ein solches „multifunktionales“ WordPress-Theme normalerweise mit sich bringt, aussortiere. Es wird definitiv nicht bei 7 KB herauskommen, eher bei 575 KB im besten Fall und etwa 800 KB im schlimmsten Fall, aber das ist ein ziemlicher Unterschied zu 2 MB für eine einfache Impressumsseite oder sogar 6,7 MB (!) für die Startseite (die nicht einmal viel enthält; nur eine einfache Diashow plus eine Bildergalerie).
Dennoch könnte Nachhaltigkeit ein großes Thema und ein Grund sein, Kunden davon zu überzeugen, z. B. KEIN mega-überladenes, klobiges Mehrzweck-Theme zu verwenden, sondern etwas Schlankeres, Saubereres und damit normalerweise auch Weniger Komplexes, was mehr Raum für Erweiterungen lässt. Oh, und natürlich für Benutzerfreundlichkeit und Barrierefreiheit. Somit ist Nachhaltigkeit indirekt Teil beider Themen – Benutzerfreundlichkeit verbessert die Gesamthandhabung der Website, Barrierefreiheit ermöglicht ein besseres Verständnis… und Nachhaltigkeit verhindert, dass die Website völlig überladen wird. Es ist also ein neuer Name mit einer leicht anderen Perspektive für etwas so Altes wie das Web: Geschwindigkeits-/Ladezeitoptimierung :)
cu, w0lf.
Danke für den Kommentar!
Dieser Punkt scheint nicht mit den Studien zu diesem Thema übereinzustimmen: https://ux.stackexchange.com/questions/53264/dark-or-white-color-theme-is-better-for-the-eyes#answers
Davon abgesehen bin ich aber großer Fan von Hell auf Dunkel. Daher das Farbschema meines Blogs. Und ich benutze ein dunkles Theme für meinen Texteditor.
Auf den Rest stimme ich vollkommen zu. :)
Da ich stark kurzsichtig bin, ist es, besonders nachts, eine ganz andere Folter, dunklen Text auf kreischend hellen Hintergründen lesen zu müssen. Nachdem ich meine gesamte bevorzugte GUI auf Weiß-auf-Dunkel-Kontraste umgestellt und feinjustiert habe und auch ein dunkles Hintergrund Farbschema in meiner Lieblings-IDE verwende, ist das Leben so viel freudvoller geworden. Gleiches gilt für das Lesen von E-Books – Moon+ Reader mit einem angepassten Nachtmodus… fast perfekt!
Natürlich ist das reale Ding in der Hand immer noch unschlagbar. Keine träge Beleuchtung, sondern volle Reflexion, und trotzdem kann man das Niveau und die Stärke dieser Beleuchtung steuern? Ich wünschte, Computermonitore könnten das tun…
Es geht sicherlich auch um Kontrast, aber das sollte logisch sein. Wenn nicht: Sofort mit der Arbeit an Websites aufhören, aufstehen und wiederholt den Kopf gegen eine Wand schlagen, bis man das Bewusstsein verliert. Wenn man es hart genug macht, könnte man sogar für eine Darwin-Auszeichnung in Frage kommen. Würde mein Leben auf jeden Fall einfacher machen :)
Abgesehen davon gibt es dieses schöne Sprichwort über Statistiken: Vertraue niemals einer, wenn du sie nicht selbst gefälscht hast ;)
cu, w0lf.
Guter Beitrag, Jack. Ich möchte ein ähnliches Projekt auflisten, das ich für Studenten in Indien erstellt habe. Es ist https://examsmate.in, eine voll funktionsfähige WordPress-basierte Website mit einer Homepage-Größe von 10 KB (das Logo nimmt 3,3 KB ein). Sie erreicht auch 100/100 bei Google PageSpeed.
Sie lädt bei Ihnen möglicherweise langsam, da sie im Digital Ocean Bangalore Data Center (Indien) gehostet wird, aber hier öffnet sie blitzschnell.
Hier sind die Dinge, die ich getan habe, um das zu erreichen
Entfernte zusätzliche CSS- und JS-Dateien, die im Theme enthalten waren. Verwendete CSS-Kurzschriften.
Entfernte zusätzliche Klassen aus WordPress-Navigationselementen und Artikelüberschriften (post_class).
Verwendete möglichst kurze Klassennamen.
Entfernte zusätzliche Yoast SEO Meta Tags.
Entfernte WP-Bloat.
Ich war so konservativ beim Minimieren des Codes, dass ich 700 statt fett verwendete, 3-stellige Farbcodes statt 6, „Red“ statt #f00 :D
Ich freue mich immer noch darauf, die Größe weiter zu minimieren.
Obwohl ich für die Reduzierung des CO₂-Fußabdrucks bin, frage ich mich, ob ich Seite für Seite nur Text sehen möchte, unabhängig davon, ob er schwarz auf weiß oder umgekehrt ist, und die Antwort ist ein klares NEIN.
Ich möchte Bilder und Videos sehen und durch die Interaktion mit einer schönen Seite mehr lernen. Ich erinnere mich an die ersten Webseiten, die herauskamen, also bin ich nicht daran interessiert, rückwärts zu gehen.
Sicherlich sollten wir uns in Richtung einer besseren/neueren Form der Energie für das Hosting des Internets bewegen: Solar, Wind, Welle oder etwas noch Unentdecktes, anstatt zu versuchen, Webseiten in das dunkle Zeitalter zurückzuführen.
Ich meine das nicht konfrontativ, aber haben Sie den Artikel tatsächlich gelesen? Oder den Inhalt von sustywp.com gelesen? Im abschließenden Absatz des Artikels sagte ich
Mein Punkt ist, dass wir viele unnötige Dinge in Websites implementieren, und dass dies Auswirkungen auf die Umwelt hat.
Ich würde auf eine Website wie DotYork als Beispiel für eine Website verweisen, die ein fast perfektes Gleichgewicht trifft. Die gesamte Website lädt in wenigen hundert Kilobytes und sieht großartig aus. Es sind nicht nur Seite für Seite nur Text, und das habe ich zu keinem Zeitpunkt gefordert.
Nein, ich glaube nicht, dass Sie mehr als die Hälfte des ersten Absatzes des Artikels gelesen haben.
Es geht um Webgeschwindigkeit und Ladeleistung, was als netten Nebeneffekt zu einer geringeren stromverbrauchsbedingten Auswirkung auf die Natur führt. Denken Sie an Kernkraftwerke, die böse Nebenprodukte hinterlassen, die jahrhundertelang sicher aufbewahrt werden müssen, oder die hässlichen Ergebnisse eines Kohlekraftwerks… auch diese Kohle muss irgendwoher kommen…
Weniger ist mehr, Form folgt Funktion und auch KISS.
mehr muss nicht gesagt werden,
cu, w0lf.
Erstens geht es in dem Artikel mehr darum, wie das Web aufgebaut ist, als um seinen Inhalt. Es stimmt nicht, dass man eine schwergewichtige Implementierung benötigt, um den besten Inhalt oder die beste Erfahrung zu bieten. Native Browserfunktionen sind besser denn je, man kann alles (was die Benutzer benötigen) mit kaum Code machen.
Zum Thema Inhalt und Benutzererfahrung glaube ich nicht, dass jemand dafür kämpft, Webseiten zurück ins dunkle Zeitalter zu führen, sondern das Gegenteil. Es geht darum, das Unnötige zum Feind zu erklären. Arbeiten Sie an den Bedürfnissen Ihrer Benutzer und nicht an denen Ihrer Stakeholder.
Ihre Benutzer benötigen keine bestimmte Schriftart, sie benötigen kein Helden-Imagery, sie benötigen keine unkonventionelle Interaktion. Sie müssen Cookies nicht zustimmen, sie benötigen nicht, dass Sie sie verfolgen, ihre Informationen für Marketingzwecke nutzen oder unkontrollierte Werbung Dritter sehen. Sie benötigen keine Exit-Umfrage-Pop-ups, interaktionsblockierende Übergänge oder das Ablaufen ihrer Sitzung. Sie müssen nicht beweisen, dass sie keine Roboter sind, Ihre Smartphone-App herunterladen oder Tage oder sogar Wochen warten, um sich von einer Mailingliste abzumelden.
Das ist das dunkle Zeitalter, genau jetzt.
Das ist cool. Gute Arbeit! Ich habe einen ähnlichen Ansatz für meine Website verfolgt, aber einfach motiviert durch die großartige Benutzererfahrung von kaum wahrnehmbaren Seitenaufrufen. Ich habe die Navigation beibehalten, um die Auffindbarkeit meiner Inhalte zu erhöhen. Meine Gzipped-Homepage war nur 1,5 KB groß. Ich habe einige Notizen dazu auf https://nattaylor.com/blog/2017/new-theme/ gemacht.
Aber sie beträgt 35 KB auf Gt Matrix. Insgesamt ein erstaunlicher Artikel für einen Junior wie mich, der anfängt, Programmieren zu lernen.
Ja, aus irgendeinem Grund lädt GTMetrix eine Menge Zeug, das Browser nicht tun. Zum Beispiel die `rel="icon"` Links. Aus irgendeinem Grund sieht es auch so aus, als ob `dashicons` geladen wurde. Keine Ahnung, warum das passiert ist, aber ich habe etwas zusätzlichen Code hinzugefügt, um sicherzustellen, dass dies nie wieder vorkommt.
Danke!
Haben Sie sich itty.bitty.site von Nicholas Jitoff angesehen? Seine Seite ermöglicht die Erstellung von Websites ohne die Verwendung eines Servers (technisch gesehen für den Website-Ersteller) und nutzt die URL zur Erstellung der Seite. Meiner Meinung nach benötigen X Websites Y Server, im Gegensatz zu seiner Idee, bei der jede X-Anzahl von Personen eine 2000-4000 KB große Website auf seinem 1 Server betreiben kann. Das scheint ziemlich energieeffizient zu sein. Bin ich naiv? Was ist Ihre Meinung?
Die aufgeteilten Kosten sind großartig, bis zu dem Punkt, an dem Sie die Bandbreite für diese eine Seite sättigen. Der einzige Weg, das zu überwinden, wäre ein Netzwerk. Wenn Sie Peer-to-Peer gehen würden, würde es nicht nur von den Seedern abhängen (was Lastausgleichsserver in einem Nicht-Peer-HA-Setup sind), sondern würde wahrscheinlich auch eine Untergrenze von über 6 KB festlegen. Es ist jedoch eine sehr interessante Idee.
Ja, Itty Bitty ist ein nettes Projekt. Ich denke, es gibt großartige Anwendungen dafür, aber Sie würden auf Einschränkungen stoßen, wenn Sie zum Beispiel versuchen würden, einen Blog darüber zu betreiben. Und wenn Sie jemals eine Seite bearbeiten müssen, ändern Sie deren URL. Für einmalige Seiten/Projekte ist es jedoch großartig.
Ich liebe das. Ein sehr cooles Projekt.
Ein Service Worker könnte den Nutzern auch den Hin- und Rückweg zum Server ersparen und wiederholte Downloads reduzieren, was die Energieeinsparung beschleunigt (obwohl es eine Untergrenze gibt, könnte es sogar beeinflussen, wie leichtgewichtig das Hosting sein kann).
Danke Lewis! Das steht auf meiner To-Do-Liste am Ende des Artikels.
Ich habe den Service Worker bereits in meiner lokalen Umgebung zum Laufen gebracht, ich versuche nur noch, die beste Strategie für die Cache-Invalidierung zu finden!
Cooles Projekt! Es wird interessant sein zu sehen, wie es mit Gutenberg zurechtkommt. Außerdem wäre es nett, wenn die Menüseite selbst eine spezielle Seite/ein spezieller Post-Typ wäre, der weiterhin über Gutenberg bearbeitet werden kann (damit Sie Menübereiche erstellen und diese Seite etwas mehr gestalten können).
Sicher, Sie könnten all das für jede Website tun, aber jeder Einzelne kann seinen CO2-Fußabdruck so viel mehr reduzieren, indem er vegan wird.
Die Tierhaltung ist für 18 Prozent der Treibhausgasemissionen verantwortlich, mehr als die kombinierte Abgasmenge ALLER Transporte.
Ich bin Veganer. Siehe Was kann ich sonst noch tun? auf sustywp.com. :)
Die Sache ist, Sie können Ihr Publikum nicht zum Veganismus zwingen, aber Sie können es dazu zwingen, eine Site mit geringem Datenverbrauch und hoher Leistung anzuzeigen – und es wird ihnen gefallen!
Angesichts der Ziele ist dies ein Projekt, das nur funktioniert, wenn Ihnen alles außer einer spartanischen Website egal ist (wie Sie in Ihrer Schlussfolgerung vorschlagen) – daher ist mir nicht klar, wie dies nützlich wäre, außer im Rahmen dieses Beitrags. Auch im Hinblick auf den Energieverbrauch laufen Sie immer noch mit einem vollen CMS auf einem Server – Sie könnten wahrscheinlich zu einem CMS wie Kirby wechseln und einen größeren Unterschied machen. Ich hatte wohl auf etwas Aufschlussreicheres gehofft – aber Sie haben sicherlich mein Bewusstsein für den Energieverbrauch geschärft und das schätze ich.
Hmm. Sie sagen also, es gibt nichts, das Sie aus diesem Beitrag entnehmen könnten, das Sie auf bestehende Websites anwenden könnten, um sie erheblich effizienter zu machen? In diesem Fall habe ich Sie wohl enttäuscht. Ich schreibe einen weiteren Artikel, der sich detaillierter mit all dem beschäftigt.
Das ist ein fairer Punkt bezüglich Kirby, obwohl ich sagen würde, dass die Leerlaufkosten des Betriebs von WordPress sehr gering sind. Der Server, auf dem sustywp.com läuft, weist typischerweise eine CPU-Auslastung von etwa 1-3 % auf. Ich würde sagen, in den meisten Fällen ist die überwiegende Mehrheit der Besucher einer Website kein Administrator, und wenn Sie gute Richtlinien für das Caching usw. haben, wird WordPress selbst kaum berührt. Etwa 99 % des Traffics auf sustywp.com werden über den FastCGI-Cache von Nginx bedient. In meinem Fall würde ein Wechsel zu Kirby nur sehr geringe Gewinne bringen.
Neugierig auf Ihre Gedanken zur Optimierung von Bildern für Geräte mit hochauflösenden Displays wie einem iPhone. Wir haben die Auflösung von Bildern typischerweise verdoppelt, damit sie auf einem iPhone knackig und klar aussehen. Das Problem dabei ist, dass auch die Größe des Bildes zunimmt. Welche Techniken verwenden Sie, um Dateien klein zu halten und sie trotzdem auf diesen Geräten fantastisch aussehen zu lassen?
Hallo Robert, entschuldige die späte Antwort. Es gibt einige gute Gedanken dazu in Adam Silvers Artikel Designing for actual performance. Ich fasse ihn hier kurz zusammen:
Ich würde auch empfehlen, sich die Apache und Nginx PageSpeed Modules anzusehen, die vieles davon automatisch erledigen können. Obwohl ich diese Module bisher nur abstrakt kannte, hat der Kommentar von M S unten mich dazu veranlasst, sie noch einmal zu überprüfen und zu entdecken, wie fantastisch sie sind.
Ihre Lektion ist wichtig, aber wir sollten die Funktion des Webs nicht auf die Standards der 1990er Jahre reduzieren, um dieses Problem anzugehen. Menschen, die die Technologie nicht verstehen, wollen eine Kaffeemaschine, die frühstückt und die Nachrichten berichtet. Wir müssen einen glücklichen Mittelweg zwischen funktionalen, unterhaltsamen, einzigartigen Websites und einer effizienten, intelligenten Ausführung der Technologie finden.
Wenn ich einen Bildschirm mit monochronem Text ohne Bilder oder andere Sonderfunktionen lesen wollte, würde ich ein Buch lesen.
Im Leben ist es fast nie die richtige Antwort, zu einem Extrem oder zum anderen zu springen.
Haben Sie den Artikel gelesen?
Ich bin mir nicht sicher, ob das helfen würde, Ihre Ziele hier zu erreichen, aber wie wäre es mit etwas wie
https://getshifter.io/
Ja, das ist interessant, aber wenn Sie Ihren Server mit etwas wie Nginx' FastCGI-Cache konfigurieren, sind die Ergebnisse fast genau die gleichen.
Würden Sie es mir verzeihen, wenn ich versuche, dies nach Ghost zu portieren?
Überhaupt nicht Phil, es ist GPL-lizenziert, also können Sie sich austoben und tun, was immer Sie wollen!
Ich habe Ihnen eine Pull-Anfrage gesendet, die zeigt, wie SVG „geschrieben“ werden sollte…
Ich habe in Ihrem Repository bemerkt, dass Sie bereits versucht haben, den Ballast aus dem SVG-Symbol zu entfernen. Ich habe es noch einmal mit „8-Bit“-Techniken durchgearbeitet (ich habe früher viele Wettersymbole für das Fernsehen entworfen).
Wenn Sie sich mein angepasstes SVG ansehen, verwendet es nur den Strich und nicht die Füllung. Ich habe es in einem Texteditor codiert, nicht in einem dieser aufgeblähten Adobe-Giganten. Oder auch Inkscape. Diese Werkzeuge setzen Sie nicht den Grundformen aus, sie erstellen aufgeblähte gefüllte Pfade anstelle dessen, was Sie brauchen. Bei Symbolen möchten Sie auch etwas Wartungsfreundliches erstellen, d. h. mit einstellbaren Parametern, damit Sie die Kurven steuern können. Kreise sind der Klassiker, stellen Sie sich ein Suchsymbol vor, die Lupe ist ein Kreis und eine Linie. Die Linie hat einen dickeren Strich und abgerundete Endkappen, der Kreis hat eine transparente Füllung und einen dünneren Strich als für den Griff. Dies kann in zwei SVG-Zeilen erreicht werden, ein „Kreis“ und eine „Linie“. Sie können diese gruppieren und um 45 Grad drehen und sie im Viewbox etwas nach oben verschieben, um das fertige Ding gut aussehen zu lassen. Keine der Zahlen muss Fließkommazahlen sein. Was die Wartungsfreundlichkeit betrifft, ist es sehr einfach, sich den Kreis und die Linie anzusehen und sie zu ändern. Grundlegende Arithmetik kann erforderlich sein.
Die Sache ist, dass ein Adobe-Tool für diesen einfachen Kreis und diese einfache Linie etwas völlig anderes ausgeben wird, wie es für dieses einfache Suchsymbol erforderlich ist. Der Kreis wird als äußerer Pfad mit vielen, vielen Punkten gezeichnet, typischerweise etwa fünfzig, dann wird der transparente Teil in der Mitte mit einem weiteren fünfzig Punkte-Pfad definiert. Und der Griff hat wahrscheinlich mindestens zwölf weitere Punkte. Anstatt einfacher und leicht zu wartender Ganzzahlen werden diese in drei Dezimalstellen angegeben! Der Aufwand ist also horrend.
Das manuelle Gestalten von Symbolen ist die Mühe wert, da diese Symbole wichtig sind. Die aufgeblähten können richtig aussehen und mit automatisierten Werkzeugen komprimiert werden, aber wenn Sie den aufgeblähten Kreis durch ein solches Werkzeug jagen und die Dezimalstellen entfernen, erhalten Sie ein Polygon mit vielen Seiten, keinen echten Kreis. Per Definition müssen Symbole einfach sein. Daher ist es sinnlos, aufgeblähte Werkzeuge und eine Toolchain zu verwenden, die Anpassungen in die Hände des Grafikdesigners legt, wo nur er sie durch Rückkehr zu einer „Illustrator“-Datei anpassen kann. Designer müssen sich anstrengen und Symbole ordnungsgemäß in SVG, mit SVG-Primitiven, gestalten, nicht mit dem, was ihr teurer Apple-Computer und ihre teure Adobe-Software ausspuckt.
Das klingt wie ein Wutausbruch, aber Barrierefreiheit sollte auch für Programmierer gelten. Bilder, die als „Assets“ bezeichnet werden und in proprietären Formaten vorliegen, die nur von Leuten bearbeitet werden können, die zur Kunsthochschule gegangen sind, widersprechen der Barrierefreiheit.
Symbole sollten auch als CSS-Daten-URLs vorliegen. Sehen Sie Lea Verous CSS Secrets, wie das geht. Der Vorteil dieses Ansatzes ist, dass nur eine einzige Stylesheet-Datei heruntergeladen werden muss. Außerdem sind die Symbole Dekorationen für Schaltflächen und Links, keine Inhalte. Moderne Browser unterstützen Pseudo-Elemente, und das Laden von Symbolen auf diese Weise ist kein Hack. Das Dokument kann auch sauberer sein. Ein Icon-Set muss nicht gestylt werden, wie es bei der Verwendung von Inline-SVG möglich ist.
Wenn ein SVG Inhalt ist, z. B. Anleitungen, Diagramme usw., dann hat der Inline-Ansatz Vorteile: kein zusätzlicher Download, Möglichkeit zur Verwendung und Wiederverwendung von Symbolen, Animationen, Styling usw. Diese können für diejenigen, die kein JavaScript haben, als Bilder geladen oder bei verfügbarem JavaScript inline geladen werden. Es gibt andere Strategien, man muss wirklich über die Toolchain hinausdenken und überlegen, was für Barrierefreiheit, Download-Geschwindigkeit und so weiter am besten ist, bevor man sich für Inline, In-CSS, Extern oder Javascript-Inlined entscheidet.
Ein weiterer Punkt für die minimale, grüne Website – mod_pagespeed. Dies kann ein Dokument komprimieren und Leerzeichen, Kommentare und viel anderes Rauschen wie Anführungszeichen um Attribute entfernen, wenn sie für ein Element nicht benötigt werden.
Der größte Vorteil von mod_pagespeed ist jedoch, dass es ermöglicht, Bilder vom Client/Content-Ersteller einfach so hochzuladen, wie sie sind, und `src_set`-Bilder generiert werden. Diese `src_set`-Bilder sind für das Gerät bestimmt, sodass Ihre 4K-Gaming-Rig ein anderes Bild erhält als Ihr iPhone. Die Bandbreiteneinsparung dadurch ist enorm. Außerdem entfällt das Herumfummeln in Adobe-Produkten, um angeblich optimierte Bilder zu erhalten, und Sie müssen auch keinen Drittanbieter bezahlen, um sie zu optimieren.
Bilder sollten auch von einer cookielosen statischen Domäne bedient werden, mit korrekt eingestellten Cache-Einstellungen, wobei der Service Worker wiederum hilft, das zu liefern, was im lokalen Speicher/Cache verfügbar ist.
Jedenfalls hat die Debatte begonnen, und ich denke, „grünes Webseitendesign“ muss als vermarktbarer Schlagwort genauso wichtig sein wie „Responsive Design“. Vielleicht mit Wettbewerben für die Lieferung von „Full Fat WordPress“ oder anderen CMS in möglichst wenigen Bytes.
Vielen Dank, M S. Dieser Kommentar ist schlichtweg erstaunlich. Ich nehme die Rüge herzlich an und stimme Ihnen größtenteils zu.
Ich habe das Logo tatsächlich nicht selbst erstellt, sondern es von The Noun Project bezogen (was ich, wie mir klar ist, irgendwo erwähnen sollte!) Und leider bedeuten meine künstlerischen Fähigkeiten, dass ich kaum ein Symbol in Inkscape entwerfen kann, geschweige denn es von Hand codieren. Sie haben jedoch definitiv mein Interesse geweckt und ich werde mich auf jeden Fall mit den Grundlagen des manuellen Codierens von SVGs beschäftigen. Es hat mich umgehauen, dass Sie es auf weniger als ein Drittel seiner ursprünglichen Größe reduzieren konnten.
Ich denke, The Noun Project ist eine fantastische Ressource, und ich ziehe meinen Hut vor all den Designern, die dort Icons teilen. Aber ebenso wäre es großartig zu sehen, wie mehr Menschen die Vorteile des manuellen Erstellens von SVGs in einem Texteditor nutzen.
Vielen Dank auch, dass Sie mich auf die PageSpeed-Module aufmerksam gemacht haben. Ich war mir ihrer seit einiger Zeit peripher bewusst, habe mir aber seit ein paar Jahren nicht mehr genau angesehen, was sie leisten können. Ich wusste auch nicht, dass es ein Nginx-Modul gibt, was für mich vorzuziehen ist, da ich Apache in meinen aktuellen Setups normalerweise nicht verwende.
Es gab einmal ein Theme, das für die Reduzierung von Datenbankabfragen entwickelt wurde und „Frank“ hieß. Sie sollten auch das Backend von WordPress erwähnen. Schöner Artikel, danke im Namen der Welt :)
Großartige Arbeit – das hat mich zum Nachdenken gebracht… – ich liebe auch Ihren FAQ-Bereich auf der Website. Großartige Sache.
Das ist wirklich cool! Da Sie uns als Beispiel verwendet haben und falls Sie neugierig sind, ist die Seite ziemlich blitzschnell hier in Wellington.
Vielen Dank, Jack, für all Ihre harte Arbeit und diesen Beitrag. Am Anfang meiner Karriere habe ich eingebetteten C-Code geschrieben, bei dem jedes Byte für Leistung und Größe wichtig war. Bei Bedarf wurde auf Assembler zurückgegriffen, um die Leistung zu optimieren. Während einer längeren Genesungszeit von einer Krankheit habe ich mir selbst Webentwicklung beigebracht und einige freiberufliche Aufträge erledigt. Jetzt, kurz vor dem Ruhestand, habe ich die Webentwicklung noch einmal besucht, um zu sehen, was für coole Dinge passiert sind, während ich weg war. Ich lerne am besten an Beispielen, sowohl guten als auch schlechten, daher habe ich mir den CSS/JS/HTML-Code verschiedener Websites angesehen.
Ich war entsetzt, wie wenige Websites CSS und JS minifizieren. Viele entfernen nicht einmal Kommentare. Wahrscheinlich sehr wenige, die sich die Mühe machen, gzip zu verwenden. Diese Techniken werden seit fast dem Beginn des Internets unterstützt. Wie Sie so gut betont haben, geht es nicht nur um beste Leistung, sondern auch um ökologische Nachhaltigkeit.
Ohne die Bemühungen aller, die WP entwickelt haben, hervorheben oder verunglimpfen zu wollen, hat es extrem aufgeblähten Code sowohl auf der Server- als auch auf der Client-Seite. Ich befürchte, es hat sich zu dem Zustand entwickelt: „Etwas für jeden und nichts für niemanden“. Die Entwicklung schnellerer Internetverbindungen und Computer hat es uns Entwicklern ermöglicht, nachlässig und faul zu werden. Wir müssen sauberen und schlanken Code schreiben, nicht schnellere Computer. Leider liegt das teilweise an finanziellen Zwängen und Terminen, die die Entwickler einschränken.
Zu diesem Zweck entwickle ich ein Theme für meine eigene WP-Blog-Site, anstatt zu versuchen, ein bestehendes Theme zu verwenden. Ich habe mit einem Blank-Slate-Theme begonnen. Sie haben mich inspiriert, mit dem _s-Theme neu anzufangen und es wie Sie zu kürzen. Ich plane auch, mit Serverless- und FaaS-Ansätzen zu experimentieren, da diese ebenfalls effizienter und umweltfreundlicher erscheinen.
Das Einzige, was in diesem Artikel fehlt, ist der zusätzliche Nutzen für die Akkulaufzeit mobiler Geräte.
Mit all dem Ballast und der Frontend-Rendering anstelle von serverseitigem Rendering heutzutage werden mobile Geräte stark von der Akkulaufzeit beansprucht.
Gute Lektüre!
Danke, gut zu sehen, dass Optimierungsbemühungen im heutigen aufgeblähten Web stattfinden. Das benutzerdefinierte Theme meiner Website ist in <1 Sekunde lesbar (2 Sek. bei 3G), JavaScript ist nicht erforderlich, nur Abhängigkeits-freie Verbesserung. Grüße.
Was für eine lustige Projektidee! Toller Artikel und ich habe einige neue, nützliche Informationen gefunden, die ich meinen Kunden mitbringen kann. Danke.
Es ist für uns Menschen schwer, gut zuzuhören. Wir komponieren normalerweise unsere Antwort, bevor unser Gesprächspartner einen Satz beendet hat. Nur Mut. Die meisten Ihrer Leser sind von Ihrer Arbeit daran beeindruckt. Wir haben Ihre Absicht absolut verstanden, vor allem, damit wir NACHDENKEN!
Ich habe mich früher so über Geschwindigkeitstests geärgert, die mir sagten, ich solle ein Bild optimieren, um einen mickrigen 12 KB zu sparen! Ich habe mich gefragt, wie viele Stunden und Kalorien ich investieren muss, um diese 100 %-Bewertung zu erreichen? Wie viele Mannstunden verschwenden wir jedes Mal, wenn Google die SEO-Algorithmen ändert? Welche Belastung ist das für unsere Wirtschaft?
Als ich „render blocking resource“ und all die anderen Fachbegriffe verstand, wurde es einfacher und irgendwie lustig zu sehen, wie verrückt schnell eine Seite laden konnte. Die Einbeziehung des Stromverbrauchs in die Gleichung sollte die Bedeutung der Leistung erklären.
Bin ich der Einzige, der Leuten begegnet, die so tun, als würde ich Schlangenöl verkaufen, wenn ich vorschlage, dass ihre Website optimiert werden sollte? Es scheint, dass etwa ein Viertel der Leute, mit denen ich spreche, sofort denken, es sei ein Gimmick.