CSS આળસુ નિયમ: ઑપ્ટિમાઇઝ્ડ વેબ પર્ફોર્મન્સ માટે છબીઓ અને iframes લોડ કરી રહ્યા છે

વેબ ડેવલપમેન્ટના હંમેશા વિકસતા લેન્ડસ્કેપમાં, વેબસાઇટની કામગીરીનું ઑપ્ટિમાઇઝેશન સર્વોપરી છે. ધીમું લોડિંગ વેબ પૃષ્ઠ નિરાશ વપરાશકર્તાઓને, ઉચ્ચ બાઉન્સ રેટ્સ અને આખરે, તમારી સર્ચ એન્જિન રેન્કિંગ પર નકારાત્મક અસર કરી શકે છે. કામગીરીને વેગ આપવા માટેની એક શક્તિશાળી તકનીક આળસુ લોડિંગ છે. આ માર્ગદર્શિકા CSS નો ઉપયોગ કરીને છબીઓ અને iframes માટે આળસુ લોડિંગને કેવી રીતે અમલમાં મૂકવું તે અન્વેષણ કરે છે, જે વૈશ્વિક પ્રેક્ષકો માટે વ્યવહારુ ઉદાહરણો અને શ્રેષ્ઠ પ્રથાઓ પ્રદાન કરે છે.

આળસુ લોડિંગ શું છે?

આળસુ લોડિંગ એ એક તકનીક છે જે સંસાધનો (જેમ કે છબીઓ અને iframes) ના લોડિંગને સ્થગિત કરે છે જ્યાં સુધી તેની જરૂર ન પડે. બીજા શબ્દોમાં કહીએ તો, જ્યારે પૃષ્ઠ શરૂઆતમાં લોડ થાય છે ત્યારે વેબપૃષ્ઠ પરના બધા સંસાધનો લોડ કરવાને બદલે, વપરાશકર્તાના વ્યૂપોર્ટમાં દૃશ્યમાન સંસાધનો જ લોડ થાય છે. જેમ જેમ વપરાશકર્તા પૃષ્ઠ નીચે સ્ક્રોલ કરે છે, તેમ તેમ વધારાના સંસાધનો માંગ પર લોડ થાય છે. આ અભિગમ શરૂઆતના પૃષ્ઠ લોડિંગ સમયને નોંધપાત્ર રીતે ઘટાડી શકે છે, વપરાશકર્તાના અનુભવમાં સુધારો કરી શકે છે અને બેન્ડવિડ્થનું સંરક્ષણ કરી શકે છે.

આળસુ લોડિંગના ફાયદા

• સુધારેલ પૃષ્ઠ લોડિંગ સમય: શરૂઆતમાં ફક્ત દૃશ્યમાન સંસાધનો લોડ કરીને, શરૂઆતનો પૃષ્ઠ લોડિંગ સમય ઓછો થાય છે, જેનાથી ઝડપી વેબસાઇટનો અનુભવ થાય છે.
• ઘટાડેલ બેન્ડવિડ્થ વપરાશ: આળસુ લોડિંગ એવા સંસાધનોને બિનજરૂરી ડાઉનલોડિંગથી અટકાવે છે જે વપરાશકર્તા કદાચ જોશે પણ નહીં, જે વેબસાઇટ અને વપરાશકર્તા બંને માટે બેન્ડવિડ્થ બચાવે છે. આ ખાસ કરીને મર્યાદિત ડેટા પ્લાન ધરાવતા વપરાશકર્તાઓ માટે મહત્વપૂર્ણ છે.
• વધારેલ વપરાશકર્તા અનુભવ: ઝડપી પૃષ્ઠ લોડિંગ સમય અને સરળ સ્ક્રોલિંગ એકંદર રીતે વધુ સારા વપરાશકર્તા અનુભવમાં ફાળો આપે છે. વપરાશકર્તાઓ ઝડપથી લોડ થતી વેબસાઇટને છોડી દેવાની શક્યતા ઓછી હોય છે.
• સુધારેલ SEO: સર્ચ એન્જિન ઝડપી લોડિંગ સમયવાળી વેબસાઇટ્સને પસંદ કરે છે. આળસુ લોડિંગ તમારી વેબસાઇટની SEO રેન્કિંગને સુધારવામાં મદદ કરી શકે છે.
• નીચા સર્વર ખર્ચ: ઘટાડેલ બેન્ડવિડ્થ વપરાશ નીચા સર્વર ખર્ચ તરફ દોરી શકે છે, ખાસ કરીને મોટી સંખ્યામાં છબીઓ અને iframes ધરાવતી વેબસાઇટ્સ માટે.
• બહેતર સંસાધન ઉપયોગ: આળસુ લોડિંગ ફક્ત જ્યારે તેની જરૂર હોય ત્યારે જ તેને લોડ કરીને સંસાધનોના ઉપયોગને ઑપ્ટિમાઇઝ કરે છે.

CSS આળસુ લોડિંગ: આધુનિક અભિગમ

આધુનિક બ્રાઉઝર્સ હવે HTML માં loading એટ્રિબ્યુટનો ઉપયોગ કરીને મૂળ આળસુ લોડિંગને સપોર્ટ કરે છે. આ એટ્રિબ્યુટને <img> અને <iframe> તત્વો પર લાગુ કરી શકાય છે, જે તેને જાવાસ્ક્રિપ્ટ પર આધાર રાખ્યા વિના આળસુ લોડિંગને અમલમાં મૂકવાનું અતિ સરળ બનાવે છે.

loading એટ્રિબ્યુટ

loading એટ્રિબ્યુટ ત્રણ મૂલ્યો સ્વીકારે છે:

• lazy: તે સૂચવે છે કે બ્રાઉઝરે સંસાધનને વ્યૂપોર્ટની નજીક ન આવે ત્યાં સુધી લોડ કરવાનું સ્થગિત કરવું જોઈએ.
• eager: તે સૂચવે છે કે બ્રાઉઝરે વ્યૂપોર્ટમાં તેની સ્થિતિને ધ્યાનમાં લીધા વિના તરત જ સંસાધન લોડ કરવું જોઈએ. આ ડિફોલ્ટ વર્તન છે.
• auto: બ્રાઉઝરને આળસુ લોડ કરવું કે નહીં તે નક્કી કરવા દે છે. બ્રાઉઝર સામાન્ય રીતે `lazy` નિર્દિષ્ટ હતું તેમ વર્તશે.

છબીઓ માટે આળસુ લોડિંગનો અમલ

છબીને આળસુ લોડ કરવા માટે, ફક્ત loading="lazy" એટ્રિબ્યુટને <img> ટૅગમાં ઉમેરો:

            <img src="image.jpg" alt="Description of the image" loading="lazy">
            

              
                Copy
              
            
          

ઉદાહરણ:

            <img src="images/london-eye.jpg" alt="The London Eye" loading="lazy">
<img src="images/eiffel-tower.jpg" alt="The Eiffel Tower" loading="lazy">
<img src="images/great-wall.jpg" alt="The Great Wall of China" loading="lazy">
            

              
                Copy
              
            
          

આ ઉદાહરણમાં, લંડન આઇ, એફિલ ટાવર અને ચીનની મહાન દિવાલની છબીઓ ફક્ત ત્યારે જ લોડ કરવામાં આવશે જ્યારે તે વપરાશકર્તાના વ્યૂપોર્ટમાં દૃશ્યમાન થવાની તૈયારીમાં હોય.

Iframes માટે આળસુ લોડિંગનો અમલ

તેવી જ રીતે, તમે loading="lazy" એટ્રિબ્યુટને <iframe> ટૅગમાં ઉમેરીને iframes ને આળસુ લોડ કરી શકો છો:

            <iframe src="https://www.youtube.com/embed/VIDEO_ID" loading="lazy"></iframe>
            

              
                Copy
              
            
          

ઉદાહરણ:

            <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" loading="lazy"></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.9554733630316!2d-0.1269456842202068!3d51.50735097964078!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604ce1854c4f1%3A0x6f72d6a9740a5af!2sBuckingham%20Palace!5e0!3m2!1sen!2suk!4v1684752824355!5m2!1sen!2suk" loading="lazy"></iframe>
            

              
                Copy
              
            
          

આ YouTube વિડિઓ અને Google Maps iframe ને વ્યૂપોર્ટની નજીક આવે ત્યાં સુધી લોડ થવાથી અટકાવશે, જે પ્રારંભિક પૃષ્ઠ લોડિંગ સમયમાં સુધારો કરશે.

આળસુ લોડિંગ માટે અદ્યતન CSS તકનીકો

જ્યારે loading એટ્રિબ્યુટ આળસુ લોડિંગને અમલમાં મૂકવાનો સૌથી સરળ માર્ગ છે, ત્યારે તમે પ્લેસહોલ્ડર અને વિઝ્યુઅલ ક્યુ પ્રદાન કરવા માટે CSS નો ઉપયોગ કરીને અનુભવને વધુ સુધારી શકો છો.

પ્લેસહોલ્ડર છબીઓ

છબી લોડ થઈ રહી હોય ત્યારે ખાલી જગ્યા દર્શાવવાને બદલે, તમે પ્લેસહોલ્ડર છબીનો ઉપયોગ કરી શકો છો. આ વાસ્તવિક છબીનું નીચા-રિઝોલ્યુશન વર્ઝન અથવા સામાન્ય પ્લેસહોલ્ડર ગ્રાફિક હોઈ શકે છે.

ઉદાહરણ:

            <img src="placeholder.jpg" data-src="image.jpg" alt="Description of the image" loading="lazy">
            

              
                Copy
              
            
          

આ કિસ્સામાં, src એટ્રિબ્યુટમાં પ્લેસહોલ્ડર છબીનું URL છે, જ્યારે data-src એટ્રિબ્યુટમાં વાસ્તવિક છબીનું URL છે. જાવાસ્ક્રિપ્ટ (અથવા પોલીફિલ્સ) નો ઉપયોગ છબી દૃશ્યમાં આવવાની તૈયારીમાં હોય ત્યારે `src` ને `data-src` મૂલ્ય સાથે બદલવા માટે થઈ શકે છે.

CSS સંક્રમણો

જ્યારે છબી લોડ થાય છે ત્યારે તમે સરળ ફેડ-ઇન અસર બનાવવા માટે CSS સંક્રમણોનો ઉપયોગ કરી શકો છો. આ દૃશ્યમાન આકર્ષણને વધારી શકે છે અને વપરાશકર્તા માટે આળસુ લોડિંગ પ્રક્રિયાને ઓછી આંચકાજનક બનાવી શકે છે.

ઉદાહરણ:

            img {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

img[loading="lazy"] {
   opacity: 1; /* Or whatever the final opacity should be */
}
            

              
                Copy
              
            
          

આ CSS કોડ બધી છબીઓની પ્રારંભિક અપારદર્શકતા 0 પર સેટ કરે છે અને પછી છબીમાં loading="lazy" એટ્રિબ્યુટ હોવા પર અપારદર્શકતાને 1 પર સંક્રમિત કરે છે. જોકે, આને યોગ્ય રીતે કામ કરવા માટે જાવાસ્ક્રિપ્ટ અથવા પોલીફિલ્સની જરૂર છે.

બ્રાઉઝર સપોર્ટ અને પોલીફિલ્સ

loading એટ્રિબ્યુટ મોટાભાગના આધુનિક બ્રાઉઝર્સ દ્વારા સપોર્ટેડ છે. જો કે, જૂના બ્રાઉઝર્સ તેને સપોર્ટ કરી શકશે નહીં. ખાતરી કરવા માટે કે આળસુ લોડિંગ બધા બ્રાઉઝર્સમાં કામ કરે છે, તમે પોલીફિલનો ઉપયોગ કરી શકો છો. પોલીફિલ એ જાવાસ્ક્રિપ્ટ કોડનો એક ભાગ છે જે જૂના બ્રાઉઝર્સમાં નવું ફીચર આપે છે.

ઇન્ટરસેક્શન નિરીક્ષક API

ઇન્ટરસેક્શન નિરીક્ષક API એ એક શક્તિશાળી જાવાસ્ક્રિપ્ટ API છે જે તમને કોઈ તત્વ વ્યૂપોર્ટમાં પ્રવેશે છે કે બહાર નીકળે છે તે શોધવાની મંજૂરી આપે છે. આ API નો ઉપયોગ એવા બ્રાઉઝર્સમાં આળસુ લોડિંગને અમલમાં મૂકવા માટે થઈ શકે છે જે loading એટ્રિબ્યુટને સપોર્ટ કરતા નથી.

ઉદાહરણ (સરળ):

            const images = document.querySelectorAll('img[loading="lazy"]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

images.forEach((img) => {
  observer.observe(img);
});
            

              
                Copy
              
            
          

આ કોડ એક ઇન્ટરસેક્શન નિરીક્ષક બનાવે છે જે loading="lazy" એટ્રિબ્યુટ ધરાવતી બધી છબીઓનું નિરીક્ષણ કરે છે. જ્યારે કોઈ છબી વ્યૂપોર્ટમાં પ્રવેશે છે, ત્યારે નિરીક્ષક src એટ્રિબ્યુટને data-src એટ્રિબ્યુટના મૂલ્ય સાથે બદલે છે, જે છબીને લોડ કરવા માટે ટ્રિગર કરે છે. પછી નિરીક્ષક છબીનું નિરીક્ષણ કરવાનું બંધ કરે છે.

આળસુ લોડિંગ માટે શ્રેષ્ઠ પ્રથાઓ

• ફોલ્ડની ઉપરની સામગ્રીને પ્રાથમિકતા આપો: ખાતરી કરો કે જે સામગ્રી પ્રારંભિક વ્યૂપોર્ટમાં દૃશ્યમાન છે તે આતુરતાથી લોડ થાય છે. આળસુ લોડિંગનો ઉપયોગ મુખ્યત્વે ફોલ્ડની નીચેની સામગ્રી માટે થવો જોઈએ.
• યોગ્ય પ્લેસહોલ્ડરનો ઉપયોગ કરો: પ્લેસહોલ્ડર છબીઓ પસંદ કરો જે હલકી અને દૃષ્ટિથી આકર્ષક હોય. મોટા અથવા જટિલ પ્લેસહોલ્ડરનો ઉપયોગ કરવાનું ટાળો જે આળસુ લોડિંગના ફાયદાઓને નકારી શકે છે.
• વપરાશકર્તાના અનુભવને ધ્યાનમાં લો: વપરાશકર્તાના અનુભવનું ધ્યાન રાખો. સરળ ફેડ-ઇન અસરો બનાવવા અને છબીઓ લોડ થતી હોવાથી લેઆઉટમાં અચાનક ફેરફારો ટાળવા માટે CSS સંક્રમણોનો ઉપયોગ કરો.
• સારી રીતે પરીક્ષણ કરો: ખાતરી કરવા માટે કે તે યોગ્ય રીતે કામ કરે છે અને કોઈપણ અણધાર્યા સમસ્યાઓ રજૂ કરતું નથી, વિવિધ બ્રાઉઝર્સ અને ઉપકરણો પર તમારા આળસુ લોડિંગ અમલીકરણનું પરીક્ષણ કરો.
• કામગીરીનું નિરીક્ષણ કરો: તમારી વેબસાઇટના લોડિંગ સમય અને એકંદર કામગીરી પર આળસુ લોડિંગની અસરનું નિરીક્ષણ કરવા માટે વેબ કામગીરીના સાધનોનો ઉપયોગ કરો.
• ભૂલોને સારી રીતે હેન્ડલ કરો: તે કિસ્સાઓને સારી રીતે હેન્ડલ કરવા માટે ભૂલ સંચાલનનો અમલ કરો જ્યાં છબીઓ લોડ થવામાં નિષ્ફળ જાય છે. વપરાશકર્તાને બેકઅપ છબી અથવા સંદેશ પ્રદર્શિત કરો.
• સુલભતાની વિચારણા: ખાતરી કરો કે તમારું આળસુ લોડિંગ અમલીકરણ વિકલાંગતા ધરાવતા વપરાશકર્તાઓ માટે સુલભ છે. છબીઓ માટે વૈકલ્પિક ટેક્સ્ટ પ્રદાન કરો અને તત્વોની લોડિંગ સ્થિતિને પહોંચાડવા માટે ARIA એટ્રિબ્યુટ્સનો ઉપયોગ કરો.
• અતિશય આળસુ લોડિંગ ટાળો: જ્યારે આળસુ લોડિંગ કામગીરીમાં સુધારો કરી શકે છે, ત્યારે અતિશય આળસુ લોડિંગ વપરાશકર્તાના અનુભવને નકારાત્મક અસર કરી શકે છે. એ સુનિશ્ચિત કરવા માટે કે વેબસાઇટ પ્રતિભાવશીલ અને ઇન્ટરેક્ટિવ રહે છે, મહત્વપૂર્ણ સંસાધનો આતુરતાથી લોડ કરો.

ટાળવા માટેના સામાન્ય ખાડાઓ

• ફોલ્ડની ઉપરની સામગ્રીનું આળસુ લોડિંગ: આ મહત્વપૂર્ણ સામગ્રીના લોડિંગમાં વિલંબ કરી શકે છે અને વપરાશકર્તાના અનુભવને નકારાત્મક અસર કરી શકે છે.
• મોટી પ્લેસહોલ્ડર છબીઓનો ઉપયોગ કરવો: આ આળસુ લોડિંગના કામગીરીના ફાયદાઓને નકારી શકે છે.
• બ્રાઉઝરની સુસંગતતાને અવગણવી: ખાતરી કરો કે તમારું આળસુ લોડિંગ અમલીકરણ વિવિધ બ્રાઉઝર્સ અને ઉપકરણો પર કામ કરે છે.
• સારી રીતે પરીક્ષણ કરવામાં નિષ્ફળતા: કોઈપણ સંભવિત સમસ્યાઓને ઓળખવા અને ઠીક કરવા માટે તમારા અમલીકરણનું પરીક્ષણ કરો.
• કામગીરીનું નિરીક્ષણ ન કરવું: તમારી વેબસાઇટની કામગીરી પર આળસુ લોડિંગની અસરનું નિરીક્ષણ કરો.

આળસુ લોડિંગ અને SEO

આળસુ લોડિંગ, જ્યારે યોગ્ય રીતે અમલમાં મૂકવામાં આવે છે, ત્યારે SEO પર સકારાત્મક અસર કરી શકે છે. પૃષ્ઠ લોડિંગ સમયમાં સુધારો કરીને, તે પરોક્ષ રીતે તમારી વેબસાઇટની સર્ચ એન્જિન પરિણામોમાં રેન્કિંગને સુધારી શકે છે. જો કે, તે સુનિશ્ચિત કરવું મહત્વપૂર્ણ છે કે સર્ચ એન્જિન ક્રોલર્સ હજી પણ તમારી છબીઓને ઍક્સેસ અને ઇન્ડેક્સ કરી શકે છે. <noscript> ટૅગનો ઉપયોગ એ સુનિશ્ચિત કરવામાં મદદ કરી શકે છે કે જાવાસ્ક્રિપ્ટ અક્ષમ હોય ત્યારે પણ સર્ચ એન્જિન છબીઓ શોધી શકે છે.

ઉદાહરણ:

            <img data-src="image.jpg" alt="Description of the image" loading="lazy">
<noscript><img src="image.jpg" alt="Description of the image"></noscript>
            

              
                Copy
              
            
          

<noscript> ટૅગ એવા બ્રાઉઝર્સ માટે બેકઅપ પૂરો પાડે છે જે જાવાસ્ક્રિપ્ટને સપોર્ટ કરતા નથી અથવા જાવાસ્ક્રિપ્ટને અક્ષમ કરે છે. આ કિસ્સામાં, <noscript> ટૅગની અંદરનો <img> ટૅગ આળસુ-લોડ કરેલી છબીને બદલે પ્રદર્શિત થશે.

નિષ્કર્ષ

આળસુ લોડિંગ એ વેબસાઇટની કામગીરીને ઑપ્ટિમાઇઝ કરવા અને વપરાશકર્તાના અનુભવને વધારવા માટે એક શક્તિશાળી તકનીક છે. બિન-જરૂરી સંસાધનોના લોડિંગને સ્થગિત કરીને, તમે પ્રારંભિક પૃષ્ઠ લોડિંગ સમયને નોંધપાત્ર રીતે ઘટાડી શકો છો, બેન્ડવિડ્થનું સંરક્ષણ કરી શકો છો અને તમારી વેબસાઇટની SEO રેન્કિંગને સુધારી શકો છો. loading એટ્રિબ્યુટના આગમન સાથે, આળસુ લોડિંગનો અમલ પહેલા કરતા સરળ બની ગયો છે. આ માર્ગદર્શિકામાં દર્શાવેલ શ્રેષ્ઠ પ્રથાઓને અનુસરીને, તમે તમારી વેબસાઇટ પર આળસુ લોડિંગને અસરકારક રીતે અમલમાં મૂકી શકો છો અને તેના અસંખ્ય ફાયદા મેળવી શકો છો.

ફોલ્ડની ઉપરની સામગ્રીને પ્રાથમિકતા આપવાનું, યોગ્ય પ્લેસહોલ્ડરનો ઉપયોગ કરવાનું, સારી રીતે પરીક્ષણ કરવાનું અને કામગીરીનું નિરીક્ષણ કરવાનું યાદ રાખો તેની ખાતરી કરવા માટે કે તમારું આળસુ લોડિંગ અમલીકરણ તમારા વપરાશકર્તાઓને, તેઓ વિશ્વમાં ગમે ત્યાં હોય, શ્રેષ્ઠ પરિણામો આપે છે.