यह एक बहुत ही प्रभावी उपकरण है जो यह देखने में मदद करता है कि संचयी लेआउट शिफ्ट (सीएलएस) वास्तव में कहां से आ रहा है और आपके पेज स्कोर रेटिंग को बढ़ाकर आपके विज़िटर के अनुभव को बेहतर बनाता है।
यह एक एनिमेटेड जीआईएफ उत्पन्न करता है जो आपके पेज के लोड होने के दौरान तत्वों की गतिविधियों को दर्शाता है।
कुछ मामलों में, यह वॉटरफॉल लोडिंग डायग्राम से कहीं अधिक प्रभावी होता है।
| संचयी लेआउट शिफ्ट विश्लेषण | प्रकाशस्तंभ | वेबपेजटेस्ट | क्रोम डेवलपर टूल्स |
|---|---|---|---|
| आउटपुट: यह एक GIF बनाता है जो दिखाता है कि व्यूपोर्ट में कौन से तत्व हिल रहे हैं और CLS स्कोर लौटाता है। जिन पृष्ठों में ऊर्ध्वाधर गति अधिक होती है, उनमें यह बताना मुश्किल हो सकता है कि कौन से तत्व स्थानांतरित हुए हैं। | आउटपुट: रिपोर्ट में फर्स्ट कंटेंटफुल पेंट, स्पीड इंडेक्स, टोटल ब्लॉकिंग टाइम और लार्जेस्ट कंटेंटफुल पेंट के साथ-साथ सीएलएस (CLS) का भी उल्लेख है। डिफ़ॉल्ट आउटपुट एक HTML रिपोर्ट है, और एक फ़्लैग के साथ JSON भी उपलब्ध है। | आउटपुट: फिल्मस्ट्रिप लोड होने के प्रमुख फ्रेम दिखाती है, और वॉटरफॉल फिल्मस्ट्रिप के साथ सिंक्रनाइज़ की गई एक लाल रेखा को दर्शाती है। दस्तावेज़ीकरण में CLS को इस प्रकार परिभाषित किया गया है कि यह इस बात का माप है कि पृष्ठ लोड होने के दौरान व्यूपोर्ट के भीतर लेआउट कितना बदलता है। | आउटपुट: परफॉर्मेंस पैनल में लेआउट शिफ्ट ट्रैक, शिफ्ट को बैंगनी हीरे के आकार में समूहों में दिखाता है। माउस कर्सर ले जाने पर व्यूपोर्ट में एलिमेंट हाइलाइट हो जाता है, और समरी टैब में समय, स्कोर, प्रभावित एलिमेंट और संभावित कारण बताए जाते हैं। |
| परीक्षण की स्थितियाँ: डेस्कटॉप व्यूपोर्ट 1920 x 1080 पर स्थिर है। मोबाइल लाइटहाउस नेक्सस 5X प्रोफाइल का उपयोग करता है, और बेहतर 3G अनुभव प्रदान करने के लिए CPU और नेटवर्क की गति को नियंत्रित किया जाता है। | परीक्षण की स्थितियाँ: यह लोकल क्रोम ब्राउज़र, डेवलपर टूल्स, कमांड लाइन, नोड मॉड्यूल या पेजस्पीड इनसाइट्स के माध्यम से चलता है। कमांड लाइन के लिए नोड 22 या बाद के संस्करण की आवश्यकता होती है। | परीक्षण की स्थितियाँ: दुनिया भर के विभिन्न स्थानों पर अनुकूलित नेटवर्क स्थितियों के तहत वास्तविक ब्राउज़रों पर परीक्षण किए गए। क्रोम सबसे अधिक जानकारी प्रदान करता है। | |
| सीएलएस की परिभाषा: संस्करण 1.2.0 अधिकतम सत्र विंडो मीट्रिक का उपयोग करता है। परीक्षण के दौरान थ्रॉटलिंग लागू की जाती है। | सीएलएस की परिभाषा: लाइटहाउस जैसे लैब टूल केवल पेज लोड होने के दौरान ही बदलावों को कैप्चर करते हैं, इसलिए मान वास्तविक उपयोगकर्ताओं द्वारा अनुभव किए जाने वाले मानों से कम हो सकते हैं। | सीएलएस की परिभाषा: प्रयोगशाला की वही सीमाएँ लागू होती हैं। स्कोर प्रभाव अंश और दूरी अंश का गुणनफल है, और लक्ष्य 0.1 या उससे कम है। | सीएलएस की परिभाषा: सारांश टैब में प्रत्येक शिफ्ट का अपना स्कोर होता है। CLS शिफ्टों को 5 सेकंड तक के सत्र विंडो में समूहित करता है, जिसमें 1 सेकंड से कम का अंतराल होता है। |
| खुलापन और स्वचालन: npm (layout-shift-gif) के साथ एक कमांड-लाइन संस्करण इंस्टॉल किया जा सकता है। यह यूआरएल, डिवाइस और आउटपुट विकल्प लेता है, एक वैकल्पिक कुकी फ़ाइल को सपोर्ट करता है और सेल्फ-साइन किए गए HTTPS प्रमाणपत्रों का समर्थन करता है। पेज Ko-fi पर वैकल्पिक दान का अनुरोध करता है। | खुलापन और स्वचालन: Lighthouse Apache-2.0 लाइसेंस के अंतर्गत आता है। इसे Lighthouse CI के माध्यम से और Node मॉड्यूल के रूप में चलाया जा सकता है। | खुलापन और स्वचालन: इस रिपॉजिटरी में पॉलीफॉर्म शील्ड 1.0.0 के अंतर्गत एक मास्टर ब्रांच और अपाचे 2.0 के अंतर्गत एक अपाचे ब्रांच है। इसमें आपके स्वयं के इंस्टेंस और एक REST API को चलाने के बारे में जानकारी दी गई है। अधिकांश प्रयोगों के लिए WebPageTest Pro की आवश्यकता होती है। |
शामिल विषय: संचयी लेआउट शिफ्ट, सीएलएस, पेज स्कोर, आगंतुक अनुभव, एनिमेटेड जीआईएफ, तत्व गति, लोडिंग अनुकूलन, उपयोगकर्ता इंटरफ़ेस, वेब प्रदर्शन, दृश्य विश्लेषण, लोडिंग आरेख, वेब मेट्रिक्स, आईएसओ 9241, आईएसओ/आईईसी 25010, आईएसओ 25012, आईएसओ 25000 और आईएसओ 9241-11।
अपना सर्वश्रेष्ठ ऑनलाइन टूल सुझाएं:
क्या आप ऊपर दी गई वेबसाइट से बेहतर, पूरक या प्रतिस्थापन वेबसाइट जानते हैं?
> यहां सुझाव दें <
पंजीकृत सदस्यों के लिए पूर्ण आकार की छवियाँ और डाउनलोड 100% निःशुल्क उपलब्ध हैं।
> लॉग इन करें <
