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

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

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

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

लाइटहाउस, तीसरे पक्ष के ऐसे एम्बेड का पता कैसे लगाता है जिसे हटाया नहीं जा सकता

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

जिन प्रॉडक्ट की बिक्री कुछ समय के लिए रोकी जा सकती है और उपलब्ध फ़ेसेड का डेटा, तीसरे पक्ष के वेब पर सेव किया जाता है.

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

लाइटहाउस के तीसरे पक्ष का सामने का ऑडिट, Vimeo पर एम्बेड किए गए प्लेयर और ड्रिफ़्ट लाइव चैट को हाइलाइट कर रहा है.
लाइटहाउस तीसरे पक्ष के फ़ैडबैक का ऑडिट.

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

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

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

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

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

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

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

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

अपना सामने का हिस्सा लिखें

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

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

संसाधन

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