Liefert WordPress in 7KB

0
8

In den letzten sechs Monaten habe ich zunehmend daran interessiert, das Thema web-Nachhaltigkeit. Der carbon footprint des Internet war nicht etwas, das ich so viele Gedanken, das ist überraschend, bedenkt man mein Interesse an Umweltfragen und die Tatsache, dass mein Beruf ist web-basiert.

Das web in einer sich erwärmenden Welt

Als kurze Zusammenfassung, die ich besuchte, MozFest in London im letzten Jahr. In zwischen den Sitzungen, ich war Scannen ein Schwarzes Brett, um zu sehen, was auf mich zukommt, und ich entdeckte eine Sitzung mit dem Titel, “eine Planeten-Freundliche Web.” Ich fühlte mich ein wenig wie vom donner gerührt. Was auf der Erde war das etwa sein?

Ich besuchte die Sitzung und die Schuppen von den Augen fiel. In dem, was jetzt scheint offensichtlich, aber zu der Zeit war eine Offenbarung — ich erfuhr von den riesigen Energiebedarf des Internets. Diese Forderung ist der größte Kohle-Maschine auf der Erde, was bedeutet, dass seine CO₂-Emissionen sind wahrscheinlich mindestens äquivalent zu global air Reisen. Mehr und mehr kommen die Leute online, aber dies, gepaart mit dem Aufstieg von immer mehr übergewichtigen websites, die bedeutet, dass das Internet der Bedarf an Energie exponentiell steigt. Jedes zusätzliche byte übertragen bedeutet mehr Energie, die in den meisten Ländern bedeutet mehr CO₂.

Es ist weithin anerkannt, dass wir sollten vermeiden, drucken, E-Mails zu speichern Bäume, aber dies führt zu einer falschen Annahme, dass das web ist eine grüne medium. Ich habe Angst, zu sagen, es ist nicht.

Gibt es einen anderen Weg?

Die gute Nachricht ist, es muss nicht dieser Weg sein. Seit 2009 Greenpeace hat auditing-Internet-Unternehmen auf, Ihren Energieverbrauch und Lobbyarbeit zu verbessern durch Ihren Klick auf Clean Kampagne. Die Green Web Foundation hat eine ständig wachsende Datenbank-hosting-Unternehmen, die erneuerbare Energie nutzen oder die sind zumindest verpflichtet, als klimaneutral. Und neue Werkzeuge entstehen, zu helfen, diejenigen, die auf der web-Messen die Umweltauswirkungen unserer Produkte.

Es gibt auch einige gute Ressourcen gibt, wie Tim Frick – Design für Nachhaltigkeit, drei-Jahres-Wert von Vorträgen aus den SustainableUX Konferenz-und Peripherie-material, das, obwohl nicht explizit auf Nachhaltigkeit fokussiert, kann uns helfen, bauen niedrigeren Kohlenstoff-websites.

Geben Sie Susty WP

Ich beschloss, mich der Herausforderung zu sehen, wie effizient ich könnte das Paket ein WordPress-website. Während ich dabei war, dachte ich, “Warum machen Sie nicht die website zum Thema Nachhaltigkeit und WordPress?” Ich weiß, WordPress/Nachhaltigkeit der Gründung. Cool, nicht wahr?

Und so, sustywp.com ist geboren. Mit dem begleitenden Thema, Susty. Ich bin ziemlich chuffed zu sagen, dass ich es geschafft, die Last von der homepage runter zu 7KB Daten übertragen. Ich habe tatsächlich bis auf 6KB, aber die meta Sachen Hinzugefügt von Yoast stieß es bis fast eine ganze KB! 😛 Allerdings, da ich versuche, eine Botschaft zu verbreiten, die ich als dass dies ein annehmbarer Kompromiss.

Bevor ich in die Nüsse-und-Bolzen, ich möchte nur zu teilen ein paar headline-Fakten:

  • sustywp.com erzielt 100/100 auf die Leistung über die Google-Leuchtturm.
  • Es kommt sofort Ein ‘ s auf webpagetest.org.
  • Es verwüstet die meisten benchmarks mit einem durchschnittlichen time to first byte (TTFB) von etwa 0,15 s, und vollständig erbracht, die innerhalb von 0,5 s.
  • Gehostet in einem Rechenzentrum, das zu 100% mit erneuerbarer Energie versorgt.

Also, wie funktioniert es?

Die Bemerkenswerte Sache über dieses ist, wie banal es ist. Stark inspiriert von Heydon Pickering ist zu evangelisieren, über das schreiben weniger verdammt-code, und Projekte wie Brad Frost ‘ s Death to Bullshit, begab ich mich auf eine Wurzel und Zweig Rebschnitt, der Unterstreicht, entfernen alles, was ich nur konnte. Und klar, es ist nicht so, dass die Unterstriche ist voller Reste. Es ist ein sehr mageres Ausgangspunkt für die Erstellung ein Thema. Ich bin ein großer Bewunderer von ihm und durchaus zu befürworten, es zu verwenden. Es enthält jedoch bestimmte Annahmen, nicht erwähnen mit meinem spartan Ziel, dass die kleinste mögliche WordPress-Website.

Wie, Fragen Sie?

Nav? Nein. Die Sidebar? Um es loszuwerden. Klassen? Nicht in meiner sozialistischen Utopie.

Angesichts der Einschränkungen, die ich gesetzt hatte, alles so dass es auf den DOM musste einen sehr guten Grund, dort zu sein. Mit diesem wird ein experiment, ich nahm den etwas radikalen Ansatz, verwies die navigation zu seiner eigenen Seite. Das ist wunderbar befreiend und bedeutet, dass ich nicht gehen durch die fast immer enttäuschend Tanz der Frage, wie ich es machen würde, schauen vorzeigbar, verstecken Sie es für die vielen Benutzer, die sich nicht kümmern, stellen Sie sicher, es ist robust genug, um unendlich lange, mit nie endenden dropdowns, etc.

Dies bedeutet weniger HTML, weniger CSS, und definitiv kein JavaScript! Gewinnen, gewinnen, gewinnen.

Wie für die sidebar? Naja ich hatte schon immer eine Abneigung gegen Seitenleisten, das war also eine einfache Sache zu entfernen. Susty hat keine widget-Bereich. Ich bin sicher, es werde get over it.

Ist es mehr Fett können wir trimmen? Nun, wenn wir gehen zu müssen, kaum HTML -, und wir wollen minimale CSS, brauchen wir wirklich alle diese Klassen? Ich wollte versuchen meine hand beim schreiben von CSS in den Weg, es war verwendet werden soll, statt verbeugte sich vor der Klasse-ititis und div-ititis, durchdringen die Industrie.

Können Sie nicht brauchen, web-fonts

Neben Bilder -, video-und JavaScript, das andere Element, das zu einem bedeutenden Faktor in der aufgeblähten websites ist web-fonts. Da es jetzt ein Silicon-Valley-Mode für jede startup-Kommission seine eigene Schrift als erste Auftrag des Geschäfts, es scheint, als ob jede website, die Sie besuchen, verursacht das herunterladen einer Reihe von font-Dateien. Es scheint nicht so schlimm zu tack auf hundert Kilobyte für ein paar nette geben, aber wenn Sie multiplizieren Sie diese durch die vielen verschiedenen Menschen besuchen Ihre website auf unterschiedlichen Geräten und Browsern, die Schriftarten können leicht Konto für Hunderte von Megabyte an Daten übertragen — wenn nicht Gigabyte/Terabyte/Petabyte für höhere traffic-websites.
Kundenspezifische web-Schriftarten sind auch eine potentielle antipattern für unsere Nutzer, für wen:

  1. Seite geladen werden verlangsamt, wie Sie sehen, entweder einen flash of unstyled text oder, möglicherweise noch schlimmer, kein text, während die Schrift lädt.
  2. Durch die Zeit, die schriftart geladen hat, die Sie nicht bemerken oder Pflege.

Wenn Sie benutzerdefinierte Schriftarten verwenden kann oder im Kampf mit dem Blitz un-styled-text -, schriftart-Anzeige ist eine neue Eigenschaft entwickelt, um den browser anweisen, wie Sie zu behandeln font downloads. Dieser Beitrag geht in es sogar noch mehr.

Fast jedes Gerät heutzutage eine halbwegs anständige Reihe von Schriftarten installiert, warum also nicht Komponieren, die einen Stapel von möglichen Schriftarten, die Sie möchten, um zu sehen, endend mit entweder “serif “ oder “sans-serif.” Oder umarmen diese Standard-Schriftarten, die zusammen mit einem system-font-stack.

Ich wollte Susty ein bisschen Schweizer Stil ästhetischen, also meine font-stack reicht von den perfekt proportionierten Helvetica (die alle Apple-Geräte haben standardmäßig) auf sans-serif, durch Weg von Arial, Frutiger und Nimbus Sans L.

Als Ubuntu-user, ich sehe Arial, die ist durchaus angenehm. Auf meinen Android Geräten, die ich sehen die Standard-sans-serif-Schrift (Droid Sans glaube ich), die tatsächlich funktioniert ziemlich gut auf mobile — man würde fast denken, dass ist, was es für entworfen wurde!

Was sonst? Die Standard-Sachen. Keine oder nur wenige Bilder und SVG-wo möglich

Darüber hinaus ist es wirklich nur der standard. Die homepage sustywp.com hat keine Bilder und nur eine SVG geladen wird, ist für inline-eher als durch einen HTTP-request. Das CSS minified. Alles wird Gzipped. Der server ist optimiert mit NGINX und Fast-CGI-cache dienen, Inhalte aus dem Speicher.

Bonus SPA-ähnliche Funktionen, ohne die Arbeit oder code

Wenn ich war langweilig, meine Freundin, Daisy, mit meinen Plänen, ich fragte Sie wie Sie sich fühlte, konzeptionell über eine website, die nicht mit einer navigation, und es stattdessen auf einer eigenen Seite, über ein “Menü” – Taste. Sie dachte, es Klang ok. Also, wenn ich kam, um es zu Ihr, ich beobachtete Sie gespannt, als Sie klickte auf den Menü-link. Ihre Antwort war, dass Sie gar nicht wirklich über einen Klick auf das Menü sehen, und das Menü erscheint, als Wechsel der Seiten. Dies bestätigt eine meiner ängste, dass meine vorherigen obsession mit dem beseitigen Seite lädt beim Bau von Single-Page-Apps (SPAs) ist etwas, was nur wirklich stört, web-Entwickler-y-Typen. Die meisten Menschen nicht wirklich bemerken oder denken. Also, wenn Sie Ihre website blitzschnell, die Seite lädt sich fast unmerklich sowieso.

Mit diesem der Fall, ich dachte mir, warum nicht einfach so tun, es war ein Menü-overlay? So, ich habe ein Kreuz schließen-button und ein klein wenig JavaScript, um Sie aus dem Menü zurück zur vorherigen Seite, wenn Sie darauf klicken. (Ich habe zunächst implementieren diese in PHP mit dem $_SERVER superglobale und HTTP_REFERER, aber diese Pausen, wenn Sie so etwas wie FastCGI-cache für Seiten (also die Seiten gibt es kein $_SERVER superglobale.)

Es gibt noch mehr zu kommen

Wir alle wissen, dass die Dinge können immer besser sein. Hier sind ein paar der Dinge, die ich arbeite, zu verbessern Susty:

  • Lesen Sie Jeremy Keith ‘ s Buch Gehen Offline, so kann ich die Implementierung einer Service-Arbeiter und machen Susty noch mehr performant.
  • Schauen Sie, wie kann ich implementieren Gutenberg. Es geht um das hinzufügen von ein paar Kilobyte, und das macht mich traurig! 😉
  • Derzeit sustywp.com gehostet in einem Rechenzentrum in London, und diente weltweit von diesem Ort aus. Dies bedeutet, dass jemand in Wellington, Neuseeland ist nicht, um das volle Erlebnis! Ich habe einen langfristigen plan, der zur Gründung meiner eigenen kleinen CDN-edge-Server (gehostet von einem 100% – erneuerbare-Energie angetrieben host in jedem Ort, die ich finden kann) nur mit NGINX und servieren zwischengespeicherten Versionen der Website. Dies ist eine vereinfachte Art und Weise, wie wir Dinge tun, auf WordPress.com VIP.

Abschließend

Susty ist ein Beispiel dafür, wie nachhaltige design-Techniken, um eine extreme. Ich bin mir nicht was darauf hindeutet, dass wir sollten beginnen alle websites, die mit dieser exakten Methode. Aber ich denke, dass Nachhaltigkeit sollte eine viel höhere Priorität in der web design Branche. Es ist gut, darüber nachzudenken, speichern Kilobyte wir können, und denken in Kilobyte statt Megabyte. Wenn Sie dies tun möchten, verwenden Sie eine JavaScript-Bibliothek Schnittstelle, warum nicht ausprobieren Choo.js, die Reagieren-wie-features und kommt in bei nur 4 KB. Denken Sie daran, NASA gelang es, einen Mann auf den Mond mit über 50KB an Daten-Speicher zur Verfügung.

Die beste Sache über all dies ist, dass eine effiziente websites bedeutet, dass schnellere websites, was bedeutet:

  • Glücklicher Benutzer
  • Bessere Suchmaschinen-Platzierung
  • Glücklicher-Server