छवि अपलोड अनुकूलन

नमस्कार, हेब्र! मैं आपके लिए लेख "आपकी वेबसाइट पर छवि लोडिंग का अनुकूलन कैसे करें" का अनुवाद प्रस्तुत करता हूं।

यदि साइट में बहुत सारी सुंदर छवियां हैं, तो यह बहुत अच्छा है, लेकिन वे लोडिंग समय को काफी कम कर सकते हैं और परिणामस्वरूप, एसईओ को नुकसान होगा, और कई उपयोगकर्ता लोड होने से पहले साइट को बंद कर देंगे। अक्सर ऐसा होता है कि मुख्य पृष्ठ पर स्लाइडर दिखाने के लिए कई मेगाबाइट चित्र बस डाउनलोड किए जाते हैं।

कल्पना करें कि आप धीमे मोबाइल इंटरनेट के माध्यम से ऐसी साइट तक पहुंचते हैं, इसमें बहुत समय लग सकता है और इस स्थिति में अधिकांश उपयोगकर्ता डाउनलोड होने से पहले आपकी साइट को बंद कर देंगे। इसका परीक्षण करने का एक अच्छा तरीका क्रोम देवटूल के माध्यम से इंटरनेट की गति को सीमित करने की क्षमता का लाभ उठाना है ।

समस्या

समस्या यह है कि अक्सर ऐसा होता है कि सामग्री पहले से ही भरी हुई है और चित्र अभी भी लोड हो रहे हैं। नतीजतन, उपयोगकर्ता खाली स्थान देख सकता है जहां छवियां धीरे-धीरे लोड होती हैं। यह स्पष्ट रूप से नहीं है कि आप क्या चाहते हैं।

नीचे दिए गए उदाहरण में, मैंने एक साधारण वेबसाइट बनाई, जिसकी पृष्ठभूमि छवि 4.8MB है। जैसा कि आप देख सकते हैं, DOM 1.14 सेकंड में बूट हुआ, यानी वास्तव में, उपयोगकर्ता 1.14 सेकंड के बाद सामग्री देखता है, जो 3 जी इंटरनेट के लिए बहुत अच्छा है। हालाँकि, पृष्ठभूमि छवि 27.32 सेकंड में लोड होती है। इस समय के दौरान, उपयोगकर्ता आपकी साइट को पहले ही छोड़ सकता है।



और न केवल उपयोगकर्ता अनुभव इससे ग्रस्त है। 2010 में, Google ने घोषणा की कि डाउनलोड करने की गति उनके रैंकिंग एल्गोरिदम के कारकों में से एक है और मुझे लगता है कि भविष्य में यह कारक अधिक से अधिक महत्वपूर्ण हो जाएगा।

निर्णय

तो इस समस्या को कैसे हल करें? खैर, शुरुआत के लिए, हम विभिन्न उपकरणों का उपयोग करके अपनी पृष्ठभूमि छवि को संक्षिप्त कर सकते हैं। उदाहरण के लिए, TinyPNG , ImageOptimizer या JPEGmini । यह एक आसान जीत होगी और बूट समय को ~ 10 सेकंड तक कम कर देगा। और यद्यपि यह निर्णय में एक विशाल कदम की तरह दिखता है, लेकिन 10 सेकंड बहुत अधिक है।

मूल छवि लोड करने से पहले स्टब छवि डाउनलोड करने के लिए अगला कदम हो सकता है। एक स्टब मूल छवि का एक संस्करण है, लेकिन कम रिज़ॉल्यूशन के साथ। जब हम ऐसी छवि बनाते हैं, तो हम 7372x4392 पिक्सल से 20x11 तक रिज़ॉल्यूशन कम करते हैं। नतीजतन, छवि का आकार 4.8MB से 900 बाइट्स तक कम हो जाता है।



यह डाउनलोड गति को 10 सेकंड से घटाकर 550 मिलीसेकंड कर देगा। लेकिन अब, एक पृष्ठभूमि के रूप में, हमारे पास एक कम-रिज़ॉल्यूशन, धुंधली छवि है। यह एक शानदार समाधान है जबकि पेज पहले सेकंड को लोड करता है, लेकिन फिर भी हम उपयोगकर्ताओं को उच्च रिज़ॉल्यूशन वाली मूल छवि दिखाना चाहते हैं।

ऐसा करने के लिए, हमें सबसे पहले निम्न-रिज़ॉल्यूशन वाली छवि को डाउनलोड करना होगा, और उसके बाद ही, पृष्ठभूमि में अतुल्यकालिक रूप से, उच्च-रिज़ॉल्यूशन मूल लोड करें, और जब उच्च-रिज़ॉल्यूशन संस्करण लोड किया जाता है, तो हम इसे स्टब छवि के स्थान पर रख सकते हैं। इसके लिए, मैंने पहले नीचे दिए गए कोड का उपयोग किया था।

(() => { 'use strict'; // Page is loaded const objects = document.getElementsByClassName('asyncImage'); Array.from(objects).map((item) => { // Start loading image const img = new Image(); img.src = item.dataset.src; // Once image is loaded replace the src of the HTML element img.onload = () => { item.classList.remove('asyncImage'); return item.nodeName === 'IMG' ? item.src = item.dataset.src : item.style.backgroundImage = `url(${item.dataset.src})`; }; }); })(); 

यह कोड asyncImage वर्ग वाले तत्वों की asyncImage करता है, जिसके बाद यह asyncImage data-src विशेषता में निर्दिष्ट सभी छवियों को लोड करता है, और जैसे ही छवि लोड होती है, यह <img> तत्व के लिए src को प्रतिस्थापित करता है, और शेष के लिए पृष्ठभूमि छवि को css के माध्यम से सेट करता है।

 <div class="asyncImage" data-src="/images/background.jpg"> ... </div> 

या

 <img class="asyncImage" src="/images/background-min.jpg" data-src="/images/background.jpg" alt="Beautiful landscape sunrise"> 

चूंकि स्क्रिप्ट छवि को लोड करने के बाद तत्व से कक्षा को हटा देती है, हम चाहें तो सीएसएस का उपयोग करके सुंदर एनिमेशन बना सकते हैं। उदाहरण के लिए, आसानी से अंदर जाने वाला एनीमेशन स्टब को गायब कर देगा जब छवि को बदल दिया जाएगा।

निष्कर्ष

तो हमने क्या हासिल किया है? हमने उपयोगकर्ता अनुभव में सुधार किया है, साइट की लोडिंग में तेजी लाई है, इसने तेज इंटरनेट के बिना उपयोगकर्ताओं के लिए अधिक सुलभ बनाया है और संभवतः Google पर हमारी रैंकिंग में सुधार किया है। इतने छोटे बदलाव के लिए ये बहुत बड़े सुधार हैं।



जैसा कि आप देख सकते हैं, हम 570 मिलीसेकंड के लिए स्टब डाउनलोड करते हैं, जैसे ही यह लोड होता है, उपयोगकर्ता को हमारी मूल छवि का कम-रिज़ॉल्यूशन संस्करण दिखाई देगा, और जैसे ही मूल छवि लोड होती है, यह कम रिज़ॉल्यूशन संस्करण को बदल देगा।

एक कार्यशील उदाहरण यहां देखें।

आलसी लोडिंग चित्र

यदि आप आगे जाना चाहते हैं और छवि लोडिंग को और भी बेहतर बनाना चाहते हैं, तो आपको आलसी छवि लोड करने का उपयोग करना उपयोगी हो सकता है।

आलसी लोडिंग एक ऐसी तकनीक है जहां पेज के दृश्य क्षेत्र के बाहर की छवियां तब तक लोड नहीं होती हैं जब तक कि छवि दृश्य क्षेत्र के किनारे तक नहीं पहुंचती है।

इसका लाभ यह है कि प्रारंभिक लोडिंग के दौरान कम डेटा लोड किया जाएगा, क्योंकि बहुत बार छवियों के केवल एक छोटे हिस्से को पृष्ठ के दृश्य क्षेत्र में प्रदर्शित किया जाता है, और बाकी को उपयोगकर्ता स्क्रॉल के रूप में डाउनलोड किया जा सकता है। इसे लागू करने के लिए एक अंतर्निरीक्षण प्रेक्षक सबसे उपयुक्त है।