ઈમેજ/iframes ની નેટિવ લેઝી લોડિંગ કેવી રીતે કામ કરે છે?

Question

Accepted Answer

લોડિંગ="lazy" એટ્રિબ્યુટ બ્રાઉજરને કહે છે કે ઈમેજ અથવા iframe ને **ડીફર લોડ** કરો જ્યાં સુધી તે viewport માં પ્રવેશ કરવાનું હોય — બાંડવિડ્થ બચાવે છે અને પ્રારંભિક લોડને ગતિ આપે છે, કોઈ JavaScript વિના. ```html

``` ## તે કેવી રીતે વર્તે છે - **`lazy`** — જ્યારે સ્ક્રોલિંગ તેને viewport માટે નજીક લાવે ત્યારે જ લોડ કરો. - **`eager`** (ડિફોલ્ટ) — તરત જ લોડ કરો, સ્થિતિને ધ્યાનમાં લીધા વિનાં. બ્રાઉજર માર્જિન વાપરે છે (તત્વ view માં આવતાં પહેલાં થોડું આગળ લોડ કરે છે) તેથી ઈમેજ સામાન્ય રીતે તૈયાર હોય છે જ્યારે વપરાશકર્તા તેને જોશે. ## એક નિર્ણાયક જોડી: layout shift ને બચાવવા માટે width/height સેટ કરો ```html

``` માપ વિના (અથવા `aspect-ratio` વિના), લેઝી લોડ કરેલી ઈમેજ પાસે કોઈ આરક્ષિત જગ્યા નથી, તેથી જ્યારે તે લોડ થાય છે પેજ **કૂદી** જાય છે — Cumulative Layout Shift (CLS) ને નુકસાન પહોંચે છે. હંમેશા જગ્યા આરક્ષિત કરો. ## ફોલ્ડ-આગળની સામગ્રી પર લેઝી-લોડ કરશો નહીં ```html

``` **Largest Contentful Paint** ઈમેજ પર લેઝી-લોડ કરવું વાસ્તવમાં *કામગીરીને નુકસાન પહોંચે છે* — તે સૌથી મહત્વપૂર્ણ પિક્સેલને વિલંબ કરે છે. માત્ર ઓફ-સ્ક્રીન મીડિયા પર લેઝી-લોડ કરો. ## નેટિવ પહેલાં: IntersectionObserver ```js // 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"`) જેથી મહત્વપૂર્ણ સામગ્રી હજી પણ ઝડપથી લોડ થાય.