Core Web Vitals: LCP, INP i CLS

Modul 4: Brzina, mobilni uređaji i https · Vrijeme čitanja: 13 min

Cilj učenja: Nakon ove lekcije moći ćete objasniti tri Core Web Vitals pokazatelja i njihove granične vrijednosti, navesti razliku između terenskih i laboratorijskih podataka, pročitati mjerenje u alatu PageSpeed Insights, ukloniti najvažnije uzroke loše ocjene i realno procijeniti koliko brzina utječe na rezultate pretraživanja.

Ključni pojmovi: Core Web Vitals, LCP (Largest Contentful Paint), INP (Interaction to Next Paint), CLS (Cumulative Layout Shift), 75. percentil, terenski podaci (CrUX), laboratorijski podaci (Lighthouse), PageSpeed Insights, izvješće Core Web Vitals u Search Consoleu, TTFB, kompresija, width i height kod slika, loading="lazy", doživljaj stranice

Brzina u tri broja

"Je li moja stranica brza?" nejasno je pitanje. Google i tvorci Chromea pretvorili su ga u tri mjerljiva pitanja, Core Web Vitals:

Nekoliko stvari koje treba dobro razumjeti:

• LCP mjeri trenutak u kojem se pojavi najveći vidljivi element. To je obično velika fotografija na vrhu (tzv. "hero") ili veliki blok teksta. Kod Bloemenatelier Lotte to je fotografija cvjetnog aranžmana na početnoj stranici.
• INP promatra sve klikove, dodire i pritiske tipki tijekom posjeta i prijavljuje (gotovo) najsporiju reakciju. INP je 12. ožujka 2024. zamijenio stariji pokazatelj FID (First Input Delay), koji je gledao samo prvi klik i samo čekanje prije obrade. Ako u starom članku naiđete na FID, ta je informacija zastarjela.
• CLS nije vrijeme, nego ocjena bez mjerne jedinice. Raste kada se elementi pomiču dok čitate: želite dodirnuti gumb, a upravo se tada iznad njega pojavi natpis pa dodirnete nešto drugo.

75. percentil

Stranica "prolazi" Core Web Vitals kada 75 posto posjeta postiže dobru ocjenu za sva tri pokazatelja, mjereno zasebno za mobilne uređaje i računala. To se naziva 75. percentil. To znači: ne računa se Vaše brzo računalo na optičkoj vezi, nego iskustvo većine posjetitelja, uključujući one sa starijim telefonom na 4G mreži.

Terenski i laboratorijski podaci

Postoje dvije vrste mjerenja i one često daju različite brojke.

• Terenski podaci dolaze od stvarnih posjetitelja. Chrome (kod korisnika koji to dopuste) anonimno bilježi koliko su stranice bile brze, u izvješću Chrome User Experience Report (CrUX). PageSpeed Insights prikazuje terenske podatke za posljednjih 28 dana. Izvješće Core Web Vitals u Search Consoleu koristi isti izvor. Ako Vaša stranica ima premalo posjetitelja, PageSpeed Insights prikazuje brojke za cijelo Vaše web-mjesto (tzv. "origin"), a ako ni ono nema dovoljno posjeta, terenskih podataka nema.
• Laboratorijski podaci dolaze iz simuliranog testa alatom Lighthouse: jedno učitavanje na oponašanom telefonu i vezi prosječne kvalitete. Lighthouse ne može mjeriti INP (nitko ne klikće) pa zato daje druge brojke, poput Total Blocking Time, koje ipak upućuju na INP.

Za ocjenu se računaju terenski podaci. Laboratorijski podaci korisni su za pronalaženje uzroka i da nakon poboljšanja odmah vidite pomaže li, bez čekanja od 28 dana.

Koliko to utječe?

Ovdje se mnogo pretjeruje. Evo što sam Google o tome kaže u dokumentaciji o doživljaju stranice:

• "Core Web Vitals are used by our ranking systems": dakle, oni se uzimaju u obzir.
• Ne postoji zaseban "signal doživljaja stranice". Ostali dijelovi dobrog doživljaja stranice (https, bez nametljivih skočnih prozora, upotrebljivost na mobitelu) prema Googleu Vam ne pomažu izravno da budete više rangirani, ali Vašu stranicu čine ugodnijom.
• "Google Search always seeks to show the most relevant content, even if the page experience is sub-par." Spora stranica s najboljim odgovorom stoga može biti na samom vrhu.
• Postizanje savršene ocjene samo radi SEO-a prema Googleu "možda nije najbolji način da iskoristite svoje vrijeme".

Zaključak: pobrinite se da budete u zelenom ili barem narančastom području, prije svega zato što posjetitelji odustaju na sporoj stranici ili stranici koja se pomiče. Lov na pomak s 90 na 100 bodova u Lighthouseu u rezultatima pretraživanja malo donosi.

Uzroci koje možete sami ukloniti

Spor prvi odgovor (TTFB)

Sve počinje trenutkom u kojem stigne prvi bajt HTML-a, tzv. Time to First Byte. TTFB sam po sebi nije Core Web Vital, ali spor TTFB gotovo onemogućuje dobar LCP. web.dev kao smjernicu navodi: dobro je 0,8 sekundi ili manje, loše je više od 1,8 sekundi. Uzroci prema web.dev: premalo računalne snage kod hostinga, nedostatak predmemorije (svaka se stranica iznova gradi, tipično kod WordPressa bez dodatka za predmemoriju), preusmjeravanja (lekcija 4.1) i udaljen poslužitelj bez CDN-a.

Tu spada i kompresija: poslužitelj bi trebao slati HTML, CSS i JavaScript sažete pomoću gzipa ili Brotlija. To prepoznajete po zaglavlju Content-Encoding: gzip ili br. Gotovo svaki hosting to radi prema zadanim postavkama, ali pogrešna postavka ili stari poslužitelj mogu to isključiti.

Slike

Slike su najčešći uzrok lošeg LCP-a i CLS-a:

1. Prevelike. Fotografija široka 4.000 piksela i velika 5 MB za okvir od 800 piksela. Smanjite je prije prijenosa i koristite moderan format poput WebP ili AVIF.

2. Bez širine i visine. Bez width i height preglednik ne zna koliko prostora slika treba pa se tekst ispod nje pomakne čim se slika učita. web.dev preporučuje da width i height postavite na svaki <img>:

   <img src="bloemstuk.webp" width="800" height="600" alt="Bruidsboeket met witte rozen">

3. Odgođeno učitavanje najvažnije fotografije. loading="lazy" učitava sliku tek kada dođe u vidno polje. To je u redu za fotografije niže na stranici, ali web.dev jasno kaže: slike koje su vidljive već pri otvaranju, a osobito LCP sliku, nemojte učitavati odgođeno. Inače preglednik čeka upravo s fotografijom koja određuje Vaš LCP.

Sadržaj koji se pomiče i spore reakcije

Ostali uzroci CLS-a prema web.dev: fontovi koji pri učitavanju mijenjaju veličinu, oglasi i ugrađeni widgeti koji se sami povećavaju te sadržaj koji se naknadno umeće iznad postojećeg (poput trake za kolačiće koja gura stranicu prema dolje umjesto da leži preko nje). Loš INP gotovo je uvijek posljedica previše JavaScripta: teških tema, klizača, widgeta za chat i alata za praćenje trećih strana. Kritički razmotrite svaki dodatak ili ugrađenu uslugu; ovdje je manje zaista više.

U praksi: mjerenje alatom PageSpeed Insights

Otvorite pagespeed.web.dev, upišite adresu svoje početne stranice i kliknite Analyze (na hrvatskom sučelju: Analiziraj). Dobit ćete dvije kartice (Mobile i Desktop). Na vrhu je ocjena Core Web Vitals na temelju terenskih podataka, ako postoje. Ispod je Lighthouse test s ocjenom i popisom "Diagnostics" s konkretnim stavkama, primjerice o slikama većima nego što je potrebno ili LCP slici koja se učitava odgođeno (točni nazivi mijenjaju se s novim verzijama Lighthousea). Počnite s karticom Mobile: ondje je rezultat obično lošiji, a Google prvo gleda mobilnu verziju (lekcija 4.2).

Ako je Vaša stranica u Search Consoleu (modul 2), pogledajte i Experience, Core Web Vitals. Ondje vidite skupine sličnih stranica s njihovim statusom, i za stranice koje sami niste testirali.

Stranica izrađena u AI Builderu postavlja širinu i visinu kod slika čija je veličina poznata, prvu fotografiju na stranici učitava odmah i s prednošću (fetchpriority="high"), a ostale odgođeno, te pri objavi izrađuje inačicu velikih fotografija široku 800 piksela. U WordPressu najviše pomažu dodatak za predmemoriju i smanjivanje slika; tečaj o WordPressu o tome detaljnije govori u modulu 6. Kod drugih alata za izradu web-stranica i hosting tvrtki postupak je sličan: gumbi se razlikuju, uzroci su isti.

Sažetak

• Core Web Vitals su LCP (dobro do 2,5 s), INP (dobro do 200 ms, od ožujka 2024. umjesto FID-a) i CLS (dobro do 0,1), mjereni na 75. percentilu po vrsti uređaja.
• Terenski podaci (CrUX, 28 dana) određuju ocjenu; laboratorijski podaci (Lighthouse) pomažu pronaći uzroke.
• Google koristi Core Web Vitals pri rangiranju, ali relevantnost ima prednost: savršena ocjena nije cilj sama po sebi.
• Najveća dobit: brz odgovor poslužitelja uz predmemoriju i kompresiju, male slike s width i height, najvažnija fotografija bez odgođenog učitavanja, manje JavaScripta trećih strana.

Kviz

Zadatak

Zadatak A4.3: Brz odgovor i lagane slike. Upišite adresu stranice. Program tri puta mjeri vrijeme do prvog bajta (TTFB) s našeg poslužitelja i uzima srednju vrijednost, provjerava šalje li se HTML komprimiran (gzip, Brotli ili zstd), broji slike bez width i height te provjerava da se najvažnija slika na vrhu ne učitava s loading="lazy". Napomena: ovo je mjerenje s jednog mjesta, a ne mjerenje Vaših posjetitelja. Nemate vlastitu stranicu? Upotrijebite www.wikipedia.org.

Zadatak D4.3: Vaši Core Web Vitals. Pokrenite PageSpeed Insights na svojoj početnoj stranici i na još jednoj važnoj stranici, najprije na kartici Mobile. Za svaku stranicu zabilježite: postoje li terenski podaci (za stranicu ili cijelo web-mjesto), LCP, INP i CLS iz terenskih podataka, Lighthouse ocjenu te element koji Lighthouse označava kao LCP element. Odaberite jedno poboljšanje koje će prema Vašem mišljenju donijeti najviše i objasnite zašto.

Dodatno štivo

• web.dev, Web Vitals: https://web.dev/articles/vitals
• web.dev, Largest Contentful Paint (LCP): https://web.dev/articles/lcp
• web.dev, Interaction to Next Paint (INP): https://web.dev/articles/inp
• web.dev, Cumulative Layout Shift (CLS): https://web.dev/articles/cls
• web.dev, Time to First Byte (TTFB): https://web.dev/articles/ttfb
• web.dev, Browser-level image lazy loading: https://web.dev/articles/browser-level-image-lazy-loading
• Google Search Central, Understanding page experience in Google Search results: https://developers.google.com/search/docs/appearance/page-experience
• PageSpeed Insights, About PageSpeed Insights: https://developers.google.com/speed/docs/insights/v5/about
• Search Console Help, Core Web Vitals report: https://support.google.com/webmasters/answer/9205520