8 moduri acționabile de a îmbunătăți FCP în WordPress

Acest articol va acoperi câteva moduri simple prin care vă puteți îmbunătăți FCP sau First Contentful Paint în WordPress. Îmbunătățind această măsurătoare de performanță, site-ul dvs. WordPress va avea o experiență de utilizator mai bună, va fi clasat mai sus pe Google și se va încărca vizibil mai rapid. Mai întâi, să trecem foarte repede peste ce este FCP și apoi să discutăm câteva modalități simple de a îmbunătăți această măsură pe site-ul dvs. WordPress.

Ce este FCP?

FCP, cunoscut și sub numele de First Contentful Paint, este o statistică colectată de la utilizatori reali prin raportul despre experiența utilizatorului Chrome. Aceasta este una dintre măsurile mai realiste ale experienței utilizatorilor din lumea reală. Este conceput pentru a măsura modul în care vizitatorii și utilizatorii individuali percep performanța unui site web. Este, de asemenea, una dintre primele dintre multele statistici de viteză pe care Google va începe să le folosească în campania lor de încântare a site-urilor web, menită să îmbunătățească experiența utilizatorilor pe toate site-urile web.

First Contentful Paint este prima instanță de redare a conținutului vizual pentru utilizatorul final. În acest exemplu, FCP apare în al doilea cadru și este primul element de conținut care a fost redat pentru utilizator. Având un FCP mai rapid, se asigură că utilizatorul va rămâne pe site-ul dvs. până când tot conținutul se încarcă, deoarece timpul perceput de încărcare a acestui conținut este mult mai rapid.

După cum am precizat în articolul nostru exhaustiv despre ce sunt FCP și LCP, ar trebui să înțelegeți că acest lucru se modifică în funcție de site-ul web și de pagina specifică. Deci, FCP-ul tău poate fi un lucru pe o pagină și altul pe o altă pagină. Acest lucru adaugă un pic de complexitate procesului de optimizare, dar atâta timp cât înțelegeți ce este FCP și urmați metodele discutate în acest articol, ar trebui să fiți gata.

Rețineți că Google va începe să folosească aceste valori ca indicatori serioși de clasare în martie 2021, așa că este în interesul dvs. să vă dezvălui Prima vopsea satisfăcătoare înainte de acel moment.

Testarea și înțelegerea primei vopsele satisfăcătoare

Este foarte ușor să înțelegeți și să testați valorile dvs. First Contentful Paint. Tot ce trebuie să utilizați este instrumentul Google pagespeed. Pur și simplu introduceți adresa URL și una dintre primele valori vă va spune în câteva secunde cât de repede se încarcă site-ul dvs.

Un site web care se încarcă în mai puțin de o secundă în ceea ce privește FCP este clasificat ca rapid, un site web care se încarcă în mai puțin de 3 secunde FCP este cunoscut drept moderat, iar un site web care are o vopsea First Contentful Paint de trei secunde sau mai mult este cunoscut drept lent. După cum puteți vedea, nu există prea multă libertate aici și cu siguranță aveți nevoie de un FCP care este mult mai rapid de 3 secunde pentru a vă clasa bine pe Google.

Vestea bună este că îmbunătățirea First Contentful Paint pe WordPress are mai multe metode acționabile care vor aduce o îmbunătățire imediată și de durată. Majoritatea acestor soluții implică plugin-uri care vor automatiza procesul de optimizare pentru tine, făcând optimizarea FCP pe WordPress mult mai ușoară.

Deci, cu acea introducere FCP din drum, să înțelegem cum putem îmbunătăți această măsură. Chiar dacă aveți un FCP bun, îmbunătățirea acestuia chiar și cu milisecunde ar putea crește experiența utilizatorului și ar putea duce direct la creșterea conversiilor și la o rată de respingere mai mică pe site-ul dvs. WordPress.

Concentrați-vă asupra timpului până la primul octet

Primul și cel mai practic lucru pe care îl puteți face pentru a reduce timpul FCP și a crește acest scor ar fi să vă concentrați pe Time To First Byte. Multe site-uri web au un TTFB foarte lent, sau timpul necesar unui browser pentru a primi prima mușcătură a conținutului paginii web. TTFB este însumarea timpului necesar pentru a primi cererea HTTP, a procesa acea cerere și a timpului de răspuns al solicitării HTTP în sine.

În termeni simpli, dacă site-ul dvs. web durează mai mult decât media pentru a se conecta la server, atunci redarea și descărcarea conținutului vor fi mai lente pentru utilizatorul final, rezultând un FCP mai lent.

FCP este prima măsurătoare care apare, deci este aproape direct legată de TTFB. Cele două modalități principale prin care vă puteți îmbunătăți Time To First Byte pe un site web WordPress, crescând în mod direct scorul First Contentful Paint sunt prin alegerea unei gazdă WordPress rapidă și utilizarea unui CDN de calitate.

Dacă aveți o gazdă WordPress rapidă, datele sunt trimise către browserul vizitatorilor mult mai rapid decât în ​​mod normal, crescând TTFB. Dacă aveți un utilizator care încarcă site-ul web dintr-o locație îndepărtată din punct de vedere geografic în ceea ce privește locația serverului, utilizarea unui CDN care are un nod individual care este fizic mai aproape de utilizatorul final va crește serios TFB-ul dvs. și va duce la o primă mai bună. Scor de vopsea satisfăcută.

Când recomandăm o gazdă WordPress și un CDN bun, spunem întotdeauna că aceasta ar trebui să fie o soluție integrată. Nu ar trebui să cauți un CDN individual și o gazdă WordPress individuală, ci ar trebui să cauți o gazdă WordPress foarte rapidă, care încorporează un CDN în serviciul lor. Acest lucru nu numai că vă va economisi bani, dar va fi mult mai puțin complex și, datorită integrării, probabil mai rapid.

Deci, primul lucru pe care îl puteți face pentru a vă îmbunătăți FCP este să vă uitați la o gazdă bună. Cea mai bună gazdă care are un CDN integrat (întreprindere Cloudflare, care include optimizarea automată a platformei) este Rocket.net.

Aceasta este gazda WordPress pe care am folosit-o pentru a servi blogul nostru pentru aproape 100.000 de vizitatori pe lună și, datorită integrării sale cu un CDN premium și hardware rapid fulger, pentru început, precum și o pagină cache completă, TTFB este incredibil de scăzut, ceea ce înseamnă că FCP-ul nostru nu este restricționat.

Eliminați resursele care blochează randarea

Următorul lucru pe care îl puteți face pentru a minimiza timpul FCP este eliminarea resurselor care blochează randamentul. Resursele de blocare a randării sunt elemente ale unui site web, de obicei CSS și JavaScript, care sunt apelate în timpul procesului de redare a paginii dvs. web.

Deoarece acestea blochează procesul de randare, browserul trebuie să aștepte să afișeze efectiv elemente DOM unui vizitator, să descarce resursa de blocare a randării, să o analizeze și apoi să continue redarea întregii pagini.

Dacă ați presupune că această blocare a randării blochează și elementul First Contentful, acest lucru ar fi corect. Și cu cât aceste resurse blochează mai mult procesul de randare, cu atât este nevoie de mai mult pentru redarea elementului First Contentful, ceea ce duce la un scor FCP mai mare.

Cea mai bună modalitate de a elimina resursele care blochează randarea este utilizarea unui plugin terță parte numit Asset Cleanup pentru a amâna și încărca asincron JavaScript și CSS. Puteți chiar să dezactivați diverse scripturi pe o pagină web în care acestea nu sunt utilizate, minimizând CSS neutilizat, despre care vorbim mai târziu în acest articol.

CSS critic inline

În plus, integrarea CSS critică vă permite să amânați încărcarea foii de stil CSS principale până la sfârșitul procesului de randare. Acest lucru se poate face cu curățarea activelor, dar vă recomandăm și să combinați WP Rocket, care este un plugin de cache și optimizare. Acesta are un generator CSS critic automat și funcționează foarte bine în ceea ce privește eliminarea resurselor care blochează randarea.

Eliminat CSS neutilizat

Următorul, așa cum am făcut aluzie, ar fi eliminarea CSS neutilizate. Dacă încărcați stiluri neutilizate pe o pagină web, acestea pot bloca randarea, dar pur și simplu vă fac pagina mai grea, rezultând mai multe date transferate, rezultând un FCP mai lent.

A scăpa de aceste foi de stil CSS neutilizate este o modalitate excelentă de a minimiza cantitatea de date transferate, degajând calea pentru ca elementul critic First Contentful să fie pictat pe site-ul dvs. Acest lucru afectează direct scorul FC într-un mod benefic.

Pentru a face acest lucru, nu există software automatizat, dar există un plugin care vă ajută să eliminați CSS din pagini individuale și din intervale de pagini. Aceasta este Asset Cleanup, așa cum am menționat mai sus, și vă permite să activați și să dezactivați stilurile și scripturile.

Puteți testa apoi partea frontală a site-ului dvs. web pentru a vedea dacă ceva se defectează și, dacă nu, ați eliminat CSS neutilizat, rezultând o încărcare mai rapidă a site-ului web și un scor FCP mai bun.

Eliminați elementele de script deasupra pliului (precum reclamele JS)

În ceea ce privește structura reală a site-ului dvs., eliminarea elementelor bazate pe script care se află deasupra pliului este o modalitate sigură de a vă îmbunătăți Prima vopsea de conținut a unui site web WordPress. JavaScript poate fi optimizat cât mai mult posibil, dar datorită structurii sale, redarea va fi întotdeauna mai lent decât HTML direct și CSS critic inline.

Deci, dacă aveți JavaScript care ar fi considerat prima vopsea de conținut a unei pagini web (în esență orice situat deasupra pliului sau în fereastra de vizualizare inițială care se încarcă pentru vizitator), cu siguranță doriți să scăpați de el și să-l înlocuiți cu HTML pur.

Aceasta este de obicei o problemă pe site-urile web de conținut care au folosit reclame bazate pe JavaScript, care se încarcă deasupra foldului. Aceste scripturi pot avea, de asemenea, un impact negativ major asupra schimbării de aspect cumulativ.

Înlocuindu-le cu HTML cu încărcare mai rapidă, veți îmbunătăți serios First Contentful Paint, doar datorită naturii tehnologiei HTML și CSS.

Dezactivează Lazy Load Above The Fold (nebun, știu)

Continuând această curățare a oricăror elemente bazate pe JavaScript, dacă încărcați leneș orice imagini care sunt afișate deasupra pliului, veți dori să dezactivați această caracteristică.

Încărcarea leneră a imaginilor este o modalitate excelentă de a crește performanța site-ului dvs. WordPress, dar acestea au de fapt un impact negativ asupra First Contentful Paint, deoarece folosesc biblioteci JavaScript pentru a activa această funcționalitate.

Deci, dezactivați încărcarea leneșă a imaginilor care se încarcă deasupra pliului, dar asigurați-vă că sunt optimizate corespunzător. Aceasta ar include conversia lor în format WebP (utilizați ShortPixel), precum și comprimarea completă a acestora pentru a fi cât mai mici posibil, păstrând claritatea.

Imagini inline (SVG sau Base64)

Dacă doriți să deveniți și mai nebun cu optimizarea imaginii, pentru imagini mai mici care nu au o cerință majoră de rezoluție, puteți continua și le puteți integra. Acest lucru este bun dacă aveți un anumit logo sau o imagine mai mică care se încarcă deasupra pliului. Conversia lor în formate SVG sau de bază 64, aliniați imaginea, reducând o solicitare HTTP suplimentară pentru a le descărca, îmbunătățind FCP.

Rețineți că acest sfat poate fi util doar pentru cazuri de utilizare specifice, iar dacă aveți un server bazat pe HTTP2 sau o imagine incredibil de grea pe care încercați să o aliniați, cel mai bine este să o păstrați așa cum este.

Cu toate acestea, utilizarea SVG și a siglelor de bază 64, a pictogramelor de căutare, a pictogramelor de rețele sociale și a fundalurilor, ar putea fi benefică pentru Prima vopsea de conținut, îmbunătățind scorul site-ului dvs. WordPress pe Google și avantajând clasarea și experiența dvs. de utilizator.

Concentrați-vă pe dimensiunea DOM

Ultimul lucru major pe care îl puteți face este să vă concentrați pe dimensiunea DOM. DOM , sau modelul de obiect document este o structură arborescentă care se referă în esență la fiecare element de pe pagina ta.

Deci, orice div din corp, span wrappers, paragrafe, anteturi, metalinkuri și multe altele ar fi considerate elemente DOM. Cu cât sunt mai multe elemente pe o pagină, cu atât timpul de randare este mai mare și cu atât este mai lentă Prima vopsea de conținut.

Deci, prin reducerea numărului de elemente DOM, veți avea un site web cu încărcare mai rapidă. Acest lucru se poate face prin reconstruirea completă a paginii, fiind cât mai slabă posibil, cu orice elemente plasate în interior, sau prin utilizarea unei noi teme sau a unui nou generator de pagini.

De exemplu, Elementor își împachetează elementele în zeci de div-uri inutile, astfel încât trecerea la un generator de pagini cu un cod mai mic, ar putea minimiza numărul de elemente DOM de pe o pagină, ceea ce duce la un transfer de date mai mic, ceea ce duce la timpi de randare mai rapidi, ceea ce duce la scoruri mai bune pentru First Contentful Paint pe Google.

Concluzie

Deoarece First Contentful Paint este derivat din experiența utilizatorului din lumea reală pe site-ul dvs. WordPress, nu puteți merge cu un activ cu performanțe slabe. În schimb, trebuie să vă adresați primul și să abordați scorurile de vopsea direct, încorporând aceste șase metode în optimizarea dvs., rezultând o experiență mai bună a utilizatorului, o poziție sporită în clasament și o rată de respingere mai mică.

Există multe alte metode pe care le puteți folosi pentru a crește performanța generală a unui site web WordPress, ceea ce va fi, de asemenea, benefic pentru Prima vopsea de conținut, dar aceste șase metode sunt cea mai bună modalitate de a vă crește primul în vopsea pentru templu pe un site web WordPress. Dacă aveți recomandări suplimentare de optimizare, nu ezitați să le lăsați în secțiunea de comentarii de mai jos.