Vaš dizajn nije spor zbog slika, nego zbog JavaScripta koji nitko ne mjeri

Lani smo preuzeli održavanje sajta koji je imao gotovo savršen Lighthouse rezultat na slikama. WebP, lazy loading, pravilne dimenzije, sve po pravilima struke. A sajt je i dalje osjetno zapinjao na mobitelu. Klijent je bio uvjeren da treba još jači hosting. Nije. Problem je bio 11 third-party skripti koje su se borile za glavnu nit preglednika dok je korisnik pokušavao kliknuti gumb.

To je najčešći nesporazum oko web performansi. Svi gledaju slike jer ih je lako vidjeti i lako optimizirati. Slika je 400 KB, stisneš je na 80 KB, osjećaš se produktivno. Ali slika se učita u pozadini i nikoga ne blokira. JavaScript radi suprotno: preuzme se, parsira, kompajlira i izvršava na glavnoj niti, istoj onoj na kojoj preglednik reagira na klikove i skrolanje. Dok se taj kod vrti, sučelje stoji.

Brojke koje objašnjavaju zašto vam sajt zapinje

Nije ovo osjećaj, nego mjerljiv trend. HTTP Archive u svom Web Almanacu za 2024. mjeri da medijalna stranica na mobitelu učita 558 KB JavaScripta, što je porast od 14% u jednoj godini. Pritom medijalna stranica šalje 22 zahtjeva za JavaScriptom, a onih u 90. percentilu čak 68. Svaki od tih zahtjeva je prilika da nešto zapne na glavnoj niti.

Najgori dio: oko 44% preuzetih bajtova JavaScripta, otprilike 206 KB na medijalnoj mobilnoj stranici, uopće se ne iskoristi tijekom učitavanja. Plaćate propusnost i vrijeme procesora za kod koji korisnik nikad ne pokrene.

A onda dolazi third-party sloj. Isti izvor pokazuje da više od devet od deset stranica uključuje barem jednu third-party skriptu. Medijalna stranica među top 10.000 sajtova vuče 27 različitih third-party domena. Gotovo trećina svih tih third-party skripti otpada na oglase, analitiku i upravljanje pristankom, dakle točno na cookie bannere, Google Analytics i tag managere. To je tri kategorije alata koje gotovo nitko ne mjeri po stvarnom trošku, a sve tri sjede na glavnoj niti.

Lanci koje nitko ne vidi

Evo zašto je ovo podmuklo. Vi stavite jednu skriptu, Google Tag Manager. Jedna linija koda, bezazleno. Ali GTM je dizajniran da učitava druge skripte, koje učitavaju treće. Web Almanac to zove lancima uključivanja (inclusion chains) i mjeri da je medijalni lanac dubok 3 razine, a 14% lanaca ide dublje od 5 razina. Rekordni zabilježeni lanac imao je 2.930 razina.

Prevedeno na stvarnost: marketing kaže "trebamo samo dodati jedan pixel", vi dodate jedan redak, a preglednik korisnika na kraju povuče dvanaest skripti s osam domena. Nijedna od njih nije u vašem repozitoriju, nijednu ne kontrolirate, a sve usporavaju vaš sajt. I kad vas šef pita zašto je sporo, vi gledate svoj kod koji je čist.

Kako to stvarno izmjeriti

Prestanite gledati ukupni Lighthouse broj. On vam kaže da je loše, ne i tko je kriv. Otvorite Chrome DevTools, karticu Performance, snimite učitavanje i gledajte flame chart glavne niti. Tražite "long tasks", zadatke dulje od 50 milisekundi. Svaki takav zadatak je trenutak u kojem sučelje ne reagira. Prijeđite mišem preko njih, piše vam s koje domene dolaze.

Brži put: u Lighthouseu postoji audit "Reduce the impact of third-party code". On vam poimence izlista svaku third-party domenu, koliko bajtova povuče i koliko milisekundi blokira glavnu nit. To je tablica koju trebate odnijeti na sastanak. Ne "sajt je spor", nego "ovaj chat widget nam pojede 340 milisekundi glavne niti, a koristi ga 2% posjetitelja".

Za kontinuirano mjerenje postavite performance budget. Tvrdu granicu, recimo maksimalno 150 KB third-party JavaScripta i ne više od 200 ms njihovog blocking timea. Svaki novi zahtjev marketinga onda prolazi kroz to pitanje: stane li u budžet, i ako ne stane, što izbacujemo?

Što izbaciti bez straha

Prvo pravilo: ništa što blokira renderiranje ne smije se učitati sinkrono u <head>. Analitika, piksel, chat, sve to ide s async ili defer, ili još bolje odgođeno do interakcije korisnika. Korisniku ne treba Hotjar da bi vidio vašu naslovnicu.

Drugo, napravite inventar. U svakom projektu koji smo preuzeli našli smo barem jedan tracking piksel kampanje koja je završila prije dvije godine. Nitko ga nije maknuo jer se nitko nije usudio, a zapravo nije radio ništa osim što je usporavao sajt. Audit third-party skripti nije tehnički zahvat, nego poslovna odluka: za svaku skriptu pitate tko je koristi i što bismo izgubili da je nema.

Treće, za tag managere razmislite o server-side izvedbi ili o alatima poput Partytowna koji guraju third-party kod u web worker, izvan glavne niti. To nije čarobni štapić i ima svoje zamke, ali za sajtove zatrpane analitikom zna biti razlika između sučelja koje reagira i onog koje zapinje.

Poanta

Slike su lako krivac jer su vidljive. JavaScript je pravi krivac jer je nevidljiv i jer ga nitko ne mjeri po stvarnoj cijeni. Dok ne otvorite flame chart i ne vidite tko vam jede glavnu nit, optimizirate krivu stvar. Idući put kad netko kaže "sajt je spor, trebamo jači server", otvorite DevTools prije nego otvorite novčanik.

Povezano:

• Core Web Vitals nisu SEO trik, oni su vaš prihod
• 84% developera koristi AI alate. Zašto onda kod nije bolji?

Mislite da vam sajt zapinje, a ne znate gdje odlazi vrijeme? Napravimo audit third-party skripti i pokažemo vam poimence što košta i što se može izbaciti. Javite nam se.