Core Web Vitals 101 și ghid de dezvoltare

Ce se întâmplă și se schimbă?

În mai 2021, Google a inițiat lansarea unei actualizări de bază a algoritmului care adaugă un factor suplimentar în semnalele pentru clasarea paginii, deoarece se referă la viteza paginii și experiența utilizatorului. Lansarea actualizării de bază s-a extins până în iunie 2021, făcând și aceasta una dintre cele mai mari schimbări de bază din istorie. Core Web Vitals se va alătura semnalelor de clasare mai vechi, cum ar fi un site securizat prin HTTPS, compatibilitatea cu dispozitivele mobile și interstițiale non-intruzive ca semnale de căutare în factorul de clasare general al experienței paginii.

Cele trei componente ale Core Web Vitals includ următoarele:

• Cea mai mare vopsea de conținut (LCP) : măsoară viteza de încărcare percepută și marchează punctul din cronologia de încărcare a paginii în care probabil că s-a încărcat conținutul principal al paginii. Pentru a oferi o experiență bună pentru utilizator, site-urile ar trebui să depună eforturi pentru ca LCP să apară în primele 2,5 secunde de la începerea încărcării paginii.
• First Input Delay (FID) : măsoară capacitatea de răspuns și cuantifică experiența pe care o simt utilizatorii atunci când încearcă să interacționeze pentru prima dată cu pagina. Pentru a oferi o experiență bună pentru utilizator, site-urile ar trebui să depună eforturi pentru a avea un FID mai mic de 100 de milisecunde .
• Cumulative Layout Shift (CLS) : măsoară stabilitatea vizuală și cuantifică cantitatea de schimbare neașteptată a aspectului conținutului paginii vizibile. Pentru a oferi o experiență bună pentru utilizator, site-urile ar trebui să depună eforturi pentru a avea un scor CLS mai mic de 0,1 .

Declarația oficială de lansare a Google cu privire la această actualizare a algoritmului: https://developers.google.com/search/blog/2020/11/timing-for-page-experience

În plus, Google a lansat mai multe informații despre modificarea CLS, deoarece a continuat să monitorizeze performanța în timpul lansării. Drept urmare, multe site-uri au primit un scor mai favorabil datorită modificărilor recente și au evitat multă muncă de dezvoltare pentru a-și ajusta aspectul site-ului. Ca întotdeauna, aceste modificări pot fi modificate, așa că recomandăm monitorizarea CWV-urilor ca parte a unei liste de verificare săptămânale sau lunare.

Ce știm despre actualizarea clasamentului?

Ca și în cazul majorității actualizărilor de algoritm Google, există multe necunoscute în ceea ce privește modul în care va afecta peisajul actual de căutare. Știm că acesta va fi un factor în clasarea paginilor. Cu toate acestea, nu știm ce procent dintr-un factor sau cât de impact va fi în cadrul algoritmului. Un alt factor necunoscut va fi dacă concurenții direcți se adaptează sau iau măsuri pentru a-și actualiza site-urile pentru a adera la noii factori. Pe baza comportamentului concurenților, acest lucru ar putea avea, la rândul său, un impact pozitiv sau negativ asupra clasamentului site-ului dvs., în comparație cu acei colegi. Ceea ce știm este că Google va continua să acorde prioritate clasificării conținutului pe care îl consideră valoros sau relevant pentru utilizatori față de site-urile web mai rapide cu conținut slab.

De fapt, deoarece Google oferă mai multe informații despre actualizare, au confirmat că conținutul relevant rămâne unul dintre cele mai importante elemente în clasamentele de căutare.

„Sistemele noastre vor continua să prioritizeze paginile cu cele mai bune informații în general, chiar dacă unele aspecte ale experienței paginii sunt necorespunzătoare. O experiență bună a paginii nu anulează conținutul grozav și relevant.”

Cum să vă pregătiți pentru actualizarea clasamentului experienței paginii Google?

Din cauza factorilor necunoscuți legați de această actualizare și a ferestrei de notificare de 6 luni a Google, schimbarea pare să semnaleze că acesta va deveni un factor de clasare. Prin urmare, se recomandă insistent ca atât echipele de SEO, cât și echipele de dezvoltare să examineze performanța actuală a site-urilor dvs. Core Web Vitals și să ia măsuri rapid în revizuirea și actualizarea problemelor legate de actualizarea semnalului de clasare. Este important să vă asigurați că sunteți proactiv și nu reactiv, deoarece orice scădere a clasamentului poate dura destul de mult timp pentru a vă recupera. Știm cu toții că SEO este un joc lung!

Cum să identifici problemele site-ului, pașii următori pe baza problemelor și sfaturi suplimentare?

Principalele elemente vitale web sunt prezentate în contul Google Search Console al site-ului dvs., sub „Îmbunătățiri”. În plus, există o privire generală în secțiunea „Prezentare generală” a contului, care va arăta similar cu exemplul de mai jos (se vor produce probabil unele variații, deoarece contul dvs. depinde de potențialele probleme specifice site-ului dvs.). Există, de asemenea, o secțiune conturată atât pentru desktop, cât și pentru mobil. În acest exemplu, ne uităm la problemele legate de dispozitivele mobile.

Datorită faptului că toate site-urile au fost indexate mai întâi pe dispozitive mobile din septembrie 2020 , recomandăm ca timpul de dezvoltare să fie cheltuit mai întâi pentru problemele mobile. Acestea fiind spuse, dacă site-ul dvs. este receptiv, este probabil că actualizările pe care le faceți pe mobil vor avea, de asemenea, un impact pozitiv pe desktop. În plus, în funcție de dimensiunea site-ului, poate exista o serie de probleme „sărace” și „trebuie îmbunătățite”. Vă recomandăm insistent să vă concentrați pe adresele URL „slabe”, deoarece elementele „trebuie îmbunătățite” ar putea să nu merite efortul față de impact sau regula 80/20, despre care vom aborda mai târziu!

Când examinați adresele URL subliniate în Google Search Console care arată performanțe mai puțin decât optime, este important să țineți cont de ceea ce a dezvăluit John Mueller de la Google despre modul în care Google poate calcula, în unele cazuri, scorul de bază al elementelor vitale web ca medie a mai multor pagini:

Aceasta este întrebarea:

„Când acesta devine un semnal de clasare... va fi la nivel de pagină sau la nivel de domeniu?”

Mueller a răspuns:

„...Ce se întâmplă cu datele de câmp este că nu avem puncte de date pentru fiecare pagină.

Deci noi, în cea mai mare parte, trebuie să avem un fel de grupări de pagini individuale.

Și în funcție de cantitatea de date pe care o avem, aceasta poate fi o grupare a întregului site web (tip de domeniu).

…Cred că în Raportul despre experiența utilizatorului Chrome folosesc originea care ar fi subdomeniul și protocolul de acolo.

Deci, acesta ar fi un fel de grupare generală.

Și dacă avem mai multe date pentru părți individuale ale unui site web, atunci vom încerca să le folosim.

Și cred că este ceva ce vedeți și în consola de căutare, unde vom afișa ca o singură adresă URL și vom spune... există atât de multe alte pagini care sunt asociate cu asta. Și acesta este un fel de grupare pe care am folosi-o acolo.”

S-ar putea să vă întrebați, de ce aducem acest lucru în discuție la începutul conversației despre Core Web Vitals? Mueller explică că raportul Google Search Console care evidențiază problemele URL încearcă să clasifice și să raporteze paginile cu aceleași probleme într-o grupare. Din păcate, în practică, aceste grupări de adrese URL au fost mai puțin utile pentru unele site-uri web din experiența noastră.

Ocazional, vom examina adresele URL indicate ca având performanță „slabă” în raportul Google Search Console, doar pentru a descoperi că aceleași pagini par să aibă o stare de sănătate curată atunci când sunt testate cu Lighthouse și Page Speed ​​Insights.

În rezumat, atunci când examinați problemele privind adresele URL prezentate în raportul Google Search Console, vă recomandăm „să o luați cu un grăunte de sare”. Cea mai bună presupunere a noastră este că Google intenționează să clasifice scorul „web vitals” pentru pagini pe baza unui istoric de 28 de zile al datelor reale de navigare din lumea reală („datele de câmp” în limba Google). Cu toate acestea, este probabil ca datele din lumea reală să fie agregate din întregul domeniu (sau „origina” în limba Google) dacă pagina nu este foarte traficată. În timp ce Search Console va fi utilă pentru a identifica faptul că elementele vitale web au nevoie de un anumit TLC, nu vă bazați pe ea pentru auditul dvs. De asemenea, aveți grijă să examinați datele de laborator (rezultatele individuale ale paginilor testate în timp real) spre deosebire de datele de teren (care pot fi pentru mai multe pagini și sunt întotdeauna peste o fereastră de retrospectivă de 28 de zile) atunci când efectuați și auditați sau validați remedieri.

Odată ce știți că aveți o problemă, dacă nu puteți determina paginile sursă, începeți cu pagini de exemplu de testare în laborator pentru fiecare dintre șabloanele dvs. de bază. De exemplu, pagina de pornire, o pagină de produs, o pagină de categorie, un articol de blog etc. Adesea, problemele structurale pot fi găsite în fiecare instanță a unui anumit tip de pagină și rezolvate o dată de un dezvoltator web printr-o actualizare a șablonului de bază. cod. Dacă acest lucru nu funcționează, luați în considerare o analiză similară a unui subset de pagini individuale, începând cu cele care sunt cel mai intens vizitate. Un instrument pe care l-am găsit util în acest proces este auditarea Core Web Vitals prin Screaming Frog .

Îndrumări de îmbunătățire cumulative pentru schimbarea aspectului (CLS).

Cumulative Layout Shift (CLS) măsoară suma totală a tuturor scorurilor individuale de schimbare a aspectului pentru fiecare schimbare neașteptată a aspectului care are loc pe toată durata de viață a paginii. O schimbare de aspect are loc de fiecare dată când un element vizibil își schimbă poziția de la un cadru redat la altul.

Google recomandă următoarele îndrumări despre cum să îmbunătățiți CLS pentru majoritatea site-urilor web, respectând câteva principii directoare:

• Includeți întotdeauna atribute de dimensiune pe imagini și elemente video sau rezervați în alt mod spațiul necesar cu ceva de genul casetelor cu raportul de aspect CSS . Această abordare asigură că browserul poate aloca spațiul corect în document în timp ce imaginea se încarcă. Rețineți că puteți utiliza și politica de caracteristici media nedimensionate pentru a forța acest comportament în browserele care acceptă politici de caracteristici.
• Nu introduceți niciodată conținut deasupra conținutului existent, decât ca răspuns la o interacțiune a utilizatorului. Acest lucru asigură că orice schimbări de aspect care apar sunt așteptate.
• Preferați animațiile de transformare în animații ale proprietăților care declanșează modificări de aspect. Animați tranzițiile într-un mod care oferă context și continuitate de la stat la stat.

Google recomandă să utilizați următorul curs de acțiune pentru a analiza, testa și implementa actualizări pe site:

• Odată ce ați identificat paginile care au nevoie de lucru (subliniat mai sus), utilizați PageSpeed ​​Insights pentru a diagnostica problemele de laborator și de teren dintr-o pagină.
• Sunteți gata să vă optimizați site-ul local în laborator? Folosiți Lighthouse și Chrome DevTools pentru a măsura Core Web Vitals și pentru a obține îndrumări practice despre exact ce trebuie remediat. Extensia Web Vitals Chrome vă poate oferi o vizualizare în timp real a valorilor de pe desktop.
• Cauți îndrumări? web.dev/measure vă poate măsura pagina și vă poate arăta un set prioritizat de ghiduri și laboratoare de cod pentru optimizare, folosind datele PSI.
• În cele din urmă, utilizați Lighthouse CI la cererile de extragere pentru a vă asigura că nu există regresii în Core Web Vitals înainte de a implementa o modificare în producție.

Pentru a afla cum să îmbunătățiți CLS, consultați Optimizarea CLS .

Cea mai mare îndrumare pentru îmbunătățirea vopselei cu conținut maxim (LCP).

Valoarea cea mai mare vopsea de conținut (LCP) raportează timpul de randare al celui mai mare bloc de imagine sau text vizibil în fereastra de vizualizare.

După cum este specificat în prezent în API-ul Largest Contentful Paint , tipurile de elemente luate în considerare pentru Largest Contentful Paint sunt:

• elemente <img>
• elemente <image> în interiorul unui element <svg>
• elemente <video> (este folosită imaginea afișului)
• Un element cu o imagine de fundal încărcată prin intermediul funcției url() (spre deosebire de un gradient CSS )
• Elemente la nivel de bloc care conțin noduri de text sau alte elemente de text la nivel de linie copii

Google recomandă următoarele îndrumări cu privire la modul de îmbunătățire a LCP, care este afectată în principal de patru factori:

• Timpi de răspuns lent al serverului
• JavaScript și CSS care blochează randarea
• Timpii de încărcare a resurselor
• Redare pe partea clientului

Pentru a afla cum să îmbunătățiți LCP, consultați Optimizarea LCP . Pentru îndrumări suplimentare despre tehnicile de performanță individuale care pot îmbunătăți, de asemenea, LCP, consultați:

• Aplicați încărcarea instantanee cu modelul PRPL
• Optimizarea căii critice de redare
• Optimizați-vă CSS
• Optimizați-vă imaginile
• Optimizați fonturile web

Optimizați-vă JavaScript (pentru site-urile oferite de client)

Principalele constatări vitale ale dezvoltării web până în prezent

Echipa noastră de dezvoltare a văzut că o mare parte din actualizarea clasamentului Core Web Vitals va necesita testare extinsă din partea dezvoltării pentru a se asigura că actualizările efectuate îndeplinesc standardele stabilite de Google.

În numeroase cazuri, pentru site-uri mai mici, multe dintre aceste elemente vor fi dincolo de controlul dezvoltatorilor web. De exemplu, viteza serverului este controlată în mare măsură de furnizorul de găzduire, iar pentru găzduirea partajată (cum ar fi WP Engine sau Shopify), dezvoltatorii nu vor avea controlul. În mod asemănător, temele de site-uri de pe site vor avea adesea Javascript și CSS care blochează randarea. În aceste cazuri, este posibil să nu fie practic să abordăm multe dintre problemele raportate. Din aceste motive, este necesară o analiză critică pentru a determina intersecția dintre (1) care probleme au cel mai mare impact și (2) care probleme sunt cauzate de codul pe care echipa de dezvoltare îl poate și ar trebui să îl schimbe.

După ce am început procesul de revizuire a problemelor Core Web Vitals la câțiva dintre clienții noștri, am constatat că o mare parte din instrumentele aferente oferite de Google rămân imature, în măsura în care sunt capabile să identifice probleme (cum ar fi schimbările de încărcare a conținutului), dar nu este întotdeauna util în identificarea cauzei specifice. Deși ne așteptăm ca acest lucru să se maturizeze în viitoarele iterații ale acestui instrument (în special, în Chrome Dev Tools), am constatat că pot fi necesare procese de diagnosticare alternative pentru a identifica anumite probleme.

De asemenea, am constatat că munca pentru îmbunătățirea acestor valori este similară prin natură cu îmbunătățirea performanței vitezei paginii în ansamblu. În fiecare caz, vă sfătuim să nu urmăriți un „scor perfect”. În schimb, se aplică regula 80/20. Dacă abordați fructele care se agăță jos, probabil veți observa o îmbunătățire semnificativă a valorilor dvs. După aceea, îmbunătățirea devine mai consumatoare de timp, mai costisitoare și mai puțin de impact.

Îndrumările de bază, cum ar fi sugestia Google de a include markup pentru păstrarea spațiului sau CSS pe toate elementele de imagine, videoclipuri și containere sunt, în general, un sfat bun, care este ușor de implementat. Alte probleme sunt mai dificil de urmărit și, cu excepția cazului în care au un impact excesiv asupra valorilor dvs. (așa cum sunt raportate de unele dintre instrumentele sugerate), poate fi cel mai bine să le lăsați deoparte.

Arhitectura site-ului va juca, de asemenea, un rol semnificativ în relativa ușurință cu care aceste elemente pot fi abordate. Platformele populare de site, cum ar fi Shopify și WordPress, împreună cu creatorii de pagini grafice precum WP Bakery și Shogun, gestionează o parte a procesului de generare HTML „în culise”. Problemele ascunse de componentele generatorului de pagini (de exemplu, anumite încărcări lene de imagini) pot să nu fie ușor de rezolvat fără modificări fundamentale ale site-ului sau suportului platformei, temei sau furnizorului de plugin/aplicație.

Conceptul de mai sus se extinde la terțe părți care folosesc javascript pentru a încărca lene widget-uri în pagina dvs. (de exemplu, formulare de înscriere încorporate de pe platforme de e-mail, cum ar fi Klaviyo). În unele cazuri, plasarea unui element container dimensionat corect și explicit în jurul codului de încorporare al componentei infracționale este o soluție viabilă. În alte cazuri, vânzătorul însuși poate avea nevoie să facă o schimbare.

Vă recomandăm să începeți orice proces de remediere cu probleme de impact care pot fi rezolvate prin modificări ale șabloanelor de site de bază ușor accesibile (de exemplu, pagini de produse, pagini de colecție de produse etc.). Acest lucru va permite adesea o schimbare de cod pentru a îmbunătăți rezultatele pe zeci sau sute de pagini de site. Apoi, adresați-vă paginii de pornire, deoarece este aproape întotdeauna pagina cea mai frecvent vizitată de pe site. În cele din urmă, acordați prioritate altor pagini individuale care necesită remediere, în funcție de gravitatea problemei și de vizibilitatea paginii.

La fel ca și în cazul îmbunătățirilor vitezei paginii, gestionarea Core Web Vitals este importantă, dar este doar o variabilă dintre multe din algoritmul de clasare al Google, iar SEO trebuie să fie echilibrat și cu alte priorități de site și afaceri care concurează pentru timp și buget.