Instrument gratuit: Performanță
Test viteză site
Încărcăm pagina dumneavoastră ca un telefon de gamă medie pe o conexiune 4G lentă, măsurăm cât de repede apare conținutul principal și cât de mult sare pagina și arătăm ce o face grea. Când Google are date de la utilizatori reali pentru site-ul dumneavoastră, le vedeți și pe acestea.
Gratuit. De obicei gata în mai puțin de un minut.
Ce verifică acest instrument
Un telefon pe 4G lent
Pagina se încarcă în Chromium ca pe un telefon din clasa Moto G Power (412 × 823), cu latență de 150 ms, aproximativ 1,6 Mbps la descărcare și 750 Kbps la încărcare și un procesor de 4× mai lent. Acesta este profilul pe care îl folosește Lighthouse pentru testele pe mobil.
Largest Contentful Paint
Momentul în care cea mai mare imagine sau cel mai mare bloc de text din primul ecran a terminat de randat și ce element a fost acesta.
Cumulative Layout Shift
Cât de mult s-a deplasat neașteptat conținutul vizibil în timpul încărcării paginii.
Total Blocking Time
Cât timp au ținut scripturile browserul prea ocupat ca să răspundă la o atingere: partea de peste 50 ms a fiecărei sarcini lungi, adunată. Este echivalentul de laborator pentru Interaction to Next Paint.
Ce descarcă pagina
Totalul de octeți și de cereri, împărțit în imagini, scripturi, CSS și fonturi, și proporția care provine de la terți.
Imagini grele și fișiere care blochează randarea
Imagini de peste 150 KB sau mult mai late decât spațiul în care sunt afișate și fișierele CSS și script care întârzie prima randare.
Date de la utilizatori reali din Chrome
Chrome UX Report de la Google pentru originea dumneavoastră, pe telefoane, la percentila 75: LCP, INP și CLS, atunci când Google are suficient trafic pentru site.
Ce nu poate verifica
- Nu poate da aceleași cifre la fiecare rulare. Rezultatele de laborator variază în funcție de rețea, de încărcarea serverului și de scripturile terților, așa că urmăriți tendințele, nu rulările individuale.
- Nu poate reproduce exact PageSpeed Insights. Ambele folosesc un profil de telefon similar, dar rulează pe mașini și rețele diferite.
- Nu poate măsura INP în laborator. INP are nevoie de interacțiuni reale, așa că testul de laborator arată TBT, iar datele de teren arată INP, când există.
- Nu poate arăta date de teren pentru orice site. Chrome UX Report acoperă ultimele 28 de zile și doar originile cu suficient trafic din Chrome.
- Nu poate testa mai mult decât pagina pe care o introduceți. Raportul de performanță, cu plată, testează 3 pagini-cheie și ordonează cauzele după importanță, cu soluții.
De ce contează
O pagină care pare instantanee pe Wi-Fi-ul de la birou și pe un laptop rapid poate dura câteva secunde pe un telefon de gamă medie cu semnal slab. Aceasta este situația pe care o recreează testul, pentru că acolo imaginile și scripturile grele fac cel mai mult rău.
Core Web Vitals sunt măsurătorile Google pentru această experiență: încărcarea (LCP), capacitatea de răspuns (INP) și stabilitatea vizuală (CLS). Google le folosește în clasare, dar spune că o experiență bună pe pagină nu cântărește mai mult decât un conținut relevant. Efectul lor mai mare este asupra oamenilor: o pagină lentă sau care sare pierde vizitatori înainte ca aceștia să citească ceva.
Cauzele sunt de obicei concrete: o imagine principală (hero) necomprimată de câțiva megabytes, un widget de chat care se încarcă înaintea conținutului, un font web care ascunde textul sau un banner inserat deasupra paginii după ce aceasta apare. Testul indică elementul LCP și cele mai grele fișiere, ca să vedeți care dintre acestea se aplică.
Cum să citiți rezultatele
- Largest Contentful Paint (LCP)
- Bun sub 2,5 s, slab peste 4 s. Dacă elementul LCP este o imagine, contează cel mai mult dimensiunea și prioritatea ei de încărcare; dacă este text, verificați fonturile web și CSS-ul care blochează randarea.
- Cumulative Layout Shift (CLS)
- Bun sub 0,1, slab peste 0,25. Un scor fără unitate de măsură care combină cât din ecran s-a mișcat și cât de departe.
- Total Blocking Time (TBT)
- Bun sub 200 ms, slab peste 600 ms. Un TBT ridicat anunță răspunsuri lente la atingeri pentru utilizatorii reali.
- Octeți și cereri
- Nu există o limită oficială; uitați-vă la tipul care domină. Imaginile reprezintă de obicei cea mai mare parte, iar o proporție mare de la terți indică aplicații, taguri și widgeturi.
- Imagini grele
- Fiecare imagine de peste 150 KB sau descărcată mult mai lată decât este afișată, cu dimensiunea fișierului și dimensiunile în pixeli.
- Fișiere care blochează randarea
- CSS și scripturi sincrone pe care browserul trebuie să le descarce înainte de a putea afișa ceva.
- Date de teren (percentila 75)
- Utilizatori reali de Chrome pe telefoane, în ultimele 28 de zile. Percentila 75 înseamnă că trei din patru încărcări de pagină au fost cel puțin atât de rapide. INP este bun sub 200 ms și slab peste 500 ms.
- Fără date de teren
- Google nu are suficient trafic din Chrome pentru originea dumneavoastră. Asta nu spune nimic despre viteza site-ului; bazați-vă pe rezultatele de laborator.
Cum remediați cele mai frecvente probleme
O imagine LCP lentă
Serviți imaginea principală la dimensiunea la care este afișată, cu srcset, în format WebP sau AVIF. Nu o încărcați cu lazy loading, adăugați fetchpriority="high" și puneți-o în HTML ca element img, nu încărcată dintr-un script sau ca fundal CSS.
Conținut care sare în timpul încărcării
Dați imaginilor, videoclipurilor și conținutului încorporat atributele width și height sau un aspect-ratio în CSS. Rezervați spațiu pentru bannere, notificări de cookie-uri și reclame sau afișați-le ca suprapuneri care nu împing conținutul în jos. Pentru fonturile web, folosiți font-display: optional sau un font de rezervă cu dimensiuni potrivite.
Total Blocking Time ridicat
Eliminați mai întâi aplicațiile, tagurile și pluginurile pe care nu le mai folosiți; scripturile lor rămân adesea și după ce nu le mai folosiți. Încărcați chatul, recenziile și analiza traficului cu defer sau după ce pagina devine interactivă. În Shopify, verificați Online Store › Themes › Customize › App embeds.
CSS și scripturi care blochează randarea
Adăugați defer la scripturile care nu trebuie să ruleze înainte de prima afișare, includeți inline puținul CSS de care are nevoie primul ecran și renunțați la foile de stil pentru funcții pe care pagina nu le folosește.
Imagini prea grele
Redimensionați imaginile înainte de încărcare (în jur de 2000 px lățime este suficient pentru un banner pe toată lățimea) și comprimați-le. Shopify și WordPress pot servi automat versiuni mai mici când tema le cere, așa că verificați dacă tema folosește dimensiuni de imagine responsive.
Întrebări despre acest instrument
De ce diferă rezultatele mele de cele din PageSpeed Insights?
Testele de laborator depind de mașină, de rețea și de moment. PageSpeed Insights rulează Lighthouse pe serverele Google și simulează conexiunea lentă, în timp ce noi aplicăm limitarea într-un browser real. Așteptați-vă la intervale similare, nu la cifre identice.
Ce înseamnă un LCP bun?
2,5 secunde sau mai puțin pentru cel puțin 75% dintre încărcările de pagină, potrivit web.dev. Peste 4 secunde este slab.
De ce nu există date de la utilizatori reali pentru site-ul meu?
Chrome UX Report include doar originile care pot fi descoperite public și care primesc suficiente vizite de la utilizatori Chrome care partajează statistici de utilizare. Multe site-uri mici nu ating acest nivel; testul de laborator arată totuși ce trebuie corectat.
De ce se face testul pe un telefon lent și nu pe desktop?
Pentru că acolo apar mai întâi problemele. Un laptop rapid ascunde imaginile și scripturile grele care costă secunde pe un telefon de gamă medie, iar Lighthouse folosește același profil de telefon pentru testele pe mobil.
Ce s-a întâmplat cu First Input Delay?
Interaction to Next Paint (INP) a înlocuit First Input Delay ca Core Web Vital în martie 2024. INP analizează întârzierea interacțiunilor pe parcursul întregii vizite, nu doar a primei interacțiuni.
Surse
- web.dev: Web Vitals(se deschide într-o filă nouă)
- web.dev: Largest Contentful Paint (LCP)(se deschide într-o filă nouă)
- web.dev: Cumulative Layout Shift (CLS)(se deschide într-o filă nouă)
- web.dev: Interaction to Next Paint (INP)(se deschide într-o filă nouă)
- web.dev: Total Blocking Time (TBT)(se deschide într-o filă nouă)
- Chrome for Developers: Chrome UX Report(se deschide într-o filă nouă)
- Lighthouse: Limitarea rețelei(se deschide într-o filă nouă)
Instrumente similare
- TehnicAudit site gratuitO singură scanare pentru accesibilitate, SEO, viteză, conversie, securitate și configurarea e-mailului, cu cele mai importante constatări din fiecare domeniu.Deschideți instrumentul
- SEOAnaliză SEO siteGăsiți pe paginile-cheie problemele tehnice de SEO care țin paginile în afara căutării sau le fac să arate mai slab în rezultate.Deschideți instrumentul
- SEOVerificare meta taguriVedeți titlul, meta descrierea, URL-ul canonic, regulile robots, Open Graph și alte etichete din head ale oricărei pagini, cu previzualizare în căutare și la partajare.Deschideți instrumentul
Aveți nevoie de remedieri, nu doar de constatări?
Raport de performanță ($55, plată unică) pornește de la scanarea gratuită completă și adaugă mai multe pagini, modificarea de făcut pentru fiecare constatare, un PDF și retestări pentru verificarea remedierilor.