De ce scriu asta

Am câteva site-uri web acum și de când am început performanța mea a fost foarte sus și în jos. Mi s-a părut de-a dreptul enervant uneori. Totul pare să funcționeze atât de bine pentru mine la nivel local, dar apoi îmi verific analiza serverului și pot vedea că pentru anumite țări viteza mea a fost groaznică.

Intotdeauna a parut sa fie fieCLSsauLCPasta a fost problema pentru mine. Așa că m-am gândit să împărtășesc experiența mea și să încerc să-i ajut pe alții să-și dea seama, mai ales dacă treci prin același lucru. Sau poate ați avut probleme cu asta și aveți o perspectivă sau o soluție unică? Mi-ar plăcea să aud despre asta.

ConformJurnalul motorului de căutare, optimizarea acestor două valori poate îmbunătăți semnificativ vizibilitatea site-ului dvs. și satisfacția utilizatorilor. A sunat grozav în teorie, dar, de fapt, repararea lor a fost o poveste diferită. Lasă-mă să te ghidez prin ceea ce am învățat.

Ce sunt CLS și LCP, exact?

Înainte de a intra în propriile mele lupte, permiteți-mi să explic care sunt acestea de fapt, pentru că atunci când am văzut pentru prima dată aceste acronime în Google Search Console, nu aveam idee ce înseamnă.

Schimbare cumulativă a aspectului (CLS)măsoară cât de mult trece aspectul paginii în timp ce se încarcă. Știți când sunteți pe cale să atingeți un buton și întreaga pagină se schimbă, așa că faceți clic pe lucrul greșit? Aceasta este o problemă CLS. Este incredibil de frustrant ca utilizator și se dovedește că motoarele de căutare te penalizează și pentru asta.

Cea mai mare vopsea plină de conținut (LCP)măsoară cât timp durează până se încarcă cel mai mare element vizibil de pe pagina ta. De obicei, aceasta este o imagine erou sau un bloc mare de text. Dacă LCP-ul tău este lent, vizitatorii tăi se uită la o pagină pe jumătate încărcată și mulți vor pleca.

Ambele se încadrează în GoogleCore Web Vitals, care afectează direct clasamentele dvs. de căutare. Deci, chiar dacă conținutul tău este genial, scorurile slabe CLS și LCP te pot reține.

Optimizați-vă site-ul web pentru CLS și LCP

🖼️

Setați dimensiunile imaginii
Specificați lățimea și înălțimea pentru imagini

📢

Utilizați reclamele în mod responsabil
Evitați redimensionarea neașteptată a anunțurilor

⚡

Preîncărcați resurse importante
Asigurați-vă că conținutul critic se încarcă rapid

🔄

Minimizați conținutul dinamic
Limitați conținutul care se modifică în timpul încărcării

📊

Monitorizați performanța în mod regulat
Utilizați instrumente pentru a urmări scorurile CLS și LCP

Coșmarul meu CLS

CLS a fost prima problemă pe care am întâlnit-o. Paginile mele mi s-au părut bine, dar scorurile mele au fost groaznice. După multe săpături, i-am găsit pe principalii vinovați:

Imagini fara dimensiuni:Nu am setat lățimea și înălțimea imaginilor mele. Browserul nu avea idee cât spațiu să rezerve, așa că totul s-a schimbat odată ce imaginile s-au încărcat.
Fonturile se încarcă cu întârziere:Fonturile mele personalizate s-au încărcat după redarea paginii, ceea ce a făcut ca tot textul meu să sară pe măsură ce noul font înlocuia alternativa. Acesta a fost subtil, dar a adăugat.
Conținut dinamic:Am avut câteva componente care au injectat conținut după ce pagina s-a încărcat, împingând totul sub ele în jos.

Remedierea pentru majoritatea problemelor mele CLS a fost surprinzător de simplă. Am început să definesc dimensiuni explicite pentru toate imaginile și mediile. Am adăugat schimbul de font-afișare la încărcarea fontului, astfel încât back-ul să fie randat imediat. Și am rezervat spațiu cu CSS pentru orice conținut care se încarcă dinamic.

Instrumente caGoogle PageSpeed Insightsau fost de mare ajutor aici. Ele vă arată exact ce elemente cauzează schimbări de aspect, așa că nu ghiciți.

Apoi a venit problema LCP

Tocmai când credeam că am rezolvat lucrurilescoruri LCPa început să treacă. Partea frustrantă a fost că site-ul meu s-a încărcat rapid pentru mine în Marea Britanie, dar analizele mele au arătat viteze groaznice în alte țări. Acesta este lucrul cu LCP - depinde foarte mult de locul în care sunt utilizatorii și de cât de departe sunt de server.

Principalele probleme pe care le-am găsit au fost:

Imagini mari neoptimizate:Imaginile cu eroul meu erau mult prea mari. Încărcam fotografii la rezoluție completă fără a le comprima.
Timp de răspuns al serverului:Fără un CDN, utilizatorii departe de serverul meu așteptau de mulți ani primul răspuns.
JavaScript de blocare a redării:Aveam scripturi încărcate în cap care blocau redarea paginii până la terminare.

CaStudiul lui Backlinkoarată, site-urile cu scoruri LCP bune au o implicare semnificativ mai bună și rate de respingere mai mici. Odată ce am început să remediez aceste probleme, am putut vedea diferența în propriile mele analize.

Ce mi-a ajutat de fapt LCP

Am început să-mi comprim toate imaginile și să folosesc formatul WebP acolo unde este posibil. De asemenea, am mutat scripturi neesențiale pentru a se încărca asincron sau le-am amânat complet. Site-urile mele sunt găzduite pe Vercel, care se ocupă de o mulțime de chestii de rețea edge pentru mine, dar dacă sunteți pe găzduire tradițională, configurați oCDNpoate face o mare diferență pentru traficul internațional.

Un CDN stochează copii ale site-ului dvs. în locații din întreaga lume, astfel încât vizitatorii sunt serviți dintr-un loc mai aproape de ei, mai degrabă decât serverul dvs. de origine. Dacă observați viteze proaste în anumite regiuni, acesta este unul dintre primele lucruri care merită analizate.

Partea enervantă - Nu este niciodată cu adevărat „remediată”

Iată despre ce nu îți spune nimeniCLS și LCP. Nu le remediați o dată și treceți mai departe. De fiecare dată când adaug o funcție nouă, o imagine nouă sau îmi schimb aspectul, scorurile se pot schimba din nou. Este un lucru în curs de desfășurare.

Am avut săptămâni în care totul este verde în Google Search Console, apoi adaug o componentă nouă și dintr-o dată CLS-ul meu este semnalizat din nou. Este de-a dreptul enervant, dar am învățat să-mi verific Core Web Vitals după fiecare schimbare semnificativă acum.

Impactul CLS și LCP asupra experienței utilizatorului

0,1 secunde

Toleranța utilizatorului

32%

Creșterea ratei de respingere

Scăderea ratei de conversie

Core Web Vitals

Importanța clasamentului SEO

Un raport deBrandul financiarevidențiază modul în care site-urile web lente pot duce direct la pierderi de venituri. Aceasta este o motivație suficientă pentru a rămâne în vârf, chiar și atunci când se simte plictisitor.

Instrumentele care m-au ajutat cel mai mult

Dacă aveți de-a face cu aceleași probleme, iată instrumentele pe care le folosesc și pe care le consider utile:

Google Search Console:Aici am observat prima dată problemele mele. Vă arată scorurile Core Web Vitals defalcate pe pagină și vă spune exact ce necesită atenție.
Statistici PageSpeed:Parcurg fiecare pagină prin aceasta după ce am făcut modificări. Oferă mai degrabă recomandări specifice, aplicabile, decât sfaturi vagi.Ghidul de performanță web al Shopifyeste, de asemenea, o mare resursă însoțitoare.
Extensia Web Vitals:Această extensie Chrome vă arată CLS, LCP și alte valori în timp real pe măsură ce vă navigați pe propriul site. Îl mențin constant în timpul dezvoltării.

Odată ce ați identificat problemele de performanță, utilizațiInstrument de clasare AI Căutare Googlepentru a verifica dacă îmbunătățirile dvs. se traduc într-adevăr într-o vizibilitate mai bună a căutării. Nu are rost să stabilești scoruri dacă nu îți ajută clasamentul.

Sfatul meu dacă treci prin asta

Dacă performanța ta a fost la fel de sus și de jos ca a mea, iată ce aș sugera:

Nu vă panicați.Problemele CLS și LCP sunt incredibil de frecvente. Nu faceți totul greșit - aceste valori sunt doar sensibile.
Verifică-ți analizele în funcție de țară.Site-ul dvs. poate fi rapid pentru dvs., dar lent pentru vizitatorii din altă parte. Un CDN poate rezolva acest lucru rapid.
Remediați mai întâi imaginile.Din experiența mea, imaginile neoptimizate și dimensiunile lipsă sunt cauza majorității problemelor CLS și LCP.
Testați după fiecare schimbare.Obișnuiește-te să rulezi PageSpeed Insights ori de câte ori faci actualizări semnificative.
Fii răbdător.Actualizarea datelor din Google Search Console poate dura zile sau săptămâni. Nu presupuneți că remedierea dvs. nu funcționează doar pentru că tabloul de bord nu s-a schimbat încă.

Încă învăț și încă mă confrunt cu asta. Scorurile mele sunt mai bune decât erau, dar nu le-aș numi perfecte. Dacă ați găsit soluții care au funcționat pentru dvs., vreau cu adevărat să aud despre ele. De asemenea, puteți încerca să vizualizați datele dvs. de performanță cu ajutorul nostruCreator de diagrame online gratuitpentru a urmări îmbunătățirile în timp.

Concluzia este aceasta:CLS și LCPnu pleacă. Ele contează pentru SEO, contează pentru experiența utilizatorului și, dacă rulezi site-uri web ca mine, te vor ține cu atenție. Dar se pot repara și fiecare îmbunătățire pe care o faci merită.