Kā uzlabot vietnes veiktspēju (attēlu optimizācija)
Pēc tam, kad biju veicis dažas dizaina izmaiņas šajā emuārā, es nolēmu to pārbaudīt ar PageSpeed Insight (izstrādātājam diezgan acīmredzams lēmums). Man par pārsteigumu, rezultāti bija ļoti tālu no tā, ko biju sagaidījis.
Kad es kaut ko labo, es to daru pēc „pirmā kontakta“ principa. Ko tas nozīmē — vispirms optimizēt pirmo apmeklējumu. Nav jēgas vispirms optimizēt lietas atkārtotiem apmeklētājiem, jo, ja tas ir šausmīgi tiem, kas apmeklē tikai vienreiz, tas būs šausmīgi arī tiem, kas apmeklē vairākas reizes. Tāpēc ķersimies klāt.
Problēmas noteikšana
Kā redzams no rezultātiem, PageSpeed Insight norāda, ka es varu samazināt kopējo attēlu izmēru par 1171 KiB. Tam šobrīd nepiekrītu, jo tiek pieņemts, ka izmantoju jpeg ar 100% kvalitāti (patiesībā tie ir 70%, taču salīdzinājumu veikšu, balstoties uz optimizētiem un neoptimizētiem jpeg failiem), tomēr pieņemu, ka tik un tā varēšu panākt samazinājumu par 500 KiB (būšu optimistisks un cerēšu uz 700 KiB).
Tātad vispirms man jāsaprot, kādas tieši ir manas problēmas, un, tā kā runa ir par attēlu, visticamāk, tās būs:
- Formāts
- Izšķirtspēja
- Atliktā ielāde (lazy loading)
Attēla formāts
Tātad pirmā lieta, ko šeit izdarīšu, ir formāta maiņa. PageSpeed iesaka WebP un AVIF. Es nebūtu es, ja arī šeit neveiktu salīdzinājumu.
Atbalsta pārbaude
Pārbaudīsim abu formātu atbalstu, un šim nolūkam izmantošu Can I Use, un šeit redzu, ka lielākā daļa man vajadzīgo platformu tiek atbalstītas. IE11 neatbalsta nevienu no tiem, taču man tas neko nenozīmē, jo man nav ne mazākā nodoma atbalstīt kaut ko tādu, kas jau ir izbeidzis darbību. Tātad reālās atšķirības ir: KaiOS pārlūks, Opera Mini un QQ Browser. Tāpēc šajā brīdī nav nekāda acīmredzama iemesla izvēlēties vienu formātu otra vietā (jā — lielāks atbalsts man šobrīd nenozīmē labāku risinājumu).
Formāta maiņa
Tagad es gribu pārbaudīt failu izmēra atšķirību tiem 5 attēliem, kas ir vietnē, balstoties tikai uz formātu.
Lai konvertētu attēlus uz WebP, izpildu 3 komandas (viena maina formātu, saglabājot to pašu kvalitāti, un vēl divas maina formātu un samazina kvalitāti (saspiež))
mogrify -format webp -quality 100 *.jpg
mogrify -format webp -quality 90 *.jpg
mogrify -format webp -quality 70 *.jpg
Faila izmērs tika fiksēts atsevišķi pēc katras komandas. Pēc tam tika izpildītas nākamās trīs komandas:
mogrify -format avif -quality 100 *.jpg
mogrify -format avif -quality 900 *.jpg
mogrify -format avif -quality 70 *.jpg
Un pēc rezultātu saņemšanas tie atkal tika pierakstīti.
Rezultātu salīdzinājums
Tātad šeit ir iegūto rezultātu tabula (visi failu izmēri norādīti KiB).
| Sākotnējais attēls | Sākotnējais izmērs | WebP izmērs | WebP 90% | WebP 70% | AVIF izmērs | AVIF 90% | AVIF 70% |
|---|---|---|---|---|---|---|---|
| Attēls 1 (100% kvalitāte) | 297 | 385 | 44 | 28 | 291 | 50 | 26 |
| Attēls 2 (100% kvalitāte) | 894 | 1331 | 232 | 82 | 770 | 335 | 114 |
| Attēls 3 (100% kvalitāte) | 740 | 1228 | 127 | 59 | 546 | 187 | 69 |
| Attēls 4 (100% kvalitāte) | 1228 | 1740 | 420 | 208 | 991 | 513 | 280 |
| Attēls 5 (100% kvalitāte) | 2457 | 4270 | 547 | 125 | 2048 | 807 | 204 |
| Attēls 1 (70% kvalitāte) | 82 | 227 | 47 | 28 | 197 | 54 | 27 |
| Attēls 2 (70% kvalitāte) | 228 | 833 | 190 | 81 | 619 | 205 | 110 |
| Attēls 3 (70% kvalitāte) | 159 | 513 | 113 | 58 | 343 | 123 | 70 |
| Attēls 4 (70% kvalitāte) | 411 | 1433 | 395 | 205 | 925 | 383 | 259 |
| Attēls 5 (70% kvalitāte) | 390 | 2836 | 377 | 132 | 1433 | 358 | 183 |
Un rezultāti ir diezgan interesanti:
- Mani pārsteidza, ka, konvertējot attēlus uz WebP, faila izmērs palielinājās — atsevišķā gadījumā pat par 627% (2. attēls ar 70% kvalitāti), jeb, aptuveni rēķinot — papildu 2,3 MiB!
- Vienkārša konvertēšana uz WebP nesniedz nekādu labumu (patiesībā tā drīzāk kaitē)
- Vienkārša konvertēšana uz AVIF sniedz labumu tikai salīdzinājumā ar nesaspiestiem JPEG un WebP failiem (tāpēc automatizētiem uzdevumiem es no tās izvairītos, jo daudzi attēli internetā jau ir optimizēti, tāpēc tas tikai kaitētu)
- Kvalitātes samazinājums par 10% dod milzīgu ieguvumu WebP un AVIF formātiem salīdzinājumā ar JPEG
- WebP, lai gan tas ir vecāks formāts, uzrāda labāku veiktspēju nekā AVIF
- PageSpeed Insight „kļūdījās“ — izmērs samazinājās par 768 KiB (jā, šo skaitli var palielināt līdz 850 KiB vai pat 950 KiB, taču vai tas tiešām ir tā vērts?)