Cum să măsurați și să optimizați cea mai mare vopsea de conținut pentru o UX superioară

Când vine vorba de succesul online, există multe modalități de a face acest lucru. O experiență optimizată a utilizatorului este un astfel de mod. Google va folosi diferite experiențe ale utilizatorilor și valori asociate pentru a clasifica site-urile web pentru SEO. A continuat să producă mai multe instrumente pentru a îmbunătăți performanța web. Vom arunca o privire la câteva dintre modalitățile prin care Google încearcă să îmbunătățească experiența utilizatorului mai jos.

Ce este Google Core Web Vitals?

În încercarea sa recentă de a modifica măsura și înțelegerea a ceea ce se califică drept experiență decentă a utilizatorului, Google a reglementat valorile paginii. Aceste valori standardizate sunt denumite elemente vitale web de bază și facilitează evaluările expertizei utilizatorilor din lumea reală pe site-ul dvs.

Ce este cea mai mare vopsea satisfăcătoare?

Pentru început, să ne uităm la Largest Contentful Paint (LCP). Este una dintre valorile vitale web de bază. Măsoară timpul de încărcare a celei mai mari componente de conținut din fereastra de vizualizare pe măsură ce devine vizibilă. Valorile alternative precum TTFB și First Contentful Paint facilitează împreună experiența paginii live, ele nu sunt prezente odată ce pagina a devenit „semnificativă” pentru utilizator.

De obicei, cu excepția cazului în care cea mai importantă componentă a paginii devine complet vizibilă, pagina s-ar putea să nu ofere suficient context pentru utilizator. LCP este, prin urmare, reprezentativ pentru așteptările utilizatorului. Fiind o valoare vitală web de bază, LCP reprezintă douăzeci și cinci la sută din Scorul de performanță, motiv pentru care este una dintre cele mai importante valori de optimizat.

Verificarea timpului LCP

Conform Google, categoriile de piese gândite pentru cea mai mare vopsea cu conținut maxim sunt:

• elemente <img>
• elemente <image> în interiorul unui element <svg>
• Elemente <video> (imaginea poster utilizată)
• Un element cu o imagine de fundal încărcată prin funcția URL
• Elemente la nivel de bloc care conțin noduri de text și/sau alte elemente de text la nivel de linie

Cum se măsoară LCP?

Desigur, există mai multe moduri de a măsura LCP-ul paginii dvs. web. Cel mai simplu mod de a face acest lucru este folosind una dintre platformele disponibile, care include Lighthouse, PageSpeed ​​Insights, Search Console, precum și Chrome User Experience Report. De exemplu, Google PageSpeed ​​Insights în raportul său indică componenta pentru calcularea LCP.

Ce este un LCP bun?

Pentru a oferi utilizatorilor expertiză decentă, trebuie să încercați să mențineți un LCP de 2,5 secunde sau mai puțin pe site-ul dvs. Majoritatea încărcărilor paginii dvs. ar trebui să aibă loc sub acest prag. Acum că știm cu toții ce sunt LCP-urile și care ar trebui să fie ținta noastră, să examinăm modalități de îmbunătățire a LCP.

(Vă rugăm să adăugați imaginea numită Majoritatea paginilor trebuie să se încarce la un LCP de 2,5 secunde sau mai mic.jpg)

Cum să optimizați cea mai mare vopsea cu conținut maxim (LCP)

Sistemul de bază al reducerii totale a LCP este reducerea datelor descărcate pe dispozitivul utilizatorului și reducerea timpului necesar pentru a gestiona acel conținut și a asigura o experiență perfectă pentru utilizator.

Optimizați-vă imaginile

Pe majoritatea site-urilor, conținutul de deasupra paginii conține de obicei o imagine supradimensionată, necesară pentru LCP. Poate fi o imagine de erou, un carusel sau un banner. Trebuie să optimizați aceste imagini pentru un LCP mai robust.

Pentru a vă optimiza imaginile, trebuie să utilizați un CDN de imagine terță parte, cum ar fi ImageKit.io. Avantajul utilizării unui CDN de imagine terță parte este că pur și simplu vă vizați afacerea reală și lăsați optimizarea imaginii în seama CDN-ului imaginii.

Transformări în timp real pentru imagini receptive

Google folosește compartimentarea în primul rând pe mobil pentru aproape toate site-urile. Acesta este motivul pentru care este necesară optimizarea LCP pentru mobil pe desktop. Fiecare imagine trebuie redusă până la cererea aspectului.

De exemplu, doriți ca imaginea să aibă o dimensiune mai mică pe pagina de listare și o dimensiune mai mare pe pagina cu detaliile produsului. Această redimensionare asigură că nu se pare că utilizați octeți suplimentari decât ceea ce este necesar pentru pagina respectivă.

Memorați imaginile în cache și îmbunătățiți timpul de livrare

CDN-urile pentru imagini folosesc Content Delivery Network (CDN) pentru a livra fotografiile. Utilizarea unui CDN asigură că imaginile se încarcă dintr-o locație din apropiere, mai degrabă decât dintr-un server care poate fi la jumătatea lumii.

Preîncărcați resursele esențiale

Există cazuri în care browserul ar putea să nu încarce o imagine vizuală dacă afectează LCP. De exemplu, o imagine banner în partea de sus a pliului poate fi văzută ca o imagine de fundal într-un fișier CSS. Deoarece browserul nu știe acest lucru despre imagine până când fișierul CSS nu este descărcat, nu îl va încărca.

Acum, dacă vă întrebați „Cum preîncarc cea mai mare imagine de vopsea Contentful?”, răspunsul este simplu. Veți putea să le preîncărcați folosind o etichetă cu atributul rel= „preload” în secțiunea de sus a documentului dvs. de limbaj de marcare hipertext.

Deși veți putea preîncărca mai multe resurse într-un document, trebuie să le limitați la imagini sau videoclipuri de deasupra paginii, fișiere cu fonturi la nivel de pagină sau fișiere esențiale CSS și JS.

Reduceți timpii de răspuns ale serverului

Dacă serverul dvs. durează mai mult pentru a încărca decât ceea ce este considerat normal, atunci timpul necesar pentru a încărca pagina de pe ecran crește. Afectează negativ fiecare valoare a vitezei paginii, împreună cu LCP. Pentru a îmbunătăți timpul de răspuns al serverului, puteți:

• Analizați și optimizați-vă serverele
• Utilizați o rețea de livrare de conținut
• Preconectează-te la origini terță parte
• Serviți mai întâi cache de conținut cu un lucrător de servicii
• Comprimați fișierele text

Îmbunătățiți timpul de răspuns al dispozitivului client

Dacă pagina ta durează mult să se încarce, poate fi dezamăgitoare pentru potențialii clienți. Din fericire, există câteva lucruri pe care le puteți face pentru a vă asigura că se încarcă corect și creează o experiență de utilizator fără întreruperi. Aceasta include:

• Inlineing CSS esențial
• Minimizarea și apăsarea conținutului
• Optimizarea LCP pentru randarea pe partea clientului
• Utilizarea redării pe server
• Utilizarea pre-randarii

LCP a devenit un factor important de clasare în căutare, care se corelează puternic cu experiența și călătoria utilizatorului. Prin urmare, dacă conduceți o afacere web, trebuie să optimizați aceste componente pentru a asigura succesul demersului.

Biografia autorului

Ghia Marnewick este scriitoare, social media manager și digital manager. Ea scrie conținut pentru Aumcore și este pasionată de a găsi noi modalități de a împărtăși informații cu lumea.