UI प्रदर्शन का अनुकूलन

1) "तेज" के रूप में क्या मायने रखता है

टीटीएफबी (प्रथम बाइट का समय) - तेज सर्वर/सीडीएन अनुक्रिया।

एलसीपी (सबसे बड़ा संतोषजनक पेंट) - "मुख्य" सामग्री जल्दी दिखाई दी।

INP (अगले पेंट के लिए बातचीत) - बातचीत के दौरान जवाबदेही।

सीएलएस (संचयी लेआउट शिफ्ट) - इंटरफ़ेस जिटर की अनुपस्थिति।

टीटीआई (इंटरएक्टिव का समय) - जब सब कुछ पहले से ही जवाब दे रहा है।

अनुशंसित संदर्भ बिंदु: LCP ≤ 2। 5s, INP ≤ 200ms, CLS ≤ 0। 1 (वास्तविक उपयोगकर्ताओं के 75 वें प्रतिशत के लिए)।

2) प्रक्रिया: माप करें → अड़ चनें खोजें → बजट ठीक करें

1. उपाय: RUM (वास्तविक उपयोगकर्ता, देश/नेटवर्क/डिवाइस द्वारा प्रतिशत) + सिंथेटिक्स (लाइटहाउस/ब्राउज़र)।

2. खोजें: प्रदर्शन प्रोफाइलर (लंबे कार्य> 50ms, लेआउट थ्रैशिंग, अतिरिक्त रेंडर्स)।

3. फिक्स: बजट (JS/CSS/फोंट का वजन, LCP/INP) और CI में "लाल रेखाएं"।

3) नेटवर्क और संसाधन लोडिंग

3. 1 HTTP और प्राथमिकताएँ

HTTP/2/3, Brotli संपीड़न सक्षम करें।

'preconnect' to महत्वपूर्ण डोमेन; ' dns-prefetch 'to द्वितीयक डोमेन।

'प्रीलोड' फ़ोर क्रिटिकल रिसोर्सेज (हीरो इमेज, मेन फ़ॉन्ट)।

' fetchpriority =" उच्च/निम्न"' और 'priority' संकेत जहां समर्थित है।

3. 2 कैचिंग

फ़ाइल हैश के साथ स्थिर: 'कैश-कंट्रोल: सार्वजनिक, अधिकतम आयु = 31536000, अपरिवर्तनीय'।

एचटीएमएल - सीडीएन के माध्यम से लघु टीटीएल + बासी-जबकि-पुनर्नवीनीकरण।

ऑफलाइन/दोहराने के लिए ETag/अंतिम-संशोधित और सेवा कार्यकर्ता।

4) कोड: कम, बाद में, "चापलूसी"

4. 1 विधानसभा

ट्री-शेकिंग, मिनीफाई (в т। ч. डेड-कोड-एलिम)।

मार्गों/विजेट द्वारा कोड-विभाजन, गतिशील आयात।

मूल बंडल में "वैश्विक" भारी पैकेट से बचें (पल → Intl/Day। js)।

4. 2 एचटीएमएल रेंडरिंग और डिलीवरी

SSR/ISR/स्ट्रीमिंग: पहले फ्रेमवर्क और मुख्य सामग्री दें।

आंशिक/द्वीप जलयोजन: केवल इंटरैक्टिव क्षेत्रों को हाइड्रेट करें।

सभी गैर-महत्वपूर्ण को टालें: '<स्क्रिप्ट प्रकार = "मॉड्यूल" स्थगित>'.

4. 3 प्रतिक्रिया विशिष्टता (यदि प्रतिक्रिया का उपयोग किया

'प्रतिक्रिया। आलसी विजेट के लिए आलसी '+' सस्पेंस '।

भारी फिल्टर/लुकअप के लिए 'startTrification' और 'UseDef Value'।

आरएससी (सर्वर घटक) - सर्वर गणना, क्लाइंट पर जेएस से कम।

(zustand/redux) में चयनकर्ता: घटक को टुकड़ों में हस्ताक्षर करें, न कि पूरे स्टैक को।

5) रेंडर और स्टेट: जहां "धीमा हो जाता है"

5. 1 पुनर्विक्रेताओं का अलगाव

बड़े घटकों को कुचल दें, संस्मरण ('मेमो', 'यूजमेमो', 'यूज़कैलबैक')।

सूची कुंजी स्थिर हैं; अनावश्यक रूप से प्रॉप्स में नए फंक्शन/ऑब्जेक्ट का निर्माण न करें।

अक्सर डेटा बदलने के लिए "वैश्विक" संदर्भ से बचें - चयनकर्ता या घटना बसों का उपयोग करें।

5. 2 वर्चुअलाइजेशन और बड़ी सूची

शीट/टेबल → वर्चुअलाइजेशन (रेंडर विंडो)।

Pagination/backpressure के साथ अनंत स्क्रॉलिंग (एक बार में 100k लाइनों को लोड न करें)।

व्यूपोर्ट के बाहर भारी विजेट के आरंभीकरण में देरी।

5. 3 लेआउट और पेंट

सामग्री-दृश्यता: ऑटो; छिपे हुए विभाजन के लिए (ब्राउज़र अदृश्य प्रस्तुत नहीं करता है)।

भविष्यवाणी योग्य आकारों के लिए और 'आंतरिक-आकार' शामिल करें।

लगातार लेआउट रीड-एंट्री (लेआउट थ्रैशिंग) से बचें; समूह माप।

विल-चेंज उपयोग dosed (अन्यथा अतिरिक्त मेमोरी/परतें)।

6) छवियाँ और ग्राफिक्स

प्रारूप: AVIF/WebP (PNG/JPEG पर फॉलबैक)।

उत्तरदायी दृष्टिकोण: 'srcset' + 'आकार', रेटिना के लिए घनत्व-आधारित।

गैर-नायक छवियों के लिए' लोडिंग =" आलसी"; प्राथमिकता/प्रीलोड - केवल एलसीपी उम्मीदवार के लिए।

निश्चित आकार के प्लेसहोल्डर - कोई सीएलएस कूदता नहीं है।

कैनवास/चार्ट: गणना के लिए ऑफस्क्रीन कैनवास और वेब वर्कर; कसाई redraws।

7) फोंट और पाठ

कई शैलियों के बजाय एक या दो चर फ़ॉन्ट।

'फॉन्ट-डिस्प्ले: स्वैप '/' वैकल्पिक', मूल शैली के लिए प्रीलोड।

फ़ॉन्ट बदलते समय "जंप" को कम करने के लिए 'साइज़-एडजस्ट' करें।

समान मैट्रिक्स के साथ स्थानीय फॉलबैक फोंट।

8) सीएसएस और एनिमेशन

क्रिटिकल सीएसएस इनलाइन (<14-20 kB), बाकी - स्थगित किया जाना है।

अप्रयुक्त शैलियों को मिटाएँ (Purge/CSSTree)।

एनिमेशन, यदि संभव हो, परिवर्तन/अपारदर्शिता पर; सम्मान 'पसंद-कम-गति'।

गहरे झरने से बचें और चयनकर्ताओं को नष्ट करें।

9) वेब वर्कर्स, फ्लो और हैवी कार्य

सभी सीपीयू-हेवी - इन वर्कर (पार्सिंग, सॉर्टिंग, एग्रीगेशन, एमएल)।

लंबी प्रतिक्रियाओं के लिए एपीआई ('रीडेबल स्ट्रीम', धाराओं के साथ 'लाना') स्ट्रीमिंग।

जवाबदेही बनाए रखने के लिए ' IdleCallback '/microtasks के माध्यम से कार्यों को विभाजित करना।

10) लेआउट स्थिरता (सीएलएस)

एलसीपी तत्व (छवि/विजेट) के लिए आरक्षित स्थान।

बिना निश्चित आकार के बैनर/रिबन न डालें।

असममित tultips/toasts - सामग्री को स्थानांतरित न करें; परतों/पोर्टल्स का उपयोग करें।

11) स्निपेट्स के उदाहरण

महत्वपूर्ण फ़ॉन्ट और एलसीपी छवि

html
<link rel="preload" href="/fonts/Inter. var. woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" as="image" href="/hero. avif" imagesrcset="/hero. avif 1x, /hero@2x. avif 2x" fetchpriority="high">

आलसी और सुरक्षित विजेट आरंभीकरण

js const Widget = React. lazy(() => import('./Widget'));
function Section() {
const inView = useInViewport('#sec');
return <div id="sec">{inView? <React. Suspense fallback={null}><Widget/></React. Suspense>: null}</div>;
}

लेआउट स्थिरीकरण

css
.hero {
content-visibility: auto;
contain: layout paint;
contain-intrinsic-size: 720px 320px ;/LCP reserve/
}

12) प्रतिगमन नियंत्रण और बजट

बंडल-बजट: कुल JS ≤ N kB, CSS ≤ M kB, प्रारंभिक-चंक ≤ K kB।

सीआई में वेब-विटल्स (अनुकरण) + RUM-अलर्ट (प्रतिशत पर)।

बंडल विश्लेषण: पीआर में स्रोत-मानचित्र-खोजकर्ता/विश्लेषक।

घटकों के प्रदर्शन मानक (10k तत्वों का रेंडर, प्रतिक्रिया समय)।

13) एंटी-पैटर्न

"एक बार में सभी" लोड करें: पहली स्क्रीन में रेखांकन, संपादक, नक्शे।

विशाल वैश्विक राज्य - कैस्केडिंग रेनर्स।

'srcset/आकार' के बिना वांछित आकार की छवियां 2-4 ×।

मुख्य धागे पर लंबे तुल्यकालिक छोर।

'ऊलाइन: अनुकूलन के बिना कोई भी' और कस्टम ट्रिक्स - रेंडर संकेतकों के साथ हस्तक्षेप करें।

'टॉप/लेफ्ट' द्वारा एनिमेशन (लेआउट को तोड़ें और रिफ्लक्स को कॉल करें)।

14) स्क्रीन चेकलिस्ट

• LCP ≤ 2। 5 s पर - यातायात, CLS 0। 1, INP ≤ 200 ms
• महत्वपूर्ण संसाधन: प्रीलोड/प्राथमिकताएं; बाकी स्थगित/आलसी है
• बंडल: कोड-विभाजन, कोई अतिरिक्त निर्भरता नहीं
• सूची/तालिका वर्चुअलाइजेशन, भारी विजेट विलंबित इनिशिएलाइजेशन
• चित्र: AVIF/WebP,' srcset/sizes', 'लोडिंग =" आलसी"
• फ़ॉन्ट: चर + 'फ़ॉन्ट-डिस्प्ले', केवल वांछित लोड करें
• सीएसएस: महत्वपूर्ण इनलाइन, पर्ज, 'सामग्री-दृश्यता' और 'समाहित' जहां उपयुक्त हो
• भारी कंप्यूटिंग के लिए श्रमिक/निष्क्रि
• बजट और वेब-विटल डैशबोर्ड/अलर्ट से जुड़े हैं

15) कार्यान्वयन योजना (3 पुनरावृत्ति)

पुनरावृत्ति 1 - त्वरित जीत (1-2 सप्ताह)

Brotli/HTTP-2/3, सीडीएन सक्षम करें। महत्वपूर्ण सीएसएस और एलसीपी संसाधनों को प्रीलोड करें।

गतिशील आयात में भारी विजेट खिसकाएँ।

छवियाँ → AVIF/WebP + 'srcset'। फ़ॉन्ट: 'फ़ॉन्ट-डिस्प्ले: स्वैप'.

पुनरावृत्ति 2 - संरचनात्मक सुधार (3-4 सप्ताह)

मार्ग द्वारा कोड-विभाजन, बंडल विश्लेषण, "भारी" लिब्स को हटाना।

वर्चुअलाइजेशन, सामग्री दृश्यता, में आंतरिक-आकार शामिल हैं।

एसएसआर/स्ट्रीमिंग/द्वीपों (जहां प्रासंगिक) को लागू करें।

वेब-विटल्स के साथ RUM, CI में बजट।

इटरेशन 3 - स्केल एंड रॉबस्टनेस (सतत)

श्रमिक/ऑफस्क्रीन कैनवास, कसाई गणना, StartTrucTrance/deffient Value।

नियमित पर्फ ऑडिट, प्रतिगमन ऑटो डाइजेस्ट, टीम प्रशिक्षण।

16) मिनी-एफएक्यू

मोबाइल पर सबसे अधिक गति क्या होगी?

मूल JS, SSR/स्ट्रीमिंग को कम करना और LCP छवि का अनुकूलन करना।

क्या मुझे हमेशा एसएसआर की आवश्यकता है?

नहीं, यह नहीं है। यदि पृष्ठ गतिशील रूप से इंटरैक्टिव है और खराब तरीके से कैश किया जाता है, तो द्वीप/आंशिक जलयोजन बेहतर हो सकता है।

"प्रकाश" बंडल के साथ INP खराब क्यों है?

संभवतः मुख्य धागे पर लंबे कार्य (छंटाई, ग्राफिक्स) - उन्हें कार्यकर्ता के पास लाएं और कार्यों को विभाजित करें।

कुल

फास्ट यूआई विषयों का एक संग्रह है: नेटवर्क प्राथमिकताएं और कैश, छोटे और देर से बंडल, पूर्वानुमानित गैर-कूद रेंडरिंग, किफायती छवियां और फोंट, और निरंतर वास्तविक विश्व मीट्रिक नियंत्रण। बजट दर्ज करें, स्वचालित जाँच करें और टीम को हर कदम पर गति के बारे में सोचना सिखाएं - इस तरह इंटरफ़ेस आज और एक वर्ष में तेज़ रहेगा।