loading="lazy" ఆరిబ్యూట్ బ్రౌజర్కు చెప్పుతుంది విండోకు ప్రవేశించే వరకు ఇమేజ్ లేదా iframe యొక్క లోడింగ్ను వాయిదా వేయండి — బ్యాండ్విడ్థ్ সేవ్ చేయండి మరియు ప్రారంభ లోడింగ్ను వేగవంతం చేయండి, JavaScript లేకుండా.
html
loading="lazy" ఆరిబ్యూట్ బ్రౌజర్కు చెప్పుతుంది విండోకు ప్రవేశించే వరకు ఇమేజ్ లేదా iframe యొక్క లోడింగ్ను వాయిదా వేయండి — బ్యాండ్విడ్థ్ সేవ్ చేయండి మరియు ప్రారంభ లోడింగ్ను వేగవంతం చేయండి, JavaScript లేకుండా.
lazy — స్క్రోలింగ్ విండోకు దగ్గరగా తీసుకువచ్చినప్పుడు మాత్రమే లోడ్ చేయండి.eager (డిఫాల్ట్) — స్థానం పట్టనిసారిగా తక్షణమే లోడ్ చేయండి.బ్రౌజర్ మార్జిన్ను ఉపయోగిస్తుంది (మూలకం వీక్షణలోకి స్క్రోల్ చేయబడటానికి ముందే లోడ్ చేయండి) కనుక ఉపయోగకర్త దానిని చూసే సమయానికి ఇమేజ్ సాధారణంగా సిద్ధంగా ఉంటుంది.
<img src="x.jpg" loading="lazy" width="800" height="600" />
పరిమాణాలు లేకుండా (లేదా aspect-ratio), సోమరిగా లోడ్ చేయబడిన ఇమేజ్కు రిజర్వ్ చేయబడిన స్థలం లేదు, కాబట్టి ఇది లోడ్ చేసినప్పుడు పేజీ జంపుతుంది — సంచిత లేఅవుట్ షిఫ్ట్కు (CLS) నష్టం కలిగిస్తుంది. ఎల్లప్పుడూ స్థలాన్ని రిజర్వ్ చేయండి.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
సర్వవృత్త కంటెంట్ పెయింట్ ఇమేజ్ను సోమరిగా లోడ్ చేయడం వాస్తవానికి పనితీరును దెబ్బతీస్తుంది — ఇది అత్యంత ముఖ్యమైన పిక్సెల్ను ఆలస్యం చేస్తుంది. స్క్రీన్ ఆఫ్ మీడియాను మాత్రమే సోమరిగా లోడ్ చేయండి.
// the old manual approach native lazy-loading replaced
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) e.target.src = e.target.dataset.src; });
});
స్థానిక loading="lazy" చాలా సందర్భాల్లో దీని సందర్భం నుండి వేరు చేసింది (IntersectionObserver ఇప్పటికీ కస్టమ్ లాజిక్కు ఉపయోగకరమైనది ఉన్నప్పటికీ).
స్థానిక సోమరి లోడింగ్ చిత్రాలతో సుదీర్ఘ పేజీల కోసం ప్రారంభ బైట్లు మరియు అభ్యర్థనలను తగ్గిస్తుంది — మొబైల్కు పెద్ద విజయం — ఉచితం.
సూక్ష్మతలు విషయ. చేస్తాయి: CLS ను రక్షించడానికి పరిమాణాలను రిజర్వ్ చేయండి, మరియు ఫోల్డ్ పైన/LCP ఇమేజ్లను ఈగర్లో ఉంచండి (కూడా fetchpriority="high") ఇంపర్టెంట్ కంటెంట్ ఇప్పటికీ వేగంగా లోడ్ చేస్తుంది.