Miks veebileht on aeglane ja mida parandada esimesena

Mõõda enne optimeerimist

„Minu arvutis tundub kiire” sõltub cache’ist, seadmest ja võrgust. Testi privaatses aknas, telefonis ja brauseri jõudlustööriistadega. Selgita välja, kas aeg kulub serverile, allalaadimisele või JavaScriptile.

1. Pildid annavad sageli kiireima võidu

• Ära saada 4000px pilti 600px laiusesse blokki.
• Kasuta sobivaid kaasaegseid formaate.
• Esimesest ekraanist allpool olevad pildid lae laisalt.
• Määra mõõdud, et layout laadimisel ei hüppaks.

2. Ära käivita koodi, mida leht ei vaja

Iga teek tuleb alla laadida, parsida ja käivitada. Mitu suurt paketti väikeste efektide jaoks maksavad odaval telefonil palju rohkem kui arendaja sülearvutil. Enne dependency lisamist küsi, kas CSS või väike moodul piisaks.

3. Ka fondid tuleb alla laadida

Kahe fondiperekonna viis kirjakaalu võivad moodustada märgatava mahu. Jäta alles ainult kasutatavad kaalud ja seadista laadimine nii, et tekst ei jääks fondi oodates nähtamatuks.

4. Kontrolli serveri vastuse aega

Kui HTML hakkab saabuma alles mitme sekundi pärast, ei lahenda piltide optimeerimine põhiprobleemi. Otsi magavat instantsi, aeglast andmebaasipäringut, sünkroonset välist API-d või puuduvaid cache-kohti.

5. Kolmandate osapoolte vidinad võivad olla kallid

Chatid, kaardid, analüütika, reklaamipikslid ja sotsiaalvidinad lisavad võrgu- ja JavaScripti koormust. Kõike ei pea eemaldama, kuid lae neid ainult seal, kus neist on päriselt kasu.

Mõistlik optimeerimise järjekord

1. Salvesta algseis.
2. Paranda liiga suured pildid.
3. Eemalda kasutamata skriptid ja stiilid.
4. Kontrolli backend’i ja andmebaasi.
5. Mõõda uuesti.

Ilma kordusmõõtmiseta muutub optimeerimine oletamiseks.

Cache aitab siis, kui andmeid saab korduvkasutada

Logo, CSS, JavaScript ja muutumatud pildid ei pea iga navigeerimisega uuesti alla tulema. Õiged cache header’id lubavad brauseril neid taaskasutada. Privaatseid kasutajaandmeid ei tohi aga avaliku cache’ina käsitleda.

Õpi Network waterfall’i vähemalt põhiliselt lugema

Sorteeri päringud mahu ja aja järgi. Üks fail võib moodustada poole lehe mahust, kümned päringud võivad oodata ühe välise domeeni taga ning aeglane põhidokument viitab backend’ile.

Testi nõrgema seadmega

Võimas arvuti peidab jõudlusprobleeme. Testi tagasihoidlikuma telefoniga ja aeglasema võrguga, eriti kui liiklus tuleb mobiilireklaamist või sotsiaalmeediast.