Sivuk Ehi Tys — Nettisivun rakentaminen siten, että | sivukehitys.com
Kuvien optimointi on yleensä halvin ensimmäinen muutos: muodon vaihto pienentää tiedoston kolmannekseen tai puoleen ilman näkyvää laadun eroa.
Tiedostomuodon vaikutus on suora: samalla silmämääräisellä laadulla AVIF on noin 50 prosenttia pienempi kuin JPEG ja WebP noin 30 prosenttia pienempi. Käytännössä 200 kilotavun JPEG vastaa noin 100 kilotavun AVIF-tiedostoa, joten pelkkä muodon vaihto voi puolittaa kuvakuorman.
Paino kannattaa laskea auki sekunneiksi. Kymmenen 200 kilotavun kuvaa on 2 megatavua, ja hitaalla 4G-yhteydellä — noin 1,6 Mbit/s — sen lataaminen kestää noin 10 sekuntia. Lasku toimii myös yksittäiselle kuvalle: yksi 800 kilotavun kuva vie yhtä paljon kaistaa kuin viisi 160 kilotavun kuvaa.
On narrow screens, swipe or scroll the plate sideways.
Kokoerot kannattaa nähdä suhteessa LCP-rajaan. Jos sivun suurin elementti on 800 kilotavun kuva, pelkkä sen lataus vie noin 4 sekuntia 1,6 Mbit/s yhteydellä — enemmän kuin koko 2,5 sekunnin LCP-budjetti. Sama kuva 160 kilotavuna mahtuu budjettiin.
Toinen puoli on asettelun vakaus. Kun kuvan tai mainosalueen mitat on varattu sivun rakenteeseen jo ennen latausta, teksti ei hyppäydä kuvan avautuessa. Ilman varausta 1000 pikselin alueen kutistuminen 400 pikselistä 100 pikseliin tuottaa CLS-arvon 0,3, kun raja on 0,1 — tarkka lasku on esitetty sivulla Core Web Vitals -rajat ja mittarit.
Fontit ovat kuormana samanlaisia kuin kuvat: staattisia tiedostoja, joiden kilotavut lasketaan samaan yhteysbudjettiin ja jotka kannattaa antaa selaimen välimuistiin vuodeksi kuten muutkin staattiset tiedostot. Välimuistisäännöt ja julkaisun järjestys käydään läpi sivulla Verkkosivun julkaisu vaihe vaiheelta.
Further reading