Het leveren van WordPress in eens ongeveer 7 kb

0
8

In de afgelopen zes maanden heb ik steeds meer geïnteresseerd geraakt in het onderwerp van web duurzaamheid. De carbon footprint van het Internet was niet iets wat ik veel gedacht, dat is verrassend, aangezien mijn interesse in het milieu en het feit dat mijn beroep is web-based.

Het web in een opwarmende wereld

Als een korte samenvatting, ik woonde MozFest in Londen vorig jaar. Tussen de sessies, ik was het scannen van een prikbord om te zien wat kwam, en ik zag een sessie getiteld “het Bouwen van een Planeet-Vriendelijke Web.” Ik voelde me een beetje paf. Wat op Aarde was dit over zal gaan?

Ik was aanwezig bij de zitting en de weegschaal viel uit mijn ogen. In wat nu lijkt voor de hand liggend — maar op het moment was het een openbaring — ik heb geleerd van de enorme energiebehoefte van het Internet. Deze vraag maakt het de grootste steenkool-gestookte machine op Aarde, wat betekent dat de CO₂-emissies zijn waarschijnlijk minstens gelijk is aan de mondiale luchtvaart. Meer en meer mensen online, maar dit, in combinatie met de opkomst van steeds meer zwaarlijvige websites, betekent dat het Internet de vraag naar energie groeit exponentieel. Elke extra byte overgedragen betekent meer energie, die in de meeste landen betekent meer CO₂.

Het is algemeen aanvaard dat we moeten voorkomen dat het afdrukken van e-mails op te slaan bomen, maar dit leidt tot een verkeerde veronderstelling dat het web is een groen medium. Ik ben bang om dat te zeggen, het is het niet.

Is er een andere manier?

Het goede nieuws is, het hoeft niet op deze manier. Sinds 2009 Greenpeace is auditing Internet bedrijven op hun energieverbruik, en lobbyen ze te verbeteren door middel van het Klikken Clean campagne. The Green Web Foundation heeft een steeds groeiende database van hosting bedrijven die gebruik maken van hernieuwbare energie, of die op zijn minst gebonden aan koolstof-neutraal. En nieuwe instrumenten aan het ontstaan zijn, om degenen die werken op het web meten van de milieu-impact van onze producten.

Er zijn ook een aantal goede middelen die er zijn, zoals Tim Frick ‘ s Ontwerpen voor Duurzaamheid, drie jaar is de moeite waard van toespraken van de SustainableUX conferentie van perifere en materiaal die, hoewel niet expliciet gericht zijn op duurzaamheid, kan ons helpen bij het bouwen van een lagere carbon websites.

Voer Susty WP

Ik besloot om mezelf te zien hoe efficiënt kon ik het pakket van een WordPress website. Terwijl ik bij het was voor, ik dacht, “Waarom niet de website over duurzaamheid en WordPress?” Ik weet het, WordPress/duurzaamheid oprichting. Cool, hè?

En dus, sustywp.com is geboren. Met de bijbehorende thema, Susty. Ik ben nogal chuffed om te zeggen dat ik erin geslaagd om het laden van de homepage naar beneden om eens ongeveer 7 kb van data-overdracht. Ik heb eigenlijk voor het naar beneden te 6KB, maar de meta-stuff toegevoegd door Yoast schopte het tot bijna een hele KB! 😛 Echter, gezien het feit dat ik probeer op het verspreiden van een bericht, ik acht dit een acceptabel compromis.

Voordat ik in de moeren en bouten, ik wil gewoon een paar kop feiten:

  • sustywp.com scores 100/100 op prestaties via Google Vuurtoren.
  • Het krijgt straight A ‘ s op webpagetest.org.
  • Het verwoest de meeste benchmarks, met een gemiddelde tijd tot de eerste byte (TTFB) van ongeveer 0,15 s, en volledig is weergegeven binnen een straal van 0,5 s.
  • Het is gehost in een datacenter en is 100% aangedreven door hernieuwbare energie.

Dus, hoe werkt het?

Het opmerkelijke ding over dit is eigenlijk hoe alledaags is. Zwaar geïnspireerd door de Heydon Pickering om te evangeliseren over het schrijven van minder damn code, en projecten zoals Brad Frost Dood te Bullshit, ik begon aan een wortel en tak snoeien van Onderstreept, is het verwijderen van alles wat ik kon. En voor alle duidelijkheid, het is niet zo dat Onderstreept is vol van cruft. Het is een zeer mager uitgangspunt voor de opbouw van een thema. Ik ben een groot bewonderaar van hem en grondig onderschrijven gebruiken. Het bevat echter een aantal veronderstellingen die niet deurbel met mijn spartaanse doel van het maken van de kleinste mogelijke WordPress site.

Zoals u vragen?

Nav? Nee. Sidebar? Zich te ontdoen van het. De lessen? Niet in mijn socialistische heilstaat.

Gezien de beperkingen die ik had gesteld, alles wat het maken van de DOM had een zeer goede reden om er te zijn. Met dit wordt een experiment, ik vond het enigszins radicale aanpak van gedegradeerd de navigatie naar haar eigen pagina. Dit is heerlijk bevrijdend en betekent dat ik niet hoefde te gaan door de bijna altijd teleurstellend dans van af hoe ik zou het er goed uitziet, kunt u deze verbergen voor de vele gebruikers die niet de zorg, zorg ervoor dat het robuust genoeg is om oneindig lang met het nooit eindigende dropdowns, enz.

Dit betekent minder HTML, minder CSS, en zeker geen JavaScript! Winnen, winnen, winnen.

Als voor de sidebar? Nou ik heb altijd een afkeer van sidebars, dus dat was een eenvoudig ding om te verwijderen. Susty heeft geen widget gebied. Ik weet zeker dat het gaat het over.

Is er meer vet kunnen we trimmen? Nou, als we het gaan hebben nauwelijks HTML, en we willen minimaal CSS, moeten we echt al die lessen? Ik wilde mijn hand bij het schrijven van CSS in de manier waarop het was bedoeld om te worden gebruikt, in plaats van te buigen voor de klasse-ititis en div-ititis die doordringen van de industrie.

Je zou het niet nodig web fonts

Naast de afbeeldingen, video en JavaScript, de ander item dat is uitgegroeid tot een belangrijke factor in opgeblazen websites is web fonts. Gezien het feit dat het nu een Silicon Valley-mode voor elke opstarten van de commissie haar eigen lettertype als een eerste orde van zaken, het lijkt alsof elke website die u bezoekt maakt het downloaden van een bos van lettertype-bestanden. Het lijkt misschien niet zo slecht om overstag te gaan op een honderd kilobytes voor sommige mooi type, maar als je vermenigvuldig dit door de vele verschillende mensen bezoeken uw website op verschillende apparaten en browsers, lettertypen kunt gemakkelijk een account voor honderden megabytes aan data-overdracht — als niet gigabytes/terabytes/petabytes voor hogere traffic websites.
Custom web fonts zijn ook een potentieel antipattern voor onze gebruikers, voor wie:

  1. Pagina wordt geladen worden afgeremd als ze zien een flits van unstyled tekst of mogelijk nog erger, geen tekst en het lettertype wordt geladen.
  2. Tegen de tijd dat het lettertype is geladen, worden ze niet in de gaten of de zorg.

Als je niet om het gebruik van aangepaste lettertypen of in strijd met de flits van het vn-opgemaakte tekst, lettertype-display is een nieuwe eigenschap die ontworpen zijn instructies aan de browser hoe om te gaan met het lettertype downloaden. Deze post gaat in het nog meer.

Vrijwel elk apparaat van deze dagen heeft een half fatsoenlijke set van lettertypen geïnstalleerd, dus waarom niet het samenstellen van een stapel van mogelijke lettertypen die u wilt zien, eindigend met “serif” of “sans-serif.” Of omarmen die standaard lettertypes met een systeem font stack.

Ik wilde Susty een beetje een Zwitserse Stijl, esthetische, dus mijn font stack varieert van de perfect geproportioneerd Helvetica (die alle Apple-apparaten hebben standaard) sans-serif, door middel van Arial, Frutiger en Nimbus Sans L.

Als Ubuntu gebruiker, ik zie Arial, en dat is heel aangenaam. Op mijn Android-apparaten zie ik de standaard sans-serif lettertype (Droid Sans geloof ik), die in feite werkt het vrij goed op mobiele — je zou bijna denken dat is wat het was ontworpen voor!

Wat anders? Standaard dingen. Weinig of geen beelden en SVG waar mogelijk

Buiten dit, het is echt gewoon de standaard. De homepage van sustywp.com heeft geen beelden, en slechts één SVG-die is geladen inline in plaats van een HTTP-verzoek. De CSS is minified. Alles wordt Gzip. De server wordt afgestemd met NGINX en Fast-CGI-cache om inhoud uit het geheugen.

Bonus SPA-achtige functies zonder het werk of code

Wanneer ik saai was mijn vriendin Daisy, met mijn plannen, ik vroeg haar hoe ze zich voelde conceptueel over een website, het niet hebben van een navigatie, en het in plaats daarvan wordt op een eigen pagina, te vinden via de knop “menu”. Ze dacht dat het klonk ok. Dus, toen ik kwam, om te laten zien aan haar, ik keek gretig als ze klikte op de menu link. Haar reactie was dat ze niet echt na te denken over op te klikken om te zien, het menu en het menu dat verschijnt, zoals het wijzigen van pagina ‘ s. Dit bevestigde een van mijn angsten is dat mijn vorige obsessie met het elimineren van de pagina wordt geladen bij het bouwen van Enkele Pagina Apps (Sbz ‘ s) is iets dat alleen echt stoort web developer-y soorten. De meeste mensen niet echt te merken of aan te denken. Dus, als u uw website snel als de bliksem, de pagina wordt geladen zelf zijn bijna onmerkbare toch.

Met dat gezegd zijnde, ik dacht waarom niet net doen alsof het was een menu-overlay? Dus, heb ik een cross sluiten-knop en een klein beetje JavaScript nodig om u van het menu terug naar de vorige pagina als je er op klikt. (Ik heb in eerste instantie de uitvoering van deze in PHP met de $_SERVER superglobal en HTTP_REFERER, maar dit breekt bij het gebruik van iets als Pg cache te dienen pagina ‘s (dat zijn de pagina’ s is er geen $_SERVER superglobal.)

Er is nog meer te komen

We weten allemaal dat het kan altijd beter. Hier zijn een paar van de dingen die ik bezig ben te verbeteren Susty:

  • Afwerking het lezen van Jeremy Keith ‘ s boek Gaat Offline, dus ik kan het implementeren van een Service medewerker en maken Susty zelfs meer performant.
  • Kijk om te zien hoe ik kan implementeren van Gutenberg. Het gaat om het toevoegen van een bos van kb en dat maakt me verdrietig! 😉
  • Momenteel sustywp.com is gehost in een datacenter in Londen, en geserveerd wereldwijd vanuit die locatie. Dit betekent dat iemand in Wellington, Nieuw-Zeeland is niet van plan om de volledige ervaring! Ik heb een langer termijn plan van de oprichting van mijn eigen kleine CDN van de edge-servers (elk één gast bij een 100% hernieuwbare energie aangedreven gastheer op elke locatie die ik kan vinden) gewoon draait NGINX en waar in de cache versies van de site. Dit is een vereenvoudigde manier van hoe we de dingen doen op WordPress.com VIP.

In conclusie

Susty is een voorbeeld van het nemen van duurzame technieken voor het ontwerp tot in het extreme. Ik ben niet suggereren dat we moeten al beginnen met het bouwen van websites met deze methode. Maar ik denk dat duurzaamheid moeten een veel hogere prioriteit in de web design industrie. Het is goed om na te denken over het opslaan van een kilobytes we kunnen, en te denken in termen van kilobytes plaats van mb. Als u gebruik wilt maken van een JavaScript-interface library, waarom niet proberen Choo.js die heeft Reageren-achtige functies en komt op slechts 4 KB. Vergeet niet, NASA in geslaagd zijn om een man op de maan met ongeveer 50KB van de opslag van gegevens tot hun beschikking.

Het beste ding over dit alles is dat efficiënte websites betekent snellere websites, die betekent:

  • Tevreden gebruikers
  • Betere zoekmachine plaatsing
  • Gelukkiger servers