या GTmetrix में "DOM तत्वों की संख्या कम करें":
डोम क्या है?
जब आपके ब्राउज़र को एक HTML दस्तावेज़ प्राप्त होता है, तो उसे एक ट्री संरचना में परिवर्तित किया जाना चाहिए, जिसका उपयोग CSS और जावास्क्रिप्ट के साथ रेंडरिंग और ड्राइंग के लिए किया जाता है।
इस वृक्ष संरचना को DOM या दस्तावेज़ ऑब्जेक्ट मॉडल कहा जाता है।
- समुद्री मील DOM में सभी HTML एलीमेंट को नोड कहा जाता है। (उर्फ "पत्ते" पेड़ पर)।
- गहराई - एक पेड़ में "शाखा" कितनी देर तक जाती है उसे गहराई कहा जाता है। उदाहरण के लिए, ऊपर दिए गए आरेख में, img टैग की गहराई 3 है। (HTML -> body -> div -> img)।
- बाल तत्व - एक नोड के सभी चाइल्ड नोड्स (बिना आगे की ब्रांचिंग के) बच्चे हैं।
लाइटहाउस और Google PageSpeed Insights निम्न में से कोई एक शर्त पूरी होने पर पृष्ठों को फ़्लैग करना प्रारंभ कर देते हैं:
- कुल मिलाकर 1500 से अधिक नोड हैं।
- 32 समुद्री मील से अधिक की गहराई है।
- पैरेंट नोड में 60 से अधिक चाइल्ड नोड होते हैं।
डीओएम आकार प्रदर्शन को कैसे प्रभावित करता है?
अत्यधिक DOM आकार विभिन्न तरीकों से प्रदर्शन को प्रभावित कर सकता है।
- हायर पार्स और रेंडर टाइम (FCP) . एक बड़ा DOM ट्री और जटिल स्टाइल नियम ब्राउज़र के लिए बहुत अच्छा काम करते हैं। ब्राउज़र को HTML को पार्स करना है, रेंडर ट्री बनाना है, आदि। हर बार जब उपयोगकर्ता इंटरैक्ट करता है या HTML में कुछ बदलता है, तो ब्राउज़र को फिर से इसकी गणना करनी होती है।
- स्मृति उपयोग बढ़ाता है - आपके जावास्क्रिप्ट कोड में डीओएम तत्वों तक पहुंचने के लिए कार्य हो सकते हैं। एक बड़ा DOM ट्री जावास्क्रिप्ट को उन्हें प्रोसेस करने के लिए अधिक मेमोरी का उपयोग करने के लिए बाध्य करता है। एक उदाहरण एक क्वेरी चयनकर्ता होगा, in
document.querySelectorAll('img')जो आमतौर पर आलसी-लोडिंग पुस्तकालयों द्वारा उपयोग की जाने वाली सभी छवियों को सूचीबद्ध करता है। - टीटीएफबी बढ़ाता है - जैसे-जैसे DOM का आकार बढ़ता है, HTML दस्तावेज़ का आकार (KB में) बढ़ता है। चूंकि नेटवर्क पर अधिक डेटा स्थानांतरित करने की आवश्यकता है, इससे टीटीएफबी बढ़ जाता है।
तकनीकी रूप से डीओएम आकार कैसे कम करें?
उदाहरण के लिए, DOM के आकार को कम करना तकनीकी रूप से आसान है:
उपयोग:
<ul id="navigation-main">etc..</ul>के बजाए:
<div id="navigation-main"><ul>etc..</ul></div>मूल रूप से, सभी संभावित HTML तत्वों से छुटकारा पाएं। डीओएम आकार को और कम करने के लिए आप फ्लेक्सबॉक्स या ग्रिड का भी उपयोग कर सकते हैं।
लेकिन चूंकि आप वर्डप्रेस का उपयोग कर रहे हैं, इससे आपको ज्यादा मदद नहीं मिलेगी!
वर्डप्रेस में DOM साइज कैसे कम करें?
बड़े पृष्ठों को अनेक पृष्ठों में विभाजित करें
क्या आपके पास साइट पर सब कुछ वाला एक पृष्ठ है? सेवाओं, संपर्क फ़ॉर्म, उत्पादों, ब्लॉग पोस्ट, प्रशंसापत्र, आदि की तरह?
उन्हें कई पृष्ठों में विभाजित करने और उन्हें शीर्षलेख/नेवबार से जोड़ने का प्रयास करें।
हर संभव का आलसी लोडिंग और पेजिनेशन
सभी प्रकार के तत्वों का आलसी लोडिंग। यहां कुछ उदाहरण दिए गए हैं:
- YouTube वीडियो आलसी लोडिंग - WP रॉकेट द्वारा WP YouTube Lyte या Lazy Load का उपयोग करें।
- प्रति पृष्ठ ब्लॉग पोस्ट/उत्पादों की संख्या सीमित करें - मैं आमतौर पर प्रति पेज अधिकतम 10 ब्लॉग पोस्ट रखने की कोशिश करता हूं और बाकी को पेजिनेट करता हूं।
- आलसी लोडिंग ब्लॉग पोस्ट/उत्पाद - अधिक ब्लॉग पोस्ट या उत्पादों को लोड करने के लिए लोड मोर बटन या अनंत स्क्रॉल जोड़ें।
- आलसी लोडिंग टिप्पणियाँ - मैं Disqus सशर्त लोडिंग का उपयोग कर रहा हूं क्योंकि मैं Disqus का उपयोग कर रहा हूं। यदि आप अपनी टिप्पणियों का उपयोग कर रहे हैं, तो टिप्पणियों के लिए आलसी लोड जैसे प्लगइन्स का उपयोग करें।
- टिप्पणियों का अंकन - यदि आपके पास सैकड़ों टिप्पणियाँ हैं, तो यह DOM आकार को भी प्रभावित कर सकती है। टिप्पणियों को पृष्ठांकित करने के लिए, सेटिंग्स -> चर्चा -> टिप्पणियों को पृष्ठांकित करें पर जाएँ।
- संबंधित पदों की संख्या सीमित करें - संबंधित पदों की संख्या को 3 या 4 तक सीमित करने का प्रयास करें।
नोट: आलसी लोडिंग छवियों से DOM का आकार कम नहीं होगा
सीएसएस के साथ अवांछित तत्वों को न छिपाएं
कभी-कभी आपको थीम/डिज़ाइनर द्वारा प्रस्तुत किए गए तत्वों को निकालने की आवश्यकता हो सकती है। उदाहरण के लिए, उत्पाद पृष्ठों पर कार्ट में एक बटन जोड़ें, एक दर बटन, लेखक की जानकारी, प्रकाशन तिथि, आदि।
एक त्वरित सुधार उन्हें सीएसएस के साथ छिपाना है:
कार्ट-बटन {डिस्प्ले: कोई नहीं;}हालांकि यह समाधान सरल दिखता है, आप उपयोगकर्ताओं को अवांछित कोड (जिसमें HTML मार्कअप और CSS स्टाइलिंग दोनों शामिल हैं) को उजागर कर रहे हैं।
यह देखने के लिए कि क्या इसे हटाने का कोई विकल्प है, अपनी थीम/प्लगइन सेटिंग जांचें। अन्यथा प्रासंगिक PHP कोड ढूंढें और उसे हटा दें/टिप्पणी करें।
अच्छी तरह से लिखी गई थीम और पेज बिल्डर का उपयोग करें
एक अच्छी थीम DOM size में महत्वपूर्ण भूमिका निभाती है। अच्छी तरह से लिखे गए विषयों का प्रयोग करें जैसेजनरेट प्रेस याएस्ट्रा .
पेज बिल्डर्स भी बहुत सारे डिव का परिचय देते हैं। कंस्ट्रक्टर्स का उपयोग करें जैसेऑक्सीजन, जो अवांछित div ब्लॉक पेश नहीं करते हैं और HTML संरचना पर अधिक नियंत्रण रखते हैं।
निष्कर्ष
अधिक प्लगइन्स या थीम सेटिंग्स हो सकती हैं जो बहुत अधिक divs का परिचय देती हैं। एक उदाहरण "मेगा मेनू" प्लगइन्स जैसे UberMenu होगा।
कभी-कभी वे आपकी साइट के उपयोगकर्ता अनुभव के लिए महत्वपूर्ण होते हैं। लेकिन कभी-कभी वे उपयोगकर्ताओं द्वारा कभी उपयोग नहीं किए जाते हैं।
शायद आपके पादलेख लिंक पर कभी क्लिक नहीं किया जाता है क्योंकि अधिकांश विज़िटर केवल 75% तक स्क्रॉल करते हैं।
HotJar या Google Analytics Events जैसे टूल का उपयोग करके पता करें कि विज़िटर वास्तव में क्या उपयोग कर रहे हैं और वे क्या उपयोग नहीं कर रहे हैं।विश्लेषण करें, मापें और दोहराएं।
