suport@creditpe.net

Verificarea vitezei site-ului mobil și SEO cu Google Lighthouse

Două cuvinte pe care le auziți adesea împreună sunt mobil și viteza site-ului. Și asta nu este lipsit de motiv, deoarece acești doi merg mână în mână. Conformitatea cu dispozitivele mobile și viteza site-ului sunt unele dintre cele mai urgente probleme cu care trebuie să ne ocupăm. Măsurarea vitezei paginii a fost întotdeauna ceva de o artă întunecată. Cele Instrumentele de viteză site – ul pe care le folosim astăzi sunt destul de adecvate, dar cu noile Vitals Web valori Google încearcă să vină la el dintr – un unghi diferit, mai realist, luând experiența pagina în considerare. Aici, voi arunca o privire mai atentă asupra modului de verificare a vitezei site-ului dvs. mobil și a SEO cu Google Lighthouse.

Ce este Google Lighthouse?

Lighthouse este un instrument de experiență a paginii construit de Google și a fost inițial menit să auditeze aplicațiile web progresive (PWA). Instrumentul execută cinci audituri pentru accesibilitate, performanță, SEO, aplicații web progresive și o listă extinsă de cele mai bune practici. Dezvoltat de noile Core Web Vitals, aceste audituri vă oferă împreună o imagine de ansamblu excelentă asupra calității și performanței unui site mobil, precum și al site-ului desktop sau al aplicației web.

Viteza site-ului se referă la percepție și experiență a utilizatorului. Viteza numerică nu înseamnă nimic dacă site-ul dvs. încă se simte lent. O mulțime de utilizatori din întreaga lume au conexiuni mobile destul de nenorocite de 3G sau mai puțin. Chiar și cu conexiuni 5G fulgerătoare, un site se poate simți pur și simplu lent și lent. Și știm cu toții ce efect devastator poate avea un site lent asupra conversiei dvs. Rasul de milisecunde din timpul necesar pentru încărcarea site-ului dvs. ar putea face diferența. Ca să nu mai vorbim de frustrarea care se întâmplă atunci când un anunț cu încărcare lentă apasă butonul pe care vroiai doar să dai clic.

site mobil
Puteți rula un audit Lighthouse direct din Instrumentele pentru dezvoltatori din Google Chrome – sau puteți instala extensia Chrome

În timpul testării, Google Lighthouse simulează vizitarea site-ului dvs. mobil printr-o conexiune 3G fulgurantă pe un dispozitiv ușor insuficient alimentat. Pachetele sunt pierdute în încercarea de a simula condițiile din lumea reală cât mai autentic posibil. Aceste informații sunt combinate cu alte date. După efectuarea testului, veți primi un raport cu un scor și sfaturi practice cu probleme de rezolvat.

PageSpeed Insights vs. Google Lighthouse

PageSpeed Insights este probabil cel mai utilizat instrument de analiză a vitezei site-ului. Vă oferă un scor frumos și o listă de posibile îmbunătățiri, plus vă oferă o idee despre viteza percepută de încărcare a site-ului dvs. De asemenea, PageSpeed Insights oferă recomandări și identifică oportunități de a îmbunătăți performanța paginii dvs. Unele dintre acestea au tendința de a fi greu de implementat, astfel încât obținerea unui 100/100 este un vis pentru toate site-urile.

PageSpeed Insights și Lighthouse erau două instrumente diferite pentru acest job. Amândoi au oferit informații valoroase, dar au fost greu de combinat. Odată cu apariția Web Vitals și actualizarea experienței de pagină, Google a îmbunătățit valorile generale. Nu numai că au devenit mai ușor de înțeles, dar au fost și valori comune. Desigur, fiecare instrument este creat pentru o anumită subtask și oferă valori specifice. Aceste valori provin din medii diferite.

Date de teren vs. date de laborator

Web Vitals a introdus noi modalități de determinare a performanței. Unele dintre aceste valori pot fi calculate într-un cadru de laborator – simulat, ca să spunem așa, în timp ce alte valori au sens doar dacă sunt testate și colectate în teren. În plus, unele valori funcționează bine în ambele setări. Instrumentele de experiență a paginii Google utilizează o varietate de valori pentru a vă furniza datele de care aveți nevoie pentru a vă îmbunătăți site-ul.

Dacă priviți cu atenție, veți observa că unele valori funcționează numai în instrumente de laborator, cum ar fi Instrumentele pentru dezvoltatori și Lighthouse. Valorile câmpului apar în instrumente precum raportul Web Vitals în Search Console și PageSpeed Insights. Core Web Vitals precum LCP, FID și CLS vor funcționa peste tot.

Core Web Vitals

Noul Core Web Vitals va apărea în toate instrumentele Google care măsoară viteza, performanța și experiența site-ului – chiar și în noul raport Web Vitals din Search Console. Acum, trebuie pur și simplu să înțelegeți trei valori de bază pentru a avea o imagine a performanței site-ului sau a anumitor pagini. Aceste elemente vitale web sunt:

Aceste noi Web Vitals adoptă o abordare mult mai practică și pun experiența utilizatorului în prim plan. Instrumentele vă vizitează site-ul printr-o conexiune limitată pe un dispozitiv mediu, astfel încât să poată emula ceea ce ar putea experimenta un vizitator real din lumea reală. În loc să vă încărcați doar site-ul, ca instrumentele clasice de viteză obișnuite, aceste instrumente bazate pe Web Vitals verifică cum și când răspunde la intrare – și dacă se întâmplă lucruri după încărcarea inițială. Acesta găsește momentul exact în care conținutul dvs. este gata de utilizare, astfel încât să puteți încerca să optimizați acest lucru atunci când se simte prea lent. În plus, puteți găsi supărări care împiedică o experiență bună de pagină.

De asemenea, rețineți că Lighthouse nu numai că măsoară performanța, ci și verifică SEO, diverse bune practici și accesibilitate. Este un instrument complet care vă ajută să vă îmbunătățiți site-ul în mod holistic.

site mobil
PageSpeed Insights oferă scoruri ușor diferite. De asemenea, veți observa o diferență între datele de câmp și datele de laborator

Ce trebuie să căutați în rezultatele farului

Întregul concept de a accelera site-ul dvs. mobil este dublu; site-ul dvs. trebuie să fie rapid și trebuie să se simtă rapid. Prin urmare, trebuie să vă afișați conținutul pe ecran cât mai repede posibil. Nu-i lăsa pe oameni să aștepte. De asemenea, utilizatorii trebuie să poată interacționa cu conținutul dvs. cât mai curând posibil. Deoarece Google a anunțat că viteza paginii și experiența paginii sunt factori de clasare pentru SEO, trebuie să remediați aceste probleme.

Care ar trebui să fie prioritatea ta? Încărcați mai întâi conținutul. Grafica minunată și animațiile ucigașe pot aștepta. Mesajul dvs. – și ceea ce caută oamenii – este cel mai probabil în conținut. Puteți încărca restul conținutului în fundal și îl puteți ușura pe ecran mai târziu.

Valori de performanță utilizate de Lighthouse 6.0

În timp ce măsoară performanța site-ului dvs., Lighthouse 6.0 folosește următoarele valori:

  • First Contentful Paint : FCP măsoară cât durează browserul să redea prima parte din conținutul DOM după ce un utilizator navighează la pagina dvs. Aceasta include imagini, <canvas> elemente care nu sunt albe și SVG-uri, dar exclude lucrurile dintr-un iframe.
  • Index viteză : Indexul vitezei măsoară cât de repede este afișat vizual conținutul în timpul încărcării paginii.
  • Cea mai mare vopsea conținută : LCP se referă la cât timp durează încărcarea celui mai mare obiect de conținut (de exemplu, o imagine sau un bloc de text). Aceasta este una dintre cele mai importante valori noi. Aici, a avea un scor bun înseamnă că utilizatorii percep site-ul dvs. ca încărcare rapidă.
  • Timp până la interactivitate : TTI măsoară timpul necesar încărcării paginii până când este capabil să răspundă rapid la introducerea utilizatorului. Este posibil ca pagina să se încarce rapid, doar pentru a constata că apăsarea unor butoane nu face încă nimic.
  • Timp total de blocare : TBT măsoară timpul dintre FCP și TTI în care se pot produce blocaje, prevenind capacitatea de reacție.
  • Schimbarea aspectului cumulativ : CLS analizează numărul de schimbări de aspect care au loc în timpul procesului complet de încărcare a paginii. De fiecare dată când un element sare pe ecran de la cadru la cadru, acesta contează ca o schimbare a aspectului. Vă amintiți acele reclame urâte care se încarcă în ultimul moment?

Puteți vedea cum se calculează scorul dvs. accesând Calculatorul de scoruri far:

site mobil
Calculatorul scorului farului arată greutatea valorilor diferențiale

Raportul Lighthouse oferă, de asemenea, câteva oportunități de a îmbunătăți viteza site-ului site-ului dvs. mobil, inclusiv cât timp de încărcare vor economisi. Acestea includ reducerea foilor de stil de blocare a redării, scripturi de blocare a redării, dimensionarea corectă a imaginilor și remedierea imaginilor de pe ecran.

site mobil
Lighthouse identifică cel mai mare element de vopsea conținut, astfel încât să puteți optimiza cu ușurință acest lucru

Una peste alta, Lighthouse vă oferă o perspectivă extraordinară asupra performanței paginii dvs. Folosiți aceste informații în avantajul dvs.

Verificarea SEO Lighthouse

Farul nu face doar performanță, are și un test de accesibilitate, sugestii privind îmbunătățirea site-ului dvs. pe baza celor mai bune practici și o analiză PWA. O altă caracteristică interesantă a farului este verificarea SEO de bază. Cu această verificare, puteți efectua un audit SEO simplu pentru a descoperi problemele SEO de bază pe care le poate avea un site. Vă oferă sugestii pentru a le remedia și. Deoarece Lighthouse rulează local în browserul dvs., puteți rula verificările și în mediul dvs. de etapă.

În prezent, Lighthouse verifică:

Deși de bază, verificările Lighthouse vă vor avertiza cu privire la orice probleme SEO de remediat.

Cum se instalează Google Lighthouse

Noțiuni introductive despre Google Lighthouse este foarte ușor, deoarece este încorporat în panoul de audit al instrumentelor pentru dezvoltatori Chrome (Mac: Shift + Cmd + I. Win: Ctrl + Shift + J sau F12). De acolo, puteți rula testul și puteți obține raportul complet. În plus, există un supliment Chrome separat pentru Lighthouse, care adaugă un buton la bara de instrumente, deși utilizarea acestuia rămâne aceeași cu câteva restricții: nu puteți valida site-urile de pe serverul dvs. local, iar paginile autentificate nu vor funcționa. .

De asemenea, puteți rula Lighthouse ca pachet Node . În acest fel, puteți încorpora testul în procesul de construire. Când utilizați pachetul Node, veți vedea, de asemenea, că există câteva audituri care funcționează numai într-un mediu Node și nu în panoul Audits al DevTools.

Pentru a instala Lighthouse la nivel global din linia de comandă utilizați:

npm install -g lighthouse

Dacă doriți să rulați un test pentru https://example.com utilizați:

lighthouse https://example.com

Rezultatele complete ale auditului vor fi disponibile în terminal, dar și într-un fișier HTML separat.

Puteți regla fin testul după cum doriți

Testarea Yoast.com în Far

A sosit timpul să punem farul în ritm. Să vedem ce se întâmplă când strălucesc lumina reflectoarelor farului pe yoast.com – așa cum este văzut de un browser mobil. Astăzi, ne concentrăm doar pe fila Performanță. Această filă arată cum funcționează site-ul sau aplicația dvs. în prezent și vă arată modalități de îmbunătățire.

În captura de ecran de mai jos, puteți vedea rezultatele pentru yoast.com. Încărcarea inițială a site-ului mobil este vizualizată de o serie de capturi de ecran care arată când conținutul apare prima dată pe ecran. Valorile arată cât timp durează până când conținutul devine vizibil. Cu cât mai repede, cu atât mai bine.

Veți obține cele mai importante valori într-un singur ecran

În secțiunea de valori, veți găsi cele mai importante informații, cu un punct verde, portocaliu sau roșu pentru a arăta cât de bună este performanța. Când doriți să optimizați performanța site-ului dvs. mobil, trebuie să urmăriți cifrele pentru prima vopsea conținută, cea mai mare vopsea conținută și timpul până la interactiv, așa cum am menționat mai devreme. De asemenea, încercați să îmbunătățiți indicele de viteză și asigurați-vă că nimic nu sare pe ecran.

Din note, puteți vedea că yoast.com se descurcă destul de bine cu un scor general de 78. Prima vopsea conținută ar putea fi ceva mai bună, dar indicele de viteză și timpul total de blocare sunt bune. Din fericire, nu există elemente care să se schimbe în aspect. Există încă ceva de câștigat prin eliminarea resurselor de blocare a redării, cum ar fi unele JavaScript și CSS. Cu alte cuvinte, site-ul pare a fi destul de rapid, dar totuși ar putea folosi unele accelerații în partea de aspect.

Implementarea remediilor de viteză ale site-ului

Puteți face multe pentru a vă îmbunătăți viteza site-ului . În timp ce explicarea tuturor remedierilor depășește scopul acestei postări, multe optimizări pot fi găsite în calea de redare critică. Calea critică de redare este formată din obiecte – cum ar fi CSS și JavaScript – care trebuie încărcate înainte ca conținutul să poată apărea pe ecran. Dacă acest conținut este blocat, pagina dvs. se va reda lent sau deloc. Acordați atenție acestui lucru și păstrați calea liberă de obstacole. Ilya Grigorik de la Google a scris un ghid excelent despre cum să înțelegem și să îmbunătățim calea critică de redare . Și vă rog, optimizați-vă imaginile ! Nu în ultimul rând, nu uitați să citiți pe noile Web Vitals ale Google .

Incearca-l!

Google Lighthouse nu este instrumentul de viteză al site-ului care le stăpânește pe toate, dar este un supliment foarte valoros pentru trusa dvs. de instrumente. Verificările SEO sunt de bază, dar totuși binevenite. Farul este mai fin și vă oferă feedback imediat pe baza utilizării din lumea reală. Ar trebui să-l utilizați cu siguranță împreună cu celelalte instrumente de testare a vitezei paginii, cum ar fi PageSpeed Insights, WebPageTest și GTmetrix .

 

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *