Cum se Îmbunătățește Largest Contentful Paint (LCP) pe WordPress

Largest Contentful Paint (LCP) pe WordPress

Vă întrebați ce înseamnă Largest Contentful Paint și cum vă poate afecta performanța UX și SEO? Continuați să citiți! Veți descoperi ce este LCP, cum îl puteți testa și ce factori îi afectează nota. De asemenea, veți afla cum să vă optimizați performanța WordPress și să remediați un scor LCP slab de pe mobil și desktop (cel mai mare Largest Contentful Paint de 2,5 sau 4 s).

Ce este Largest Contentful Paint (LCP) și De Ce Contează?

Largest Contentful Paint (LCP) este o metrică de bază a Core Web Vital și măsoară cât durează până când cel mai mare element devine vizibil în fereastra browserului. Până când LCP nu se încarcă, nu veți vedea aproape nimic pe pagină. Acest lucru se datorează faptului că elementul LCP este întotdeauna deasupra pliantei – aceasta se află în partea de sus a paginii.

LCP este de obicei o imagine sau un bloc de text. Totuși, ar putea fi și un videoclip sau o animație. Elementul LCP poate diferi între mobil și desktop.

După cum puteți ghici, cel mai mare element este cel mai relevant pentru experiența utilizatorului și viteza de încărcare percepută.

Gândiți-vă: dacă cel mai mare element al paginii nu se încarcă rapid, experiența dvs. de utilizator nu va fi bună. V-ați uita la o pagină aproape goală, așteptând încărcarea paginii … Puteți chiar părăsi site-ul! Când navigați, câteva secunde pot face o mare diferență.

De aceea, Google a inclus LCP ca una dintre valorile Core Web Vitals – valori care măsoară cât de mare este experiența dvs. de utilizator.

În iunie 2021, LCP a fost lansat ca parte a noului factor de clasare, Page Experience Signal. Din acest motiv, Largest Contentful Paint contează nu numai pentru a oferi o experiență excelentă utilizatorului, ci și pentru îmbunătățirea performanței SEO.

Mai mult, LCP reprezintă 25% din scorul global PageSpeed Insights. Îmbunătățindu-i performanța, probabil veți îmbunătăți calitatea vitezei paginii.

Pe scurt, LCP este una dintre cele mai importante valori de performanță în acest moment.

Ce Este un Scor Largest Contentful Paint (LCP)  Bun

Un scor bun înseamnă că LCP ar trebui să fie mai mic sau egal cu 2,5 secunde. Dacă da, pagina va obține scorul verde și va trece evaluarea.

Dacă LCP este între 2,5 și 4,0 s, scorul „are nevoie de îmbunătățiri” – veți obține o notă portocalie.

Să presupunem că LCP este mai mare de 4 secunde. Atunci, scorul este „slab”, este cu roșu și trebuie să îl remediați cât mai curând posibil.

Să vedem acum cum putem găsi elementul Largest Contentful Paint.

Cum să Găsiți și să Măsurați Largest Contentful Paint

Există mai multe moduri de a găsi și de a măsura elementul LCP, atât cu datele de laborator, cât și cu datele de teren. Iată cele mai populare instrumente pe care le puteți utiliza pentru a testa LCP.

Instrumente de date de laborator:

• Lighthouse
• PageSpeed Insights
• Chrome DevTools
• WebPageTest
• GTmetrix

Instrumente de date de teren:

• PageSpeed Insights (este disponibil)
• Chrome User Experience Report (Field Data)
• Search Console – Core Web Vitals raport (Field Data).

Să trecem în revistă unele dintre cele mai ușoare și mai eficiente instrumente: PageSpeed Insights și Search Console.

Măsurarea și Găsirea Largest Contentful Paint (LCP) cu PageSpeed Insights

PageSpeed Insights este cel mai simplu mod de a măsura și găsi elementul LCP.

După testarea paginii URL-ului dvs., veți obține nota LCP în datele de laborator și datele de teren (dacă sunt disponibile). Veți primi recomandările PageSpeed pentru a vă îmbunătăți performanța.

Accesați zona Diagnostics și căutați secțiunea „Largest Contentful Paint”. Veți descoperi care este elementul LCP pentru pagina pe care o analizați.

Să analizăm câteva exemple și să facem lucrurile mai ușor de înțeles.

Exemplul LCP Pentru Mobil

Să analizăm o pagină de blog WP Rocket de pe mobil.

Testăm performanța paginii în instrument și mergem în zona Diagnostics. Elementul LCP este H1, care este titlul postării pe blog:

Atâta timp cât titlul principal se încarcă rapid, pagina va oferi o experiență excelentă pentru utilizator.

Exemplul LCP de pe Desktop

Să aruncăm o privire la aceeași adresă URL de pe desktop.

Mergem din nou în zona de diagnosticare și căutăm elementul LCP. Nu este surprinzător că LCP nu este același lucru ca și pentru mobil. Pentru desktop, LCP este o imagine:

Mai exact, este imaginea postării.

Deoarece PageSpeed Insights este un instrument bazat pe pagini, vă recomandăm să executați mai multe teste pentru diferite pagini.

Pentru o analiză generală, ar trebui să profitați și de Search Console.

Măsurarea și Găsirea LCP pe Search Console

Puteți evalua performanța site-ului dvs. și puteți detecta orice probleme cu raportul Core Web Vitals în Search Console.

Veți putea accesa atât performanțele de pe mobil, cât și de pe desktop:

După ce deschideți raportul, veți vedea cum funcționează paginile site-ului dvs. în funcție de fiecare prag: bun, trebuie îmbunătățit și slab.

Raportul Search Console grupează fiecare performanță Core Web Vital după stare, tip de problemă și adrese URL.

De exemplu, este posibil să aveți câteva adrese URL care nu funcționează bine pentru LCP. Dacă da, în raport, puteți citi „Problema LCP: mai mult de 2,5 s (mobil)”.

Făcând clic pe rândul legat de problema respectivă, veți ajunge pe o pagină care oferă lista adreselor URL care trebuie remediate. Deși aceste adrese URL sunt un exemplu, ele vă pot oferi o idee destul de exactă despre ceea ce se întâmplă.

Va fi destul de ușor să găsiți modelul URL și să mergeți mai departe cu remedierea și validarea.

Ce Factori Afectează LCP și Cauzează un Scor Lent

Pentru site-urile WordPress, trei factori afectează LCP: timpii de răspuns lent ai serverului, JavaScript și CSS care blochează redarea și timpul lent de încărcare a resurselor.

Timpii de Răspuns Lent ai Serverului

Browserul face o cerere către server, dar aceasta durează prea mult pentru a trimite conținutul solicitat. Întrucât browserul nu primește conținutul suficient de repede, durează ceva timp pentru a afișa ceva pe ecran. Ca urmare, timpul de încărcare nu este excelent. Scorul LCP este afectat.

Veți rezolva problema îmbunătățindu-vă timpul până la primul octet, utilizând un CDN și stabilind conexiuni terță parte mai devreme.

JavaScript și CSS care blochează randarea

Browserul face o cerere și primește conținutul de pe server. În acest moment, browserul va reda conținutul și îl va afișa, nu? Nu așa de repede.

Pentru a reda orice conținut, browserul trebuie să analizeze codul HTML al paginii și să-l „citească” în structura HTML a paginii – acesta este arborele DOM. După aceea, conținutul va fi redat și afișat complet – cu excepția cazului în care unele scripturi și foi de stil blochează analiza HTML. Aceste scripturi și foi de stil sunt resursele de blocare a redării.

Ca urmare a acestui blocaj, analiza este întârziată. Încă o dată, conținutul pe care l-ați solicitat durează puțin înainte de a fi încărcat. Performanța LCP este afectată din nou.

Veți aborda aceste probleme amânând și eliminând fișierele JS neutilizate. Nu vă faceți griji! Veți găsi toate informațiile de care aveți nevoie în secțiunea următoare.

Timpi de încărcare a resurselor lente

Alte fișiere pot provoca performanțe slabe și o experiență proastă a utilizatorului: imagini, videoclipuri și elemente la nivel de bloc, cum ar fi fișiere HTML și CSS.

După cum știți deja, Largest Contentful Paint (LCP) este legat de elementele din partea de sus a paginii. Și această problemă apare exact atunci când aceste fișiere sunt redate primele și sunt încărcate prea mult timp. Ca urmare, timpul de încărcare și LCP sunt afectate din nou.

Veți gestiona timpul de încărcare a resurselor prin optimizarea imaginilor, reducerea și comprimarea fișierelor CSS, JS, HTML și preîncărcarea activelor critice.

Concluzia: cât de rapid primește browserul și redă conținutul solicitat determină scorul LCP.

Să înțelegem cum să rezolvăm toate aceste probleme în detaliu.

Cum se Reduce Largest Contentful Paint mai Mare de 2,5 s sau 4 s pe Mobil și Desktop

Iată zece modalități de a îmbunătăți Largest Contentful Paint și de a remedia notificarea din Search Console „Problemă LCP: mai lungă de 2,5 secunde sau Problemă LCP: mai lungă de 4 secunde”, atât de pe mobil, cât și/sau de pe desktop.

1. Îmbunătățiți Time to First Byte și Reduceți Timpul de Răspuns al Serverului
2. Folosiți un CDN
3. Amânați JavaScript
4. Eliminați JavaScript Neutilizat
5. Amânați CSS Non-Critic, CSS Critic în Linie și Eliminați CSS Neutilizat
6. Minimizați fișierele CSS și JS
7. Optimizează-ți Imaginile
8. Comprimă Fișiere Text
9. Folosiți Preîncărcare pentru Active Critice
10. Stabiliți Conexiuni Terță.

Să le studiem pe fiecare în detaliu.

Pentru fiecare sugestie, veți găsi o informație despre impactul său asupra performanței – de la scăzut la ridicat. Impactul este cel mai mare, cea mai mare șansă ca cel mai mare scor pentru Largest Contentful Paint să se îmbunătățească după respectarea acelei recomandări specifice.

1.Îmbunătățiți Time to First Byte și Reduceți Timpul de Răspuns al Serverului

Impactul Performanței: Ridicat

Unul dintre principalele motive pentru un LCP rău este un timp de răspuns lent al serverului.

Puteți măsura timpul de răspuns al serverului uitându-vă la Time to First Byte (TTFB).

De fiecare dată când doriți să accesați orice conținut, browserul trimite o cerere către server. TTFB măsoară cât durează până browserul să primească primul octet de conținut de la server.

Prin îmbunătățirea TTFB, veți îmbunătăți timpul de răspuns al serverului și scorul LCP.

Rețineți că un TTFB bun ar trebui să aibă sub 200 ms – puteți verifica rapid această valoare testând site-ul URL-ului dvs. pe WebPageTest.

Există două moduri de a remedia un server lent:

1.Activați cache-ul paginii

Prin activarea memorării în cache a paginilor, paginile site-ului dvs. vor fi stocate ca fișiere HTML pe server după ce pagina este încărcată pentru prima dată. Drept urmare, conținutul va fi afișat mai repede. Este un mod ușor și eficient de a îmbunătăți TTFB.

De asemenea, puteți alege unul dintre cei mai buni furnizori de găzduire WordPress care includ o opțiune de cache la nivel de server.

WP Rocket se poate ocupa cu ușurință de stocarea în cache a paginilor fără niciun efort din partea ta.

O filă dedicată vă va permite să activați cache-ul mobil și să setați opțiunile pe care le preferați. WP Rocket permite automat 80% din cele mai bune practici de performanță web. Deci, dacă aveți dubii, veți fi acoperiți oricum!

2.Alegeți un Serviciu de Găzduire cu Servere Rapide

O găzduire rapidă poate face o diferență uriașă în performanță. Și poate că este timpul să vă actualizați planul de găzduire!

Ca primul lucru, furnizorul dvs. de găzduire ar trebui să aibă servere apropiate de majoritatea utilizatorilor dvs. Cu cât utilizatorii dvs. sunt mai aproape de server, cu atât mai rapid vor fi trimise datele.

De asemenea, ar trebui să alegeți tipul de gazdă cu server potrivit. Un server dedicat de găzduire va asigura cea mai rapidă performanță. Luați în considerare cât de mult trafic obține site-ul dvs. și luați cea mai bună decizie.

Activând stocarea în cache și alegând o găzduire rapidă, veți avea grijă de următoarele recomandări PageSpeed Insights:

• Reduceți timpul de răspuns al serverului (TTFB)
• Serviți active statice cu o politică eficientă de cache.

2.Folosiți un CDN

Impactul Performanței: Mediu

Un CDN vă ajută să reduceți perioada de timp dintre solicitarea utilizatorului și răspunsul serverului. Acest timp este latența. Înapoi și înapoi între solicitarea browserului și răspunsul serverului este timpul dus-întors (RTT).

Dacă utilizatorii dvs. sunt situați departe de locația serverului, ar putea dura ceva timp înainte ca toate activele (de exemplu, imagini, fișiere JS și CSS, videoclipuri) să fie trimise. Latența și RTT vor fi ridicate și vor afecta timpul de încărcare și scorul LCP.

Ați văzut deja cum locația serverului dvs. poate afecta performanța site-ului dvs.

Un CDN rezolvă problema datorită unei rețele globale de servere. Indiferent unde se află utilizatorii dvs. De fiecare dată când solicită o pagină, vor primi activele de la cel mai apropiat server. Simplu.

RocketCDN este cel mai bun mod de a permite utilizatorilor să acceseze site-ul dvs. rapid și ușor.

Dacă doriți să aflați mai multe despre beneficiile CDN și diferitele tipuri, puteți citi articolul lor.

Alegerea unui CDN vă va ajuta să abordați următoarele recomandări din PageSpeed:

• Serviți active statice cu o politică eficientă de cache
• Activați compresia textului.

Vă rugăm să rețineți că un CDN va aborda astfel de recomandări numai dacă este configurat corect. Opțiunile implicite s-ar putea să nu fie suficiente pentru a îmbunătăți performanța așa cum era de așteptat.

3.Amânați JavaScript

Impactul Performanței: Ridicat

Resursele de blocare a randării, cum ar fi fișierele JavaScript, sunt una dintre principalele cauze ale unui scor Largest Contentful Paint prost.

Amânarea fișierelor JavaScript vă va ajuta să abordați problema. Cu alte cuvinte, veți schimba prioritatea fișierelor JS încărcate.

Ține minte? Browserul analizează codul HTML, construiește arborele DOM și apoi redă pagina – cu excepția cazului în care există o resursă de blocare care să încetinească acest proces.

Amânând JavaScript, browserul va procesa și încărca fișierele JS numai după analizarea documentului HTML și construirea arborelui DOM. Deoarece nu va exista nimic care să blocheze procesul, redarea va fi mult mai rapidă – iar valoarea LCP se va îmbunătăți.

Puteți adăuga atributul de amânare la fișierele JavaScript, astfel încât browserul să poată detecta resursele de amânat. Browserul va analiza codul HTML și va crea arborele DOM fără întrerupere.

Iată un exemplu al atributului de amânare:

<script defer src = "/ example-js-script"> </script>

Cel mai simplu mod de a gestiona resursele JavaScript este să profitați de WP Rocket și de funcția Load Javascript Deferred.

Puteți alege această opțiune în fila Optimizare fișier. Mai mult, puteți exclude cu ușurință anumite fișiere JS de la amânare – în cazul în care caracteristica de amânare intră în conflict cu orice fișier.

Veți aborda recomandarea PSI „Eliminați resursele de blocare a redării” în câteva clicuri – chiar dacă problemele legate de resursele de blocare a redării nu se opresc aici.

Să trecem la următorul punct despre abordarea resurselor de blocare a redării.

4.Eliminați JavaScript Neutilizat

Impactul Performanței: Mediu

O altă modalitate de a elimina resursele de blocare a redării este de a elimina resursele JavaScript care nu sunt utilizate. Nu pot fi utilizate din două motive:

• Nu mai sunt folosite pe site-ul dvs. Sunt încă în cod, dar sunt complet inutile.
• Nu sunt incluse în conținutul de mai sus. Prin urmare, acestea nu sunt critice pentru construirea arborelui DOM. Totuși, aceste fișiere au un motiv de a fi acolo (de exemplu, codul de urmărire Google Analytics).

Puteți găsi lista fișierelor JS neutilizate în raportul PageSpeed din secțiunea „Eliminați Javascript Neutilizat”:

Există două moduri de a rezolva această problemă în WordPress:

1.Încărcați fișierele JavaScript numai atunci când este necesar.

De exemplu, fișierele trebuie încărcate numai pe paginile care au nevoie de acel fișier specific – în orice alt caz, executarea JS ar trebui să fie dezactivată. Puteți avea grijă de acest aspect cu pluginuri precum Perfmatters și Asset Cleanup.

2.Întârziați fișierele JavaScript.

Fișierele JavaScript nu vor fi încărcate până la prima interacțiune cu utilizatorul (de exemplu, derulare, clic pe un buton). Dacă nu există interacțiune cu utilizatorul, fișierele JS nu vor fi încărcate deloc.

Prin întârzierea JavaScript, fișierele JS nu vor fi detectate de Lighthouse și nici listate în recomandarea „Eliminați fișierele Javascript neutilizate” – chiar dacă nu toate scripturile din lista de recomandări PageSpeed pot fi întârziate în siguranță. De exemplu, codul de urmărire Google Analytics este de obicei inclus în această recomandare PageSpeed Insights. Dacă întârziați fișierele JS, fișierul JS Google Analytics nu va mai raporta.

Deci, cum puteți întârzia resursele JS? Aveți diferite opțiuni.

Dacă căutați un plugin gratuit pentru a întârzia fișierele JavaScript, puteți utiliza Flying Scripts.

O altă modalitate de a aborda în siguranță orice JavaScript neutilizat este să profitați de WP Rocket! Pluginul vă permite să întârziați executarea JavaScript în câteva clicuri din fila Optimizare fișier. Puteți adăuga cu ușurință adresele URL pe care doriți să le excludeți de la întârzierea executării:

După cum am menționat, eliminând fișierele Javascript neutilizate, veți aborda recomandarea specificată de PageSpeed. În general, veți lucra la „Eliminarea resurselor de blocare a redării” și „Reducerea timpului de execuție a javascript”.

Nota dvs. Largest Contentful Paint va primi un alt impuls, un impuls pozitiv.

5.Amânați CSS Non-Critic, CSS Critic în Linie și Eliminați CSS Neutilizat

Impactul Performanței: Mediu

În ceea ce privește fișierele JS, ar trebui să amânați CSS non-critic – toate fișierele nu sunt relevante pentru redarea paginii. Cu alte cuvinte, ar trebui să schimbați și prioritatea pentru aceste fișiere.

Acestea se vor încărca după ce browserul a redat cel mai relevant conținut de pe pagină.

În timp ce amânați fișierele CSS, ar trebui să includeți și CSS critice în linie – resursele de mai sus care trebuie încărcate cât mai repede posibil. Înseamnă că ar trebui să identificați CSS-ul critic (sau Calea critică CSS ) și să le introduceți în structura HTML.

Dacă doriți să implementați ambele acțiuni pe WordPress, iată cum arată procesul:

1. În primul rând, ar trebui să extrageți și să inserați Calea critică CSS (CPCSS) folosind un instrument generator disponibil. Puteți găsi unul aici.
2. Apoi, ar trebui să încărcați restul claselor în mod asincron, aplicând următorul model.

Puteți citi mai multe despre proces în resursa dedicată Google.

Un alt sfat este să evitați plasarea unui cod CSS non-critic mare în <head> al codului.

Dacă doriți să aveți grijă atât de CSS critic, cât și de cel non-critic, puteți profita de caracteristicile WP Rocket!

O modalitate eficientă de a aborda CSS este eliminarea (sau reducerea) CSS neutilizat. WP Rocket vă poate ajuta, de asemenea, să o faceți cu ușurință, datorită noii sale caracteristici. Trebuie doar să activați opțiunea Eliminați CSS neutilizat, iar pluginul va elimina sau reduce CSS neutilizat din HTML-ul fiecărei pagini.

Ca alternativă, puteți activa funcția de optimizare a livrării CSS. Această opțiune va amâna CSS non-critic și CSS critic în linie – nu trebuie să faceți altceva.

În fila Optimizare fișier, puteți alege opțiunea:

Vă rugăm să rețineți că, dacă funcția Eliminați CSS neutilizat (RUCSS) nu funcționează pentru dvs., merită să activați opțiunea de optimizare a livrării CSS. Nu are rost să le activați pe amândouă în același timp – și mai întâi ar trebui să alegeți RUCSS.

Prin implementarea acestor acțiuni, veți aborda recomandările PageSpeed Insights „Eliminați resursele de blocare a redării” și „Evitați înlănțuirea cererilor critice”.

6.Minimizați Fișierele CSS și JS

Impactul Performanței: Scăzut

O altă modalitate eficientă de a optimiza Largest Contentful Paint este de a minimiza fișierele CSS și JS.

Minimizarea se reduce la optimizarea codului dvs., făcându-l mai compact. Înseamnă să eliminați orice spații albe, întreruperi de linie și comentarii incluse în cod. Prin urmare, reducerea va reduce dimensiunea fișierelor CSS și JS și le va face să se încarce mai repede.

Sună ușor, dar realitatea este mai complicată. Nu este întotdeauna simplu să minimizați ambele tipuri de fișiere și să fiți siguri că ați exclus toate resursele potrivite – mai ales dacă nu sunteți dezvoltator. Oricum ar fi, consumă mult timp.

Cel mai simplu și mai eficient mod de a avea grijă de minificare este să folosiți un plugin precum WP Rocket.

În fila de Optimizare a fișierelor, veți avea ocazia să minimizați atât fișierele CSS, cât și cele JavaScript.

Veți aborda următoarele recomandări PageSpeed Insights:

• Minimizează CSS
• Minimizează JS
• Evitați încărcăturile enorme de rețea.

7.Optimizează-ți Imaginile

Impactul Performanței: Ridicat

Optimizarea imaginilor este un alt mod relevant de a remedia un scor Largest Contentful Paint prost.

Imaginile sunt adesea elementul LCP de pe mobil sau desktop. Îmbunătățind timpul de încărcare, veți spori performanța Largest Contentful Paint.

Iată ce puteți face pentru a remedia orice problemă de performanță a imaginilor.

Comprimă și redimensionează imaginile. Ar trebui să reduceți dimensiunea fișierului fără a pierde calitatea. Cu cât dimensiunea imaginii este mai mică, cu atât timpul de încărcare va fi mai rapid.

Pentru a fi clar: dacă utilizați un instrument pentru a vă optimiza imaginile de pe desktop, veți optimiza doar dimensiunea originală. Imaginile pe care le încărcați pe WordPress nu vor fi redimensionate. După cum probabil știți, în WordPress, există diferite dimensiuni de imagine. Dacă nu utilizați un plugin adecvat de optimizare a imaginii, nu veți optimiza nimic pentru performanță.

Pentru optimizarea câtorva imagini, puteți utiliza un instrument precum ILoveImg. Pe de altă parte, dacă doriți să optimizați mai multe imagini și miniaturile lor în bloc, Imagify este soluția perfectă. Veți reduce dimensiunea imaginilor fără a sacrifica calitatea acestora. Veți economisi mult timp!

Convertiți-vă imaginile în formate noi. În general, Google recomandă formatul WebP. De aceea, toate pluginurile de optimizare a imaginilor WordPress includ acum opțiunea de a converti imagini în WebP. Alte formate pe care le puteți lua în considerare sunt JPEG 2000 și JPEG XR. Aceste formate sunt mai mici decât cele JPEG, PNG și GIF și contribuie la îmbunătățirea performanței.

Folosiți imagini receptive. Nu ar trebui să utilizați aceeași dimensiune a imaginilor pentru desktop și mobil. De exemplu, dacă dimensiunea imaginii desktop este mare, dimensiunea imaginii mobile ar trebui să fie medie.

Creatorii de pagini precum Elementor permit utilizatorilor să încarce diferite dimensiuni de imagine în funcție de dispozitiv. Optimizarea imaginii mobile este destul de esențială, iar scorul mobil contează cel mai mult. Nu subestimați impactul acestuia asupra calității dvs. LCP!

Excludeți elementul LCP din Lazy loading. În timp ce Lazy loading în general ajută la îmbunătățirea timpului de încărcare, poate înrăutăți scorul LCP, mai ales atunci când elementul LCP este o imagine și devine leneșă. De aceea, excluderea elementului LCP de lazy-load și afișarea acestuia direct în HTML-ul paginii este un mod excelent de optimizare a scorului LCP.

Folosiți o imagine statică în locul unui slider. Sliderele pot fi încărcate foarte greu din cauza codului. Pe de altă parte, o imagine statică realizată prin cod HTML este mai ușoară și mai rapidă.

Optimizându-vă imaginile, veți aborda următoarele audituri PageSpeed Insights:

• Serviți imagini în formatele de ultimă generație
• Dimensiunea corectă a imaginilor
• Codificați eficient imaginile
• Evitați încărcăturile enorme de rețea.

8.Comprimă Fișierele Text

Impactul Performanței: Ridicat

Ar trebui să comprimați fișiere text precum resurse HTML, CSS sau JavaScript.

Compresia înseamnă arhivarea fișierelor în format „zip”, un format mai mic și mai ușor, astfel încât acestea să se încarce mai repede. Odată ce le reduceți dimensiunea, transferul între browser și server va fi mai rapid. Browserul va putea încărca aceste resurse mai repede. Timpul de încărcare și Largest Contentful Paint se vor îmbunătăți.

Puteți utiliza formate de compresie precum GZIP și Brotli. Pe de o parte, GZIP este acceptat de majoritatea gazdelor. Pe de altă parte, Brotli este mai performant și este recomandat în prezent.

Puteți activa cu ușurință compresia GZIP pe WordPress utilizând un plugin. Puteți alege între diferite opțiuni, de la simplul plugin Enable Gzip Compression la WP Rocket, care include automat compresia GZIP. De asemenea, unele gazde activează implicit compresia GZIP.

În orice caz, veți aborda recomandarea PageSpeed „Activați compresia textului”.

9.Utilizați Pre-încărcarea pentru Activele Critice (De exemplu: cea mai mare imagine în Largest Contentful Paint)

Impactul Performanței: Scăzut

În acest moment, știți cât de mult activele de mai sus sunt esențiale pentru un scor bun de performanță. Aceste resurse critice pot fi fonturi, imagini, videoclipuri, fișiere CSS sau JavaScript.

Pentru a vă îmbunătăți scorul LCP, ar trebui întotdeauna să încărcați activele critice cât mai repede posibil.

Așadar, s-ar putea să vă întrebați cum să pre-încărcați cea mai mare imagine din Largest Contentful Paint.

Opțiunea Pre-încărcare este utilă. Îi spune browserului să acorde prioritate încărcării acestor resurse. Cu alte cuvinte, Pre-încărcarea împiedică browserul să descopere și să încarce aceste fișiere critice (inclusiv imaginea LCP) mult mai târziu.

Puteți include rel = ”preîncărcare” în cod:

<link rel="preload" as="script" href="script.js">
<link rel="preload" as="style" href="style.css">
<link rel="preload" as="image" href="img.png">
<link rel="preload" as="video" href="vid.webm" type="video/webm">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Sursa: Google

Pentru pre-încărcarea imaginii LCP, puteți utiliza și un plugin precum Perfmatters.

Dacă trebuie să pre-încărcați fonturile, puteți profita de caracteristica WP Rocket (numai dacă nu ați activat funcția Eliminare CSS Neutilizată):

Utilizând pre-încărcarea pentru activele critice, veți aborda recomandarea PageSpeed pentru „Pre-încărcare cheie – Preload key requests”.

10.Stabiliți Conexiuni Terță Parte mai Devreme

Impactul Performanței: Scăzut

Efectuarea mai rapidă a conexiunilor terță parte este o modalitate suplimentară de a vă optimiza performanța LCP.

Ar trebui să utilizați opțiunea Preconnect.

Să presupunem că există un fișier CSS sau JS solicitat de la o terță parte, cum ar fi Facebook sau Google Analytics. Browserul va solicita resursa externă.

Dacă este activată, opțiunea Preconectare spune browserului să stabilească o conexiune cu domeniul extern cât mai repede posibil. Browserul va gestiona cererea în paralel cu procesul de redare în curs.

Puteți include rel = “preconnect” în codul dvs.:

<link rel="preconnect" href="https://exemplu.ro">.

Ca alternativă, puteți utiliza un plugin ca Perfmatters.

Deoarece este posibil ca browserul dvs. să nu accepte opțiunea de preconectare, este întotdeauna mai bine să implementați dns-prefetch ca tehnică de rezervă. Apoi veți rezolva căutările DNS mai repede. Cu alte cuvinte, fișierele externe se vor încărca mai repede, în special pe rețelele mobile.

Puteți adăuga rel = ”dns-prefetch” la cod – ca etichetă separată de atributul de preconectare:

<head>
…
<link rel="preconnect" href="https://exemplu.ro">
<link rel="dns-prefetch" href="https://exemplu.ro">
</head>

Fila Preload a WP Rocket vă permite să preinstalați solicitările DNS. Trebuie doar să specificați gazdele externe care trebuie preluate în prealabil:

Prin stabilirea unor conexiuni terță parte mai devreme, veți îmbunătăți timpul până la primul octet și timpul de răspuns al serverului. Veți aborda, de asemenea, recomandarea PageSpeed „Preconectați-vă la originile necesare”.

Începeți Optimizarea Scorului dvs. LCP pe WordPress Astăzi

Acum ar trebui să înțelegeți de ce Largest Contentful Paint este esențial pentru performanță și experiența utilizatorului și cum puteți îmbunătăți scorul. Prin aplicarea tuturor acestor tehnici de optimizare, veți îmbunătăți calitatea LCP pe site-ul dvs. WordPress.

Nu sunteți încă client WP Rocket? Economisiți timp și lăsați WP Rocket să facă treaba pentru dvs. WP Rocket este cel mai simplu mod de a obține un scor LCP excelent. Nici măcar nu trebuie să setați ceva! WP Rocket va aplica automat 80% din cele mai bune practici de performanță web. Veți vedea o îmbunătățire instantanee cu ochiul liber în scorurile dvs. Core Web Vitals imediat.

În plus, veți renunța la mai multe pluginuri de performanță web. Veți avea nevoie doar de WP Rocket pentru a vă îmbunătăți calitatea LCP – nu sunt necesare cunoștințe tehnice, garantat!

Recomandarea autorului:

• Cum să Reduceți Total Blocking Time (TBT) pe Site-ul dvs. WordPress
• Cum se Reduce Time to First Byte (TTFB) și Timpul de Răspuns al Serverului
• Cum să Îmbunătățiți Cumulative Layout Shift (CLS) pe WordPress
• Cum să Îmbunătățiți First Input Delay (FID) pe WordPress
• Core Web Vitals și SEO – Sfaturi și Cele Mai Bune Practici pentru Site-ul dvs. WordPress
• Google Core Web Vitals pentru WordPress – Cum Testăm și Îmbunătățim