Un exemplu de modificări pe care GoDaddy le-a implementat pentru a îmbunătăți performanța a milioane de site-uri web, ajutându-le să obțină performanțe ridicate în cadrul PageSpeed Insights și Core Web Vitals.
GoDaddy este cea mai mare platformă de servicii de găzduire din lume. Scopul lor este de a oferi comunității lor de peste 20 de milioane de clienți și antreprenori din întreaga lume tot ajutorul și instrumentele de care au nevoie pentru a se dezvolta online.
În 2019, GoDaddy a lansat Websites + Marketing, cu scopul de a oferi instrumente și servicii ușor de utilizat și de a ajuta proprietarii de afaceri să își atingă obiectivele. Programul Websites + Marketing combină crearea de site-uri web cu instrumente de marketing și de comerț electronic și le combină cu cea mai bună consiliere pentru a ajuta clienții să aibă succes cu noile lor campanii.
De la lansarea Websites + Marketing, performanța a devenit o parte importantă a produsului și este monitorizată și urmărită în mod activ. În acest articol, analizăm călătoria GoDaddy de la testarea performanței în laborator la utilizarea de date reale cu Core Web Vitals și seria de îmbunătățiri aduse produsului pentru a obține o rată de succes foarte mare pentru site-urile web ale clienților lor.
Iată ce spune GoDaddy despre urmărirea performanței cu Lighthouse
Ne-am bazat pe datele Lighthouse pentru a urmări performanța. De fiecare dată când un site web era găzduit, am măsurat performanța acestuia cu ajutorul instrumentului nostru intern Lighthouse4u, care oferă Google Lighthouse ca serviciu. Acest lucru ne-a oferit o idee bună despre cum funcționează site-urile web în general într-un mediu de laborator.
Deoarece milioanele de site-uri pe care le găzduim pe platforma noastră au o gamă largă de caracteristici și conținut, a fost important să combinăm datele de performanță cu metadatele despre fiecare site testat (de exemplu, șablonul utilizat, tipul de widgeturi afișate etc.). Acest lucru ne-a permis să tragem concluzii cu privire la caracteristicile site-ului web care au avut performanțe mai scăzute și ne-a dat o idee despre unde să căutăm îmbunătățiri.
De exemplu, ne-a ajutat să determinăm că "fereastra modală pop-up" a avut un impact negativ asupra vitezei paginii; site-urile cu această caracteristică au avut o performanță cu 12 puncte mai mică decât cele fără ea. După ce am modificat codul pentru a întârzia încărcarea JavaScript, am îmbunătățit scorul Lighthouse cu 2 puncte. Am putut aplica aceste cunoștințe la alte caracteristici, cum ar fi "bannerul cookie" care este afișat la scurt timp după încărcarea paginii.
Diagramă care prezintă scorurile de performanță pentru site-urile cu și fără o fereastră modală pop-up (linii albastre și, respectiv, verzi) înainte și după îmbunătățirea performanțelor.
Pe lângă căutarea site-urilor cu probleme bazate pe caracteristici, am analizat pachetul nostru JavaScript și am văzut că dependențele externe (immutable.js și draft.js) reprezentau cea mai mare parte din dimensiunea sa. Am redus dimensiunea pachetului prin restructurarea consumatorilor astfel încât aceștia să încarce leneș dependențele la cerere. Acest lucru a redus dimensiunea totală a pachetului JavaScript cu peste 50%, care a trecut de la peste 200KB la aproximativ 90KB (redus). Dimensiunea mai mică a pachetului a permis browserului să încarce resurse externe și să execute scripturi critice mai devreme în ciclul de viață inițial al încărcării site-ului, ceea ce a dus la creșterea vitezei de încărcare a conținutului principal (LCP) și a timpului de așteptare până la prima interacțiune cu conținutul (FID).
Scorul mediu Lighthouse pentru site-urile nou publicate de-a lungul timpului. Optimizările majore sunt suprapuse pe grafic pentru a arăta impactul.
Datorită eforturilor noastre continue, scorul mediu Lighthouse pentru site-urile clienților a crescut de la aproximativ 40 de puncte în noiembrie 2020 la peste 70 de puncte în mai 2021. Cu toate acestea, nu toate încercările noastre au funcționat, iar uneori am fost surprinși când rezultatele nu corespundeau întotdeauna cu cele testate pe teren și cu rezultatele obținute pe teren. Rezultatele de laborator au fost foarte utile, dar era timpul să ne concentrăm asupra experienței reale a utilizatorilor observate pe teren.
Urmărirea datelor reale ale utilizatorilor utilizând Core Web Vitals
După ce am adăugat biblioteca web-vitals pe site-urile clienților noștri, am putut măsura datele reale ale dispozitivelor de la vizitatori reali, unde hardware-ul, viteza rețelei, interacțiunea utilizatorului (cum ar fi defilarea sau clicurile) nu se potriveau cu linia de bază, ca în experimentele de laborator cu configurația Lighthouse. Acesta a fost un pas mare în direcția cea bună, deoarece acum aveam date care reflectau ceea ce experimentau vizitatorii site-ului nostru web.
Concentrarea pe veriga noastră cea mai slabă: schimbarea cumulativă a configurației (CLS)
Analiza noilor date ne-a oferit o nouă perspectivă asupra a ceea ce trebuie să facem pentru a îmbunătăți viteza site-ului. Datorită muncii depuse pentru a îmbunătăți scorul Lighthouse, LCP a fost de 860ms și FID a fost sub 10ms la același prag, astfel încât am obținut o rată mare de succes la aceste măsurători pe site-urile clienților noștri: 78% și, respectiv, 98%. Cu toate acestea, cifrele privind deplasarea cumulativă (CLS, Cumulative Layout Shift) sunt foarte diferite de cele cu care suntem obișnuiți la Lighthouse. CLS-ul nostru la percentila 75 a fost de 0,17 - peste pragul de 0,1 pentru "renunțare" - și, prin urmare, rata noastră de renunțare a fost de numai 47% în toate centrele noastre.
Acest lucru a redus rata noastră generală de succes la 40%, așa că am decis să ne stabilim un obiectiv ambițios de a crește această cifră la peste 60% până la sfârșitul lunii august 2021. Pentru a face acest lucru, ar trebui să ne concentrăm asupra CLS.
În viața reală, utilizatorii interacționează cu pagina și parcurg conținutul "în partea de sus", ceea ce Core Web Vitals surprinde mai bine. Din cauza diferențelor în modul în care utilizatorii interacționează cu site-ul în timpul încărcării inițiale, CLS diferă de datele de laborator și de teren.
Calea pentru a trece toate Core Web Vitals
Îmbunătățirea performanței necesită încercări și erori, iar fiecare încercare nu funcționează întotdeauna așa cum se așteaptă. Cu toate acestea, iată câteva îmbunătățiri care ne-au ajutat să ne atingem obiectivele.
Rezervarea spațiului pentru încărcarea imaginilor a îmbunătățit considerabil scorul CLS, împiedicând deplasarea conținutului sub imagini. Am folosit proprietatea CSS aspect-ratio pentru a rezolva această problemă în browserele care o acceptă. Pentru cei care nu știu, am încărcat o imagine transparentă care a fost memorată în memoria cache și a avut o dimensiune de doar câțiva octeți, încărcându-se astfel aproape instantaneu.
Acest comportament general al imaginii ne-a permis să pre-calculăm înălțimea finală a imaginii în timpul redării pe server, pe baza lățimii zonei de vizualizare și a raportului de aspect al imaginii. Acest lucru a dus la o marcare HTML cu spațiu vertical rezervat în mod corespunzător pentru imaginea finală. Îmbunătățirea a fost vizibilă în special pe dispozitivele mobile, deoarece imaginile sunt redate pentru întreaga gamă de ferestre de vizualizare mobilă.
Unele componente de pe site-urile web ale clienților noștri au un conținut dinamic (cum ar fi o listă de recenzii externe ale clienților) și nu pot fi convertite în CSS pur pentru a profita de performanța de redare pe server. Acestea sunt zone în care este dificil să se îmbunătățească tendința de îmbunătățire a aspectului, deoarece conținutul (și, prin urmare, înălțimea) se va schimba. În aceste cazuri, am înfășurat o componentă într-un container folosind o înălțime minimă, predeterminată pe baza observării înălțimii medii pentru fiecare dintre componentele specifice. Înălțimea minimă este eliminată după ce redarea componentei dinamice interne este finalizată. Deși nu este o soluție perfectă, aceasta ne-a permis să reducem în mod semnificativ schimbarea de aspect.
După ce ne-am concentrat asupra îmbunătățirii CLS, am continuat să lucrăm la LCP. Pe multe site-uri web, imaginile sunt cel mai mare vinovat pentru LCP, iar aceasta a fost o zonă evidentă de îmbunătățire pentru noi. Am făcut îmbunătățiri la încărcarea leneșă a imaginilor cu IntersectionObserver, dar am realizat că dimensiunile imaginilor nu erau setate optim pentru fiecare punct de control (dispozitiv mobil, tabletă, desktop, desktop mare), așa că am actualizat codul de generare a imaginilor pentru a fixa și a scala imaginile în funcție de punctul de întrerupere și apoi pentru a scala din nou rezoluția pe baza densității pixelilor. De exemplu, acest lucru a redus dimensiunea unei anumite imagini mari de la 192KB la 102KB.
Pentru a afișa rapid site-urile web pe dispozitive cu o conexiune de rețea slabă, am adăugat cod pentru a reduce dinamic scara imaginii în funcție de viteza conexiunii. Acest lucru se poate face utilizând proprietatea downlink returnată de navigator.connection. Aplicăm parametrii de interogare pe bază de URL pentru a reduce calitatea imaginii utilizând API-ul nostru de active în funcție de aceste condiții de rețea.
O serie de secțiuni ale site-urilor web ale clienților noștri sunt încărcate dinamic. Deoarece știm ce secțiuni vor fi afișate pe un anumit site după ce acesta este publicat, am folosit indicatorul de resurse rel=preconnect pentru a inițializa conexiunea în avans.
Atunci când își creează site-urile, clienții adaugă diferite secțiuni, care pot avea scripturi încorporate pentru a oferi diferite funcții. Integrarea acestor scripturi într-o pagină HTML nu este întotdeauna optimă pentru performanță. Am decis să încorporăm aceste scripturi pentru a permite browserului să încarce și să analizeze conținutul scripturilor în mod asincron. Noile scripturi externe ar putea fi utilizate și pe pagini diferite. Acest lucru a permis creșterea suplimentară a performanțelor prin intermediul memoriei cache a browserului și al CDN-urilor. Am păstrat scripturile importante în coada de așteptare, astfel încât browserul să le poată analiza și executa mai repede.
Rezultate
Concentrarea eforturilor noastre asupra CLS a dat roade, rata de promovare a Core Web Vitals a crescut de la 40% la aproape 70%: o îmbunătățire de 75%!
Procentul de site-uri web active + site-uri web de marketing cu "trecere de Core Web Vitals" în timp (total și subindicator).
Pe măsură ce utilizatorii se întorc la platforma noastră pentru a-și actualiza și republica site-urile, primesc cele mai recente îmbunătățiri ale performanței și, prin urmare, numărul de site-uri cu "Core Web Vitals passing" este în continuă creștere, după cum se arată în graficul de mai jos:
Grafic de prezentare a site-urilor GoDaddy Website Builder cu "performanțe bune în ceea ce privește parametrii web cheie".
Concluzie
Găsirea domeniilor de îmbunătățire a performanței și urmărirea cu succes a progreselor depinde în mare măsură de instrumentele utilizate pentru a le măsura. În timp ce Lighthouse a fost util pentru măsurarea performanței în partea de sus a paginii într-un "mediu de laborator", nu a surprins cu precizie problemele de performanță care apar doar în timpul interacțiunii cu utilizatorul (cum ar fi derularea paginii).
Urmărirea Core Web Vitals în lumea reală cu ajutorul metadatelor ne-a permis să vizualizăm, să țintim și să măsurăm impactul îmbunătățirilor noastre. Calea de îmbunătățire Core Web Vitals a permis echipei să identifice și să înlocuiască modelele ineficiente găsite în baza noastră de cod. Uneori, schimbările promițătoare nu au avut impactul scontat, alteori s-a întâmplat contrariul.