Be Yours में प्रारंभिक पृष्ठ को अधिक तेजी से लोड करने की क्षमता है।
इस पृष्ठ पर
यांत्रिकी
आम तौर पर, ब्राउज़र पेज पर लगभग सभी तत्वों को रेंडर करता है। यहां तक कि जब आप शीर्ष पर होते हैं, तब भी पेज के निचले हिस्से के हिस्से इसमें शामिल होते हैं।
लेकिन अब ऐसा नहीं है, अब content-visibility नामक एक नई CSS प्रॉपर्टी आ गई है। आप इन जटिल शब्दावली को अनदेखा करना चाह सकते हैं। विज़ुअलाइज़ करने के लिए, तकनीक पेज के तत्वों को तब तक रेंडर नहीं करती जब तक कि वे आपके दृश्य में आने वाले न हों। यह क्षमता अब Be Yours में एकीकृत है। हम ब्राउज़र को कुछ पेज सेगमेंट, जैसे लेआउट-हैवी सेक्शन के रेंडरिंग कार्य को स्थगित करने के लिए कह सकते हैं, और उन्हें केवल तभी रेंडर कर सकते हैं जब वे दिखाई देने वाले हों।
हमारे डेमो में, होम पेज के अनुभागों में content-visibility लागू करने से प्रारंभिक लोड पर 5x रेंडरिंग प्रदर्शन में वृद्धि होती है।
पक्ष - विपक्ष
जाहिर है, यह इन-पेज सर्च या SEO को तोड़े बिना लंबे पेजों की रेंडरिंग लागत को कम करने में मदद करता है। कल्पना करें कि आपके पास एक ड्रॉपशीपिंग स्टोर है और होम पेज पर कई सेक्शन हैं जो उत्पादों या संग्रहों का प्रतिनिधित्व करते हैं; या एक तरह का शोकेस स्टोर जिसका लैंडिंग पेज बहुत सारी छवियों से भरा हुआ है, और यह तकनीक इन मामलों के लिए फायदेमंद है।
हालाँकि, इस तकनीक में अपनी सीमाएँ और बग भी हैं। यदि आप पृष्ठ को स्क्रॉल करते हैं, तो आप देखेंगे कि स्क्रॉलबार थोड़ा टेढ़ा-मेढ़ा दिखाई देता है, यानी पृष्ठ की सामग्री रेंडर की जा रही नई सामग्री के अनुसार खुद को समायोजित कर रही है। और क्योंकि बिना रेंडर किए गए तत्व लेआउट में अपनी ऊँचाई खो देते हैं, कभी-कभी आप देख सकते हैं कि माउस स्क्रॉल करते समय सामग्री थोड़ी धीमी दिखाई देती है।
यह भी ध्यान रखना ज़रूरी है कि यह तकनीक पूरी तरह से संगत नहीं है। यह फ़िलहाल फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर पर समर्थित नहीं है:
