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

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

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

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

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

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

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

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

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

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

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

  1. लोड होने पर: पेज पर फ़ैकसा जोड़ें.

  2. माउसओवर पर: फ़साड, तीसरे पक्ष के रिसॉर्स से पहले से कनेक्ट हो जाता है.

  3. क्लिक करने पर: बाहरी डिज़ाइन, तीसरे पक्ष के प्रॉडक्ट से बदल जाता है.

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

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

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

लाइव चैट (Intercom, Drift, हेल्प स्काउट, Facebook Messenger)

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

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

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

संसाधन

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