Levere WordPress i 7KB

0
19

I løpet av de siste seks måneder, har jeg blitt stadig mer interessert i temaet web bærekraft. Karbonavtrykket fra Internett var ikke noe jeg pleide å gi mye tanke til, noe som er overraskende med tanke på min interesse for miljøspørsmål og det faktum at mitt yrke er web-basert.

Web in a warming world

Som en kort oppsummering, jeg deltok MozFest i London i fjor. I mellom øktene, jeg var skanne et noticeboard å se hva som var på vei opp, og jeg oppdaget en sesjon med tittelen, “å Bygge en Miljøvennlig Web.” Jeg følte meg litt dumbstruck. Hva i all verden var dette kommer til å være om?

Jeg deltok på sesjon og skjell falt fra øynene. I det som nå synes opplagt, men på den tiden var en åpenbaring — jeg lærte av den enorme etterspørselen etter energi på Internett. Dette kravet gjør det til det største kull-maskinen på Jorden, noe som betyr at dens CO₂-utslipp er sannsynligvis minst tilsvarer den globale flytrafikken. Flere og flere mennesker kommer online, men dette, kombinert med fremveksten av stadig mer overvektige nettsteder, betyr at Internett er energibehov er økende eksponentielt. Hver ekstra byte som er overført betyr mer energi, noe som i de fleste land betyr mer CO₂.

Det er allment akseptert at vi bør unngå å skrive ut e-post for å spare trær, men dette fører til en feilaktig antakelse om at internett er en grønn medium. Jeg er redd for å si, det er det ikke.

Er det en annen måte?

Den gode nyheten er, det trenger ikke være på denne måten. Siden 2009, Greenpeace har vært revisjon av Internett bedrifter på deres energiforbruk, og overtale dem til å forbedre måten deres å Klikke Ren kampanje. De Grønne Web Foundation har en stadig voksende database med hosting selskaper som bruker fornybar energi, eller som er minst opptatt av å være karbonnøytralt. Og nye verktøy dukker opp for å hjelpe de som arbeider på nettet måle miljøpåvirkning av våre produkter.

Det er også noen gode ressurser der ute som Tim Frick er Design for Bærekraft, tre år igjen av forhandlingene fra SustainableUX konferanse, og perifert materiale, og selv om det ikke eksplisitt fokus på bærekraft, kan hjelpe oss å bygge lavere karbon nettsteder.

Skriv inn Susty WP

Jeg bestemte meg for å utfordre meg selv til å se hvor effektivt kunne jeg pakke en WordPress nettstedet. Mens jeg var på det, tenkte jeg, “Hvorfor ikke gjøre nettstedet om bærekraft og WordPress?” Jeg vet, WordPress/bærekraft starten. Kult, ikke sant?

Og så, sustywp.com er født. Med tilhørende tema, Susty. Jeg er heller chuffed å si at jeg klarte å få belastning på hjemmesiden ned til 7KB av data overføring. Jeg gjorde faktisk få det ned til 6KB, men meta ting lagt til av Yoast dunket den opp nesten en hel KB! 😛 Imidlertid, gitt jeg prøver å spre et budskap, jeg ansett dette for å være en akseptabel trade-off.

Før jeg kommer til muttere og bolter, jeg bare ønsker å dele noen overskriften fakta:

  • sustywp.com score 100/100 på ytelse via Google ‘ s Fyr.
  • Det blir rett En er på webpagetest.org.
  • Det devastates mest benchmarks, med en gjennomsnittlig tid til første byte (TTFB) på ca 0,15 s, og fullstendig gjengitt i 0.5 s.
  • Det er arrangert i et datasenter som er 100% drevet av fornybar energi.

Så, hvordan fungerer det?

Den bemerkelsesverdige ting om dette er faktisk hvordan dagligdagse det er. Sterkt inspirert av Heydon Pickering ‘ s evangelisering om å skrive mindre jævla koden, og prosjekter som Brad Frost Død å Tull, jeg begitt seg ut på en rot og gren beskjæring av Understrekninger, fjerne alt jeg kunne. Og for å være klar, det er ikke som om Understrekninger er full av cruft. Det er et svært magert utgangspunkt for å bygge et tema. Jeg er en stor beundrer av det og grundig anbefale å bruke det. Imidlertid inneholder visse forutsetninger som ikke chime med min spartan mål om å gjøre minst mulig WordPress nettstedet.

For eksempel, spør du?

Nav? Nei. Sidebar? Bli kvitt det. Klasser? Ikke i min sosialistiske utopi.

Gitt de begrensninger jeg hadde sett, noe som gjør det til DOM hadde å ha en svært god grunn til å være det. Med dette blir et eksperiment, jeg tok litt radikal tilnærming av relegating navigasjon til sin egen side. Dette er fantastisk befriende, og betyr at jeg ikke trengte å gå gjennom nesten alltid skuffende dans lurer på hvordan jeg skulle få det til å se presentabel, skjule det for mange brukere som ikke vil vare, sørg for at den er robust nok til å være uendelig lang med never-ending dropdowns, etc.

Dette betyr mindre HTML, mindre CSS, og definitivt ingen JavaScript! Vinn, vinn, vinn.

Som for sidebar? Godt jeg har alltid hatt en aversjon mot sidebars, så det var en enkel ting å fjerne. Susty har ingen widget område. Jeg er sikker på at det vil komme over det.

Er det mer fett vi kan trimme? Vel, hvis vi kommer til å ha knapt noen HTML, og vi ønsker minimal CSS, trenger vi virkelig trenger alle de klasser? Jeg ønsket å prøve min hånd på å skrive CSS på den måten det var ment å bli brukt, i stedet for å bøye til klasse-ititis og div-ititis som gjennomstrømmer bransjen.

Du kanskje ikke trenger web-fonter

Sammen med bilder, video og JavaScript, den andre element som har blitt en betydelig faktor i oppsvulmet nettsteder er web-skrifter. Gitt at det er nå en Silicon Valley mote for hver oppstart til kommisjonen sin egen skrifttype som en første bestilling av virksomheten, det virker som om alle nettsider du besøker pådrar å laste ned en haug med font-filer. Det kan ikke virke så dårlig til å takle på en hundre kilobyte for noen fine typen, men når du multiplisere denne med mange forskjellige folk som besøker nettstedet ditt på tvers av ulike enheter og nettlesere, skrifter kan enkelt konto for hundrevis av megabyte med data overføring — hvis ikke gigabyte/terabyte/petabyte for høyere trafikk nettsteder.
Tilpasset web-skrifter er også en potensiell antipattern for våre brukere, for hvem:

  1. Siden laster er bremset ned som de ser enten en flash av unstyled tekst eller potensielt enda verre, ingen tekst mens skriften laster.
  2. Etter den tid skrift er lastet inn, vil de ikke merke til eller bryr seg.

Hvis du trenger å bruke tilpassede skrifttyper eller er i strid med flash av fn-stylet tekst, font-skjermen er en ny eiendom utformet for å instruere nettleseren hvordan å håndtere skrift nedlastinger. Dette innlegget går inn i det enda mer.

Nesten hver enhet i disse dager har en halv anstendig sett med skrifter som er installert, så hvorfor ikke skrive en stabel av potensielle skrifter du ønsker å se, slutter med enten “serif” eller “sans-serif.” Eller slutter seg til de standard skrifter sammen med et system skrift stabelen.

Jeg ønsket Susty å ha en bit av en Sveitsisk Stil estetisk, så min skrift stabelen varierer fra perfekt proporsjonert Helvetica (som alle Apple-enheter har som standard) til sans-serif, ved hjelp av Arial, Frutiger og Nimbus Sans L.

Som en Ubuntu-bruker, vil jeg se Arial, som er perfekt hyggelig. På min Android-enheter jeg se standard sans-serif-font (Droid Sans, tror jeg, som faktisk fungerer ganske bra på mobil — du skulle nesten tro det er hva det var designet for!

Hva annet? Standard ting. Få eller ingen bilder og SVG-der det er mulig

Utover dette, det er egentlig bare det som er standard. Hjemmesiden til sustywp.com har ingen bilder, og bare ett SVG som er lagt inline, snarere enn av en HTTP-forespørsel. CSS er minified. Alt blir Gzip. Serveren er stilt inn med NGINX og Rask CGI-cache for å levere innhold fra minnet.

Bonus SPA-lignende funksjoner uten arbeid eller-kode

Da jeg var kjedelig kjæresten min, Daisy, med mine planer, jeg spurte henne hvordan hun følte konseptuelt om en nettside som ikke har en navigasjon, og det i stedet være på sin egen side, funnet via en “meny” – knappen. Hun syntes det hørtes ok. Så, når jeg kom for å vise det til henne, jeg så ivrig som hun klikket på meny-link. Hennes svar var at hun egentlig ikke ville tenke på å klikke for å se på menyen, og menyen vises, som å endre sider. Dette bekreftet en av mine frykt for at min forrige besettelse med å eliminere side lastes inn når bygningen Enkelt Side Apps (SPAs) er noe som virkelig plager web developer-y-typer. De fleste vet egentlig ikke legger merke til det eller tenke på det. Så, hvis du gjør ditt nettsted lynrask, lastes siden inn i seg selv er nesten umerkelig uansett.

Med det blir tilfelle, jeg tenkte hvorfor ikke bare late som om det var en meny overlegg? Så, jeg har lagt til et kors avvise knappen og en liten bit av JavaScript til å ta deg fra menyen tilbake til forrige side hvis du klikker på den. (Jeg hadde i utgangspunktet implementere dette i PHP bruker $_SERVER superglobal og HTTP_REFERER, men dette bryter når du bruker noe som FastCGI buffer for å tjene sider (dvs. de sidene det er no $_SERVER superglobal.)

Det er fortsatt mer å komme

Vi vet alle at ting kan alltid bli bedre. Her er noen av de tingene jeg jobber med å forbedre Susty:

  • Ferdig med å lese Jeremy Keith ‘ s bok Går Offline, slik at jeg kan gjennomføre en Service Arbeidstaker og gjøre Susty enda mer effektivt.
  • Se å se hvordan jeg kan implementere Gutenberg. Det kommer til å legge til en haug av kilobyte og det gjør meg trist! 😉
  • I dag, sustywp.com ligger i en data center i London, og serveres globalt fra den plasseringen. Dette betyr at noen i Wellington, New Zealand ikke kommer til å få den fulle opplevelsen! Jeg har en langsiktig plan om å etablere min egen lille CDN av kant-servere (hver og en arrangert av en 100% fornybar energi drevet vert på hvert sted som jeg kan finne en) bare kjører NGINX og serverer bufret versjoner av nettstedet. Dette er en forenklet måte hvordan vi kan gjøre ting på WordPress.com VIP.

I konklusjon

Susty er et eksempel på å ta bærekraftig design teknikker til en ekstrem. Jeg er ikke noe som tyder på at vi alle burde begynne å bygge nettsteder med denne nøyaktige metoden. Men jeg tror at bærekraft bør være en mye høyere prioritet i web design industrien. Det er godt å tenke på å lagre noen kilobyte vi kan, og å tenke i form av kilobyte snarere enn megabyte. Hvis du ikke ønsker å bruke en JavaScript-grensesnitt bibliotek, hvorfor ikke prøve ut Choo.js som har Reagere-som har og kommer på bare 4 KB. Husk at NASA har klart å sette en mann på månen med om 50KB av data lagringsplass til rådighet.

Det beste ting om dette er at effektiv nettsteder betyr raskere nettsteder, som betyr:

  • Fornøyde brukere
  • Bedre søkemotor plassering
  • Lykkeligere servere