Leverera WordPress i 7KB

0
52

Under de senaste sex månaderna, har jag blivit alltmer intresserad av ämnet web hållbarhet. Klimatpåverkan av Internet inte var något jag brukade ge mycket tänkte, vilket är förvånande med tanke på mitt intresse för miljöfrågor och det faktum att mitt yrke är web-baserat.

Webben i ett allt varmare värld

Som en kort resumé, som jag deltog i MozFest i London förra året. Mellan mötena, jag var skanna en anslagstavla för att se vad som var på väg upp, och jag såg en session med titeln, “att Bygga en miljövänlig Webben.” Jag kände mig lite dumbstruck. Vad i hela friden var detta kommer att handla om?

Jag deltog i sessionen och fjällen föll från mina ögon. I vad som nu verkar självklart — men på den tiden var en uppenbarelse — jag lärde mig av den enorma efterfrågan på energi från Internet. Detta krav gör den till den största koleldade maskinen på Jorden, vilket gör att koldioxidutsläppen är nog minst motsvarar den globala flygtrafiken. Fler och fler människor kommer online, men detta, tillsammans med framväxten av allt mer överviktiga webbplatser, innebär att Internet är efterfrågan på energi växer exponentiellt. Varje ytterligare byte överförs innebär att mer energi, vilket i de flesta länder innebär mer CO₂.

Det är allmänt accepterat att vi bör undvika att skriva ut e-post för att spara träd, men detta leder till ett felaktigt antagande, att webben är en grön medium. Jag är rädd för att säga, det är det inte.

Finns det annat sätt?

Den goda nyheten är, det behöver inte vara på detta sätt. Sedan 2009, Greenpeace har varit revision Internet-företag på sin energianvändning, och lobbyverksamhet för dem att förbättra genom att Klicka på deras Rena kampanj. Den Gröna Web Foundation har en ständigt växande databas av webbhotell som använder förnybar energi, eller som är minst åtagit sig att vara koldioxidneutrala. Och nya verktyg utvecklas för att hjälpa dem som arbetar på webben mäta miljöpåverkan av våra produkter.

Det finns också några stora resurser ute som Tim Fricks Designa för Hållbarhet, tre år till ett värde av samtal från SustainableUX konferens, och perifert material som, även om man inte uttryckligen fokuserar på hållbarhet, kan hjälpa oss att bygga lägre koldioxidutsläpp webbplatser.

Ange Susty WP

Jag bestämde mig för att utmana mig själv för att se hur effektivt jag kunde paket en WordPress-webbplats. Medan jag var på det, jag tänkte, “Varför inte göra webbplatsen om hållbarhet och WordPress?” Jag vet, WordPress/hållbarhet starten. Coolt, va?

Och så, sustywp.com är född. Med sin medföljande tema, Susty. Jag är ganska jätteglad att säga att jag lyckats få lasten på hemsidan ner till 7KB data överföring. Jag gjorde faktiskt få ner det till 6KB, men meta saker som lagts till av Yoast stötte upp nästan en hel KB! 😛 Dock, med tanke på att jag försöker att sprida ett budskap, och jag ansåg att detta var en godtagbar kompromiss.

Innan jag får till muttrar och skruvar, och jag vill dela med mig av några viktiga fakta:

  • sustywp.com poäng 100/100 på prestanda via Google ‘ s Lighthouse.
  • Det blir direkt En på webpagetest.org.
  • Det ödelägger de flesta riktmärken, med en genomsnittlig tid till första byten (TTFB) ca 0,15 s, och fullständigt utförda inom 0,5 s.
  • Den är värd i ett datacenter som är 100% drivs av förnybar energi.

Så, hur fungerar det?

Det märkliga med detta är faktiskt hur vardagliga är det. Starkt inspirerad av Heydon Pickering är att missionera om att skriva mindre jävla kod och projekt som Brad Frost Död till Skitsnack, jag påbörjat en genomgripande beskärning av Understreck, ta bort allt som jag möjligen kunde. Och för att vara tydlig, det är inte som om Understreck är full av skräp. Det är en mycket mager utgångspunkt för att bygga ett tema. Jag är en stor beundrare av det och grundligt godkänna med det. Men det finns vissa antaganden som inte chime med min spartanska mål för att göra minsta möjliga WordPress webbplats.

Till exempel, frågar du?

Nav? Nej. Sidebar? Bli av med det. Klasser? Inte i min socialistisk utopi.

Med tanke på de begränsningar jag hade set, något som gör det för att DOM var tvungen att ha en bra anledning till att vara det. Detta är ett experiment, jag tog det ganska radikala tillvägagångssätt för att förpassa navigering till sin egen sida. Det är underbart befriande och betyder att jag inte måste gå igenom nästan alltid en besvikelse dans undrar hur jag skulle få det att se presentabel, dölj det för många användare som inte bryr sig, se till att den är tillräckligt robust för att vara oändligt lång med aldrig sinande menyerna, etc.

Detta innebär mindre HTML, mindre CSS, och definitivt inte JavaScript! Vinna, vinna, vinna.

Som till sidomenyn? Jo jag har alltid haft en motvilja att sidofält, så det var en lätt sak att ta bort. Susty har ingen widget område. Jag är säker på att det kommer att komma över det.

Är det mer fett vi kan trimma? Tja, om vi ska ha knappast någon HTML, och vi vill minimal CSS, behöver vi verkligen alla dessa klasser? Jag ville prova min hand på att skriva CSS på det sätt den var avsedd att användas, i stället för att böja sig inför klassen-ititis och div-ititis som genomsyrar branschen.

Du kanske inte behöver web fonts

Tillsammans med bilder, video och JavaScript, andra objekt som har blivit en betydande faktor i uppsvälld webbplatser är web fonts. Med tanke på att det nu är ett Silicon Valley mode för varje start till kommissionen sin egen stil som en första beställning av företag, och det verkar som om varje webbplats du besöker medför att ladda ner en massa filer teckensnitt. Det kanske inte verkar så illa att slå på hundra kilobyte för vissa trevlig typ, men när du multiplicerar detta med de många olika människor som besöker din webbplats på olika enheter och webbläsare, teckensnitt kan lätt konto för hundratals megabyte data transfer — om inte gigabytes/terabyte/petabyte för ökad trafik webbplatser.
Anpassad web fonts är också en potentiell antipattern för våra användare, för vem:

  1. Sidan laddas är saktade ner när de ser antingen en blixt av unstyled sms: a eller eventuellt ännu värre, ingen text och teckensnitt laddas.
  2. Av den tid det teckensnitt som har hämtats, att de inte märker eller bryr sig.

Om du behöver använda egna teckensnitt eller är i strid med blixt av fn-formaterad text, font-display är en ny fastighet utformade för att ge webbläsaren hur man hanterar teckensnitt nedladdningar. Detta inlägg går in i det ännu mer.

Nästan varje enhet i dessa dagar har en halv-bra uppsättning av typsnitt som är installerade, så varför inte komponera en stack av potentiella teckensnitt som du vill se, som slutar med antingen “serif” eller “sans-serif.” Eller omfamna de förvalda teckensnitt helt och hållet med ett system font stack.

Jag ville Susty att ha lite av en Schweizisk Stil estetiska, så min font stack varierar från perfekt proportionerade Helvetica (som alla Apple-enheter har som standard) för att sans-serif, font-family: Arial, Frutiger och Nimbus Sans L.

Som en Ubuntu-användare, jag ser Arial, som är mycket trevlig. På min Android-enheter jag se standard sans-serif-teckensnitt (Droid Sans tror jag), som faktiskt fungerar ganska bra på mobil — skulle du nästan tror att det är vad den var avsedd för!

Vad annars? Vanliga saker. Få eller inga bilder och SVG, där så är möjligt

Bortom detta, det är egentligen bara vanliga. Hemsida sustywp.com har inga bilder, bara en SVG som är laddad inline snarare än av en HTTP-begäran. CSS är minified. Allt blir Gzip. Servern är inställd med NGINX och Snabb CGI-cache för att tjäna innehåll från minnet.

Bonus SPA-liknande funktioner utan arbete eller kod

När jag var tråkig min flickvän, Daisy, med mina planer, jag frågade henne hur hon kände sig konceptuellt om en webbplats inte har en navigering, och att det i stället vara på sin egen sida, som du hittar via en “meny” – knappen. Hon tyckte att det lät ok. Så, när jag kom för att visa det för henne, jag såg ivrigt när hon klickade på menyn länka till. Hennes svar var att hon inte riktigt tänka på att klicka för att se meny och den meny som visas, som att byta sidor. Detta bekräftas av en av mina rädslor som min tidigare besatthet med att eliminera sidan laddas när du bygger en Sida Apps (Spa) är något som verkligen stör web developer-y typer. De flesta människor inte riktigt märker det eller tänka på det. Så, om du gör din hemsida blixtsnabb, sidan laddas i sig är nästan omärklig ändå.

Med detta är fallet, och jag tänkte varför inte bara låtsas att det var en meny överlägg? Så lade jag till en korsning ogilla ” – knapp och en liten bit JavaScript för att ta dig från menyn tillbaka till föregående sida om du klickar på den. (Jag visste från början att genomföra detta i PHP $_SERVER autoglobala och HTTP_REFERER, men detta pauser när du använder något som FastCGI-cache för att visa sidor (det vill säga de sidor det finns ingen $_SERVER autoglobala.)

Det finns fortfarande mer att komma

Vi vet alla att saker och ting kan alltid bli bättre. Här är några av de saker jag jobbar på att förbättra Susty:

  • Avsluta behandlingen Jeremy Keith bok att Gå Offline så att jag kan genomföra en Service till Arbetstagare och göra Susty ännu mer prestanda.
  • Ta en titt och se hur jag kan genomföra Gutenberg. Det kommer att lägga till ett gäng kilobyte och det gör mig ledsen! 😉
  • För närvarande, sustywp.com är värd i en data center i London, och serveras globalt från denna plats. Detta innebär att någon i Wellington, Nya Zeeland, inte kommer att få full upplevelse! Jag har en långsiktig plan för inrättande av mitt egna lilla CDN av edge-servrar (var och en är värd en 100% förnybar energi drivs värd i varje läge att jag kan hitta en) bara kör NGINX och serverar cachade versioner av webbplatsen. Detta är ett förenklat sätt hur vi gör saker på WordPress.com VIP.

Sammanfattningsvis

Susty är ett exempel på hållbar design tekniker till en extrem. Jag föreslår inte att vi ska börja bygga webbplatser med exakt denna metod. Men jag tror hållbarhet bör vara en mycket högre prioritet i webbdesign branschen. Det är bra att tänka på att spara några kilobyte vi kan, och att tänka i termer av kilobyte snarare än megabyte. Om du vill använda ett JavaScript-gränssnitt bibliotek, varför inte prova Choo.js, som har att agera som finns och kommer in på bara 4KB. Kom ihåg att NASA lyckades sätta en människa på månen, med ca 50 KB för lagring av data till sitt förfogande.

Det bästa med allt detta är att effektiva webbplatser innebär snabbare webbplatser, vilket innebär:

  • Gladare användare
  • Bättre sökmotor placering
  • Lyckligare servrar