Paano pabilisin ang pag-load ng mga larawan sa isang website
Ang limang pagbabago na nagpapagaan sa mga larawan sa anumang website, ayon sa laki ng epekto.
Sa karamihan ng website, mga larawan ang bumubuo sa malaking bahagi ng dina-download ng bisita. Ang isang litratong hindi na-optimise mula sa phone ay puwedeng mas mabigat pa kaysa sa natitirang bahagi ng page kung pagsasamahin. Ang pag-aayos ng mga larawan ang kadalasang pinakamalaki at pinakamurang paraan para bumilis ang site, at ang mas mabilis na page ay mas tumataas sa search, mas tumatagal ang mga bisita at mas maraming nagko-convert.
1. I-upload ang mga larawan sa laki kung paano ito ipinapakita
Ang litratong diretso mula sa phone ay 4000 pixel o higit pa ang lapad. Bihirang lumampas sa 1200 pixel ang lapad ng content column sa isang website, at mas maliit pa nang husto ang card o thumbnail. Bawat sobrang pixel ay dina-download at saka itinatapon ng browser. Mag-resize bago mag-upload: mga 2000 pixel ang lapad para sa mga full-width na banner (para matalas pa rin sa mga high-density na screen), 1200 hanggang 1600 para sa mga larawan sa content, at 600 hanggang 800 para sa mga card. Kaya ng resize tool ang isang buong folder nang sabay-sabay.
2. I-compress
Kapag tama na ang dimensyon, ang compression na ang bahala sa iba. Ang litratong na-save sa quality na 80 ay mukhang kapareho lang ng nasa 100 sa isang web page, at madalas ay sangkatlo lang ang laki. Kaya ng image compressor ang maramihan at ipinapakita nito ang natipid sa bawat file.
3. Gumamit ng WebP
Suportado ng bawat kasalukuyang browser ang WebP at karaniwang 25 hanggang 35% itong mas maliit kaysa sa JPG sa parehong nakikitang kalidad, at may suporta pa sa transparency kaya puwede rin itong pumalit sa maraming PNG. Mag-convert gamit ang JPG sa WebP o PNG sa WebP. Mas maliit pa ang AVIF pero mas mabagal i-encode at hindi pa kasinlawak ang suporta rito ng mga upload system, kaya WebP ang praktikal na default.
4. Piliin ang tamang format para sa laman
| Laman | Pinakamagandang format |
|---|---|
| Mga litrato | WebP, o JPG kung saan hindi tinatanggap ang WebP |
| Mga logo at icon | SVG kung mayroon ka, kung wala ay PNG o WebP |
| Mga screenshot na may teksto | PNG o lossless WebP |
| Mga simpleng animation | Maikling video sa halip na GIF |
5. Tulungan ang browser na i-load ang mga ito nang matino
- Lazy loading. Ang mga larawang nasa ibaba ng unang screen ay dapat mag-load lang kapag nag-scroll na ang bisita malapit sa mga ito. Awtomatiko itong ginagawa ng karamihan ng platform; sa plain na HTML, idagdag ang loading="lazy" sa mga img tag na hindi agad nakikita.
- Dimensyon. Bigyan ng width at height ang bawat larawan para hindi nagtatalon-talon ang page habang dumarating ang mga larawan. Ang layout shift ay isa sa mga Core Web Vitals ng Google.
- Unahin ang pangunahing larawan. Ang malaking larawan sa itaas ng page, na kadalasang itinuturing na Largest Contentful Paint, ay hindi kailanman dapat naka-lazy load. Dapat itong mag-load nang pinakamaaga hangga't maaari.
Gaano kalaki ang pagkakaiba
Ang karaniwang page na may sampung litratong diretso mula sa phone ay puwedeng umabot ng 30 MB. Kapag na-resize sa makatwirang lapad at na-compress, ang parehong page ay kadalasang mga 2 MB na lang. Kapag na-convert sa WebP, malapit na sa 1.4 MB. Sa mobile connection, iyan ang pagkakaiba ng page na lumalabas sa loob ng isang segundo at ng page na iniiwan ng maraming bisita.
Pagsusuri sa resulta mo
Parehong inililista ng PageSpeed Insights ng Google at ng Lighthouse panel sa developer tools ng Chrome ang mga sobrang laking larawan, ang mga larawang dapat ay WebP, at ang Largest Contentful Paint element. Patakbuhin ang mga ito bago at pagkatapos, at unahin ang mga page na may pinakamaraming bisita.