 Zdravom, ja sam Milica i radimo u Google i dokomentaciji za Chrome i ceove. Povodno sveckog dana maternih jazika, danas ćemo mi spričati nešto o Web Vitals na moj maternih jaziku ssepskom. Web Vitals u Google inicijativa da definiše setmjernih jedinica koji će najbolje predstavljati korizniško iskujstvo. Najveći izaz o primjerenju performanciji sajta je to što postoji puno parametara koji se mogu pratiti i teško i zabrati našto se fokusirati. Web Vitals su rješenje za taj problem. Kako Google search od nedovno u obziru izima i performancji sajta pri rangiranju, druga uloga Web Vitals i da služi kao signal searchu za rangiranje stranice. Pa da počeli. Web Vitals čine tri merni jedinice. Svaka od njih meri različite aspekte korizniškog iskujstva. Largest Contentful Paint ili LCP meri brzinu učitavanje. First Input Delay ili FID je mera interaktivnosti. Cumulative Layout Shift ili CLS je mera vizuelne stabilnosti. Ja ću vam se da ukratko objasniti najvažnije stvari koje treba da znate o Web Vitals. Prvu ću detaljni opisati sve Web Vitals parametre i šta možete da uradite kako bi vaši sajtovi i web aplikacije imali dobre Web Vitals rezultate. Potom ću objasniti kako da proverite Web Vitals rezultate svojih sajtova i kako da nastavite kontinuirano dopratite promene u rezultatima. Hajde da vidimo kako funkcioniše svaki od ova tri glavna Web Vitals parametra. LCP meri trenuta kad je najveća slika ili najveći blok teksta istrtana ekranu. U ovom primjeru, pri početku učitavanja najveći element je naslovno. Međutim kad su učita slika ona dobija status najvećeg sadrženug elementa. Najbolji način da postignete dobar lcp je da osigurate da se najvažne elementi sajta brzo odkriju, brzo pošalju i brzo renderuju. A kako dosigurate da će browser brzo odkriti resurse? Učitavajte dodatne resurse direktno iz glavnog HTML dokumenta, a ne iskripti. Što pre HTML parser odkrije resurse, premože da pošalje za aktiv serveru. Na primjer slika će biti brže učitana ako je parser nađi u HTML nego ako se nalazi u eksternom slide sheetu. Koristite resource hints da postavite odgovarajući prioritat na bitne resurse. Kako osigurati da se resursi brzo šalju? Koristite CDN, Content Delivery Networks. Optimizujte vrijeme odgovoru servera. Kompresujte resurse, koristite GZP ili Brotli, na primjer. Optimizujte slike. Koristite novije formate poput WebP. Samo renderovanje lcp elementa netre dugo. Međutim, postoje neke stvari koje mogu da dovedu do odlaganja renderovanja. Na primjer, kot sajtova koji se renderuju na klientu, početak renderovanja zavisi od brzina incijalizacije cele aplikacije, što nije dobro za lcp. U ovom slučaju, rješenje su renderovanja serveru i progresivne učitavanje sadreže. Još jedna stvar koje se može optimizovati je učitavanje CSSa i avaskripta na način koji ne blokira HTML parser. Bitan CSS i JS učitajte što pre, a manji bitan izdvojite i učitajte asinkronu. Možete provjeriti koji je lcp element na vašim sajtu u Lighthouse Latu u DevTools. FirstInputDelay, FID, meri vreme između prve koristničke interakcije i crenutka odgovora browser. Idealno bi bilo da tu ne postoje nikakvo kašnjenje, međutim ako je glavna nit blokira na nekim zahhtevnim taskovima, da se moći brzo da odgovori na inpute i desiće se kašnjenje. FID može varirati uz avisnosti u toga u kom trenutku koristnik pokuša da interaguje sa stranicom. U prvom primjeru, FID je nula, dok i u drugom 100 mili sekundi, jer koristnik započeo akciju u trenutku kada je glavna nit bila zauzeta. Najbolji način da osigurate dobar FID rezultat je da izbegnete učitavanje velikih i zahhtevnih scripti pri učitavanju sajta. Učitavanje tehnika koje vam mogu pomoći u tom esu splitovanje koda, lazy loading i uklanjanje koda koji se nekoristi. Takođe vredi pregledati ekstrene biblioteki koje sajtu čitava, jer su često neoptimizovanje i lakši ih i ukloniti. Možete proveriti koje scripte su dobre kandidati za optimizaciju u Lighthouse. Moram da napomenem da Lighthouse nemeri FID-u izvaštaju već Total Blocking Time, Total Blocking Time i ukuplno vreme u komi glavna nit bila zauzeta dovoljno dugo da to utiče na brzinu odgovor na koristnički input. U teba to se računa samo vreme koje projze između Frd Contentful Paint, prvog značajnije rendera i Time to Interactive, vremena kada je glavna nit postala interaktiva. Razlog za što FID nije u Lighthouse izvaštaju je to što FID može meriti samo u situacijama kada koristnici zaista interaguje sa stranicom, što nije slučaj u Lighthouse-merenjima. Resultati Lighthouse-merenja dolazi simulaciji u čitavanja strane, tako da tu nemo pravih koristnika. Zato se tbd koristi kao zamena za FID. Iako s ove dve merne jedinice različite, obe mere istu stvar, brzinu odgovor glavne niti tokom u čitavanja stranice. CLS meri utici i pomerenja rasporede lemenata na stranici tokom ukupln vreme na koliko je stranica otvorena. Promena rasporeda, odnosno layouta, se dešava kada neki element promeni svoju poziciju. Najčešći primjer je kada se novi element doda pri početku strane, tako da pomeri na dole sve elemente izpod sebe. Pomera je rasporeda se računa tako što se pomoži razdaljina za koji se element pomerio sa površinom zahvaćenom pomerajem. Cumulativni layout shift je suma svih pomera je rasporeda dok li godje stranica otvoren. Da izvegnete pomerenje rasporeda, postavite vid i height atribute na sve slike vidje i height remove. Na većini sajtova, ova tehnika će biti dovoljna. Izbegojte animacije koje dovode do pomerenje rasporeda i ne ubacujte naknano elemente iznad već učitanog sadrežaja, osim ako to ne radite kao odgovor na korisničku interakciju. Da odkrijete koji elementi izazivaju layout shift, potražite u Lighthouse izlošsaju avoid large layout shift. Ovdje moram da napomenem da CLS koji Lighthouse meri u simulaciji može biti nižil stvarnog CLS-a. Lighthouse meri samo pomeraje koji se desi pri učitavanju dok pomeraje koji nastaju kao rezultat neke akcije korisnika nisu zabelaženi. To su bila tri glavno web vitels parametra LCP, FID i CLS. A sada pa reće o tome kako ih meriti na vašim sajtovima. Za početak, što je dobar web vitels rezultat? Tabela na ekranu pokazuje graniće koje su zasnovane na podacima skupljenim od korisnika, nenameranjima iz alata poput Lighthouse i web page testa. Za dobar web vitels rezultat potrebno je da je LCP manji u 2,5 sekunde, FID manji u 100 milisekundi i CLS manji od 0,1. Da bi se računalo da site ilistranice imaju dobar web vitels rezultat, 75% poseta mora biti u obsegu navedenih mera za svaki u 3 parametra. Neki od bespotnih alata zamerenja web vitelsu, page speed insights, search console i web vitels biblioteka. Page speed insights je najlekši za korišćenje, ne zahteva prijavu ni podašavanji. Samo posicite PSI site i unjesite URL koji želite da proverite. PSI beleži rezultate individuolnih stranica kao i čitavog domena u predgodnih 28 dana. Takođe je dostupan i kao API. Search console beleži rezultate pojedinačnih strana i čuva sve za beležene vrednosti predgodnih merenja. Mana je što se može koristiti samo za sajtove za koje potvrdite da ste vlasnik. Ako bi radije da sami beležite rezultate performanci vašeg sajta, možete da koristite web vitels biblioteku. Ova opcija zahteva više truda, ali vam takođe brže daje informacije sa više detalja. Tako je lakši uočiti probleme i testirati moguće rešenje. Nadavcim sam uspela da vam približim kako web vitels mogu da vam pomognu da bolje razlumete i brže unapredite koristniško iskustvo na vašim sajtu. Da sazmate više, posjetite web.dev kroz vitels. Hvala vam pažda.