Cum să optimizați cea mai mare vopsea plină de conținut și o poziție mai înaltă în Google

Cum să măsurați cea mai mare vopsea de conținut de pe site-ul dvs

Rulați un test gratuit de viteză a site-ului web pentru a afla. Viteza dumneavoastră LCP va fi afișată imediat.

Rezultatele testului de viteză vă vor spune dacă:

• Pragul LCP este atins.
• Trebuie să optimizați orice alt Core Web Vital.

Cum se calculează cea mai mare vopsea plină de conținut?

Google se uită la cea de-a 75-a percentila de experiențe – asta înseamnă că 25% dintre vizitatorii site-ului real experimentează timpi de încărcare LCP de 3,09 secunde sau mai mult, în timp ce pentru 75% dintre utilizatori, LCP este sub 3,09 secunde.

În acest exemplu, LCP-ul utilizatorului real este afișat ca 3,09 secunde.

Care sunt rezultatele testelor de laborator pe datele mele de bază Web Vitals?

Cu acest test specific de viteză web, veți vedea și valorile de laborator care au fost colectate într-un mediu de testare controlat. Deși aceste valori nu influențează direct clasamentele Google, există două avantaje ale acestor date:

1. Valorile se actualizează de îndată ce vă îmbunătățiți site-ul, în timp ce datele Google în timp real vor dura 28 de zile pentru a se actualiza complet.
2. Obțineți rapoarte detaliate pe lângă valori, care vă pot ajuta să vă optimizați site-ul.

În plus, PageSpeed ​​Insights furnizează și date de laborator, dar rețineți că datele pe care le raportează pot fi uneori înșelătoare din cauza accelerației simulate pe care o folosește pentru a emula o conexiune de rețea mai lentă.

Cum găsești cel mai mare element de vopsea plin de conținut?

Când rulați un test de viteză a paginii cu DebugBear, elementul LCP este evidențiat în rezultatul testului.

Uneori, elementul LCP poate fi o imagine mare, iar alteori, poate fi o porțiune mare de text.

Indiferent dacă elementul LCP este o imagine sau o bucată de text, conținutul LCP nu va apărea până când pagina dvs. nu începe redarea.

De exemplu, în pagina de mai jos, o imagine de fundal este responsabilă pentru cea mai mare vopsea.

În schimb, LCP-ul acestei pagini este un paragraf de text.

Pentru a îmbunătăți cea mai mare vopsea de conținut (LCP) a site-ului dvs., trebuie să vă asigurați că elementul HTML responsabil pentru LCP apare rapid.

Cum să îmbunătățiți cea mai mare vopsea plină de conținut

Pentru a îmbunătăți LCP, trebuie să:

1. Aflați ce resurse sunt necesare pentru a face să apară elementul LCP.
2. Vedeți cum puteți încărca acele resurse mai rapid (sau deloc).

De exemplu, dacă elementul LCP este o fotografie, puteți reduce dimensiunea fișierului imaginii.

După rularea unui test de viteză DebugBear, puteți face clic pe fiecare valoare de performanță pentru a vedea mai multe informații despre cum ar putea fi optimizată.

Resursele comune care afectează LCP sunt:

• Resurse care blochează randarea.
• Imagini care nu sunt optimizate.
• Formate de imagine învechite.
• Fonturi care nu sunt optimizate.

Cum să reduceți resursele care blochează randarea

Resursele de blocare a randării sunt fișiere care trebuie descărcate înainte ca browserul să poată începe să deseneze conținutul paginii pe ecran. Foile de stil CSS blochează de obicei randarea, la fel ca multe etichete de script.

Pentru a reduce impactul asupra performanței resurselor care blochează redarea, puteți:

1. Identificați ce resurse blochează randarea.
2. Verificați dacă resursa este necesară.
3. Verificați dacă resursa trebuie să blocheze randarea.
4. Vedeți dacă resursa poate fi încărcată mai rapid, de exemplu folosind compresia.

Calea ușoară: în cascada cererii DebugBear, cererile de resurse de blocare a randării sunt marcate cu o etichetă „Blocare”.

Cum să prioritizați și să accelerați solicitările de imagini LCP

Pentru această secțiune, vom folosi noul atribut „fetchpriority” pentru imagini pentru a ajuta browserele vizitatorilor să identifice rapid ce imagine ar trebui să se încarce mai întâi.

Utilizați acest atribut pe elementul LCP.

De ce?

Când se uită doar la HTML, browserele nu pot spune imediat ce imagini sunt importante. O imagine poate ajunge să fie o imagine mare de fundal, în timp ce alta ar putea fi o mică parte a subsolului site-ului.

În consecință, toate imaginile sunt inițial considerate cu prioritate scăzută, până când pagina a fost redată și browserul știe unde apare imaginea.

Cu toate acestea, asta poate însemna că browserul începe să descarce imaginea LCP doar destul de târziu.

Noul standard web Priority Hints permite proprietarilor de site-uri web să ofere mai multe informații pentru a ajuta browserele să prioritizeze imaginile și alte resurse.

În exemplul de mai jos, putem observa că browserul petrece mult timp așteptând, așa cum este indicat de bara gri.

Am alege această imagine LCP pentru a adăuga atributul „fetchpriority”.

Cum să adăugați atributul „FetchPriority” la imagini

Adăugând pur și simplu atributul fetchpriority="high" la o etichetă HTML img, browserul va acorda prioritate descărcarii acelei imagini cât mai repede posibil.

<img src="photo.jpg" fetchpriority="high" />

Cum să utilizați în mod corespunzător formatele moderne de imagine și dimensiunile imaginilor

Imaginile de înaltă rezoluție pot avea adesea o dimensiune mare a fișierului, ceea ce înseamnă că este nevoie de mult timp pentru descărcare.

În rezultatul testului de viteză de mai jos, puteți vedea asta uitându-vă la zonele umbrite în albastru închis. Fiecare linie indică o bucată din imagine care ajunge în browser.

Există două abordări pentru reducerea dimensiunilor imaginii:

1. Asigurați-vă că rezoluția imaginii este cât mai mică posibil. Luați în considerare difuzarea imaginilor la rezoluții diferite, în funcție de dimensiunea dispozitivului utilizatorului.
2. Utilizați un format de imagine modern precum WebP, care poate stoca imagini de aceeași calitate la o dimensiune mai mică a fișierului.

Cum să optimizați timpii de încărcare a fonturilor

Dacă elementul LCP este un titlu sau un paragraf HTML, atunci este important să încărcați rapid fontul pentru această bucată de text.

O modalitate de a realiza acest lucru ar fi să folosiți etichete de preîncărcare care pot spune browserului să încarce fonturile devreme.

Regula de afișare a fonturilor: schimbarea CSS poate asigura, de asemenea, randarea accelerată, deoarece browserul va reda imediat textul cu un font implicit înainte de a trece la fontul web mai târziu.

Monitorizați-vă site-ul web pentru a menține LCP-ul rapid

Monitorizarea continuă a site-ului dvs. web nu numai că vă permite să verificați dacă optimizările LCP funcționează, dar vă asigură și că sunteți avertizat dacă LCP se înrăutățește.

DebugBear poate monitoriza Core Web Vitals și alte valori ale vitezei site-ului în timp. Pe lângă efectuarea de teste aprofundate în laborator, produsul ține, de asemenea, evidența valorilor utilizatorilor reali de la Google.

Încercați DebugBear cu o probă gratuită de 14 zile.