Kuidas panna pildid veebilehel kiiremini laadima
Viis muudatust, mis vähendavad piltide kaalu igal veebilehel, mõju järjekorras.
Enamikul veebilehtedel moodustavad pildid suurema osa sellest, mida külastaja alla laadib. Üksainus optimeerimata foto telefonist võib kaaluda rohkem kui ülejäänud leht kokku. Piltide korda tegemine on tavaliselt suurim ja odavaim võimalik kiiruse parandus ning kiiremad lehed on otsingus kõrgemal, hoiavad külastajaid kauem ja toovad rohkem müüki.
1. Laadi pildid üles selles suuruses, milles neid näidatakse
Otse telefonist tulev foto on 4000 pikslit lai või rohkem. Veebilehe sisuveerg on harva laiem kui 1200 pikslit ning kaart või pisipilt on palju väiksem. Iga lisapiksel laaditakse alla ja brauser viskab selle seejärel minema. Muuda suurust enne serverisse üleslaadimist: umbes 2000 pikslit laiad täislaiusega bännerid (et need püsiksid suure tihedusega ekraanidel teravad), 1200 kuni 1600 sisupiltide jaoks ja 600 kuni 800 kaartide jaoks. Suuruse muutmise tööriist teeb terve kausta korraga.
2. Tihenda
Õigete mõõtude juures teeb tihendamine ülejäänu. Kvaliteediga 80 salvestatud foto näeb veebilehel välja täpselt nagu kvaliteediga 100 salvestatud ja on sageli kolmandiku suurune. Piltide tihendaja töötleb faile partiidena ja näitab iga faili säästu.
3. Kasuta WebP-d
WebP-d toetavad kõik praegused brauserid ja see on sama nähtava kvaliteedi juures tavaliselt 25 kuni 35% väiksem kui JPG; läbipaistvuse toe tõttu asendab see ka paljusid PNG-sid. Teisenda JPG-st WebP-ks või PNG-st WebP-ks. AVIF on veelgi väiksem, kuid seda on aeglasem kodeerida ja üleslaadimissüsteemid toetavad seda vähem, seega on WebP praktiline vaikevalik.
4. Vali sisule õige vorming
| Sisu | Parim vorming |
|---|---|
| Fotod | WebP või JPG seal, kus WebP-d ei aktsepteerita |
| Logod ja ikoonid | SVG, kui see sul on, muidu PNG või WebP |
| Tekstiga ekraanipildid | PNG või kadudeta WebP |
| Lihtsad animatsioonid | Lühike video GIF-i asemel |
5. Aita brauseril neid mõistlikult laadida
- Laisk laadimine. Esimesest ekraanist allpool olevad pildid peaksid laadima alles siis, kui külastaja nende lähedale kerib. Enamik platvorme teeb seda automaatselt; tavalises HTML-is lisa loading="lazy" img-siltidele, mis pole alguses nähtavad.
- Mõõdud. Anna igale pildile laius ja kõrgus, et leht piltide saabumisel ei hüppaks. Paigutuse nihe on üks Google'i Core Web Vitalsi näitajatest.
- Põhipilt esimesena. Lehe ülaosas olevat suurt pilti, mis tavaliselt loetakse Largest Contentful Paint'iks, ei tohiks kunagi laisalt laadida. See peaks laadima nii vara kui võimalik.
Kui suurt vahet see teeb
Tüüpiline leht kümne otse telefonist tulnud fotoga võib kaaluda 30 MB. Mõistliku laiuseni vähendatuna ja tihendatuna on sama leht tavaliselt umbes 2 MB. WebP-ks teisendatuna lähemal 1,4 MB-le. Mobiilsel ühendusel on see vahe lehe vahel, mis ilmub sekundiga, ja lehe vahel, mille paljud külastajad pooleli jätavad.
Tulemuste kontrollimine
Google'i PageSpeed Insights ja Chrome'i arendaja tööriistade Lighthouse'i paneel loetlevad mõlemad liiga suured pildid, pildid, mis peaksid olema WebP, ja Largest Contentful Paint'i elemendi. Käivita need enne ja pärast ning keskendu kõigepealt kõige rohkem külastatud lehtedele.