Cea mai mare vopsea plină de conținut explicată: Cum să vă îmbunătățiți timpul

Te lupți cu cum să îmbunătățești cea mai mare vopsea de conținut pe site-ul tău? Sau nu sunteți sigur ce înseamnă cea mai mare vopsea plină de conținut și de ce trebuie să vă pese de ea în primul rând?

Indiferent de unde începeți, această postare este pentru dvs., deoarece veți afla tot ce trebuie să știți despre Largest Contentful Paint.

Aceasta include ce înseamnă cea mai mare vopsea de conținut, de ce contează, cum să o măsori și cum să o îmbunătățești.

Puteți folosi cuprinsul de mai jos pentru a trece la o anumită secțiune bazată pe nivelul actual de cunoștințe. Sau continuă să citești pentru a începe de la început.

Ce este cea mai mare vopsea cu conținut maxim (LCP)? Explicarea celui mai mare sens al vopselei pline de conținut

Cea mai mare vopsea de conținut este o valoare de performanță care măsoară cât timp durează conținutul principal al unei pagini web pentru a se încărca.

Cel mai mare conținut de vopsea face parte din valorile Google Core Web Vitals, împreună cu Cumulative Layout Shift (CLS) și First Input Delay (FID).

La un nivel mai tehnic, Largest Contentful Paint măsoară cât timp durează de la utilizatorul care inițiază încărcarea paginii până când cel mai mare bloc de text, imagine sau videoclip este redat în fereastra de vizualizare.

Ce înseamnă „conținut principal” în ceea ce privește LCP?

Ei bine, conținutul principal va depinde de pagina reală în cauză, dar ar putea fi oricare dintre următoarele:

• Text – mai precis, orice elemente la nivel de bloc care conțin noduri de text sau alte elemente de text la nivel de linie.
• Imagine – elemente din interiorul unui element <img> sau elemente <image> din interiorul unui element <svg>.
• Video – orice elemente <video> (folosește imaginea afișului).
• Un element cu o imagine de fundal – numai atunci când este încărcat prin intermediul funcției CSS url() (nu se aplică gradienților CSS).

Mai târziu, în această postare, veți învăța cum să găsiți exact cel mai mare element de vopsea de conținut pentru orice pagină de pe site-ul dvs.

Cea mai mare vopsea plină de conținut vs prima vopsea plină de conținut

O întrebare obișnuită pe care o puteți avea este care este diferența dintre cea mai mare vopsea de conținut și prima vopsea de conținut, o altă măsură comună de performanță.

În timp ce cei doi termeni sunt similari, diferența cheie este că Largest Contentful Paint măsoară cât timp durează până când „conținutul principal” al paginii se încarcă, în timp ce First Contentful Paint măsoară cât timp durează „primul obiect” pentru a se încărca ( indiferent dacă sau nu) . este conținutul principal ).

Pe scurt:

• LCP = numai conținutul principal
• FCP = prima bucată de conținut, indiferent de conținutul respectiv

Ca atare, timpul tău LCP va fi aproape întotdeauna puțin mai mare decât timpul tău FCP, deoarece elementul „conținut principal” nu este de obicei primul care se încarcă.

De ce contează cel mai mare timp de vopsire plin de conținut al site-ului dvs.?

Există două motive principale pentru care perioadele de vopsire cu cea mai mare cantitate a site-ului dvs. contează:

1. Experiența utilizatorului
2. Optimizare motor de căutare

Experiența utilizatorului

Cel mai mare motiv pentru care ar trebui să-ți pese de perioadele cele mai mari de vopsire plină de conținut a site-ului tău este că această valoare este un bun proxy pentru a înțelege experiențele utilizatorilor tăi când vine vorba de performanța site-ului tău.

Majoritatea utilizatorilor nu le pasă de cât timp durează site-ul dvs. pentru a încărca complet fiecare script și element. În schimb, le pasă de cât timp le ia pentru a începe să obțină valoare de pe site-ul tău.

Largest Contentful Paint face o treabă bună încercând să măsoare acel moment „valoare” văzând cât timp durează conținutul principal pentru a se încărca.

Dacă vă optimizați site-ul pentru a obține o durată mai mare de vopsire cu conținut maxim, puteți fi destul de sigur că oferiți utilizatorilor o experiență solidă pe site-ul dvs., cel puțin când vine vorba de performanță (veți dori, de asemenea, un design prietenos cu clienții). și o bună utilizare).

Desigur, asta nu înseamnă că ar trebui să ignorați alte valori de performanță. Vă recomandăm întotdeauna să aruncați o privire holistică asupra performanței și blocajelor site-ului dvs., motiv pentru care am creat propriul nostru instrument de monitorizare a performanței aplicațiilor (APM), care este disponibil gratuit dacă utilizați Kinsta hosting – Kinsta APM.

Optimizare pentru motoarele de căutare (SEO)

În ceea ce privește optimizarea motoarelor de căutare, Largest Contentful Paint face parte din trio-ul Google de valori Core Web Vitals, pe care Google a început să le folosească ca factor de clasare SEO în actualizarea algoritmului 2022 Page Experience.

Aceasta înseamnă că a avea timpi slabi de vopsire cu cea mai mare cantitate de conținut poate fi un obstacol pentru performanța site-ului dvs. în rezultatele căutării Google.

În timp ce alți factori, cum ar fi calitatea/relevanța conținutului și backlink-urile, joacă încă un rol mult mai important în locul în care se situează site-ul dvs., este important să optimizați timpul cel mai mare de vopsire a conținutului site-ului dvs. pentru a vă asigura că profitați la maximum de eforturile dvs. de SEO.

Ce poate afecta cele mai mari scoruri de vopsea satisfăcătoare?

Două tipuri „principale” de probleme pot afecta perioadele cele mai mari de vopsire cu conținut maxim al unei pagini:

1. Cât timp durează serverul dvs. pentru a răspunde cu documentul HTML inițial.
2. Cât timp durează încărcarea resursei LCP.

Primul tip de problemă se referă la timpul de răspuns al serverului, adică timpul până la primul octet (TTFB). Înainte ca browserul unui utilizator să se poată gândi măcar la încărcarea conținutului principal, trebuie mai întâi să obțină un răspuns de la server.

Iată câteva dintre problemele comune care afectează acest lucru:

• Neutilizarea memoriei cache a paginii – neutilizarea stocării în cache a paginii obligă serverul să facă mai multă „muncă” înainte de a putea răspunde cu documentul HTML.
• Slow hosting – un furnizor de găzduire lent va avea întotdeauna un TTFB lent, indiferent de ceea ce faci.
• Nu folosiți un CDN – o rețea de livrare de conținut (CDN) poate accelera TTFB prin difuzarea paginilor din rețeaua sa globală, în loc să solicite utilizatorilor să le descarce de pe serverul de origine al site-ului dvs.

După ce serverul site-ului dvs. livrează documentul HTML inițial, ar putea exista și alte blocaje atunci când vine vorba de încărcarea elementului de conținut principal real.

Iată câteva dintre problemele comune care afectează acest lucru:

• JavaScript sau CSS care blochează randarea (sau cod neoptimizat/inutil în general) – dacă browserul utilizatorului trebuie să descarce și/sau să proceseze JavaScript sau CSS inutile înainte de a putea încărca elementul principal, acest lucru va încetini LCP.
• Imagini neoptimizate – dacă elementul LCP este o imagine, utilizarea imaginilor neoptimizate vă va încetini timpul, deoarece imaginile mai mari durează mai mult pentru descărcare.
• Încărcarea neoptimizată a fonturilor – dacă elementul LCP este text, încărcarea fonturilor personalizate într-un mod neoptimizat poate face să dureze mai mult pentru apariția textului respectiv.
• Fișiere necomprimate – dacă nu utilizați tehnologii de compresie precum Gzip sau Brotli, acest lucru va face ca browserul utilizatorului să descarce fișierele site-ului dvs.

În funcție de site-ul dvs., este posibil să vă confruntați cu blocaje în ambele zone sau doar în una dintre zone. Veți învăța cum să rezolvați toate aceste probleme puțin mai târziu în această postare.

Care este un timp bun de vopsea cel mai mare și plin de conținut?

Google definește un „bun” cel mai mare timp de vopsire cu conținut sub 2,5 secunde.

Dacă cel mai mare timp de vopsire cu conținut conținut al paginii dvs. este între 2,5 și 4,0 secunde, Google clasifică acest lucru drept „Necesită îmbunătățire”. Și dacă timpul paginii dvs. este de peste 4,0 secunde, Google definește acest lucru drept „Slab”.

Iată o grafică de la Google care arată acest lucru vizual:

Cum se măsoară cea mai mare vopsea plină de conținut: cele mai bune instrumente de testare LCP

Există o serie de instrumente pe care le puteți folosi pentru a testa performanța site-ului dvs. pentru cea mai mare vopsea de conținut - să trecem prin unele dintre cele mai utile...

PageSpeed ​​Insights

PageSpeed ​​Insights este unul dintre cele mai bune instrumente pentru evaluarea celui mai mare conținut de vopsea, deoarece oferă patru informații utile:

1. Puteți vedea cele mai mari perioade de vopsire de conținut a site-ului dvs. cu utilizatori reali din raportul Chrome UX ( dacă site-ul dvs. are suficient trafic pentru a fi inclus în raport ).
2. Puteți rula teste simulate pentru a vedea cum funcționează site-ul dvs.
3. Google vă va spune elementul LCP real pe care îl folosește pentru test, ceea ce vă permite să știți ce element să optimizați.
4. Google vă va oferi sugestii despre cum să vă îmbunătățiți timpul LCP.

Iată cum să-l folosești:

1. Accesați site-ul Web PageSpeed ​​Insights.
2. Introduceți adresa URL a paginii pe care doriți să o testați.
3. Faceți clic pe Analizați .

Google vă va afișa apoi rezultate atât pentru mobil, cât și pentru desktop - asigurați-vă că le verificați pe ambele.

Pentru a găsi elementul principal pe care Google îl folosește pentru a calcula LCP, puteți derula în jos la secțiunea Diagnosticare și puteți extinde secțiunea Elementul cel mai mare conținut de vopsea :

Din nou, asigurați-vă că verificați atât mobil, cât și desktop, deoarece elementul LCP ar putea fi diferit pentru fiecare.

Instrumente pentru dezvoltatori Chrome

De asemenea, puteți testa cel mai mare timp de vopsire cu conținut conținut direct din Chrome Developer Tools, folosind fila Performanță sau funcția de audit Lighthouse. Vă recomandăm să utilizați fila Performanță deoarece vă oferă mai multe informații.

Iată cum să începeți:

1. Deschideți pagina pe care doriți să o testați.
2. Deschideți Chrome Developer Tools.
3. Accesați fila Performanță .
4. Asigurați-vă că caseta Web Vitals este bifată.
5. Faceți clic pe butonul Reîncărcați ( indicat mai jos ).

Ar trebui să vedeți acum o analiză completă a site-ului dvs.

Dacă treceți cu mouse-ul peste LCP în fila Rețea , puteți vedea ora:

Dacă treceți cu mouse-ul peste LCP în fila Timings , puteți vedea elementul LCP real:

Google Search Console

Deși Google Search Console nu vă permite să testați o pagină individuală pentru cea mai mare perioadă de vopsire a conținutului său, este cu adevărat utilă pentru evaluarea performanței la nivel de site.

Fiecare pagină de pe site-ul dvs. va avea o oră LCP diferită, așa că nu puteți să vă testați pagina de pornire și să o numiți o zi.

Cu Google Search Console, veți putea vedea unde se încadrează fiecare pagină de pe site-ul dvs. în categoriile Google „Bine”, „Necesită îmbunătățire” și „Slab”. Datele de performanță provin din raportul Chrome UX, deci se bazează pe date reale ale utilizatorilor.

Dacă nu ați făcut deja acest lucru, mai întâi va trebui să vă verificați site-ul cu Google Search Console.

După ce ați făcut asta, iată cum puteți accesa raportul LCP:

1. Deschideți Google Search Console pentru site-ul dvs.
2. Accesați Core Web Vitals sub fila Experiență .
3. Faceți clic pe Deschidere raport de lângă diagrama mobil sau desktop.
4. Căutați orice probleme în secțiunea De ce adresele URL nu sunt considerate bune . Dacă faceți clic pe problemă, puteți vedea mai multe informații despre adresele URL care cauzează probleme.

* Asigurați-vă că verificați atât rezultatele desktop, cât și cele mobile, deoarece datele ar putea fi diferite în fiecare.

WebPageTest

WebPageTest este o altă opțiune la îndemână pentru rularea testelor de performanță simulate.

Spre deosebire de PageSpeed ​​Insights, WebPageTest vă permite să personalizați complet diverse valori de testare, cum ar fi locația de testare, viteza conexiunii, dispozitivul și multe altele. Acesta este principalul beneficiu al utilizării acestuia față de alte instrumente – vă oferă mai multe opțiuni pentru a configura testul.

Iată cum să rulați un test:

1. Accesați WebPageTest.
2. Adăugați adresa URL a paginii pe care doriți să o testați.
3. Extindeți opțiunile de configurare avansată pentru a vă configura complet testul.

Pe pagina cu rezultate, veți vedea datele LCP, împreună cu o mulțime de alte valori de performanță (inclusiv o analiză în cascadă).

Cum să găsiți cel mai mare element de vopsea plin de conținut

Dacă doriți să îmbunătățiți Largest Contentful Paint, poate fi foarte util să știți exact ce element folosește Google pentru a calcula timpul LCP.

De exemplu, dacă știți că Google vă folosește imaginea eroului ca element LCP pe pagina dvs. de pornire, știți că trebuie să găsiți modalități de a difuza acea imagine erou cât mai repede posibil dacă doriți să îmbunătățiți timpii LCP ai paginii dvs. de pornire.

După cum am menționat mai devreme, puteți găsi cel mai mare element de vopsea conținută folosind PageSpeed ​​Insights sau Chrome Developer Tools.

Asigurați-vă că verificați rezultatele atât pentru dispozitive mobile, cât și pentru desktop, deoarece elementul LCP poate fi diferit pe dispozitive diferite.

Cum să îmbunătățiți cea mai mare vopsea de conținut în WordPress (sau alte platforme)

Acum că știți totul despre Largest Contentful Paint, haideți să introducem câteva sfaturi utile despre cum să îmbunătățiți Largest Contentful Paint în WordPress.

Deși ne vom concentra pe WordPress pentru aceste sfaturi, toate sfaturile sunt universale și se aplică altor tipuri de site-uri web.

Configurați memorarea în cache pentru a îmbunătăți timpul de răspuns al serverului

Memorarea în cache poate îmbunătăți timpul de răspuns al serverului, reducând munca de procesare pe care trebuie să o facă serverul înainte de a putea livra documentul HTML finalizat în browserele vizitatorilor.

Dacă vă găzduiți site-ul WordPress cu Kinsta, nu trebuie să vă faceți griji cu privire la configurarea memoriei cache, deoarece Kinsta implementează automat stocarea în cache optimizată pentru dvs.

Dacă găzduiți în altă parte, puteți activa stocarea în cache pe site-ul dvs. folosind un plugin gratuit precum WP Super Cache sau un plugin plătit precum WP Rocket.

Pentru mai multe opțiuni, consultați postarea noastră cu cele mai bune pluginuri de cache WordPress.

Faceți upgrade la găzduire WordPress mai rapidă

În timp ce toate tacticile din această listă vă pot ajuta să vă îmbunătățiți timpul LCP, nu există nicio bătaie în jurul tufișului:

Dacă utilizați găzduire WordPress lentă și neoptimizată, timpul dvs. LCP va fi întotdeauna limitat de calitatea gazdei dvs.

S-ar putea să reușești să îmbunătățești puțin lucrurile, dar te vei lupta întotdeauna să obții timpi LCP sub 2,5 secunde dacă gazda ta este lentă.

Dacă doriți cea mai ușoară modalitate de a vă îmbunătăți timpul cel mai mare de vopsire cu conținut, vă puteți migra site-ul către Kinsta. Kinsta nu numai că oferă o infrastructură de găzduire optimizată pentru performanță, dar avem și funcții încorporate pentru a gestiona multe dintre celelalte optimizări de pe această listă.

Aceasta înseamnă că vă puteți concentra pe creșterea site-ului dvs. în loc să vă încurcați cu optimizarea timpilor de vopsire cu cea mai mare cantitate de conținut.

Dacă sunteți interesat, Kinsta va migra gratuit site-uri web nelimitate de la orice gazdă – aflați mai multe despre migrarea gratuită aici.

Dacă sunteți încă pe gard – încercați mai întâi restul sfaturilor din această listă. Dar dacă încă te lupți după ce ai făcut tot ce este pe această listă, s-ar putea să ai nevoie doar de o găzduire mai bună.

Utilizați o rețea de livrare de conținut (CDN)

Fără un CDN, toți vizitatorii site-ului dvs. trebuie să descarce HTML-ul unei pagini și elementele statice de pe serverul dvs. de găzduire.

Dacă vizitatorii dvs. sunt localizați aproape de serverul dvs., aceasta nu este de obicei o problemă. Dar dacă vizitatorii dvs. sunt răspândiți în întreaga lume, acest lucru vă poate încetini site-ul din cauza distanței fizice dintre un vizitator și serverul site-ului dvs.

Cu un CDN, puteți distribui elementele statice ale site-ului dvs. (sau chiar paginile HTML finalizate ale site-ului dvs.) în rețeaua globală a CDN-ului. În acest fel, vizitatorii pot descărca fișiere din cea mai apropiată locație a CDN-ului, care este mult mai rapid.

Dacă găzduiți cu Kinsta, vă recomandăm să utilizați caracteristica Edge Caching a Kinsta pentru cele mai bune rezultate.

Funcția de stocare în cache de la margine a Kinsta funcționează prin memorarea în cache a paginilor HTML complete ale site-ului dvs. și a activelor statice în rețeaua globală Cloudflare ( mai degrabă decât stocarea în cache a activelor statice ca majoritatea soluțiilor CDN ).

Aceasta înseamnă că vizitatorii site-ului dvs. pot descărca pagina completă din cea mai apropiată locație de margine, ceea ce accelerează atât timpul de răspuns al serverului, cât și cât durează încărcarea resursei LCP.

Pentru a activa Edge Caching-ul Kinsta, accesați fila Edge Caching din tabloul de bord al site-ului dvs. în MyKinsta.

Dacă găzduiți în altă parte, puteți configura un CDN pentru activele statice ale site-ului dvs. folosind servicii CDN populare, cum ar fi KeyCDN, Bunny, StackPath și altele.

Evitați JavaScript care blochează randarea (amânați sau eliminați)

JavaScript de blocare a randării este JavaScript care se încarcă înainte de elementul LCP principal, chiar dacă nu este necesar la acel moment.

Prin întârzierea încărcării elementului LCP, acesta va încetini timpii de încărcare LCP.

Pentru a remedia acest lucru, există câteva strategii pe care le puteți implementa:

• Eliminați JavaScript inutil, dacă este posibil.
• Amânați JavaScript, astfel încât să nu blocheze încărcarea elementului principal al site-ului dvs.
• Întârzieți JavaScript până când un utilizator interacționează cu site-ul dvs.

Pentru majoritatea oamenilor, cel mai simplu mod de a implementa această funcționalitate este prin intermediul pluginurilor precum Autoptimize sau WP Rocket.

Pentru un ghid complet despre cum să faceți acest lucru, avem două postări foarte detaliate:

• Cum să eliminați resursele care blochează randarea pe WordPress
• Cum să amâni analizarea JavaScript

Evitați CSS care blochează randarea și optimizați livrarea CSS

Așa cum JavaScript neoptimizat poate încetini site-ul dvs., CSS neoptimizat poate face același lucru.

În esență, doriți să încărcați cât mai puțin CSS posibil. Și pentru CSS-ul pe care trebuie să îl încărcați, doriți să îl încărcați într-un mod optim. De obicei, aceasta înseamnă că doriți să încărcați CSS-ul important devreme, în timp ce întârziați CSS-ul necritic până mai târziu în procesul de încărcare.

Dacă nu sunteți dezvoltator, cel mai simplu mod de a realiza acest lucru este utilizarea pluginurilor de optimizare a performanței precum Perfmatters, WP Rocket sau FlyingPress.

De exemplu, WP Rocket oferă funcții încorporate pentru a elimina CSS neutilizat pagină cu pagină și pentru a servi CSS într-un mod optim.

Dacă doriți o privire mult mai profundă asupra modului de a face toate acestea, consultați ghidul nostru complet despre cum să optimizați CSS.

Reduceți codul HTML, CSS și JavaScript

Pe lângă tehnicile de optimizare a codului de mai sus, veți dori, de asemenea, să minimizați codurile HTML, CSS și JavaScript ale site-ului dvs.

În esență, acest lucru elimină caracterele inutile și spațiul alb din codul site-ului dvs. pentru a-i micșora dimensiunea.

Dacă găzduiți cu Kinsta, Kinsta poate gestiona automat minificarea prin integrarea noastră Cloudflare. Iată cum puteți controla această funcție:

1. Deschideți tabloul de bord al site-ului dvs. în MyKinsta.
2. Accesați fila CDN .
3. Faceți clic pe Setări de lângă Optimizare imagine.
4. Bifați casetele pentru CSS și JS și salvați setările.

Dacă vă găzduiți site-ul în altă parte, puteți utiliza un plugin gratuit, cum ar fi Autoptimize, pentru a vă minimiza codul sau unul dintre pluginurile complete premium precum Perfmatters, WP Rocket sau FlyingPress.

Sau, consultați tutorialul nostru complet de minificare a codului pentru a afla mai multe. În timp ce tutorialul se concentrează pe JavaScript, puteți folosi aceleași metode și plugin-uri pentru a minimiza și alt cod.

Utilizați compresia la nivel de server (Gzip sau Brotli)

Compresia la nivel de server vă permite să micșorați dimensiunea fișierelor site-ului dvs. folosind tehnologii precum Gzip sau Brotli.

De exemplu, compresia pe care o folosim pentru site-ul web Kinsta a redus dimensiunea fișierului paginii de pornire Kinsta cu 85,82%.

Dacă găzduiți site-ul dvs. WordPress cu Kinsta, nu trebuie să vă faceți griji pentru acest lucru, deoarece Kinsta activează automat compresia Brotli pentru toate site-urile.

Dacă vă găzduiți site-ul în altă parte, puteți utiliza acest instrument gratuit de la GiftOfSpeed ​​pentru a verifica dacă site-ul dvs. are Gzip sau Brotli activat.

Dacă site-ul dvs. nu utilizează compresia, puteți urma ghidul nostru despre cum să activați compresia Gzip pentru ao configura.

Dacă utilizați Cloudflare pentru a difuza conținutul site-ului dvs., Cloudflare are și o setare încorporată pentru a activa compresia Brotli:

1. Deschideți-vă site-ul în tabloul de bord Cloudflare.
2. Accesați Viteză → Optimizare din meniul din bara laterală.
3. Activați comutatorul Brotli .

Comprimați și redimensionați imaginile

Dacă elementul dvs. LCP este o imagine, găsirea unor modalități de a reduce dimensiunea acelui fișier imagine va reduce timpul necesar browserului unui utilizator pentru a descărca imaginea (și astfel vă va accelera timpul LCP).

Pentru a reduce dimensiunea imaginii, ar trebui să redimensionați imaginea la dimensiunile la care o utilizați de fapt, să o comprimați folosind compresie cu pierderi sau fără pierderi și să o serviți într-un format optimizat, cum ar fi WebP.

Această abordare este, în general, o bună practică de optimizare a performanței – nu este specifică pentru Largest Contentful Paint.

Pentru o imagine mai cuprinzătoare, consultați ghidul nostru detaliat pentru optimizarea imaginilor pentru site-uri web.

Și oh, da – dacă găzduiți site-ul dvs. WordPress cu Kinsta, nu trebuie să vă faceți griji pentru acest lucru, deoarece Kinsta oferă o funcție încorporată pentru a optimiza automat imaginile site-ului dvs. fără a fi nevoie de instrumente terțe.

Iată cum să activați această funcție:

1. Deschideți tabloul de bord al site-ului dvs. în MyKinsta.
2. Accesați fila CDN .
3. Faceți clic pe Setări de lângă Optimizare imagine.
4. Alegeți nivelul preferat de optimizare a imaginii și salvați setările – utilizarea Lossy va oferi cele mai mari îmbunătățiri ale vitezei, deși ar putea avea un efect mic asupra calității imaginii.

Preîncărcați cea mai mare imagine de vopsea plină de conținut

Dacă elementul dvs. LCP este o imagine, o altă strategie de îmbunătățire a LCP este să preîncărcați imaginea cea mai mare cu conținut conținut. Acesta este motivul pentru care s-ar putea să vedeți o recomandare precum „Preîncărcați imaginea cea mai mare cu conținut conținut” în PageSpeed ​​Insights.

Cu preîncărcare, puteți spune browserului unui utilizator să prioritizeze descărcarea anumitor resurse, cum ar fi imaginea specifică care este elementul LCP al site-ului dvs.

Cel mai non-tehnic mod de a preîncărca imaginile LCP este utilizarea unui plugin precum Perfmatters, care oferă o funcție dedicată Preîncărcare imagini critice . Tot ce trebuie să faceți este să specificați câte imagini să preîncărcați – vă recomandăm să începeți doar cu una, deoarece preîncărcarea prea multor active poate avea un efect negativ.

Există, de asemenea, câteva plugin-uri gratuite la WordPress.org pentru a realiza acest lucru, cum ar fi pluginul Preload Featured Images de la WPZOOM, precum și alte plugin-uri premium, cum ar fi FlyingPress.

Verificați dacă există probleme de încărcare leneră

O altă problemă care poate declanșa mesajul „Preîncărcare cea mai mare imagine cu conținut conținut” din PageSpeed ​​Insights este problemele legate de modul în care site-ul dvs. WordPress încărcă leneș imaginile.

Sau, acest lucru poate declanșa, de asemenea, un avertisment „Cea mai mare imagine cu conținut conținut a fost încărcată leneș” în PageSpeed ​​Insights.

Încărcarea lenevă vă permite să accelerați timpul inițial de încărcare a site-ului dvs. așteptând să încărcați anumite resurse (cum ar fi imagini) până când un utilizator începe să interacționeze cu site-ul dvs.

În timp ce acesta este în mod normal un lucru bun, poate încetini timpii LCP dacă site-ul tău încearcă să încarce leneș imaginea care este elementul LCP. Din acest motiv, veți dori să vă asigurați că site-ul dvs. nu este leneș să încarce imagini vizibile în fereastra inițială.

Dacă utilizați funcția de încărcare leneră a browserului nativ pe care WordPress a introdus-o în WordPress 5.5, nu ar trebui să vă confruntați cu această problemă, deoarece WordPress exclude deja automat prima imagine din conținut începând cu WordPress 5.9.

Dacă doriți să excludeți mai mult decât prima imagine, puteți utiliza funcția wp_omit_loading_attr_threshold (dar majoritatea oamenilor nu vor trebui să facă nimic aici).

Cu toate acestea, dacă utilizați un plugin de încărcare leneră bazat pe JavaScript, poate fi necesar să configurați manual această excludere în setările pluginului. De exemplu, pluginul Perfmatters include o opțiune care vă permite să excludeți primele imagini „X” de la încărcarea leneșă.

Dacă pluginul de încărcare leneșă nu vă permite să configurați acest tip de excludere, puteți trece la un alt plugin care o face.

Optimizați încărcarea fontului cu Font-Display: Opțional

Dacă elementul LCP este text, procesul de încărcare a fonturilor site-ului poate întârzia apariția textului, ceea ce va încetini timpul LCP.

De obicei, acest lucru se întâmplă atunci când utilizați fonturi personalizate. Dacă site-ul dvs. este configurat să aștepte pentru a reda orice text până după ce fontul personalizat s-a încărcat, acest lucru va încetini dacă fișierul cu font personalizat durează mult timp pentru a se încărca.

Pentru a remedia acest lucru, puteți utiliza Font-Display: descriptor CSS opțional.

Acest lucru îi spune browserului să folosească un font alternativ dacă fontul personalizat nu se încarcă într-o fereastră mică (de obicei, în jur de 100 ms sau mai puțin).

Într-un limbaj simplu, acest lucru înseamnă practic că browserul ar trebui să ofere fontului personalizat șansa de a se încărca. Dar dacă fontul personalizat nu se încarcă suficient de repede, browserul ar trebui să folosească doar un font de sistem alternativ pentru a evita întârzierea conținutului.

Alternativ, puteți utiliza și Font-Display: Swap, care încarcă fontul alternativ imediat și apoi „schimbă” fontul personalizat odată ce fontul personalizat se încarcă. Cu toate acestea, această abordare poate cauza probleme cu Schimbarea aspectului cumulativ dacă fonturile au dimensiuni diferite, așa că veți dori să fiți atenți.

Cu excepția cazului în care fontul dvs. personalizat este absolut necesar pentru designul site-ului dvs., utilizarea Font-Display: Opțional este de obicei cea mai bună opțiune din perspectiva Core Web Vitals.

Dacă vă simțiți confortabil să utilizați CSS direct, puteți edita manual proprietatea Font-Display din foaia de stil a temei copilului.

Dacă nu doriți să utilizați CSS, puteți găsi, de asemenea, pluginuri care să vă ajute să faceți acest lucru, deși majoritatea se concentrează pe optimizarea fonturilor Google:

• Asset CleanUp – acceptă fonturi Google pentru fonturi locale gratuite și personalizate cu versiunea Pro.
• Perfmatters – oferă o funcție pentru Fonturi Google.

Dacă utilizați Elementor pentru a vă proiecta site-ul, Elementor include și o opțiune încorporată pentru a vă permite să utilizați aceasta pentru paginile pe care le creați cu Elementor:

1. Accesați Elementor → Setări .
2. Deschideți fila Avansat .
3. Setați meniul drop-down Încărcare fonturi Google egal cu Opțional .

rezumat

A învăța cum să îmbunătățiți Largest Contentful Paint este important pentru îmbunătățirea experienței utilizatorului site-ului dvs. și pentru maximizarea clasamentului în motoarele de căutare.

În general, sunt două părți pentru a îmbunătăți Largest Contentful Paint – accelerarea timpului de răspuns al serverului și apoi optimizarea codului site-ului pentru a reda elementul LCP cât mai repede posibil.

Dacă nu doriți să vă faceți griji cu privire la timpul de răspuns lent al serverului, vă puteți muta site-ul WordPress în Kinsta. Arhitectura Kinsta optimizată pentru performanță este concepută special pentru a vă livra site-ul cât mai repede posibil.

În plus, cu caracteristica Edge Caching de la Kinsta, puteți stoca în cache paginile site-ului dvs. în rețeaua globală Cloudflare, ceea ce înseamnă că vizitatorii din întreaga lume se vor bucura de timpi de răspuns a serverului fulgerător (și, în consecință, de timpi LCP fulgerați).

Dacă doriți să aflați mai multe, puteți consulta aceste pagini pentru mai multe informații despre găzduirea WordPress gestionată de Kinsta sau găzduirea WooCommerce gestionată de Kinsta.

Dacă doriți ca un profesionist să vă ajute cu unele optimizări de performanță LCP personalizate, puteți găsi, de asemenea, un furnizor în Directorul agențiilor Kinsta.