ऑडियो प्लेयर डिफ़ॉल्ट रूप से लेज़ी-लोड होता है। जब तक विज़िटर उसके पास स्क्रॉल नहीं करता, तब तक उसका JavaScript या CSS लोड नहीं होता। इससे आपके पेज का Largest Contentful Paint (LCP) तेज़ बना रहता है।
लेज़ी लोड क्या करता है
- पेज लोड होने पर, प्लेयर की जगह एक छोटा प्लेसहोल्डर दिखाया जाता है
- पूरे प्लेयर का JavaScript और CSS अभी लोड नहीं होता
- जब विज़िटर प्लेयर से 500px के भीतर स्क्रॉल करता है, तो पूरा प्लेयर लोड होता है और प्लेसहोल्डर की जगह लेता है
- यह बदलाव दृश्य रूप से सहज होता है (आमतौर पर 100 ms से कम)
यह Core Web Vitals को क्यों सुधारता है
लेज़ी लोड के बिना, प्लेयर वाले हर पेज पर शुरुआती लोड में प्लेयर JS और CSS की लागत पड़ती है। लेज़ी लोड के साथ:
- LCP: प्रभावित नहीं - प्लेयर ऊपर की फोल्ड सामग्री में नहीं होता
- INP: प्रभावित नहीं - लोड के समय कोई भारी JS नहीं चलता
- CLS: प्रभावित नहीं - प्लेसहोल्डर की ऊंचाई अंतिम प्लेयर जितनी ही होती है
इसे कब बंद करें
लेज़ी लोड डिफ़ॉल्ट रूप से चालू है। इसे बंद करें अगर:
- आपका प्लेयर हमेशा फोल्ड के ऊपर हो (दुर्लभ)
- आप ऑटोप्ले उपयोग करते हैं और चाहते हैं कि प्लेयर तुरंत तैयार हो (बहुत दुर्लभ)
- आप डीबगिंग के लिए लेज़ी लोड के बिना परीक्षण करना चाहते हैं
इसे कैसे बंद करें
- Text to Speech - टेक्स्ट टू स्पीच → Advanced पर जाएं।
- Lazy load player को बंद करें।
- सेव करें।
यह तकनीकी रूप से कैसे काम करता है
- प्लगइन
IntersectionObserverका उपयोग करता है यह पता लगाने के लिए कि प्लेयर कब व्यू में आता है - इंटरसेक्शन होने पर, यह आवश्यक JS और CSS डायनामिक रूप से लोड करता है
- एक बार लोड होने के बाद, स्क्रिप्ट सत्र के बाकी समय ब्राउज़र में कैश रहती हैं
IntersectionObserver के बिना ब्राउज़र (बहुत पुराने) पेज लोड पर ही स्क्रिप्ट लोड करते हैं।
ज्ञात विशेष स्थितियां
छिपे हुए तत्व के अंदर प्लेयर
अगर आपका प्लेयर किसी display: none सेक्शन (जैसे कि बंद accordion) में है, तो लेज़ी लोड तब तक ट्रिगर नहीं होता जब तक वह सेक्शन दिखाई न दे। आमतौर पर यही वांछित होता है - जो दिखाई नहीं देता उसे लोड करने का कोई अर्थ नहीं।
ऑडियो ऑटोप्ले
अगर आप प्लेयर पर ऑटोप्ले सेट करते हैं और वह लेज़ी-लोड है, तो विज़िटर के स्क्रॉल करने तक यह नहीं चलेगा। प्लेयर लोड होते ही ऑटोप्ले शुरू हो जाता है।