विषय
- #संसाधन लोडिंग
- #ब्राउज़र अनुकूलन
- #पृष्ठ लोडिंग
ब्राउज़र आम तौर पर नीचे दिए गए क्रम में रेंडरिंग करता है।
- HTML पार्सिंग (ऊपर से नीचे head -> body):
1. HTML पार्सिंग और DOM निर्माण
2. CSS फ़ाइल लोड करना और लागू करना (रेंडरिंग ब्लॉकिंग)
3. स्क्रिप्ट लोड करना और निष्पादित करना (रेंडरिंग ब्लॉकिंग)
4. <body> सेक्शन की सामग्री रेंडर करना (छवि, पाठ आदि)
ब्राउज़र के संसाधन प्राथमिकता को नियंत्रित करके, आप पेज लोडिंग गति को अनुकूलित कर सकते हैं।
नीचे दिए गए रेंडरिंग क्रम को बेहतर बनाने के लिए, मैं नीचे दिए गए मुख्य गुणों को रिकॉर्ड करना चाहता हूँ।
- JavaScript: async, defer, module
- CSS: preload, media
- छवि: loading="lazy", srcset, sizes
- अन्य: prefetch, preconnect, dns-prefetch
JavaScript
async : HTML पार्सिंग के समानांतर डाउनलोड किया जाता है, और डाउनलोड होने के बाद तुरंत निष्पादित किया जाता है। अगर पेज के किसी संसाधन का इस JS से कोई संबंध है, तो async टैग को निकालना बेहतर है।
defer : HTML पार्सिंग के समानांतर डाउनलोड किया जाता है, और HTML पार्सिंग पूरी तरह से समाप्त होने के बाद निष्पादित किया जाता है। = क्रम की गारंटी है। अगर HTML पूरी तरह से रेंडर होने के बाद निष्पादित किया जाना चाहिए, तो defer टैग जोड़ना बेहतर है।
ब्राउज़र मूल रूप से HTML को पहले लोड करता है, लेकिन अगर head टैग में कोई स्क्रिप्ट स्रोत है, तो रेंडरिंग अवरुद्ध हो जाती है। ऊपर दिए गए दो टैग जोड़कर, आप HTML रेंडरिंग ब्लॉकिंग को रोक सकते हैं।
CSS
styleshee : डिफ़ॉल्ट मान है। रेंडरिंग को अवरुद्ध करने वाला एक तत्व है, और इसका उपयोग केवल तभी किया जाता है जब CSS लोड किया जाना आवश्यक हो।
preload : रेंडरिंग को अवरुद्ध किए बिना पहले से डाउनलोड किया जाता है। onload इवेंट के होने पर, यह stylesheet में बदल जाता है और स्टाइल लागू हो जाता है।
media: स्क्रीन आकार की स्थिति के मिलान पर रेंडर किया जाता है।
छवि
loading="lazy" : छवि स्क्रीन पर दिखाई देने पर लोड होती है। (जब स्क्रॉल की स्थिति उस तत्व के पास होती है जहाँ छवि स्थित होती है)
srcset : स्क्रीन आकार के अनुसार इष्टतम छवि का चयन करता है। (छवि आकार का अनुकूलन)
sizes : ब्राउज़र को व्यूपोर्ट आकार के अनुसार उपयुक्त छवि का चयन करने के लिए सुझाव देता है।
अंतिम img टैग के मामले में, जब 480px चौड़ाई वाली छवि और 1024px चौड़ाई वाली छवि होती है, तो size विशेषता के अनुसार, यदि अधिकतम-चौड़ाई 600px है, तो 480px छवि दिखाई जाती है, अन्यथा 1024px छवि दिखाई जाती है।
* ई-कॉमर्स में, एक पेज में दर्जनों छवियाँ होती हैं, इसलिए छवि आकार को कम करने से बड़ा प्रभाव पड़ता है।
उदाहरण के लिए, यदि खोज परिणाम स्क्रीन में कम से कम 20 छवियाँ हैं और खोज प्रतिदिन 100,000 बार की जाती है...
अन्य
rel="prefetch": पेज पर जाने से पहले संसाधनों को पहले से डाउनलोड करके अगले पेज पर लोडिंग गति में सुधार करता है।
rel="preconnect": किसी विशिष्ट लिंक के लिए नेटवर्क कनेक्शन पहले से सेट करता है। (बड़े आकार के वीडियो, फ़ॉन्ट आदि)
rel="dns-prefetch": बाहरी संसाधन के DNS को देखकर संसाधनों को तेज़ी से लोड करता है। (मुख्य रूप से बाहरी CDN)
* preconnect बनाम dns-prefetch
preconnect TCP कनेक्शन (DNS - TCP हैंडशेक - TLS हैंडशेक) है, इसलिए यह ब्राउज़र संसाधन को लेने वाला एक भारी काम है। इसका उपयोग तब किया जाता है जब बाहरी संसाधनों को जल्दी से लोड करने की आवश्यकता होती है। (बहुत महत्वपूर्ण संसाधन और इस संसाधन की तेज रेंडरिंग महत्वपूर्ण है)
dns-prefetch केवल DNS लुकअप करता है, इसलिए यह एक हल्का काम है। यह उन संसाधनों के लिए उपयुक्त है जो महत्वपूर्ण नहीं हैं और बाद में लोड किए जाएँगे।
टिप्पणियाँ0