Sinu sait avaneb telefonis kiiremini, sest iga leht saadab kümme korda vähem koodi

Mis muutus ja kellele see loeb

29. oktoobril tegime Husly avaliku saidi kolm muudatust, mis puudutavad iga kliendi saidi iga lehte. Leht saadab külastaja brauserile nüüd ainult selle koodi, mida see leht päriselt kasutab.

Mõõtsime avaliku saidi valmis ehitust enne ja pärast muudatust. Vaatasime lehe esimest skripti, mille brauser peab laadima enne, kui leht saab puudutusele vastata. Hommikul oli see 10,0 MB, võrgus liikuva pakitud kujuna 2,6 MB. Nüüd on see 938 KB ja pakituna 288 KB, umbes kümme korda vähem. Sama vähe saadavad nüüd ka blogipostitused ja kujunduste eelvaated.

Muudatus on sees kõigil saitidel. Sa ei pea midagi sisse lülitama ega oma lehti muutma.

Miks koodi hulk telefonis loeb

Telefon peab iga skripti, mille leht saadab, alla laadima, läbi lugema ja käivitama, enne kui leht puudutusele vastab. Keskmise telefoni jaoks on 10 MB skripti mitu sekundit tööd. Sel ajal võib külastaja juba nuppu vajutada, aga midagi ei juhtu.

Google näitab oma lehe kiiruse aruandes kahte numbrit: LCP ehk kui kiiresti ilmub lehe suurim pilt või pealkiri, ja INP ehk kui kiiresti leht puudutusele vastab. Just skriptide laadimine ja käivitamine teeb need numbrid telefonis kehvaks.

Vähem skripti tähendab vähem ootamist enne, kui leht on valmis, ja kiiremat vastust puudutusele.

Mis jõuab nüüd külastajani ja mis ootab oma järjekorda

Varem sai iga külastaja kõik: kõigi vidinate koodi, kogu kujunduskomplekti ja kõik umbes 1600 menüüikooni, sõltumata sellest, mida leht kasutas. Nüüd laaditakse iga osa ainult seal, kus seda vaja on.

• Vidinad. Vormi, galerii, vahelehtede, rendiotsingu, broneerimise või sündmuste kood tuleb ainult lehele, kus see vidin on. Server joonistab vidina endiselt valmis, nii et selle sisu on lehel kohe näha.
• Liikuvad lõigud. Ilmumise, kallutamise ja kerimisega liikumise mootor laaditakse ainult lehele, kus sellist lõiku kasutatakse.
• Menüüikoonid. Menüü laadib ainult need ikoonid, mida see näitab. Ikooni koht on algusest hoitud, nii et menüü tekst ei nihku, kui ikoon saabub.
• Omaniku tööriistariba. Külastaja ei laadi seda üldse. Sisse logitud omanik saab sama tööriistariba hetk pärast lehe valmimist, nagu varemgi.
• Vestlusaken. Kui vestlus on välja lülitatud, ei laadita selle koodi üldse. Kui see on sees, on mull kohe näha ja vestlus laaditakse esimesel vabal hetkel või esimesel puudutusel. Esimene puudutus avab vestluse alati.
• Ettelugemise mängija. Laaditakse ainult blogipostitusel, millel on helifail.
• Päise menüüd. Iga sait laadib ainult oma päise menüükuju, näiteks rippmenüü, täisekraanmenüü või otsingu.

Vidin muutub klõpsatavaks siis, kui tema enda väike fail on kohale jõudnud, hetk pärast lehte. Varem pidi vidin ootama terve suure skripti ära, nii et telefonis on see enamasti varem valmis kui enne.

Kuidas tulemust ise vaadata

Lehe kiirust saad vaadata Google'i tööriistaga PageSpeed Insights. See näitab nii laborimõõtmist kui ka päris külastajate andmeid, kui saidil on neid piisavalt.

Laborimõõtmine näitab muutust kohe. Päris külastajate andmed koguvad Google'i aruandes viimase 28 päeva külastusi, nii et seal liigub number paremuse poole järk-järgult.

Üks väike nähtav muutus on menüüs. Menüüikoonid, mis olid valitud uuema ikoonivalijaga, ei paistnud varem saidil üldse. Nüüd on need nähtaval, nii uued kui ka vanemal kujul salvestatud ikoonid.

Näide väikese ettevõtte saidilt

Võtame lillepoe saidi, mille avalehel on suur pilt, galerii ja kontaktivorm ning vestlus on välja lülitatud. Varem laadis iga külastaja telefon ka rendiotsingu, broneerimiskalendri, sündmuste nimekirja, vestlusakna ja ettelugemise mängija koodi, kuigi ühtegi neist lehel polnud.

Nüüd laadib sama telefon ainult lehe enda osad: galerii, vormi ja päise menüü. Kõik muu jääb serverisse, kuni mõni leht seda päriselt vajab. Külastaja näeb sama lehte nagu enne. Galerii ja vorm muutuvad klõpsatavaks niipea, kui nende enda väike fail on kohal, ega oota enam kogu suurt skripti ära.

Mida me veel ei teinud

Iga lehega liigub endiselt kaasa ikoonide nimekiri, umbes 99 KB ja pakituna 22 KB, ning saidi otsinguvidin toob otsingu koodi lehele ka seal, kus otsingut pole. Mõlemad on meie järgmiste sammude nimekirjas.

Kaks päisekujundust, Kinetic ja Liquid Glass, laaditakse endiselt kohe. Need ümbritsevad kogu päist ja nende hilisem laadimine paneks kogu päise teist faili ootama.