Kako sem spletno stran društva pospešil s 70 na 100 točk

Spletna stran Društva naturistov K naravi, knaravi.si, je bila urejena in lepa, na telefonu pa počasna: Googlovo orodje PageSpeed Insights ji je dalo 70 točk od 100. Tri tedne pozneje je dobila 100 — trikrat zapored. Čarobnega gumba ni bilo. Bili so trije krivci, ki jih ima tudi marsikatera druga stran, in ena past, ki je nisem pričakoval.

Najprej: kako sem meril

Vse številke so iz PageSpeed Insights, zavihek Mobilni telefon. Google tam stran odpre na namerno upočasnjenem telefonu s počasnejšo povezavo — strožje, kot jo doživi večina obiskovalcev. Vsako meritev sem ponovil trikrat zapored, ker ena sama številka niha: ista, nespremenjena stran je isti dan dala 81, nato 72 in nato trikrat zapored 70. Verjamem šele številki, ki se ponovi.

* ena sama meritev. Krepke ocene so izmerjene trikrat zapored. Na koncu so 100 tudi dostopnost, dobre prakse in SEO, na računalniku pa hitrost.

Prvi korak: stvari, ki se naložijo, preden jih kdo potrebuje

Naslovna slika je telefonom pošiljala 268 KB, čeprav jo telefon prikaže majhno — zdaj dobijo različico s 116 KB. Šest strani z galerijami je vnaprej nalagalo sliko, ki je sploh niso uporabljale. Največ pa je stala zaščita obrazca pred roboti (Googlova reCAPTCHA): nalagala se je ob odprtju strani, čeprav jo potrebuje le, kdor piše sporočilo. Na lastni strani sem izmeril, da to stane približno 14 točk. Zdaj se naloži šele, ko obiskovalec klikne v obrazec — in kot stranski učinek ne dobi Googlovih piškotkov, dokler sam ne začne pisati.

Drugi krivec: pisave

Stran je uporabljala Googlove pisave, ki se nalagajo z Googlovega strežnika. Ko sem pogledal, kaj brskalnik res prenese, sem našel presenečenje: isto pisavo je prenesel do štirikrat — 682 KB namesto 228 KB. Hkrati je stran skoraj sekundo ostala prazna (v meritvi 871 ms), ker je brskalnik čakal nanje.

Rešitev: pisave so zdaj na istem strežniku kot stran, vsaka datoteka enkrat. Dokler ne pridejo, besedilo nariše sistemska pisava, ki je povečana in razmaknjena tako, da zavzame natanko toliko prostora — ko se zamenjata, se nič ne premakne. Ocena: 92, 92, 92.

Tretji krivec: statistika za vse

Googlova skripta za statistiko (Google Analytics) se je prenesla vsakemu obiskovalcu, tudi tistemu, ki v obvestilu o piškotkih ni privolil v analitiko — brez privolitve sicer ni shranjevala piškotkov, prenesla pa se je vseeno. Zdaj se prenese šele po privolitvi. To je hkrati bolj pošteno do obiskovalca in hitreje: 100, 100, 100. Cena je znana in sprejeta: v statistiki so odslej samo obiskovalci, ki privolijo.

Past, ki je nisem pričakoval

Takoj zatem je ena od galerij padla s 100 na 87. Na njej se ni spremenilo nič — spremenilo se je to, česar ni bilo več. Googlova skripta je prej zadrževala trenutek, ko brskalnik razglasi stran za naloženo. Brez nje je ta trenutek prišel prej, pisave, ki čakajo nanj, so se začele prenašati, še preden se je pokazala prva slika, in Google jih je štel v čas do prikaza. Pisave se zdaj prenesejo sekundo pozneje — in galerija ima spet trikrat 100.

Nauk: kdor odstrani skripto, naj preveri, kaj je čakalo nanjo.

In nekaj, česar ocena ne pokaže

Pri 100 točkah je bilo vse »popolno« — dokler nisem pri ogledu ene od reportaž opazil, da so črke prvo sekundo drugačne, potem pa se povečajo. Ocena tega ne zazna, ker se nič ne premakne: nadomestna pisava ima enake mere, a drugače oblikovane črke. Zdaj prva stran obiska ostane v nadomestni pisavi do konca, prave pisave se medtem le prenesejo, vse naslednje strani pa jih imajo že ob prvem izrisu. Ocena je ostala 100, črke pa mirujejo.

Kaj si lahko vzamete za svojo stran

• Izmerite trikrat, preden verjamete številki — in približno ob istem času dneva.
• Ko ocena pade, vprašajte, katera od petih meritev je padla. PageSpeed pod oceno izpiše pet številk; ena od njih pokaže vzrok hitreje kot katero koli ugibanje.
• Tuje skripte naj počakajo, da jih kdo potrebuje — zaščita obrazca, klepet, zemljevid, statistika.
• Pisave gostite sami in preverite, kolikokrat se res prenesejo.
• Stran poglejte tudi z očmi. Ocena 100 še ne pomeni, da je obiskovalcu prijetno.

Kako je nastala stran društva, preberete v zgodbi projekta knaravi.si, osnove merjenja hitrosti pa v članku Zakaj je hitrost spletne strani pomembna.