Core Web Vitals: 7 instrumente și tehnici pentru identificarea blocajelor de performanță

Core Web Vitals (CWV) este un subiect fierbinte în acest moment. Aici, vom analiza câteva dintre instrumentele pe care le putem folosi pentru a identifica problemele de performanță ale site-ului web, în ​​pregătirea viitoarei actualizări a clasamentului Google din mai 2021.

Aveți nevoie de o actualizare pentru Core Web Vitals? Aflați ce sunt și cum să le optimizați în articolul meu Core Web Vitals Explained.

Monitorizarea automată a valorilor CWV

Dacă aveți mai multe site-uri web sau pagini cheie pe care doriți să le monitorizați în timp, fără a fi nevoie să rulați manual test după test, această foaie de calcul de la Digital Inspiration ar putea fi pentru dvs. Apăsați o cheie API Lighthouse PageSpeed, conectați câteva adrese URL și plecați!

Foaia de calcul ajută la identificarea potențialelor probleme de performanță în jurul indicatorilor cheie CWV și a momentului în care ar fi putut să apară, ceea ce la rândul nostru ne poate oferi indicii despre care ar putea fi cauza. Poate fi, de asemenea, utilizat pentru a demonstra modul în care scorurile de viteză se pot schimba în mod natural în timp, pe măsură ce un site web crește sau când se fac modificări la algoritmii de viteză ai paginii.

Folosim o versiune modificată a acestei foi de calcul de câteva luni și ne-a ajutat să identificăm oportunități de a îmbunătăți performanța unui număr de site-uri web.

PageSpeed ​​Insights

PageSpeed ​​Insights de la Google este instrumentul meu de bază pentru investigații inițiale, de top, privind problemele legate de performanță și CWV, atât pentru dispozitivele mobile, cât și pentru cele desktop. Rapoartele conțin „Date de teren”; modul în care utilizatorii din lumea reală experimentează site-ul web împreună cu datele Lighthouse „Lab” care simulează o încărcare a paginii, ceea ce este util pentru testarea repetabilă și consecventă.

Metricele de bază Web Web Vital sunt clar evidențiate cu indicatori simpli, codați în culori. Valori slabe sunt evidențiate în roșu, bune în verde. Aceste valori sunt combinate pentru a oferi un scor general de viteză și aveți nevoie de 90% sau mai mult pentru o „trecere” verde.

O serie de recomandări și diagnostice sunt, de asemenea, date în aceste rapoarte, ordonate după elementele cu cel mai mare impact în termeni de secunde totale care pot fi salvate.

Monitorul de performanță Chrome DevTools

Pentru o analiză mai detaliată a performanței și a problemelor legate de CWV, mă adresez adesea la Monitorul de performanță Chrome din DevTools, iar unii dintre indicatorii cheie CWV pe care îi folosesc sunt numerotați în captura de ecran de mai jos.

1. În primul rând, veți dori să vă asigurați că rulați monitorul de performanță la rezoluția corectă, deoarece elementele LCP și CLS se vor schimba adesea la rezoluții diferite. Am setat la 350 x 636 pixeli pentru a reproduce vizualizarea mobilă PageSpeed ​​Insights.
2. Înainte de a rula raportul, poate doriți să simulați conectivitatea și puterea unui dispozitiv mobil. De multe ori selectez încetinirea procesorului Fast 3g și 4x.
3. Selectarea valorii LCP după generarea unui raport identifică care este cel mai mare element. Aceasta ar trebui să fie cât mai aproape de FCP (First Contentful Paint). Dacă există un decalaj, veți dori să identificați și să eficientizați livrarea celui mai mare element.
4. Sarcinile lungi ale procesorului sunt evidențiate de diagonalele roșii de pe barele gri. Acest lucru este adesea cauzat de JavaScript mai greu, reprezentat de barele galbene și vă va afecta valorile de interactivitate (FID, TBT și TTI). Prelucrarea barelor de mai jos va indica de obicei fișierele și funcțiile JavaScript jignitoare.
5. Schimbările de aspect sunt evidențiate de aceste bare roșii și selectarea acestora va evidenția de obicei ce element a fost mutat. O cantitate mare dintre acestea va crea valori CLS mai mari.
6. Vizualizarea cadrelor poate fi o modalitate excelentă de a evidenția vizual modul în care conținutul apare și aspectul este modificat pe măsură ce este încărcat. Pentru valori CLS ridicate, este adesea evident din cadre care este cauza. În acest exemplu, un banner mare de cookie-uri determină modificarea aspectului ca conținut pe măsură ce este împins în jos.

Extensii Chrome Vitals Web

Core SERP Vitals

Extensia SERP Vitals afișează un indicator util pentru valorile LCP, FID și CLS direct în rezultatele căutării. Este minunat pentru analiza concurenților și poate oferi o indicație rapidă cu privire la cât de rapidă este o pagină web înainte de a o vizita.

Datele sunt compilate anonim de la utilizatori reali prin raportul Chrome User Experience Report (CrUX). Cu toate acestea, nu este disponibil pentru fiecare site, deoarece site-urile noi sau site-urile cu trafic redus nu vor fi obținut suficiente puncte de date.

Web Vitals

Extensia la îndemână Web Vitals măsoară cele 3 valori cheie CWV pentru utilizatorii de desktop-uri din Chrome în timp real, iar colorarea semaforului său oferă un indicator rapid în timp ce navigați pe un site web. Deoarece nu se bazează pe datele de utilizator colectate extern, poate fi grozav pentru dezvoltatorii care lucrează într-un mediu local să detecteze orice probleme din timp.

Far

Lighthouse Extensions oferă o rută rapidă către aceeași caracteristică de raportare disponibilă în Chrome DevTools și extrage datele de laborator folosind API Lighthouse, mai degrabă decât datele de câmp de la utilizatorii din lumea reală prin CrUX.

Raportul de performanță este foarte asemănător cu analiza mobilă PageSpeed ​​Insights, oferind diagnostice și recomandări similare. De asemenea, sunt generate rapoarte suplimentare pentru SEO, accesibilitate și cele mai bune practici.

Treo Site Speed ​​Visualizer

Vizualizatorul de la https://treo.sh/sitespeed prezintă valori CWV de-a lungul timpului, filtrabile după dispozitiv, conectivitate și regiune geografică. Este actualizat săptămânal și folosește date din raportul CrUX.

În exemplul de mai jos pentru bbc.co.uk, putem vedea cum metrica CLS a scăzut semnificativ în ultimele 3 luni, oferind rezultate ecologice pentru toate valorile de bază. Acesta este un mod excelent de a analiza performanța valorilor CWV în timp sau de a efectua analize ale concurenților.

Vizualizarea cererilor terților

Valorile de interactivitate pentru FID, TTI și TBT pot fi adesea greu de depanat. PageSpeed ​​Insights poate fi util în ceea ce privește identificarea unora dintre cele mai grele scripturi terță parte, dar uneori o vizualizare decentă poate comunica impactul acestor scripturi mult mai ușor.

Instrumentul de mapare a cererii https://requestmap.herokuapp.com/ este minunat pentru asta. Hărțile generate conțin noduri pentru fiecare solicitare terță parte, cu noduri mai mari reprezentând scripturi cu impact mai mare. Dacă valorile dvs. de interactivitate sunt slabe, este posibil să vedeți o mulțime de noduri pe această hartă.

Iată un exemplu dintr-un site care are 26 de secunde pentru metrica TTI Time to Interactive. O privire rapidă pe hartă arată un widget de chat live, reprezentat de numeroasele noduri albastre închise din partea de sus, reprezentând peste jumătate din totalul solicitărilor.

Instrumentul de mapare a cererilor este, de asemenea, un mod excelent de a determina de unde sunt încărcate scripturile sau alte active. În acest exemplu, putem vedea mai jos câteva noduri care provin direct din nodul galben Google Tag Manager.

Cascade în WebPageTest

Rapoartele WebPageTest oferă mult mai multe detalii decât PageSpeed ​​Insights și pot fi generate de pe diferite dispozitive și locații.

Folosesc adesea acest instrument pentru analiza cascadei, care vizualizează secvența de încărcare a tuturor activelor dintr-o pagină. Acest lucru poate fi deosebit de util atunci când încercați să vă simplificați conținutul critic „deasupra paginii”. De exemplu, dacă optimizați pentru LCP și cel mai mare element de pliere este o imagine sau o tipografie, poate doriți să implementați preîncărcarea pe cele mai mari fișiere de imagini și fonturi și verificați dacă aceste elemente preîncărcate apar în partea de sus a cascadei .

Nu sunteți sigur cum va afecta CWV site-ul dvs., trimiteți-ne o linie astăzi.