Web Core Vitals 2023

Googlevih 9 savjeta za optimizaciju Core Web Vitalsa u 2023.

Tim koji je zadužen na Google Chrome podijelio je nove preporuke za optimizaciju web stranica kako bi prošle njihov korisnički test Core Web Vitals, a koji web developeri mogu odmah primijeniti na web stranicama.

Core Web Vitals su tri metrike koje mjere vrijeme učitavanja, interaktivnost i  vizualnu stabilnost.

Ranije sam napisala vodič kako optimizirati web stranicu u 10 koraka da prođe Googleov test, a sada su iz samog Googlea stigle preporuke.

 

Imate li ograničeno vrijeme i budžet za optimizaciju web stranice, posebno je bitno da poslušate ovih 9 savjeta:

 

1.  LCP izvor treba biti jasno vidljiv u HTML kodu

Prema istraživanju Web Almanaca 2022. godine, čak 72% mobilnih web stranica kao glavni sadržaj ima sliku. Da biste poboljšali učitavanje stranice (odnosno LCP), te se slike moraju učitati jako brzo.

Možda je nemoguće zadovoljiti Googleov standard brzog učitavanja ako se prije učitavanja slike moraju učitati CSS i JavaScript datoteke.

Zlatno pravilo je: ako je LCP element slika, URL te slike mora biti jasno vidljiv u HTML kodu pomoću  <img> taga.

 

2. LCP izvor mora biti glavni prioritet

Osim što se LCP izvor mora moći naći u HTML kodu, Google preporučuje da ga stavite kao prioritet i njegovo učitavanje ne odgađate radi nekih drugih elemenata na web stranici.

Ako u HTML kodu imate standardni  <img> tag,  obratite pažnju na cijeli  <head> dio. Imate li tamo postavljeno nekoliko <script> tagova, oni mogu odgoditi učitavanje slike.

najbolje da u tom dijelu izbjegavate bili kakve akcije koje mogu smanjiti prioritet učitavanja LCP slike, kao npr. da dodate atribut loading=”lazy”.

 

3. Koristite CDN da smanjite Time To First Bite (TTFB)

Web preglednik mora primiti prvi bajt HTML dokumenta prije nego učita dodatne resurse. Vrijeme koje je potrebno da se to dogodi zove se Time to First Byte (TTFB) i što je ono kraće, to prije mogu početi drugi procesi.

Kako biste smanjili TTFB, sadržaj poslužujte s lokacije koja je blizu vaših korisnika, a to je najbolje napraviti koristeći  tzv.  CDN (content delivery network) izvore.

 

4. Postavite jasne veličine za sadrćaj na web stranici

Oko 25% stranica ne zadovolja standard vizualne stabilnost na web stranici, odnosno Cumulative Layout Shift (CLS) metriku.

Nestabilnost se događa kad sadržaj na web stranici promijeni svoju poziciju nakon što se učitao.

Najčešći razlozi nestabilnosti su slike neodgovarajućih dimenzija, oglasi trećih stranica i embedani video sadržaj, ali i vrlo popularni slideri i carouseli.

Jako je važno da pomoću CSS-a jasno definirate visinu i širinu vizuala kako ne bi došlo do pomaka u vizualno stabilnosti.

 

5. Omogućite keširanje stranice tj. Bfcache

Web preglednici mogu koristiti tzv. back/forward cache ili skraćeno bfcache, koje omogućuje stranicama da se odmah učitaju onim korisnicima koji su već ranije posjetili stranicu. Kaširanje stranice znatno poboljšava kako se web stranica ponaša jer uklanja pomicanje elemenata na stranici dok se ona učitava.

Googleova preporuka je da pomoću DevTools alata provjerite jesu li vaše stranice dobar kandidat za bfcache.

 

6. Izbjegavajte animacije i prijelaze

Znamo da puno ljudi voli da se stvari na web stranicama miču jer tako „nisu dosadne“, no zapravo dosadno je dobro u ovom slučaju.

Velik broj problema oko pomicanja elemenata uzrokuju upravo animacije i stvari koje se miču poput bannera, slidera ili notifikacija koje uklizavaju na stranicu s bilo koje strane.

te animacije mogu gurnuti sadržaj u drugi plan i negativno utjecati na CLS.

Google kaže da stranice koje imaju animiran neki elemente CSS-a imaju 15% manje šanse da zadovolje CLS standard.

 

7. Izbjegavajte dugačke taskove da poboljšate FID

First Input Delay (FID) je metrika koja mjeri koliko brzo stranica reagira na neki korisnikov zahtjev. Primjerice, koliko vremena treba od trenutka kad je korisnik kliknuo neki gumb do trenutka kad mu se pokazala nova stranica.

Iako većina stranica prolazi ovaj dio testa, uvijek ima mjesta za poboljšanje.

Googleova nova metrika Interaction to Next Paint (INP) je potencijalna zamjena za FID, a preporuke koje je Google dao važe za oboje:

Taskovi (zadaci) o kojima se ovdje priča su sitni poslovi koje web preglednik radi, kao što su renderiranje, analiziranje, spajanje i primjena skripti. Kada zadacima treba dugo vremena, više od 50 milisekundi, blokiraju glavni thread pa preglednik ne može brzo reagira na korisnikovu naredbu.

Kako bi se to izbjeglo, dobra je praksa zadatke koji su dugački podijeliti u manje.

 

8. Izbjegavajte nepotreban JavaScript

Web stranica s previše JavaScripta može rezultirati dugačkim taskovima i negativno utjecati na Core Web Vitalse.

Da biste vidjeli koji dio Javascripta smeta, ali i obrisali nepotreban kod, koristite coverage alat u Chrome DevToolsu.

Osim toga, jako je bitno da je Javascript kod postavljen ispod HTML headera, a optimalno netom prije </body> taga.

 

9. Izbjegavajte velika ažuriranja renderiranja

Renderiranje je proces koji pretvara kod web stranice u internativnu stranicu koju korisnici vide. renderiranje se odnosi na korištenje HTML, CSS i JavaScript kodova.

Optimizacija renderiranja stranica može biti jako složena, a jako je bitno da se ažuriranja ne pretvore u dugačke taskove.

Googleov tim ima tri preporuke za ovaj dio:

  • Izbjegavajte korištenje  requestAnimationFrame() za bilo koji nevizualni dio

RequestAnimationFrame() metoda govori pregledniku da želite nešto animirati te od preglednka traži da ažurira animaciju prije ponovnog učitavanja.

 

  • Smanjite veličinu DOM elemenata

Kad se stranica učita, web preglednik stvori Document Object Model (DOM) te stranice. Svi tagovi u HTML dokumentu čine DOM. Optimalna veličina DOM-a jest do 900 elemenata.

 

  • Koristite CSS containment (okruženje)

Cilj CSS containmenta jest poboljšati performanse web stranice tako da se pregledniku omogući da izolira dio web stranice od ostatka. Ako web preglednik ima informaciju da je dio stranice neovisan, može optimizirati renderiranje i poboljšati performanse.

 

Nadam se da će vam ovi savjeti pomoći oko optimizacije vaše web stranice u tehničkom dijelu, kako bi i vaš sadržaj mogao ostvariti optimalne SEO rezultate.

Ako ti se sviđa članak, podijeli ga drugima!

Najnoviji članci