आलसी लोडिंग और UX-त्वरण
1) लक्ष्य और सिद्धांत
आलसी-लोडिंग महत्वपूर्ण को तुरंत दिखाने के लिए एक रणनीति है, और बाकी जब आवश्यक हो। उद्देश्य:- महत्वपूर्ण पथ की कीमत पर टीटीआई/एलसीपी को कम करें।
- पूर्वानुमानित आयामों के साथ लेआउट (कम सीएलएस) को स्थिर करें।
- बैटरी और ट्रैफिक को मोबाइल पर सहेजें।
- रूपांतरण बढ़ाएँ - उपयोगकर्ता पहले की कार्रवाई देखता है।
सिद्धांत: प्राथमिकता प्रगति - पूर्वानुमेयता पहले, महत्वपूर्ण सामग्री, फिर प्रगतिशील सामग्री और पोस्ट-लो
2) महत्वपूर्ण प्रतिपादन पथ
क्रिटिकल HTML: तुरंत "ऊपर-गुना" मार्कअप दें।
क्रिटिकल सीएसएस: इनलाइन ≤ 10-15 केबी; बाकी है 'मीडिया = "प्रिंट" + स्वैप/रीलोड।
जेएस अवरोधक के रूप में: 'स्थगित करें '/' async', चंक विभाजन, मार्गों के साथ तर्क लोड करें।
फ़ॉन्ट: 'फ़ॉन्ट-डिस्प्ले: स्वैप' वैकल्पिक ', WOFF2 प्रीलोड, सिस्टम फॉलबैक' और।
3) नेटवर्क संसाधन प्राथमिकता
CDN/fonts/images के लिए प्रीकनेक्ट करें (अग्रिम में TCP + TLS)।
तीसरे डोमेन के लिए DNS प्रीफेच।
महत्वपूर्ण छवि/फोंट/स्क्रिप्ट लोड करें।
प्राथमिकता संकेत (' महत्व =" उच्च' कम",' भ्रूणहत्या = नायक छवि के लिए" उच्च")।
HTTP/3/QUIC: कम विलंबता; सीडीएन-एज उपयोगकर्ता के करीब है।
कैश नीतियां: वर्तमान परिसंपत्तियों के लिए 'अपरिवर्तनीय'; ETag/अंतिम परिवर्धित सही करें.
4) प्रगतिशील प्रतिपादन और डाउनलोड राज्य
स्पिनरों के बजाय कंकाल/शिमर्स: "कूदने" के बिना दृश्य प्रगति।
फिक्स्ड-साइज़प्लेसहोल्डर्स (कार्ड, थंबनेल) - शून्य सीएलएस।
स्ट्रीमिंग/चंक्ड एचटीएमएल: जल्दी से फ्रेम देते हैं, फिर सामग्री जोड़ ते हैं।
आशावादी यूआई (सावधानी): सत्यापन के बाद तात्कालिक कार्रवाई।
5) आलसी-लोडिंग मीडिया सामग्री
चित्र: ' लोडिंग =" आलसी",' डिकोडिंग =" एसिनक", एवीआईएफ/वेब प्रारूप (जेपीईजी/पीएनजी फॉलबैक)।
उत्तरदायी: विभिन्न DPR/चौड़ाई के तहत 'srcset '/' आकार'; 3 × जहां 1 × पर्याप्त है लोड न करें।
अनुमानित ऊंचाई: 'चौड़ाई/ऊंचाई' या सीएसएस 'पहलू-अनुपात'।
वीडियो: 'प्रीलोड = "मेटाडेटा", पोस्ट-लोड पोस्टर, व्यूपोर्ट के बाहर ऑटो-पॉज़।
आइकन: स्प्राइट/इनलाइन एसवीजी; अनावश्यक HTTP अनुरोधों से बचें।
6) आलसी घटक और मार्ग
कोड-विभाजन: मार्गों/विजेट द्वारा गतिशील आयात।
द्वीप घटक/आंशिक जलयोजन: केवल चेतन इंटरैक्टिव क्षेत्र।
SSR/SSG + ISR: सर्वर पर HTML रेंडर करें, वृद्धिशील रूप से ताज़ा करें।
सस्पेंस/डिफर (उपयोग किए गए ढांचे में): डेटा और यूआई का अपघटन।
7) विशाल सूची और तालिकाएँ
विंडो-रेंडर केवल दृश्यमान क्षेत्र + बफर।
एंकर पुनः लोड: पैक पुनः लोड करते समय स्थिति बनाए रखें।
बैच अद्यतन: स्क्रॉल करते समय पुनर्मूल्यांकन को कम करें।
पूर्वानुमानित आकार के लिए फिक्स्ड-रो ऊंचाई या 'कोंटेन-आंतरिक-आकार'।
8) सीएसएस और ब्राउज़र त्वरक
'कॉन्टेंट-दृश्यता: ऑटो': ब्राउज़र अदृश्य (न्यूनतम गणना) को छोड़ देता है।
'कॉन्टेन्ट '/' विल-चेंज': शैलियों/लेआउट के प्रभाव को सीमित करें।
एनिमेशन: केवल परिवर्तन/अपारदर्शिता; लेआउट/पेंट-भारी प्रभावों से बचें।
छाया और धुंधला - विशेष रूप से सूचियों पर।
9) इवेंट और जेएस लोड प्रबंधन
निष्क्रिय स्क्रॉलिंग/टैचा श्रोताओं ('{passive: true}').
डिबोउंस/थ्रॉटल को नया आकार/स्क्रॉल/हैंडलर करने के लिए।
व्यूपोर्ट के बाहर विजेट्स का आस्थगित आरंभ (IntersiceObserver)।
वेब वर्कर्स के लिए भारी कंप्यूटिंग का प्रवास।
10) मोबाइल संदर्भ
नेटवर्क: धीमा 3G/high RTT - आलसी डाउनलोड अधिक आक्रामक है।
बैटरी और गर्मी: टाइमर की आवृत्ति को सीमित करें, पृष्ठभूमि एनिमेशन के एफपीएस को कम करें।
संपीड़न: पाठ के लिए ब्रोटली, सही 'स्वीकार करें-एनकोडिंग'।
केवल संभावित संक्रमणों (क्लिक का इतिहास) के लिए वाई-फाई पर प्रीफेच।
11) उपलब्धता और एसईओ
कंकाल ≠ सामग्री: स्क्रीन पाठकों के साथ हस्तक्षेप नहीं करता है; फोकस का तार्किक क्रम।
कुंजी पाठ का सर्वर HTML - सब कुछ JS के पीछे छुपाएँ नहीं।
ऑल्ट ग्रंथ और हेडर पुनः लोड होने तक उपलब्ध रहते हैं।
आलसी सामग्री को कीबोर्ड से मार्गों को अवरुद्ध नहीं करना चाहिए।
12) मेट्रिक्स और लक्ष्य
LCP (हीरो-इमेज/हेडर): ≤ 2। 5 एस (मोबाइल)।
INP (इनपुट प्रतिक्रिया): ≤ 200 ms।
सीएलएस: ≤ 0,1।
TTFB: ≤ 500 ms; टीटीआई: ≤ 3 एस।
तार पर बाइट्स (पहला दृश्य): सख्त बजट (उदाहरण के लिए, ≤ 200-300 केबी क्रेते। संसाधन)।
स्क्रॉल-जानक: <1% फ्रेम> 16. 7 एमएस।
घटना टेलीमेट्री:- 'lazy _ enqueued '/' आलसी _ लोडेड' (आईडी, प्रकार, आकार, विलंबता),
- 'component _ hydrated' (समय, वजन JS),
- 'virtualized _ window _ resize',
- 'lcp _ production _ दिखाया गया', 'कंकाल _ time _ vivible',
- त्रुटियाँ ('img _ त्रुटि', 'decode _ timeout')।
13) ठेठ क्षेत्रों के लिए पैटर्न
होम/डायरेक्टरी: SSR + कंकाल कार्ड, आलसी छवियां, प्रगतिशील फिल्टर।
उत्पाद/खेल कार्ड: हीरो छवि प्रीलोड + उच्च प्राथमिकता; गैलरी - आलसी; समीक्षा - क्लिक करके।
लंबे लेख/विकी: टीओसी, पढ़ ने की प्रगति, मीडिया/कोड ब्लॉक के लिए आलसी, सामग्री की तालिकाओं में देरी।
लाइव टेप: लाइन वर्चुअलाइजेशन, ऑटो-स्क्रॉल ठहराव, बफर सीमा।
14) एंटीपैटर्न
पूर्ण स्क्रीन स्पिनर> 1-2 s जिसमें कोई प्रगति नहीं है।
स्थानीय धारकों के बिना आलसी - लेआउट कूदता है (CLS )।
दुर्लभ परिदृश्यों के लिए "सभी जेएस एक साथ" डाउनलोड करना।
महत्वपूर्ण भाग में भारी फोंट/छवियाँ डालें।
अप्रत्याशित कार्ड आकार - घूमने वाली सामग्री।
आलसी क्रिटिकल लोडिंग (लोगो, हीरो टेक्स्ट) - एलसीपी को तोड़ ता है।
"वापस" के बाद कोई स्थिति वापस नहीं आती है।
15) कार्यान्वयन चेकलिस्ट (चरण दर चरण)
स्प्रिंट 1 - निदान: एलसीपी/आईएनपी/सीएलएस/टीटीएफबी को मापना; मानचित्र संसाधन और महत्वपूर्ण पथ
स्प्रिंट 2 - आलोचना/प्राथमिकता: क्रिटिकल सीएसएस/एचटीएमएल, 'प्रीकनेक्ट '/' प्रीलोड', जेएस चंक को कम करें।
स्प्रिंट 3 - मीडिया: AVIF/WebP, 'srcset/sizes', निश्चित आयाम, गैर-नायक के लिए आलसी।
स्प्रिंट 4 - सूची: वर्चुअलाइजेशन, एंकर रीलोड, कंकाल/शिमर।
स्प्रिंट 5 - वास्तुकला: आंशिक जलयोजन/द्वीप, एसएसआर/एसएसजी/आईएसआर, स्ट्रीमिंग।
स्प्रिंट 6 - ठीक ट्यूनिंग: 'सामग्री-दृश्यता', प्राथमिकता संकेत, डिबेंस, वेब वर्कर्स।
स्प्रिंट 7 - ए/बी और टेलीमेट्री: कंकाल विकल्पों, आलसी स्तर, बजट की तुलना करें।
स्प्रिंट 8 - रिलीज़ स्वच्छता: परिसंपत्ति संस्करण, नकद आधार, रोलबैक रणनीतियाँ।
16) शब्दावली (संक्षिप्त)
आलसी लोडिंग - अदृश्य सामग्री के लोडिंग में देरी।
LCP/INP/CLS/TTFB/TTI/TBT मुख्य UX दर मैट्रिक्स हैं।
कोड-विभाजन/जलयोजन/द्वीप - यूआई कुचलने और पुनरोद्धार तकनीक।
वर्चुअलाइजेशन - एक दृश्य सूची बॉक्स रेंडर करें।
प्राथमिकता संकेत/प्रीकनेक्ट/प्रीलोड - पहले लोड करने पर ब्राउज़र को निर्देश।
सामग्री-दृश्यता - अदृश्य सामग्री के लिए गणना छोड़ देना।
17) नीचे की रेखा
आलसी-लोडिंग "पुट 'लोडिंग =" आलसी" नहीं है और किया गया है। "यह प्रणाली है: महत्वपूर्ण पथ, सही मीडिया प्रारूप, द्वीप अंतर्क्रियाशीलता, वर्चुअलाइजेशन और टेलीमेट्री। महत्वपूर्ण तत्काल, द्वितीयक सूक्ष्म और सस्ता, और लेआउट पूर्वानुमानित करें। फिर उत्पाद किसी भी डिवाइस और किसी भी नेटवर्क पर तेजी से महसूस करेगा।