લોડિંગ="lazy" એટ્રિબ્યુટ બ્રાઉજરને કહે છે કે ઈમેજ અથવા iframe ને ડીફર લોડ કરો જ્યાં સુધી તે viewport માં પ્રવેશ કરવાનું હોય — બાંડવિડ્થ બચાવે છે અને પ્રારંભિક લોડને ગતિ આપે છે, કોઈ JavaScript વિના.
લોડિંગ="lazy" એટ્રિબ્યુટ બ્રાઉજરને કહે છે કે ઈમેજ અથવા iframe ને ડીફર લોડ કરો જ્યાં સુધી તે viewport માં પ્રવેશ કરવાનું હોય — બાંડવિડ્થ બચાવે છે અને પ્રારંભિક લોડને ગતિ આપે છે, કોઈ JavaScript વિના.
lazy — જ્યારે સ્ક્રોલિંગ તેને viewport માટે નજીક લાવે ત્યારે જ લોડ કરો.eager (ડિફોલ્ટ) — તરત જ લોડ કરો, સ્થિતિને ધ્યાનમાં લીધા વિનાં.બ્રાઉજર માર્જિન વાપરે છે (તત્વ view માં આવતાં પહેલાં થોડું આગળ લોડ કરે છે) તેથી ઈમેજ સામાન્ય રીતે તૈયાર હોય છે જ્યારે વપરાશકર્તા તેને જોશે.
<img src="x.jpg" loading="lazy" width="800" height="600" />
માપ વિના (અથવા aspect-ratio વિના), લેઝી લોડ કરેલી ઈમેજ પાસે કોઈ આરક્ષિત જગ્યા નથી, તેથી જ્યારે તે લોડ થાય છે પેજ કૂદી જાય છે — Cumulative Layout Shift (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" />
Largest Contentful Paint ઈમેજ પર લેઝી-લોડ કરવું વાસ્તવમાં કામગીરીને નુકસાન પહોંચે છે — તે સૌથી મહત્વપૂર્ણ પિક્સેલને વિલંબ કરે છે. માત્ર ઓફ-સ્ક્રીન મીડિયા પર લેઝી-લોડ કરો.
// 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 ઈમેજને eager રાખો (હત્તા fetchpriority="high") જેથી મહત્વપૂર્ણ સામગ્રી હજી પણ ઝડપથી લોડ થાય.