PageSpeed Insights, cum puteți îmbunătăți viteza unui website. Aflați cum PageSpeed Insights vă oferă o listă de îmbunătățiri UX.
Instrumente precum PageSpeed Insights (PSI) și Lighthouse pot fi valoroase în monitorizarea performanței. Dar de ce aveți nevoie de ele?
Când construiți o experiență web modernă este important să măsurați, să optimizați și să monitorizați. E important să accelerați rapid și să rămâneți rapid.
Performanța joacă un rol semnificativ în succesul oricărui website. Paginile performante atrag și rețin utilizatorii mai bine decât cele cu rezultate slabe.
În acest articol de pe blog vorbim despre măsurarea performanței. În plus, vedem și modul în care instrumentele vă pot ajuta să vă îmbunătățiți website-ul.
Pagina de web design a acestui blog e oferită cu sprijinul platformei de promovare online. Puteți accesa și secțiunile pentru turism, medical sau bio.
PageSpeed Insights: ce face acest instrument?
Lighthouse oferă un set cuprinzător de oportunități de performanță și timp economisit în implementare. Îl puteți găsi în panoul de audit Chrome DevTools și în PageSpeed Insights.
PageSpeed Insights (PSI) raportează performanța unei pagini pe dispozitivele mobile și pe desktop. Oferă sugestii cu privire la modul în care pagina poate fi îmbunătățită.
PSI furnizează atât date „lab” (Lighthouse), cât și „field” despre o pagină. Datele de laborator sunt utile în depanarea problemelor de performanță, fiind colectate într-un mediu controlat.
Cu toate acestea, e posibil să nu surprindă blocajele din lumea reală. Datele de teren sunt utile în a capta experiența reală a utilizatorilor, dar au un set limitat de valori.
Scorul de performanță
În partea de sus a raportului, PageSpeed Insights oferă un scor care rezumă performanța paginii. Scorul e determinat de rularea Lighthouse pentru a colecta și analiza date de laborator despre pagină.
Un scor de 90 sau mai mare este considerat rapid și 50 până la 90 este considerat moderat. Sub 50 este considerat a fi lent.
Date de laborator versus date de câmp în PageSpeed Insights
1. Date de laborator
Datele de laborator sunt date de performanță colectate într-un mediu controlat. Dispozitivele și setările de rețea sunt predefinite
Oferă rezultate reproductibile și capacități de depanare. Ajută la identificarea, izolarea și remedierea problemelor de performanță.
Puncte forte:
- utile atunci când vine vorba de depanarea oricăror probleme de performanță;
- end-to-end și oferă o vizibilitate profundă în UX;
- oferă testare reproductibilă și mediu de depanare.
Limitări:
- s-ar putea să nu surprindă blocajele din lumea reală;
- nu se poate corela cu KPI-urile din pagina reală.
Instrumente precum Lighthouse și WebPageTest colectează acest tip de date.
2. Date de câmp
Datele de teren (numite și RUM) sunt date de performanță colectate din încărcările de pagini reale. Sunt situații pe care le întâmpină utilizatorii dvs. în mod natural.
Puncte forte:
- captează adevărata experiență a utilizatorului din lumea reală;
- permite corelarea cu indicatorii cheie de performanță ai afacerii.
Limitări:
- set restricționat de valori;
- capacități de depanare limitate.
Chrome User Experience Report și scorul PageSpeed Insights raportează aceste date.
Valori de performanță în PageSpeed Insights
În trecut, performanța web era măsurată cu evenimentul de încărcare. Cu toate acestea, momentul nu corespunde neapărat cu ceea ce îi pasă unui utilizator.
În ultimii ani, echipele de browser au lucrat la standardizarea unui set de noi valori și API-uri. Noile date surprind mai exact performanța unei pagini web.
Pentru a ne asigura că valorile sunt relevante pentru utilizatori le încadrăm în jurul câtorva întrebări cheie:
- se întâmplă? Navigarea a început cu succes? A răspuns serverul;
- este util? A fost redat suficient conținut pentru ca utilizatorii să poată interacționa cu acesta;
- este utilizabil? Utilizatorii pot interacționa cu pagina sau este ocupată;
- este încântător? Sunt interacțiunile netede și naturale, fără întârziere.
Există o serie de măsurători importante de calculat. Lighthouse și PageSpeed Insights încearcă să surprindă câteva dintre cele mai importante:
- First Contentful Paint marchează ora la care apare primul text sau prima imagine;
- Time to Interactive e timpul necesar pentru ca pagina să devină complet interactivă. De exemplu, utilizatorul poate face click și poate vedea un răspuns;
- Speed Index arată cât de repede este vizibil conținutul unei pagini.
Există și câteva noi valori interesante:
- Largest Contentful Paint (LCP). Măsoară timpul de la încărcare până când cel mai mare bloc text sau element de imagine e redat pe ecran;
- Total Blocking Time (TBT). Măsoară cantitatea totală de timp dintre FCP și TTI. Firul principal a fost blocat suficient de mult timp pentru a preveni reacția la intrare.
Date din teren din lumea reală
Când PageSpeed Insights primește adresa URL, se caută în date Chrome User Experience Report (CrUX). Dacă este disponibil, PSI raportează date metrice First Contentful Paint (FCP) și First Input Delay (FID). Eventual, și adresa URL a paginii.
Clasificarea rapidă, moderată și lentă prin PageSpeed Insights
PSI clasifică, de asemenea, datele de teren, descriind experiențele considerate rapide, moderate sau lente. Stabilește următoarele praguri pentru rapid/moderat/lent pe baza setului de date CrUX:
FCP:
- rapid: 0 – 1.000 ms;
- mediu: 1.000 ms – 3.000 ms;
- lent: peste 3.000 ms;
FID:
- rapid: 0 – 100 ms;
- mediu: 100 ms – 300 ms;
- lent: peste 300 ms;
Date de laborator
PageSpeed Insights folosește Lighthouse pentru a analiza URL-ul dat. Generează scor de performanță care estimează performanța paginii pe diferite valori.
Fiecare valoare este etichetată cu o pictogramă:
- o valoare rapidă este indicată cu o bifă verde;
- moderatul este indicat cu cercul informațional portocaliu;
- valoarea lentă este indicată cu un triunghi de avertizare roșu.
Audituri oferite de PageSpeed Insights
Lighthouse își separă auditurile în trei secțiuni diferite:
- oportunitățile oferă sugestii despre cum să îmbunătățim valorile de performanță ale paginii. Fiecare sugestie din secțiune estimează cât de repede se încarcă pagina dacă îmbunătățirea e implementată;
- diagnosticările oferă informații suplimentare despre modul în care o pagină aderă la cele mai bune practici;
- auditurile promovate indică auditurile care au fost promovate cu succes de pagină.
Optimizarea performanțelor
Există optimizări pe care le puteți aplica pentru a vă îmbunătăți valorile Lighthouse/PageSpeed Insights.
Pentru a îmbunătăți First Contentful Paint:
- reduceți CSS și eliminați CSS-urile neutilizate;
- eliminați orice resurse de blocare a redării;
- preconectați-vă la originile necesare;
- reduceți timpul de răspuns al serverului;
- evitați redirecționările de mai multe pagini;
- evitați o dimensiune DOM excesivă;
- asigurați-vă că textul rămâne vizibil în timpul încărcării fonturilor web (de exemplu, cu afișarea fontului).
Trimiterea de sarcini utile JavaScript mari afectează semnificativ viteza website-ului dvs. În special cât de curând pot interacționa utilizatorii cu paginile dvs. Pentru a îmbunătăți timpul de interacțiune pentru un website, puteți:
- reduce și comprima JavaScript;
- furniza numai utilizatorii JavaScript de care au nevoie, atunci când au nevoie (exemplu: cu divizarea codului);
- reduce impactul codului terților (exemplu: încărcarea lentă a acestor resurse);
- reduce timpul de execuție JavaScript prin optimizarea sarcinilor lungi și costisitoare;
- preîncărca scripturile cheie, mai ales dacă website-ul dvs. este cu o singură pagină.
Multe dintre aceste optimizări vă pot îmbunătăți, de asemenea, indicele de viteză.
API-ul PageSpeed Insights
În legătură cu PSI se află API-ul PageSpeed Insights. Oferă acces gratuit la monitorizarea performanței paginilor. Returnează date cu sugestii despre cum să se îmbunătățească.
API-ul V5 include date de laborator de la Lighthouse. De asemenea, include și date din lumea reală din Chrome User Experience Report (CrUX).
Echipele folosesc API-ul pentru:
- a construi panouri de administrare;
- rapoarte personalizate;
- integrări personalizate cu alte instrumente de măsurare a experienței utilizatorului.
Răspunsurile din API pot fi utilizate în a monitoriza datele din instrumentul PSI acoperite anterior. Este posibil să creați rapoarte foarte personalizate utilizând date PSI.
Web.dev Measure folosește același back-end ca PSI. Folosește aceste date pentru măsurarea istorică în timp. E util să vă familiarizați cu structura de răspuns API PSI. Există informații despre valori disponibile pentru laborator și teren.
Răspunsurile API-ului PSI sunt axate pe date de performanță. Puteți furniza argumentul ?category. Specificați orice categorie de audit Lighthouse suplimentară pentru care doriți date.
În plus, puteți furniza un argument local sau o strategie locală (desktop sau mobil). Simulează încărcarea paginii pe un dispozitiv de clasă medie.
Instrumentul PSI acceptă, de asemenea, preluarea datelor API PSI și redarea în Lighthouse Viewer oficial. Treceți ?psiurl ca parametru pentru a vedea acest lucru în acțiune.
De asemenea, puteți utiliza Google Sheets și un cron job. Automatizați monitorizarea mai multor adrese URL, făcând ping în mod regulat la API-ul PSI.
Servicii terțe
Serviciile de monitorizare continuă (SpeedCurve, Caliber, Treo) folosesc Lighthouse și PageSpeed Insights. Preferați ca un serviciu să aibă grijă să vă verifice constant scorurile de performanță?
Doriți să vă trimită rapoarte comparative? Vă recomandăm să verificați. În cele din urmă, utilizați orice soluție care are cel mai mult sens pentru website-ul dvs.!
Concluzie
Când vine vorba de experiența utilizatorului, viteza contează. Este vital să înțelegeți diferitele perspective oferite de valorile de performanță. Apoi, stabiliți-le pe cele care sunt importante pentru experiența dvs. de utilizator.
Lighthouse și PageSpeed Insights vă pot măsura experiența și evidenția oportunitățile care se pot îmbunătăți. Ele pot fi o parte utilă a setului de instrumente pentru ca website-ul să devină rapid și să rămână rapid.
Pentru alte servicii de advertoriale și blog vă rugăm să intrați în contact cu noi.