Am acoperit cele trei semnale web esentiale in articolul nostru anterior despre Google Core Web Vitals. Cu toate acestea, nu putem vorbi despre Core Web Vitals fara sa aprofundam un factor cheie: LCP, cunoscut si sub numele de Largest Contentful Paint.
In acest ghid, vom analiza ce este LCP, de ce este important, beneficiile sale si ce imbunatatiri puteti aduce pentru a va optimiza site-ul.
Continut
Ce este LCP si de ce este important?
LCP este prescurtarea pentru Largest Contentful Paint. LCP este o metrica care masoara viteza de incarcare a unei pagini; va spune cat timp dureaza pana cand continutul principal al unei pagini web se incarca (practic cand pagina devine lizibila pentru utilizator).
LCP este o parte integranta a experientei utilizatorului. Utilizatorilor nu le place sa astepte si sa astepte ca un site sa se incarce atunci cand in alta parte ar putea obtine imediat o experienta mai buna.
Daca LCP-ul site-ului dvs. este slab, este posibil sa aveti o rata de respingere mai mare, iar clasamentul general poate fi afectat. Un LCP prost poate duce la o rata de conversie mai mica – daunatoare pentru afacerile la inceput de drum.
Datorita actualizarii Core Web Vitals, LCP a devenit un factor cu adevarat semnificativ pentru clasarea siteului. Pentru a continua sa va clasati organic si sa pastrati acei vizitatori, este foarte important ca valoarea LCP sa fie buna.
LCP se aplica numai continutului principal de deasupra paginii (above the fold). Acestea includ imagini, videoclipuri sau blocuri de text care apar fara ca utilizatorul sa fie nevoit sa deruleze in jos pentru a le gasi. Tineti cont de acest lucru atunci cand vreti sa imbunatatiti orice pagini cu probleme.
Definitia LCP – cand este bun sau rau
Conform regulilor Google, continutul principal al unei pagini ar trebui sa se incarce in primele 2,5 secunde de la vizita unui utilizator pentru a avea un LCP bun.
Daca utilizatorii dvs. trebuie sa astepte cinci secunde sau mai mult pentru ca continutul principal sa se incarce (de exemplu, daca LCP-ul este slab si necesita imbunatatiri), este foarte probabil ca acesti oameni sa renunte sa va vada continutul si sa caute in alta parte.
Orientarile Google specifica ca LCP-ul dvs. trebuie sa fie evaluat „bun” cel putin 75% din timp. Daca te incadrezi in aceasta regula, performanta site-ului va creste vertiginos.
Deocamdata sa ne concentram asupra cauzelor generale ale unui LCP slab si asupra modului de abordare a acestora.
Care sunt cauzele unui LCP slab?
Lista a ceea ce ar putea cauza un LCP slab este tehnic nesfarsita.
Ar putea fi orice care ocupa mult spatiu: playere media incorporate care pot incetini o pagina, diapozitive de imagine neoptimizate, butoane pentru retelele sociale sau chiar widget-uri precum autentificare, un formular de inscriere la buletin informativ si multe altele.
Dar sa mergem putin mai precis.
Dupa cum arata graficul de mai sus, factorii care provoaca un LCP slab se impart adesea in patru grupuri principale:
Timp de raspuns lent al serverului
Avand un timp de raspuns lent al serverului, are un impact negativ asupra tuturor valorilor vitezei de incarcare si este o cauza definitiva a LCP slab.
Timpii lenti de raspuns ale serverului sunt adesea rezultatul unor probleme cu infrastructura de backend, interogari neoptimizate a bazei de date sau raspunsuri API care dureaza mult timp pentru a se rezolva, toate in fundalul site-ului dvs.
Primul pas in imbunatatirea acestei valori este sa va asigurati ca va gazduiti site-ul pe un server bun.
JavaScript si CSS care blocheaza randarea
In timp ce personalizarea site-ului este o modalitate excelenta de a-l scoate in evidenta, adaugarea JavaScript si CSS pentru a imbunatati tema si continutul site-ului va afecta, din pacate, si timpul de incarcare.
Uneori este mai bine sa ramaneti la un design mai putin „greu” si sa reduceti numarul de pluginuri de pe site.
Rendering pe partea clientului
Randarea pe partea client (redarea paginilor web direct in browser cu JavaScript) este o metoda populara de programare.
Cu toate acestea, implica multe task-uri pentru ca browserul sa colecteze si sa incarce JavaScript inainte de a afisa continutul si chestiile principale, ceea ce duce la o viteza de incarcare mai mare.
Daca va bazati pe randarea pe partea client, va trebui sa tineti cont de acest lucru atunci cand lucrati la LCP.
Timp lent de incarcare a resurselor
Activele mari sau continutul cu un impact vizual mare pe o pagina, necesita mult timp pentru a se incarca.
Daca aveti o multime de imagini de inalta calitate, GIF-uri si casete de text neoptimizate above the fold, LCP-ul dvs. va avea de suferit.
Cititi mai departe pentru a afla mai multe despre optimizarea acestor elemente pentru a va imbunatati LCP.
Cum sa remediati un LCP slab
Exista lucruri pe care le puteti remedia atunci cand va loviti de un LCP slab, dintre care unele sunt mai usor decat altele. Va vom prezenta cateva dintre cele mai usoare.
Optimizati-va CSS
Fisierele CSS sunt resurse care blocheaza randarea. Resursele trebuie sa fie incarcate si procesate inainte ca serverul sa poata afisa intreaga pagina.
Cu toate acestea, puteti optimiza fisierele CSS eliminand manual codul neutilizat, minimizand fisierele CSS in uz sau optimizand imaginile de fundal CSS cu query multimediale.
Suna complicat, dar exista o multime de resurse si tutoriale de masurare a vitezei axate pe utilizator care te pot ajuta!
Optimizati-va imaginile
Exista cativa pasi pe care ii puteti face atunci cand va optimizati imaginile. Principalele sunt urmatoarele:
- Comprimati-va imaginile
- Transformati-va imaginile in formate mai eficiente
- Folositi videoclipuri in loc de GIF-uri (incarcare dureaza mai putin)
- Asigurati-va ca imaginile dvs. au dimensiunea corecta
Si intotdeauna merita sa te gandesti: chiar am nevoie de aceasta imagine? Adauga ceva la pagina mea? Daca nu, cel mai bine ar fi sa scapi de ele.
Optimizati-va WebFonts
Fonturile se gasesc adesea in fisiere mari. Ca urmare, continutul text intr-un font neobisnuit nu va aparea pe o pagina pana cand fisierul cu fonturi nu este incarcat.
Pentru a evita acest lucru, va recomandam sa va optimizati WebFonts. Prin reducerea dimensiunii fontului, prin utilizarea unui font-display sau prin actualizarea stilului paginii pentru a utiliza fontul personalizat, incarcarea paginii ar trebui sa fie mai rapida.
Optimizati-va JavaScript
Cateva lucruri pe care le puteti face pentru a va optimiza JavaScript (avand in vedere cea mai recenta valoare LCP) includ:
- elimina codul neutilizat
- verificati daca codul dvs. este actualizat si compatibil cu browserele moderne
- instalati JavaScript modern si reduceti sarcinile utile prin impartirea codului
Cum sa masori LCP-ul site-ului
Deci, cum afli care este LCP-ul tau?
Un bun punct de plecare pentru a va verifica performanta LCP este sa utilizati instrumentele oferite de Google: Google Search Console, Google Page Insights si Lighthouse.
Veti gasi o fila pentru Essential Web Signals in bara de navigare din stanga din Google Search Console. Intrand in aceasta fila, vi se va afisa o prezentare generala a adreselor URL. De acolo, este destul de usor sa vezi unde ar putea fi probleme s ce modificari ai putea face pentru a le remedia.
Daca nu aveti un Search Console configurat pentru nu va faceti griji, deoarece puteti accesa aceste informatii prin instrumentele Lighthouse si PageSpeed Insights.
Iata prezentarea generala a Page Insights pentru site-ul desktop jurnaldedigitalmarketing.
Dupa cum puteti vedea, valoarea LCP este bunicela, dar exista intotdeauna loc de imbunatatire. Explorati toate recomandarile si profitati de toate sansele pentru a obtine clasamente si mai bune.
Este o idee buna sa veniti cu aceste recomandari la timp pentru a trece prin actualizarea Core Web Vitals de la Google. Verificati-va site-ul in mod frecvent pentru a asigura imbunatatirea constanta a LCP si a altor valori ale site-ului si a starii SEO generale.
