Images yawanci su ne bytes mafi nauyi a page, don haka inganta su shi ne nasarar LCP mafi girma. Lever guda uku: modern formats, responsive sizing, da loading priority.
AVIF da WebP suna compress ƙasa da JPEG/PNG a inganci ɗaya (AVIF sau da yawa 50% ƙasa da JPEG). Yi sabis da su tare da fallback don tsofaffin browsers su ci gaba da aiki:
Kada ka aika image na 2000px zuwa phone na 400px. srcset yana ba browser damar zaɓar girman da ya dace da na'ura:
<img
srcset="/p-400.jpg 400w, /p-800.jpg 800w, /p-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
src="/p-800.jpg" width="800" height="600" alt="...">
sizes yana gaya wa browser yadda faɗin image ke render don ya zaɓi mafi ƙanƙantar source da ya isa.
fetchpriority="high", loading="eager", kuma yi la'akari da preload.loading="lazy" don kada a fetch shi har sai an bukata.Koyaushe ka kiyaye width/height don hana CLS.
LCP mai jinkiri sau da yawa oversized hero image ne kawai. Sanin formats (AVIF/WebP), srcset don daidai resolution, da priority daidai — haɗe da ba lazy-loading LCP image ba — shi ne practical toolkit ɗin da masu tambayoyi ke tsammani, kuma yawanci shi ne canji mafi tasiri a kan ainihin site.
Ɗakin karatu na tambayoyin hira na IT tare da amsoshi cikakke — daga Junior zuwa Senior.
Ba da Gudummawa