Cum să vă îmbunătățiți scorurile Google Core Web Vitals?

(23 august 2020)

Era următoare privind performanța paginii web

Au trecut câteva luni de când lucrez cu privire la strategiile de îmbunătățire a performanței paginii web pe site-urile deținute de compania mea și, sincer, este o lucrare cu adevărat interesantă de împărtășit cu voi.

Înțeleg că lucrul la performanța paginii web nu este o noutate lucrurile și oamenii au venit cu o mulțime de idei și trucuri pentru a crește viteza de încărcare a paginii. Dar acum se pare că asta nu mai este suficient și trebuie să treci la nivelul următor !!

ar trebui să știți despre importanța SEO (Search Engine Optimization) și de a scoate la iveală rezultatele paginii dvs. web nu numai pe prima pagină a rezultatelor Google, ci în partea de sus a aceleiași pagini este într-adevăr o afacere grozavă! Poveste lungă scurtă – permiteți-mi să vă garantez că, în continuare, Google Core Web Vitals va fi unul dintre cei mai mari contribuabili la clasarea SEO a rezultatelor căutării Google.

Scurt & Explicații simple despre Google Core Web Vitals

Core Web Vitals, introdus în primul trimestru al acestui an, reprezintă un set de valori legate de viteză, capacitate de reacție și stabilitate vizuală a paginii dvs. web.

Google le-a definit ca elemente vitale web principale:

  • Cea mai mare pictură conținută : timpul necesar încărcării conținutului principal al unei pagini. O măsurare LCP ideală este 2,5 secunde sau mai rapidă.
  • First Input Delay : timpul necesar unei pagini pentru a deveni interactivă. O măsurare ideală este mai mică de 100 ms .
  • Shift Cumulative Layout : Cantitatea de schimbare neașteptată a aspectului conținutului vizual al paginii. O măsurare ideală este mai mică de 0,1 .

Acest set de valori a fost conceput pentru a ajutați proprietarii de site-uri să măsoare experiența utilizatorului pe care o oferă atunci când vine vorba de încărcare, interactivitate și stabilitate vizuală.

În general, în continuare performanța paginii dvs. va fi clasificată după cum urmează.

Lista completă a valorilor luate în considerare pentru valorile performanței paginii.

Următoarea secțiune vorbește practic despre ideile sau metodele de îmbunătățire a performanței de încărcare a paginii și a scorurilor CWV.

Sfaturi pentru îmbunătățirea scorurilor dvs. de bază Web Vitals

Mai jos sunt câteva metode care m-a ajutat să-mi îmbunătățesc drastic scorurile Core Web Vitals, precum și să îmbunătățesc și performanța generală a paginii.

  1. Utilizați în mod eficient cache-ul pentru browser și CDN (îmbunătățește FID și LCP)
    Aceasta este o aplicație foarte simplă ch pentru a vă îmbunătăți scorurile FID și LCP. Asigurați-vă că activele statice sunt difuzate de pe un CDN (dacă este AWS, îl puteți cache în Cloudfront). Astfel, acest lucru are ca rezultat accesarea rapidă a resurselor în browserele dvs. Pentru a îmbunătăți cea de-a doua încărcare, asigurați-vă că activele care au ajuns în partea clientului sunt stocate în cache în browserul dvs.

    cache-control: max-age=120 – înseamnă că resursa returnată este valabilă pentru 120 secunde, după care browserul trebuie să solicite o versiune mai nouă.
    Puteți, de asemenea, să memorați în cache paginile dinamice și în CDN-ul dvs. cu valoare TTL adecvată pe baza comportamentului aplicației dvs.

  2. Setați atributele sau dimensiunile exacte ale conținutului media și anunțurilor dvs. (îmbunătățește CLS)
    Acesta este ceva foarte important pentru a vă îmbunătăți scorurile CLS. Asigurați-vă că aveți un set height:XXpx; width: YYpx adecvat pentru imaginea dvs. sau orice etichete media. Din nou, acest lucru este foarte important cel puțin pentru componentele care se află deasupra pliului. O scurtătură pentru acest lucru este că, dacă rămâneți fără idei pentru a obține înălțimea exactă a imaginii, puteți seta ca height:auto; ceea ce mi-a ajutat cu adevărat. În afară de mass-media, dacă site-ul dvs. afișează reclame, asigurați-vă că ați setat sloturi publicitare adecvate, cu dimensiuni adecvate, deoarece împingerea în sus sau în jos a componentelor din pagină va reduce cu siguranță scorul dvs. CLS. Așadar, țineți cont și de reclame!
  3. Încetează imagini cu rezoluție corectă pe baza tipului de dispozitiv (îmbunătățește LCP)
    Acesta este cu adevărat un câștig rapid pentru tine! Există o mulțime de pachete de încărcare leneș în lume pe care le puteți folosi în pagina dvs. web pentru a încărca leneș toate imaginile de pe pagina dvs.Aceasta va reduce greutatea totală a paginii și timpul de încărcare pentru redarea paginii dvs. în browser. O altă piesă importantă este aceea că, predefiniți rezoluția imaginii pe care doriți să o încărcați în funcție de tipul dispozitivului. Nu trebuie să încărcați aceleași imagini de rezoluție în diferite tipuri de dispozitive.
  4. Utilizați în mod eficient SSR și CSR în pagina dvs. web (îmbunătățiți FID & LCP)
    Ar trebui să știți că Google promovează și încurajează paginile Server Side Rendered (SSR) pentru a obține valori SEO bune. un compromis cu performanța de încărcare a paginii SEO Vs. Dacă pagina dvs. este prea mare din punct de vedere al conținutului și dacă decideți să redați întreaga pagină în server, va dura cu siguranță mai mult timp pentru a încărca întreaga pagină, precum și pagina greutatea va fi, de asemenea, mare. Povestea lungă scurtă – recomandarea mea este că este mai bine să faceți randarea SSR pentru componentele paginii dvs. care apar deasupra pliantei și să redea restul componentelor din partea clientului care apare sub pliante. În acest fel, utilizatorul încarcă pagina deasupra pliantei, iar restul paginii redă asincron fără a împiedica experiența utilizatorului.
  5. Utilizați codul Împărțirea & împarte activele în bucăți (îmbunătățește FID & LCP)
    Nu este întotdeauna o idee bună să aveți active uriașe (mai mult de 100 Kb este uriaș) (în special fișiere JS) în aplicația dvs. Deci, utilizați mai bine pachete precum „webpack” pentru a descompune activele grele în bucăți mici care vă vor încărca activele asincron în browserul dvs. (dacă activați protocolul h2). Puteți, de asemenea, să utilizați caracteristicile de divizare a codului pentru a descompune componentele paginii în fișiere separate, mai degrabă decât să le împachetați într-un singur fișier HTML.
  6. Comprimă toate activele statice cu compresia Brotli (îmbunătățește LCP)
    Vă încurajez să utilizați Brotli pentru a comprima activele statice, ceea ce oferă o co rapoarte de presiune comparativ cu alte biblioteci de pe piață. În același timp, rețineți că, atunci când utilizați Brotli cu un raport de compresie mai mare, acesta va crește cu siguranță timpul de construire și de pachet în călătoria conductei DevOps. Pentru mine, a fost bine să sacrific timpul de construire a aplicației, deoarece obțin o valoare mai bună în ceea ce privește performanța de încărcare a paginii.
  7. Optimizați solicitarea API și conținut de răspuns (îmbunătățește FID & LCP)
    Acest lucru este foarte important pentru a fi luat în considerare deoarece fiecare octet contează aici când vorbim despre performanța paginii. Sper că nu veți regreta să vă întoarceți și să verificați solicitările API & pentru a răspunde la popularea paginii dvs. Asigurați-vă că primiți înapoi doar datele de care aveți nevoie pentru ca pagina dvs. Fiți redat din răspunsurile API. Un alt lucru prostesc pe care ați putea să-l faceți o greșeală este că apelurile dvs. API sunt invocate intern în sine, mai degrabă decât folosind orice puncte finale publice sau prin internet – deoarece este întotdeauna scump în termeni de timp când invocă API-urile dvs. prin internet atunci când aveți API-ul găzduit în aceeași subrețea sau cel puțin în aceeași rețea!
  8. Reduceți pagina / documentul general size (îmbunătățește LCP)
    În mod ideal, dacă pagina dvs. de destinație este grea (aș clasifica orice pagină cu> 80Kb ca grea), aceasta va contribui cu siguranță la scorul LCP deoarece va crește proporțional viteza de preluare și descărcare a paginii. Deci, asigurați-vă că nu primiți nicio bucată mare de date neutilizate de pe partea serverului și încărcați doar datele necesare pentru redarea paginii dvs.
  9. Utilizați formate de imagine NEXT-GEN (îmbunătățește LCP)
    JPEG 2000, JPEG XR și WebP sunt formate de imagine care au caracteristici de compresie și calitate superioare comparativ cu JPEG și Omologii PNG. Codificarea imaginilor dvs. în aceste formate, mai degrabă decât JPEG sau PNG, înseamnă că acestea se vor încărca mai repede și vor consuma mai puține date celulare. Puteți utiliza orice tip de instrument de pe piață pentru a converti imaginile în imagini formatate NEXT-GEN sau puteți chiar să creați un serviciu de imagine de execuție care poate face o conversie a imaginilor în timp real de la JPEG la WebP și să difuzeze în browser.
  10. Activați alternativele pentru fonturile acceptate de browserul nativ (îmbunătățește FID)
    Este dovedit că fonturile poate reduce cu adevărat scorurile dvs. de performanță dacă browserul întârzie să încarce fontul personalizat care este „utilizat în aplicația dvs., cu excepția cazului în care este un font implicit acceptat de browser. În acest caz, un câștig rapid pentru dvs. este să aveți o abordare alternativă la încărcare fontul dvs. cu fonturile care sunt acceptate în mod implicit de browser. Mai jos este un fragment de cod exemplificativ privind abordarea alternativă cu alte fonturi.
@font-face { 
font-family: “Open Sans Regular” "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-style: normal;
src: url(“fonts/OpenSans-Regular-BasicLatin.woff2”) format(“woff2”); font-display: swap;
}

Toate sfaturile date mai sus ar putea fi implementate în mod incremental în aplicația dvs. și din nou așa cum s-a menționat înainte ca scorurile Core Web Vitals să evolueze din utilizator real date și nu mai din date „Lab”. Astfel, este nevoie de timp pentru a reflecta îmbunătățirile scorului dvs., care este în mare parte de 28 de zile pentru a reflecta. Puteți utiliza în continuare instrumentul PageSpeed de la google – https://developers.google.com/speed/pagespeed/insights/ pentru a obține scorurile dvs. CWV.

Sper că te ajută și îți doresc tot succesul în lucrările tale! Noroc!

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *