फ़साड वाले तीसरे पक्ष के लेज़ी लोड संसाधन

तीसरे पक्ष के संसाधनों का इस्तेमाल अक्सर विज्ञापन या वीडियो दिखाने और सोशल मीडिया के साथ इंटिग्रेट करने के लिए किया जाता है. डिफ़ॉल्ट रूप से, पेज लोड होते ही तीसरे पक्ष के संसाधन लोड हो जाते हैं. हालांकि, इससे पेज लोड होने में ज़रूरत से ज़्यादा समय लग सकता है. अगर तीसरे पक्ष का कॉन्टेंट ज़रूरी नहीं है, तो लेज़ी लोडिंग का इस्तेमाल करके, परफ़ॉर्मेंस पर पड़ने वाले इस असर को कम किया जा सकता है.

इस ऑडिट में, तीसरे पक्ष के एम्बेड किए गए उन ऑब्जेक्ट को हाइलाइट किया जाता है जिन्हें इंटरैक्शन के आधार पर लोड होने में समय लग सकता है. ऐसे में, तीसरे पक्ष के कॉन्टेंट की जगह फ़साड का इस्तेमाल किया जाता है. ऐसा तब तक किया जाता है, जब तक उपयोगकर्ता उससे इंटरैक्ट नहीं करता.

फ़साड के साथ YouTube के एम्बेड किए गए प्लेयर को लोड करने का उदाहरण. फ़साड का साइज़ 3 केबी है और इंटरैक्शन होने पर, 540 केबी का प्लेयर लोड होता है.
Loading YouTube embedded player with a facade.

Lighthouse, कुछ समय के लिए रोके जा सकने वाले तीसरे पक्ष के एम्बेड किए गए कॉन्टेंट का पता कैसे लगाता है

Lighthouse, तीसरे पक्ष के ऐसे प्रॉडक्ट ढूंढता है जिन्हें बाद में लोड किया जा सकता है. जैसे, सोशल बटन विजेट या वीडियो एम्बेड (उदाहरण के लिए, YouTube का एम्बेड किया गया प्लेयर).

डिफ़र किए जा सकने वाले प्रॉडक्ट और उपलब्ध फ़साड के बारे में डेटा, third-party-web में सेव किया जाता है.

अगर पेज पर तीसरे पक्ष के इन एम्बेड किए गए संसाधनों में से कोई भी संसाधन लोड होता है, तो ऑडिट पूरा नहीं हो पाता.

Lighthouse की तीसरे पक्ष की फ़साड ऑडिट में, Vimeo के एम्बेड किए गए प्लेयर और Drift की लाइव चैट को हाइलाइट किया गया है.
Lighthouse third-party facade audit.

facade की मदद से, तीसरे पक्ष को कुछ समय के लिए रोकना

तीसरे पक्ष के एम्बेड किए गए कॉन्टेंट को सीधे अपने एचटीएमएल में जोड़ने के बजाय, पेज को ऐसे स्टैटिक एलिमेंट के साथ लोड करें जो एम्बेड किए गए तीसरे पक्ष के कॉन्टेंट जैसा दिखता हो. इंटरैक्शन पैटर्न कुछ ऐसा दिखना चाहिए:

  • लोड होने पर: पेज में फ़साड जोड़ें.
  • माउस घुमाने पर: फ़साड, तीसरे पक्ष के संसाधनों से पहले से कनेक्ट हो जाता है.
  • क्लिक करने पर: फ़साड, तीसरे पक्ष के प्रॉडक्ट से बदल जाता है.

आम तौर पर, वीडियो एम्बेड, सोशल बटन विजेट, और चैट विजेट, फ़साड पैटर्न का इस्तेमाल कर सकते हैं. फ़साड चुनते समय, साइज़ और सुविधाओं के सेट के बीच संतुलन का ध्यान रखें.

यहां दी गई सूची में, ओपन-सोर्स फ़साड के बारे में हमारे सुझाव दिए गए हैं. vb/lazyframe जैसे लेज़ी iframe लोडर का भी इस्तेमाल किया जा सकता है.

YouTube का एम्बेड किया गया प्लेयर

Vimeo का एम्बेड किया गया प्लेयर

लाइव चैट (Intercom, Drift, Help Scout, Facebook Messenger)

अपना फ़साड लिखना

आपके पास अपनी पसंद के मुताबिक फ़साड का समाधान बनाने का विकल्प होता है. इसमें, पहले बताए गए इंटरैक्शन पैटर्न का इस्तेमाल किया जाता है. फ़साड, तीसरे पक्ष के उस प्रॉडक्ट की तुलना में काफ़ी छोटा होना चाहिए जिसे बाद में लोड किया जाता है. साथ ही, इसमें सिर्फ़ इतना कोड शामिल होना चाहिए कि प्रॉडक्ट की तरह दिखने लगे.

अगर आपको अपने समाधान को सूची में शामिल करना है, तो सबमिट करने की प्रोसेस देखें.

संसाधन

तीसरे पक्ष के संसाधनों को फ़साड की मदद से धीमी रफ़्तार से लोड करने से जुड़े ऑडिट का सोर्स कोड.