Provocarea de performanță front-end: câștigător și rezultate

În urmă cu câteva săptămâni, le-am cerut cititorilor noștri și comunității să folosească tot ce le stă în putință pentru ca site-urile și proiectele lor să funcționeze uluitor de rapid. Astăzi, suntem încântați să arătăm rezultatele acestei provocări și să anunțăm câștigătorul, care va primi într-adevăr câteva premii uluitoare!

Ce premii, întrebi? Câștigătorul câștigă un zbor dus-întors la Londra, cazare completă într-un hotel elegant, un bilet la SmashingConf London 2018 și, nu în ultimul rând, un atelier Smashing la alegere.

Provocare? Ce provocare?

Ei bine, sarcina nu a fost atât de simplă pe cât părea. Concurenții au fost rugați să îmbunătățească performanța unui site web, păstrând în același timp aspectul vizual final identic înainte și după. Încărcarea fonturilor a fost permisă să difere, iar reflow-urile au fost acceptabile atâta timp cât au fost menținute la minimum.

În timp ce alegeam norocosul câștigător, ne-am uitat la rezultatele prezentate de Lighthouse și WebPageTest, precum și la complexitatea site-urilor web la care au lucrat participanții noștri, desigur. Prima vopsea semnificativă și timpul de interacțiune au fost cele mai critice valori.

Dar destule fapte dure pentru moment. Știm că ești deja curios și nu vrem să te mai ținem în suspans. Așa că iată-l, proiectul câștigător.

Si castigatorul este…

Leonardo Losoviz

Tehnicile de optimizare prezentate în depunerea lui Leonardo sunt toate DIY, concepute și implementate de la zero. El a adăugat toate optimizările la PoP, un cadru open-source pentru a construi site-uri web și a folosit Agenda Urbana pentru a testa îmbunătățirile de performanță pe un proiect real.

Am simțit că această trimitere a intrat cu adevărat în spiritul provocării nu numai prin îmbunătățirea performanței unui singur site web, ci și prin încercarea de a aduce îmbunătățiri unui cadru utilizat pe mai multe site-uri web. Faptul că PoP este susținut de WordPress a însemnat că Leonardo se afla într-o situație similară cu multe persoane care nu puteau face unele dintre lucrurile disponibile pentru un cadru JavaScript. După cum a remarcat:

PoP este construit pe WordPress. Asta înseamnă că multe tehnici de optimizare inovatoare disponibile cadrelor Javascript, cum ar fi divizarea codului folosind Webpack sau Service Workers prin sw-precache, sunt la îndemână (cel puțin așa fără o soluție mare). Ca atare, toate tehnicile de optimizare descrise mai jos sunt toate DIY, proiectate și implementate de la zero.

Dacă sunteți interesat să explorați toate detaliile esențiale ale depunerii sale, nu ezitați să faceți acest lucru. Cu toții ne-a făcut plăcere să citim detaliile optimizărilor lui Leonardo și l-am simțit un câștigător demn datorită cantității mari de muncă pe care a depus-o în această intrare.

Toate trimiterile

Am fost foarte mulțumiți de calitatea lucrărilor pe care le-am primit și, sincer, nu a fost ușor să alegem un câștigător. Mulțumim tuturor celorlalți care s-au înscris - continuă să lucrezi genial!

Jorgen Verweij

Jorgen Verweij a prezentat o versiune optimizată a site-ului companiei sale Perplex Internetmarketing BV. Împreună cu o echipă formată dintr-un UX, un dezvoltator front-end și un dezvoltator back-end și un administrator de sistem, el a pornit în efortul de performanță.

Rezultatul este o implementare excelentă, cu rezultate excelente de performanță la nivel general: SpeedIndex mult sub obiectivul stabilit de 1250, un timp de încărcare mai mic de 1 secundă, începe randarea în jumătate de secundă, un scor PageSpeedscore _{de 100⁄ 100} ^și un audit Lighthouse aproape perfect . În comparație cu situația veche, timpul de încărcare este de aproape opt ori mai rapid. Apreciere! Puteți citi mai multe detalii despre proces în acest articol cuprinzător pe care Jorgen l-a realizat.

Marco Hengstenberg

Marco Hengstenberg a prezentat o versiune optimizată a site-ului web al agenției de turism Land in Sicht . Pentru a îmbunătăți performanța, Marco a folosit destul de multe trucuri și tehnici înțelepte. Preîncărcarea foii de stil principală și încărcarea fontului critic cu preîncărcare în browserele compatibile sunt doar două dintre ele. De asemenea, a restructurat HTML pentru a-l face cât mai plat, semantic și accesibil posibil și a redus cantitatea de date transferată inițial la prima vizită de la aproape 3 MB la 1,3 MB pe desktop (și datorită utilizării imaginilor receptive pentru imaginea eroului, acesta este chiar mai mică decât cea de pe ecranele înguste).

Pentru a eficientiza și mai mult site-ul, Marco a eliminat Bootstrap, jQuery și Modernizr, a configurat un proces de construire cu Grunt și a introdus un ServiceWorker care face site-ul disponibil și offline. Efortul a meritat: rezultatul este un TTL dramatic care a scăzut de la 32 de secunde la 2 secunde și o scădere de aproape 50% a solicitărilor HTTP și a octeților transferați (vezi și raportul Lighthouse, ZIP 251KB). Preîncărcarea și redarea inițială rapidă ajută ambele la timpul de încărcare perceput. Buna treaba!

Gabriel Mariani

Site-ul Colegiului Creștin din San Diego a fost cel la care Gabriel Mariani și-a aplicat abilitățile de performanță. El a împărțit procesul de optimizare în patru pași. În primul rând, a tăiat toate imaginile la dimensiunea maximă în care au fost de fapt necesare și a creat versiuni ale acestora la scară mobilă. Apoi a făcut toate imaginile să se încarce leneș. Al doilea pas s-a concentrat pe JavaScript și pe eliminarea tuturor scripturilor inline cu care au venit site-ul WordPress și tema și pluginurile sale terță parte. Apoi a pus în coadă cât mai multe scripturi posibil, astfel încât Autoptimize să le poată ridica și să le minimizeze/combine într-un singur fișier.

Gabriel a redus, de asemenea, numărul de fonturi utilizate și a setat fonturile Google să se încarce în async , astfel încât calea critică CSS să se încarce mai întâi. Nu în ultimul rând, a abordat și alte mici șanse și finalități, cum ar fi personalizarea pluginurilor WordPress, așa că se bazează pe ajax în loc de PHP. Acest lucru i-a permis să activeze stocarea în cache a paginii și, eventual, să activeze un CDN pentru site. Trecerea la HTTP/2 și HTTPS a fost pasul final. Consultați WebPageTest pentru rezultatele complete. Grozav!

Alexandru Zarges

Alexander Zarges a dezvoltat Cloud Player, o aplicație web cu o singură pagină bazată pe Angular 4, care vă permite să căutați și să redați aplicațiile YouTube și SoundCloud. Versiunea actualizată folosește compilatorul Angular ahead-of-time pentru a obține un timp de inițializare de aproximativ 2,9 secunde (comparativ cu 5,2 secunde când se utilizează compilatorul just-in-time). Dacă doriți să vă scufundați mai adânc în cod, consultați depozitul GitHub însoțitor.

Bradly Taunt

Bradley Taunt a luat provocarea noastră ca pe o ocazie de a experimenta site-ul său personal. Ca bază pentru întreprinderea sa de optimizare, și-a folosit pagina de pornire și un articol bogat în imagini. Pentru a reduce timpii de încărcare la 4,2 secunde pentru articol, Bradley utilizează implicit fonturile sistemului de operare ale utilizatorului în loc să folosească fonturi web, printre altele.

Pentru un impuls suplimentar, versiunea optimizată include, de asemenea, CSS critic, oferă imagini receptive și utilizează stocarea în cache CDN. Puteți obține o privire mai detaliată în culise, în postarea pe blog pe care Bradley a scris despre modul în care a abordat provocarea.

John Beales

John Beales s-a provocat să dea 4RoadService.com un spor de performanță. Când a început, existau deja câteva optimizări. Imaginile statice au fost rulate prin ImageOptim, de exemplu, CSS și JS au fost minimizate, rulau un CDN prin CloudFlare, iar site-ul folosea deja un încărcător în stilul unei singure pagini, astfel încât conținutul nou este întotdeauna preluat de XHR și pagina este niciodată complet redesenată.

Pentru această provocare, John a activat Optimizarea imaginii și compresia WebP în Cloudflare. Site-ul actualizat utilizează acum HTTP/2 Server Push pentru a trimite fișierele CSS și JS principale cu încărcarea inițială a paginii și se bazează pe Guetzli pentru compresia JPEG. Pentru a optimiza stocarea în cache, el a actualizat adresele URL ale tuturor activelor statice, astfel încât adresa URL să se schimbe ori de câte ori se modifică materialul, apoi a setat toate elementele statice în cache timp de un an. Pentru îmbunătățirea stocării în cache a imaginilor, John a actualizat și adresele URL ale imaginilor redimensionate dinamic, astfel încât CloudFlare să creadă că sunt fișiere de imagine statice.

Rezultatul: prima vopsea semnificativă a scăzut de la 2.220 ms la 1.290 ms, iar First Interactive de la 5.480 ms la 3.040 ms. Puteți vedea rezultatele complete ale testului Lightbox și WebPage aici.

Shaun O'Connell

Intrarea lui Shaun O'Connel a fost munca pe care a făcut-o pe kiwi.ruby.nz. Scopul a fost de a transforma site-ul web al conferinței într-un PWA, astfel încât participanții la conferință să poată căuta toate informațiile despre eveniment offline. Câteva dintre lucrurile pe care le-a făcut: înlocuirea unui iframe Google Maps obișnuit cu Google Static Maps, fonturi de subseturi cu găzduire automată, mutarea CSS în linie pentru a menține prima solicitare sub 14 KB, eliminarea dependențelor, adăugarea lucrătorilor de servicii pre-cache și adăugarea de Turbolink-uri pentru snappy tranziții de pagină. Procedând astfel, timpul inițial de randare a scăzut de la 3,9 secunde la 0,3 secunde.

Pentru mai multe detalii, consultați WebPageTests.

Ruslan Julbarissow

Ruslan Julbarissow și-a trimis site-ul personal zerofy.de. Deoarece și-a terminat munca de optimizare cu puțin timp înainte de publicarea concursului, nu există, din păcate, rezultate detaliate înainte, dar Ruslan a făcut o redacție bună despre modul în care ajustările sale au condus la o dimensiune a paginii de 1,6 KB și un TTFB de 197 ms. Pe lângă modificările de cache, minimizare, GZIP și jQuery, el încarcă fonturile după aceea pentru a evita blocarea randării și, înlocuind FontAwesome cu un set IcoMoon personalizat de 10 pictograme, a reușit să salveze încă 130 KB.

Pentru a crește scorul indexului de viteză și a obține cea mai rapidă experiență posibilă, el a creat și un fișier PHP separat care conține toate stilurile CSS care afectează vizualizarea de deasupra plierii. Un detaliu frumos: scriptul minuscul Barba.js îi permite să creeze tranziții de pagină fără a reîncărca întregul site.

Mulțumim Tuturor Pentru Participare

Pf! Acum asta a fost într-adevăr o provocare! Pentru aceia dintre voi cărora le place o provocare atât de bună și un gâdilat creier din când în când, rămâneți pe fază pentru următoarea provocare. Vom găsi încă unul în cel mai scurt timp - asta este sigur!