10 Moduri Să Îmbunătăți First Contentful Paint (FCP)
La începutul anului 2019, Google anunța că va evalua clasarea rapidă a unui site web concentrându-se pe două valori de performanță: First Contentful Paint (FCP) și First Input Delay (FID).
De-a lungul timpului, scenariul de performanță a evoluat. De exemplu, Google a anunțat cele trei elemente Core Web Vitals: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) și First Input Delay (FID).
Cu toate acestea, prima metrică First Contentful Paint a continuat să joace un rol important ca metrica Lighthouse (și experiența utilizatorului). Acesta reprezintă 10% din scorul general de performanță.
Site-ul dvs. web se poate încărca sub 2 secunde într-un test de viteză, dar dacă nu este cazul pentru majoritatea publicului dvs., atunci Google vă va penaliza în continuare.
În acest articol, veți afla ce este FCP și de ce este important. În continuare, vom trece la diferite moduri în care puteți îmbunătăți First Contentful Paint pe site-ul dvs. WordPress.
Sună incitant? Hai să vedem cum!
Ce este First Contentful Paint (FCP)?
First Contentful Paint (FCP) este un indicator centrat pe utilizator pentru măsurarea vitezei percepute de încărcare a paginii. FCP măsoară modul în care utilizatorii percep performanța unui site web, mai degrabă decât ceea ce măsoară un instrument de testare a vitezei.
First Contentful Paint diferă de First Paint, care este un punct din cronologia de încărcare a paginii în care este detectat orice tip de randare în browser. Pe de altă parte, FCP necesită redarea unui anumit conținut. Acest conținut ar putea fi text, imagini (inclusiv imagini de fundal, sigle) sau elemente <canvas> care nu sunt albe.
First Contentful Paint diferă de Largest Contentful Paint (LCP), unul dintre elementele vitale de bază care măsoară cât durează până când cel mai mare element devine vizibil în fereastra de vizualizare.
Pentru a simplifica acest lucru, vă puteți gândi la FCP ca la timpul necesar utilizatorului pentru a vedea orice conținut din browserul său. Astfel, un FCP rapid îl asigură pe utilizator că se întâmplă ceva și îl menține lipit de site.
Cum se măsoară FCP?
FCP poate fi măsurat prin teste de laborator și experiență de utilizare reală (date de teren). Iată câteva instrumente pe care le puteți utiliza pentru a măsura FCP:
- Lighthouse
- WebPageTest
- Chrome DevTools
- PageSpeed Insights
- Chrome User Experience Report
- Firebase Performance Monitoring (beta)
Google măsoară 75% din încărcarea paginilor de pe site-ul dvs., segmentate atât pe dispozitivele mobile, cât și pe cele desktop. Acest lucru asigură o reprezentare exactă a experienței utilizatorului.
Vrei să afli mai multe despre Lighthouse? Citiți articolul nostru despre cum să vă îmbunătățiți scorul de performanță (inclusiv nota FCP)!
Care Este un Scor Bun FCP?
Conform Google, FCP ar trebui să aibă loc în 1,8 secunde sau mai puțin. Aceasta oferă o bună experiență de utilizare vizitatorilor site-ului dvs.
Dacă FCP-ul site-ului dvs. durează peste 3 secunde, este considerat lent. Potrivit cercetărilor, peste 53% dintre utilizatorii de telefonie mobilă părăsesc un site dacă durează 3+ secunde pentru încărcare. Luați această valoare în serios.
Cum să Îmbunătățiți First Contentful Paint (FCP) în WordPress
Acum că am abordat ce este First Contentful Paint (FCP) și de ce este important, iată câteva modalități de a accelera FCP-ul site-ului dvs. WordPress prin reducerea timpului său:
1.Reduceți Server Response Time (TTFB)
Timpul de răspuns al serverului sau Time to First Byte (TTFB) este timpul necesar unui browser pentru a primi primul octet de conținut al paginii web.
FCP depinde de mai mult decât de TTFB, dar este primul pas pentru a ajunge acolo.
FCP = TTFB + Timp de încărcare a conținutului + Timp de redare
Deoarece FCP este foarte dependent de TTFB, este cel mai important factor pe care trebuie să-l optimizați pentru a îmbunătăți FCP.
Există multe modalități de a reduce TTFB în WordPress. După cum este detaliat în articol, cele mai simple trei modalități de a reduce TTFB sunt:
Alegeți un furnizor de găzduire rapidă
Puteți consulta articolul WP Rocket despre găzduirea web pentru a cunoaște factorii pe care trebuie să îi luați în considerare pentru a alege o soluție excelentă de găzduire web. În mod ideal, alegeți o gazdă cu servere situate aproape de utilizatorii dvs.
Utilizați un CDN de calitate
Un CDN de calitate vă poate ajuta să accelerați livrarea resurselor statice ale site-ului dvs., cum ar fi imagini, videoclipuri și scripturi. Acest lucru va reduce semnificativ latența rețelei dintre serverul dvs. și utilizatorii dvs. Pentru mai multe informații despre cum să alegeți cel mai bun CDN pentru site-ul dvs. web, consultați ghidul CDN al WP Rocket.
Activați cache-ul pentru site-ul dvs. web
Memorarea în cache ajută la reducerea TTFB prin scăderea timpului de procesare a serverului. Majoritatea furnizorilor de găzduire WordPress de top gestionează activarea cache-ului la nivel de server, așa că verificați la ei pentru a vedea ce oferă.
Dacă doriți să mergeți mai departe, WP Rocket se integrează cu WordPress pe toate tipurile de gazde pentru a vă accelera site-ul.
2.Eliminați resursele de blocare a redării
O pagină web este redată de browser după asamblarea multor elemente precum HTML, foi de stil CSS, scripturi JavaScript și importuri HTML.
Un document HTML în sine include diverse etichete, dar toate sunt analizate rapid de majoritatea browserelor. Dar nu este cazul analizei CSS și JS.
De obicei, browserul va încerca mai întâi să descarce toate elementele paginii web, să le analizeze pe toate și apoi să redea pagina web. Cel mai adesea, dimensiunea documentelor HTML este mult mai mică în comparație cu cea a foilor de stil CSS și a scripturilor JS. Numărul resurselor CSS și JS este pe partea superioară.
Deci, atunci când utilizatorul solicită o pagină web, browserul ar fi primit deja conținutul HTML, dar va aștepta în continuare încărcarea tuturor celorlalte resurse înainte de a reda pagina. Prin urmare, acestea sunt numite resurse de blocare a redării.
Acest comportament reduce considerabil FCP. Prin urmare, pentru a îmbunătăți FCP, trebuie să eliminați aceste resurse de blocare a redării. Puteți face acest lucru prin următoarele moduri:
Resurse critice în linie
Mai întâi, identificați scripturile și stilurile critice care sunt necesare pentru a reda FCP-ul paginii dvs. web. Iată un ghid simplu de la Google cu privire la modul de identificare a resurselor critice.
După ce ați identificat scripturile critice, trebuie să le eliminați din resursa de blocare a redării și apoi să le introduceți în pagina HTML cu etichete <script> și <style>.
Procedând astfel, vă veți asigura că pagina web va avea tot ce este necesar pentru a-și gestiona funcționalitatea de bază atunci când se încarcă.
Amânați resursele non-critice
Pentru resursele non-critice, trebuie să marcați adresele URL cu atribute asincronizate sau de amânare.
Vă recomandăm să adăugați atributul de amânare la adresele URL ale scripturilor non-critice. Aceasta direcționează browserul să execute fișierul script numai după ce documentul HTML a fost analizat complet.
Iată cum puteți amâna un fișier script:
<script defer src="https://comunitateawordpress.club/path/to/file/1234/script.js"></script>
Pentru foile de stil non-critice, este recomandat să aveți un atribut asincron adăugat la adresa URL. Aceasta îi spune browserului să încarce stilurile în mod asincron în timp ce restul elementelor de pagină continuă să se încarce neîntrerupt.
Deoarece foile de stil sunt încărcate cu eticheta <link>, nu există nicio modalitate directă de a le aplica atributul asincronizat. Dar există o soluție și iată cum o puteți implementa:
<!-- Setting “media” type as ‘print’ forces the browser to load the stylesheet asynchronously. On full page load, the media type is changed to ‘all’ so that the stylesheet gets applied. --> <link rel="stylesheet" href="style.css" media="print" onload="this.media='all'"> <!-- Fallback for when JavaScript is disabled, but in this case CSS can’t be loaded asynchronously. --> <noscript><link rel="stylesheet" href="style.css"></noscript>
Eliminați orice neutilizat
În timp ce identificați resursele critice, este posibil să găsiți cod care nu este utilizat pe pagina web. Eliminarea oricărui cod neutilizat – cum ar fi eliminarea JavaScript neutilizat – vă va ajuta să vă optimizați și mai mult pagina web.
Dacă nu vă simțiți confortabil cu codul, WP Rocket este cel mai simplu mod de a amâna fișierele JavaScript non-critice cu doar câteva clicuri.
De asemenea, puteți optimiza livrarea CSS cu WP Rocket pentru a elimina foile de stil care blochează redarea. Următorul punct acoperă această caracteristică.
3.Generați calea critică CSS și Încorporați-l
Dacă ați setat CSS să se încarce asincron, browserul va afișa utilizatorilor conținut nestilat înainte de încărcarea stilurilor necesare. Acest comportament este cunoscut sub numele de Flash of Unstyled Content (FOUC) și este o experiență neplăcută pentru utilizatori.
Pentru a preveni FOUC, trebuie să generați Critical Path CSS și să îl introduceți direct în fișierul HTML.
Dar ce este mai exact Calea critică CSS?
Critical Path CSS este CSS-ul minim necesar pentru a afișa utilizatorului prima parte a unei pagini web (de mai sus).
Analizarea manuală a căii critice de redare a browserului și apoi generarea pentru calea CSS critică este un proces obositor. Nu-l vom dezbate în acest articol.
Cu toate acestea, puteți utiliza instrumente online gratuite, cum ar fi Pegasaas, pentru a genera CSS Critical Path. Funcționează perfect pentru majoritatea cazurilor de utilizare. Pentru mai multe, consultați Google: Analizând performanța critică a căii de redare.
După ce ați generat Calea critică CSS, trebuie să îl introduceți în documentul HTML. Browserul poate reda imediat prima parte a paginii web fără a aștepta ca foile de stil CSS să fie încărcate asincron. Acest lucru îmbunătățește considerabil FCP.
Alternativ, puteți utiliza WP Rocket pentru a automatiza acest proces.
Activarea setării Optimizați livrarea CSS în WP Rocket va genera calea CSS critică pentru toate tipurile de pagini WordPress și le va încorpora. Și dacă se întâmplă să faceți personalizări sau să vă schimbați tema, acesta va actualiza automat și calea CSS critică.
Pentru mai multe detalii, puteți citi modul în care WP Rocket gestionează Critical CSS.
4.Evitați elementele bazate pe scripturi de mai sus
Indiferent cât de bine optimizați JavaScript, este încă mai lent în comparație cu procesarea HTML simplu. Orice lucru care necesită JS poate avea un impact negativ asupra First Contentful Paint (FCP).
Deși puteți introduce scripturile critice, acestea trebuie totuși încărcate și analizate. Când vine vorba de îmbunătățirea FCP, fiecare milisecundă contează. Este un timp prețios de încărcare care vă afectează scorul FCP.
Multe teme includ elemente fanteziste, ca cea de mai sus care utilizează o mulțime de scripturi. Același lucru este valabil și pentru utilizarea constructorilor de pagini care adaugă o mulțime de stiluri și scripturi inutile. Prin urmare, alegeți tematica site-ului dvs. cu înțelepciune. Folosirea unei teme rapide, bine codificate, precum GeneratePress sau Astra poate ajuta la reducerea considerabilă a FCP.
Ca regulă generală, încercați să evitați utilizarea acestor elemente de-a lungul paginii în site-ul dvs. web:
- Animații grele de orice fel
- Pluginuri pentru Slidere
- Social media sau pluginuri de partajare
- Mega pluginuri de meniu
- Încorporări precum Google Ads
5.Evitați Lazy Loading a imaginilor de sus
Lazy Loading a imaginilor este unul dintre cele mai simple moduri de a vă accelera site-ul, mai ales dacă aveți un site plin de imagini.
Din punct de vedere tehnic, Lazy Loading este un script care diferă încărcarea de imagini și cadre care nu sunt încă vizibile în fereastra de vizualizare a browserului. Când utilizatorul derulează în jos, imaginile se vor încărca pe măsură ce vor fi vizualizate.
Deoarece lazy loading necesită utilizarea JavaScript înainte ca browserul să poată reda orice imagini, vă poate întârzia FCP-ul.
Prin urmare, trebuie să excludeți de la lazy loading imaginile prezente deasupra paginii.
Majoritatea pluginurilor populare de lazy loading includ deja această caracteristică. În mod ideal, căutați un plugin de lazy loading care vă permite să excludeți imagini nu doar după numele fișierelor, ci și alte etichete, cum ar fi clasa, id-ul, atributul sau imaginile dintr-un anumit domeniu.
WP Rocket acceptă dezactivarea lazy loading pe anumite imagini. Îl puteți dezactiva pentru o imagine, o clasă de imagine, în funcție de sursa imaginii și chiar avatare.
Lazy loading a imaginilor a fost adăugată la nucleul WordPress și a devenit o caracteristică nativă începând cu WordPress 5.5. De asemenea, acceptă filtre pentru a personaliza comportamentul de Lazy loading.
6.Imagini esențiale în linie
HTML și CSS vă oferă o modalitate de a încorpora imagini utilizând formatele Base64 sau SVG. Acestea se numesc URI-uri de date.
Prin includerea tuturor imaginilor de mai sus, browserul nu trebuie să facă cereri HTTP suplimentare pentru a le descărca. Acest lucru poate ajuta la îmbunătățirea FCP.
Unele dintre cele mai frecvente imagini de mai sus pe care le puteți introduce sunt:
- Logo
- Pictograme (căutare, rețele sociale etc.)
- Imagine banner
- Fundal
Ce sunt imaginile Base64 și SVG?
Base64 este un algoritm de codificare care convertește orice tip de date, inclusiv imagini, în text. Puteți încorpora imagini codificate Base64 direct în fișiere HTML sau CSS. Este o modalitate excelentă de a accelera timpul de încărcare pentru imagini mai mici.
Base64 Image Encoder este un instrument gratuit excelent pentru a converti orice format de imagine în Base64. Suportă formate de imagine JPEG, PNG, WebP, SVG și BMP.
Adăugarea imaginilor codificate Base64 în HTML:
<img src="data:image/jpeg;base64,/uj/…[content]..." width="100" height="50" alt="this is a base64 image">
De asemenea, puteți utiliza imagini codificate Base64 în CSS:
.custom-class {
background: url('data:image/jpeg;base64,/9j/…[content]...');
}Scalable Vector Graphics (SVG) este un format de imagine pentru grafica vectorială. Imaginile SVG au dimensiuni mai mici de fișiere, se redimensionează la orice dimensiune fără a pierde calitatea și arată excelent pe toate dispozitivele. Dacă imaginea dvs. are forme, curbe și contururi simple (de exemplu, sigle și pictograme), atunci cu siguranță poate fi salvată ca SVG.
Utilizarea unei imagini SVG ca sursă în interiorul unei etichete
Iată cum puteți introduce SVG-uri în HTML:
<body> <!-- Insert SVG code here, and the image will show up! --> <svg xmlns="http://www.w3.org/2000/svg"> <circle cx='50' cy='25' r='20'/> </svg> </body>
Este o idee bună să comprimați sau să reduceți (dacă este SVG) imaginile înainte de a le insera. Dacă imaginile dvs. sunt în format raster (JPEG sau PNG), utilizați Base64. Dacă pot fi convertite în format vector, atunci utilizați SVG.
Oriunde puteți utiliza o adresă URL ca sursă pentru imagine, puteți lipi acolo imaginea codificată Base64.
Dacă imagini sau pictograme sunt codificate în interiorul temei sau al pluginurilor, trebuie să le găsiți manual și să înlocuiți adresele URL sursă cu imagini inlined. Un plugin precum Căutare și Înlocuire vă poate ajuta să realizați acest lucru cu ușurință.
Există mai multe dezavantaje ale imaginilor inlining:
- Crește dimensiunea imaginilor (de obicei cu 30%).
- Crește dimensiunea paginii și, astfel, TTFB.
- Imaginile încorporate nu pot fi livrate prin CDN.
Din experiența noastră, dacă puteți păstra dimensiunea paginii sub 100 KB, imaginile inlining nu reprezintă o problemă. Orice altceva care vă poate afecta TTFB vă poate afecta FCP-ul mai mult decât se îmbunătățește.
De asemenea, dacă utilizați ceva de genul Cloudflare pentru a vă servi site-ul web, îl puteți configura pentru a memora în cache resurse HTML. Activarea acestei funcții este recomandată dacă și numai dacă conținutul site-ului dvs. este în mare parte static.
7.Optimizați dimensiunea DOM a Site-ului dvs.
Modelul de obiecte document (DOM) este o reprezentare a tuturor obiectelor care alcătuiesc o pagină web. Grafic, este reprezentat ca un copac cu noduri și obiecte ramificate.
Reprezentarea structurată a DOM facilitează modificarea elementelor sale cu un limbaj de scriptare precum JavaScript.
Toate elementele HTML dintr-un arbore DOM se numesc noduri. Nodurile se pot ramifica în mai multe elemente, toate putând ramifica în continuare și așa mai departe. Cât de adânc se ramifică se numește adâncimea nodului. Adâncimea nodului întregului arbore DOM se numește adâncimea arborelui. Toate elementele de ramificare imediate ale unui nod se numesc elemente copil.
A avea un arbore DOM mare poate avea un impact negativ asupra First Contentful Paint (FCP) din mai multe motive:
- Un arbore DOM neoptimizat include multe noduri care nu sunt vizibile pentru utilizator în etapele inițiale de încărcare a paginii.
- O dimensiune DOM mare înseamnă mai mult timp de procesare pentru a calcula și stiliza toate nodurile, ambele putând încetini redarea.
- Un arbore DOM mare poate să copleșească performanța de memorie a dispozitivelor utilizatorului.
Google semnalează paginile web cu arbori DOM care au:
- Peste 1.500 de noduri în total
- Adâncime mai mare de 32 de noduri
- Un nod părinte cu peste 60 de noduri copil.
Cum se reduce dimensiunea DOM?
În general, trebuie să creați noduri DOM numai atunci când este necesar și să distrugeți nodurile care nu sunt necesare. Cu toate acestea, acest sfat nu se aplică majorității site-urilor WordPress, deoarece crearea DOM-ului este de obicei realizată de teme, plugin-uri, constructori de pagini și de nucleul WordPress în sine.
Iată câteva sfaturi pentru a vă ajuta să reduceți dimensiunea DOM:
- Împărțiți paginile mari în altele mai mici.
- Lazy load cât mai multe elemente HTML posibil și nu doar imagini.
- Paginați comentariile, postările, produsele etc.
- Limitați numărul de postări afișate în pagina dvs. de pornire și în paginile de arhivă.
- Nu ascundeți conținutul nedorit utilizând CSS. În schimb, îndepărtați-l cu totul.
- Evitați să folosiți generatori de pagini umflate care inserează etichete <div> inutile.
- Alegeți teme bine optimizate (de exemplu, GeneratePress sau Astra).
Nu utilizați pluginuri care adaugă prea multe etichete <div> (de exemplu, pluginuri de Mega meniu).
8.Asigurați-vă că textul rămâne vizibil în timpul încărcării Webfont
Fonturile sunt de obicei fișiere mari și necesită mult timp pentru încărcare. Este posibil să fi întâlnit o astfel de eroare în Lighthouse:
Există un motiv pentru care Google semnalează acest comportament. Unele browsere nu vor reda text până când nu sunt încărcate toate fonturile. Acest lucru cauzează ceea ce este cunoscut sub numele de Flash of Invisible Text (FOIT).
Puteți remedia acest lucru forțând browserul să afișeze temporar un font de sistem în timp ce se încarcă fonturile personalizate. Doar adăugați font-display: swap @font-face pentru a evita FOIT în aproape toate browserele moderne.
Iată un exemplu despre cum puteți aplica acest lucru:
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.sample.com/pacifico.woff2) format('woff2');
font-display: swap;
}Dacă importați fonturi direct dintr-un CDN (de exemplu, Google Fonts), puteți realiza același lucru adăugând parametrul &display=swap la sfârșitul adresei URL.
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
9.Utilizați indicii pentru resurse
Când un utilizator vizitează un site web, browserul solicită documentul HTML de la server, îl analizează, trimite cereri separate pentru orice alte resurse la care se face referire și după încărcarea și analizarea tuturor, redă pagina web.
În calitate de dezvoltator, știți ce resurse sunt cele mai importante pentru site-ul dvs. Cu aceste cunoștințe, puteți seta resursele critice pentru a le încărca din timp și a accelera încărcarea paginii. Sfaturile pentru resurse pentru browser sunt cum puteți realiza acest lucru.
Unele indicii privind resursele se aplică resurselor de pe pagina curentă, în timp ce altele se aplică posibilelor pagini viitoare. Toate sugestiile de resurse utilizează atributul rel al etichetei <link> pentru a activa.
DNS Prefetching
Dacă încărcați orice material de pe un site web extern, adăugând parametrul dns-prefetch îi va spune browserului să rezolve DNS-ul adresei URL cât mai repede posibil.
Iată cum adăugați preluarea DNS la resurse:
<link rel="dns-prefetch" href="//external-website.com">
WP Rocket facilitează adăugarea tuturor domeniilor externe la prefetched.
Dacă utilizați o mulțime de coduri de la terți, adăugarea parametrului dns-prefetch este foarte utilă pentru a accelera încărcarea paginii. Puteți utiliza gratuit Prefetch! instrument online pentru a afla ce domenii externe puteți adăuga la lista de preluare.
Preconectare
Preconnect funcționează la fel ca DNS prefetching, cu excepția faptului că nu se oprește doar la rezolvarea DNS-ului. De asemenea, va continua și va stabili strângerea de mână TCP și negocierea TLS (dacă există).
Poate fi folosit astfel:
<link rel="preconnect" href="https://exemplu.ro">
Rețineți că pre-conectarea poate ocupa timp prețios de procesare, în special pentru conexiuni sigure.
Prefetch
Dacă sunteți sigur că o resursă va fi utilizată în viitor, atunci puteți sugera browserului să o preia imediat și să o stocheze în browser. Spre deosebire de DNS prefetching, aici îi spuneți browserului să înceapă imediat încărcarea resursei.
Iată cum puteți direcționa browserul să preia o resursă:
<link rel="prefetch" href="scripts.js">
Prefetching poate fi ignorată de browser dacă fișierul solicitat este prea mare sau viteza rețelei este lentă. De exemplu, Firefox prefixează resursele numai atunci când browserul este inactiv.
Prerender
Acesta este cel mai puternic indiciu de resurse. Adăugarea parametrului prerender la o resursă obligă browserul să-și încarce toate activele, să le analizeze, să creeze un arbore DOM, să aplice stiluri, să execute scripturi, să redea pagina web și să o mențină pregătită pentru a fi difuzată. Dacă vizitați mai târziu adresa URL menționată în href, pagina va fi încărcată instantaneu.
Acesta este modul în care prerenderizați o resursă:
<link rel="prerender" href="https://exemplu.ro/next-page">
Redirecționarea paginii dvs. principale de destinație este o modalitate excelentă de a genera conversii.
Preîncărcați
Spre deosebire de prefetching, care acționează mai mult ca o sugestie pentru browser, sugestia de resursă de preîncărcare îl direcționează pe browser pentru a încărca activele, indiferent de ceea ce crede. Browserul nu poate ignora directiva de preîncărcare.
<head> ... <link rel="preload" href="styles.css" as="style"> <link rel="preload" href="ui.js" as="script"> ... </head>
Cu cât browserul începe mai devreme să solicite linkurile de preîncărcare declarate, cu atât paginile dvs. se pot încărca mai repede.
Indiciile referitoare la resurse nu vor ajuta prea mult atunci când un utilizator vă vizitează site-ul web pentru prima dată. Dar fiecare pagină ulterioară pe care o vizitează se va reda semnificativ mai rapid. Întrucât Google folosește date reale de utilizare pentru a evalua clasarea rapidă a unui site web, indicii privind resursele vor ajuta la îmbunătățirea First Contentful Paint (FCP) a site-ului dvs.
Cu WP Rocket, puteți aplica preîncărcarea și preluarea DNS la orice resursă de pe paginile dvs. web destul de ușor. Alternativ, puteți utiliza un plugin gratuit, cum ar fi Pre * Party Resource Hints, pentru a activa sugestii de resurse manual pe site-ul dvs. WordPress.
10.Evitați redirecționările de pagini multiple
Când vizitați o adresă URL care a fost redirecționată către o altă adresă URL, serverul va returna un răspuns de cod de stare de redirecționare HTTP 301. Va arăta cam așa în consola browserului:
HTTP/1.1 301 Moved Permanently Location: /url/to/new/location
Un răspuns de redirecționare forțează browserul să facă o altă cerere HTTP către noua locație. De obicei, aceasta întârzie încărcarea paginii web cu sute de milisecunde.
Dacă pagina dvs. are mai multe redirecționări, vă poate încetini considerabil First Contentful Paint (FCP).
Lighthouse semnalizează paginile care au două sau mai multe redirecționări.
Pentru a evita redirecționările multiple, îndreptați resursele marcate direct către destinația finală. În plus, dacă o resursă face parte din calea de redare critică a paginii dvs., eliminați cu totul orice redirecționări care provin din aceasta.
Concluzie
Îmbunătățirea First Contentful Paint nu mai este o alegere, ci o necesitate. Alături de cele trei valori Web Core Vitals, un FCP mai rapid duce la o experiență mai bună a utilizatorului și îmbunătățește scorul dvs. PageSpeed.
Și lucruri mai bune vin în curând! Google intenționează să introducă o altă valoare a performanței centrată pe utilizator, numită First Signful Paint (FMP). În timp ce FCP măsoară timpul de redare pentru orice conținut (de exemplu, sigle, sloganuri, imagini de fundal), FMP va fi declanșat numai după încărcarea conținutului dorit de utilizator (de exemplu, titluri, imagini de copertă, textul corpului). FMP nu a fost încă standardizat, dar puteți afla mai multe despre el aici.
În această postare, ați învățat cum să îmbunătățiți First Contentful Paint în WordPress folosind diverse tehnici. Uneori, poate fi copleșitor să înțelegem tot jargonul tehnic și să îl aplicăm perfect. Din fericire, un furnizor rapid de găzduire și un plugin excelent de performanță, cum ar fi WP Rocket, vă pot ajuta să obțineți un scor FCP bun chiar din setările default.
Economisiți timp și lăsați-l pe WP Rocket să facă treaba pentru dvs. WP Rocket va aplica automat 80% din cele mai bune practici de performanță web. Nici măcar nu trebuie să efectuați o setare. Veți vedea o îmbunătățire instantanee a vitezei și a scorului dvs. PageSpeed imediat – nu sunt necesare cunoștințe tehnice, garantat!
