Kaip pagreitinti vaizdų įkėlimą svetainėje
Penki pakeitimai, kurie sumažina vaizdų svorį bet kurioje svetainėje, surikiuoti pagal poveikį.
Daugumoje svetainių vaizdai sudaro didžiąją dalį to, ką atsisiunčia lankytojas. Viena neoptimizuota nuotrauka iš telefono gali sverti daugiau nei visas likęs puslapis kartu. Vaizdų sutvarkymas paprastai yra didžiausias ir pigiausias įmanomas spartos pagerinimas, o greitesni puslapiai užima aukštesnes vietas paieškoje, ilgiau išlaiko lankytojus ir atneša daugiau pardavimų.
1. Įkelkite vaizdus tokio dydžio, kokio jie rodomi
Nuotrauka tiesiai iš telefono yra 4000 pikselių pločio ar daugiau. Turinio stulpelis svetainėje retai būna platesnis nei 1200 pikselių, o kortelė ar miniatiūra gerokai mažesnė. Kiekvieną papildomą pikselį naršyklė atsisiunčia ir tada išmeta. Pakeiskite dydį prieš įkeldami: maždaug 2000 pikselių pločio viso pločio reklamjuostėms (kad išliktų ryškios didelio tankio ekranuose), nuo 1200 iki 1600 turinio vaizdams ir nuo 600 iki 800 kortelėms. Dydžio keitimo įrankis apdoroja visą aplanką iš karto.
2. Suspauskite
Esant tinkamiems matmenims, likusį darbą atlieka suspaudimas. Nuotrauka, išsaugota su kokybe 80, tinklalapyje atrodo lygiai taip pat kaip su kokybe 100 ir dažnai yra tris kartus mažesnė. Vaizdų suspaudimo įrankis apdoroja daug failų iš karto ir parodo kiekvieno failo sutaupymą.
3. Naudokite WebP
WebP palaiko visos šiuolaikinės naršyklės, ir esant tokiai pačiai matomai kokybei jis paprastai nuo 25 iki 35 % mažesnis už JPG, o skaidrumo palaikymas leidžia juo pakeisti ir daugelį PNG. Konvertuokite naudodami JPG į WebP arba PNG į WebP. AVIF dar mažesnis, tačiau lėčiau koduojamas ir ne visos įkėlimo sistemos jį palaiko, todėl praktiškas numatytasis pasirinkimas yra WebP.
4. Parinkite turiniui tinkamą formatą
| Turinys | Geriausias formatas |
|---|---|
| Nuotraukos | WebP arba JPG, kur WebP nepriimamas |
| Logotipai ir piktogramos | SVG, jei jį turite, kitu atveju PNG arba WebP |
| Ekrano kopijos su tekstu | PNG arba nenuostolingas WebP |
| Paprastos animacijos | Trumpas vaizdo įrašas vietoj GIF |
5. Padėkite naršyklei juos įkelti protingai
- Atidėtas įkėlimas. Vaizdai, esantys žemiau pirmojo ekrano, turėtų būti įkeliami tik tada, kai lankytojas prie jų priartėja slinkdamas. Dauguma platformų tai daro automatiškai; paprastame HTML pridėkite loading="lazy" prie img žymų, kurios iš pradžių nematomos.
- Matmenys. Kiekvienam vaizdui nurodykite plotį ir aukštį, kad puslapis nešokinėtų atsirandant vaizdams. Maketo poslinkis yra vienas iš Google Core Web Vitals rodiklių.
- Pirmiausia pagrindinis vaizdas. Didelis vaizdas puslapio viršuje, paprastai tas, kuris laikomas Largest Contentful Paint, niekada neturėtų būti įkeliamas atidėtai. Jis turi įsikelti kuo anksčiau.
Kokį skirtumą tai daro
Įprastas puslapis su dešimčia nuotraukų tiesiai iš telefono gali sverti 30 MB. Pakeitus dydį iki protingo pločio ir suspaudus, tas pats puslapis paprastai sveria apie 2 MB. Konvertavus į WebP, arčiau 1,4 MB. Mobiliuoju ryšiu tai yra skirtumas tarp puslapio, kuris pasirodo per sekundę, ir puslapio, kurį daugelis lankytojų palieka.
Rezultatų tikrinimas
Google PageSpeed Insights ir Lighthouse skydelis Chrome kūrėjo įrankiuose abu parodo per didelius vaizdus, vaizdus, kurie turėtų būti WebP, ir Largest Contentful Paint elementą. Paleiskite juos prieš ir po pakeitimų, o pirmiausia dėmesį skirkite puslapiams, kurie sulaukia daugiausia lankytojų.