100 bodova na PageSpeedu: što smo za to promijenili

Polazna je vrijednost bila 58 od 100 na mobitelu. To nije loša vrijednost za web stranicu s 3D efektom u zaglavlju, ali jest vrijednost koju Google u mobilnom pretraživanju osjetno kažnjava. Na kraju je stajalo 100 bodova na računalu i 98 na mobitelu, uz također 100 za pristupačnost.

Ono što slijedi nije opći popis za provjeru nego stvarni tijek – uključujući mjesta na kojima smo se prevarili.

Polazno stanje

Pet zahvata koji su doista bili važni

1. Zamijeniti biblioteku, ne optimirati je

Zaglavlje prikazuje oblak čestica u 3D-u. Za to je radila poznata grafička biblioteka – 458 KB nakon smanjivanja. Mjerenje je pokazalo da se 51 KB od toga uopće nikad nije izvršilo.

Presudan je bio pogled na pitanje koliko toga zapravo trebamo. Bilo je jedanaest gradivnih elemenata: prikazivač, scena, kamera, geometrija, materijal i nekoliko pomoćnih klasa. Sve se to može programirati izravno prema grafičkom sučelju preglednika.

Rezultat: od 458 KB nastalo je 6 KB. Prikaz je istovjetan – preuzeli smo iste shadere.

2. Kompresija je bila uključena samo napola

U konfiguraciji poslužitelja kompresija je stajala na «uključeno» – ali redak koji određuje koje se vrste datoteka komprimiraju bio je zakomentiran. To je zadana postavka mnogih distribucija. Rezultat: komprimirao se isključivo HTML.

Grafička je biblioteka dakle išla vodom nekomprimirana. Nakon uključivanja: od 1243 KB nastalo je 251 KB. Uz to komprimirane inačice sada držimo unaprijed izračunate uz izvorne, kako poslužitelj ne bi računao iznova pri svakom dohvatu.

Uloženo: dva retka konfiguracije. Učinak: gotovo jedan megabajt po prvom pozivu.

3. Biblioteku za animacije potpuno ukloniti

Za pojavljivanje elemenata pri listanju radila je još jedna biblioteka, 114 KB. Mjerenje ju je dodatno označilo kao uzročnicu prisilnih prelamanja rasporeda – tijekom listanja je dohvaćala geometriju i prisiljavala preglednik da raspored preračunava usred pokreta.

Zamijenjena je s IntersectionObserver koji samo postavlja klasu. Sam pokret radi CSS. Manje 114 KB, više nikakvih prelamanja, otprilike 40 redaka vlastitog koda.

4. Favicon je bio velik 205 KB

Sitnica sa začuđujućim učinkom jer se učitava vrlo rano. Zamijenjena SVG datotekom od 6 KB, izrađenom iz postojećeg logotipa.

5. Geometriju dohvaćati u okviru animacije

Jedna je skripta pri svakom događaju listanja čitala ukupnu visinu dokumenta. To svojstvo preglednik ne može odgovoriti iz pamćenja – za to mora iznova preračunati raspored cijele stranice, usred listanja.

Pravilo koje iz toga slijedi i vrijedi posvuda: u događaju čitati, u sljedećoj slici pisati. Nikad obrnuto. Otada se visina stranice mjeri jednom i pamti, umjesto da se traži šezdeset puta u sekundi.

Pogreška koja je stajala 24 boda

Što je donijelo malo

Radi potpunosti mjere koje stoje u svakim uputama, a kod nas su bile jedva mjerljive:

Formati slika. Naša naslovna stranica gotovo nema slika – logotip je SVG datoteka. Ondje gdje se slike pojavljuju, pretvorba se naravno isplati; kao glavna poluga valja samo kod stranica bogatih slikama.

Daljnje smanjivanje fontova. Dvije obitelji fontova poslužujemo sami i unaprijed učitavamo one potrebne u vidljivom području. Daljnja optimizacija bila bi moguća, ali vrijednost ne pomiče.

Lokacija poslužitelja. Često se preporučuje, u našem slučaju nevažno: vrijeme do prvog bajta već je bilo 20 milisekundi. Tko ondje već stoji dobro, mrežom za distribuciju ne dobiva ništa.

Postupak za ponoviti

1. Mjerite prije nego što išta promijenite. Mobilno i stolno odvojeno, vrijednosti zabilježite.
2. Potražite najveću prenesenu datoteku. Gotovo je uvijek JavaScript. Pitanje nije kako je smanjiti nego treba li vam uopće.
3. Provjerite kompresiju. Ne je li uključena nego za koje vrste datoteka.
4. Prebrojite blokirajuće zahtjeve. Svaka datoteka stilskog predloška u zaglavlju zadržava prvo iscrtavanje.
5. Provjerite skokove rasporeda bez usporavanja. Jedini test koji je kod nas nedostajao.
6. Nakon svake izmjene mjerite iznova. Inače na kraju ne znate što je djelovalo.

Pomozi mi prevesti PageSpeed izvještaj moje stranice u
redoslijed. Budi strog; nemoj ništa hvaliti.

Moje izmjerene vrijednosti:
- Mobilno: [broj bodova], stolno: [broj bodova]
- LCP, TBT, CLS po uređaju: [vrijednosti]
- Najveće prenesene datoteke s veličinom: [popis]
- Zahtjevi koji blokiraju iscrtavanje: [popis]
- Poruke iz izvještaja: [umetni tekst]

O stranici:
- Kako je izgrađena: [CMS / statična / graditelj stranica]
- Treba li JavaScript za vidljivi sadržaj? [da/ne]
- Kako se isporučuje CSS? [izvanjski / unaprijed / djelomično unaprijed]

Zadaci:
1. Pridruži svaku poruku uzroku i reci na koji pokazatelj
   utječe – LCP, TBT ili CLS.
2. Poredaj mjere po učinku u odnosu na uloženo. Kod svake
   navedi koliko bodova realno pomiče i zašto.
3. Navedi mjere iz izvještaja koje kod moje izvedbe praktički
   ništa ne donose – i obrazloži to umjesto da ih jednostavno
   izostaviš.
4. Kod svake velike JavaScript datoteke najprije pitaj treba li
   uopće, prije nego što predložiš smanjivanje.
5. Upozori ako se CSS isporučuje samo djelomično unaprijed i
   objasni zašto to za CLS može biti gore
   nego nimalo.
6. Navedi što bih nakon svake izmjene trebala iznova mjeriti.

Ne izmišljaj izmjerene vrijednosti.

Zaključak

Sam broj bodova nije cilj – to je izmjerena vrijednost, a ne poslovni rezultat. Važno je iskustvo iza toga: stranicu koja je čitljiva nakon 1,4 sekunde pročita više ljudi nego onu kojoj treba šest sekundi. Kod mobilnih posjetitelja preko mobilne mreže razlika je veća od bilo kakve optimizacije teksta.

Put donde je u našem slučaju vodio preko jednog jedinog pitanja koje se stalno vraćalo: trebamo li to? Pet od šest zahvata sastojalo se u tome da se nešto ukloni, a ne doda.

Česta pitanja