सबसे बड़े सामग्री चित्रण (LCP) तत्व ऑडिट को कैसे ठीक करें - एक व्यावहारिक मार्गदर्शिका

पूर्व-लोडेड हीरो.webp LCP को कम करता है नेटवर्क प्राथमिकता को रेंडरिंग सक्रियण के साथ संरेखित करके, गैर-दृश्य सामग्री के विंडो को छोटा करके। पहले रेंडर के लिए पूर्व-लोडेड संसाधनों का उपयोग करें और संपत्तियों को हल्का रखें ताकि प्रदर्शन को बढ़ावा मिले।

वाटरफॉल विश्लेषण कई बाधाओं को प्रकट करता है जो कई महत्वपूर्ण संपत्तियों को श्रृंखला में जोड़ने से उत्पन्न होती हैं। इससे बचने के लिए, अवांछित CSS को बाहर करें, स्क्रिप्ट्स को स्थगित करें, और संभव होने पर फ़ॉन्ट्स और छवियों को वेबपी प्रारूप में परोसें। यह कदम प्रारंभिक ब्लॉकिंग समय को कम करके समग्र उपयोगकर्ता अनुभव को सुधारता है।

क्लाउड इन्फ्रास्ट्रक्चर में, एज डिलीवरी राउंड ट्रिप्स को कम करती है। सक्रियण संकेतों का उपयोग विंडो परिवर्तनों में पूर्व-लोडेड संपत्तियों को क्रमबद्ध करने के लिए करें, श्रृंखला को न्यूनतम करें, और कैशिंग नीतियों को कड़ा करें। अधिकांश पृष्ठों के लिए, हीरो छवियां और महत्वपूर्ण CSS जल्दी पहुंचनी चाहिए, जबकि कम-दृश्य चीजें ऑन-डिमांड रहें – मूल रूप से ब्लॉकिंग समय को कम करके।

रणनीतियां में फोल्ड के नीचे सामग्री के लिए लेजी लोडिंग शामिल है, लेकिन हीरो सामग्री को विलंबित करने से बचें। प्रदर्शन बजट पर जोर दें और वाटरफॉल ट्रेस के साथ मापें, विशेष रूप से window.onload सक्रियण। चीजों को सरल रखें और प्रारंभिक रेंडर से शोर को बाहर करें।

थीम्स और इन्फ्रास्ट्रक्चर अपडेट्स में लाभों को बनाए रखने के लिए, कोर संपत्तियों के लिए पूर्व-लोडेड रणनीति लागू करें, नामकरण को साफ रखें, और इमेजरी को webp में परिवर्तित करें। काफी आक्रामक अनुकूलन लोडिंग समय को बचाने के लिए मजबूर करता है, उपयोगकर्ताओं को कभी नुकसान नहीं पहुंचाता, जबकि क्लाउड एज कैशिंग लंबी अवधि की गति का समर्थन करता है।

लार्जेस्ट कंटेंटफुल पेंट (LCP) ऑडिट: व्यावहारिक गाइड

मूर्त सिफारिश: प्रतिनिधि सबसेट पर मापन चलाएं, प्रारंभिक रेंडर के दौरान कौन सा ब्लॉक-लेवल घटक सबसे बड़ा बनता है उसे डीकोड करें, फिर संपत्तियों को पुनःआकार दें या इनलाइन-क्रिटिकल स्टाइल्स लागू करें ताकि प्रतिक्रिया समय कम हो। यह कम प्रतीक्षा को कम करता है और उपयोगकर्ताओं के लिए अनुभव को सुधारता है।

प्रक्रिया खोज, आकार निर्धारण, सत्यापन पर केंद्रित है। मालिकों को सबसे बड़े कंटेंटफुल ब्लॉक्स के लिए एक कॉम्पैक्ट बजट लागू करना चाहिए और वैश्विक डैशबोर्ड्स के माध्यम से प्रगति को ट्रैक करना चाहिए। ऐसे मामले हैं जहां सर्वर-साइड स्रोतों से संपत्ति फेच लेटेंसी LCP को ऊंचा धकेलती है; डिबगिंग वहां से शुरू होनी चाहिए।

1. खोज और वर्गीकरण: प्रारंभिक रेंडर द्वारा सबसे बड़े उम्मीदवार को ढूंढें, आमतौर पर बड़ी छवि, एक वीडियो पोस्टर, या एक ब्लॉक-लेवल हीरो। खोजे गए URLs को मूल सत्यापित करने और क्रॉस-ओरिजिन प्रभाव को सत्यापित करने के लिए डीकोड करें। उपलब्ध टूलिंग में ब्राउजर डेवटूल्स नेटवर्क पैनल, लाइटहाउस, और डिबगबियर्स टेम्प्लेट्स शामिल हैं।
2. अनुकूलन: srcset और sizes के साथ छवियों को पुनःआकार दें; WebP या AVIF में परिवर्तित करें; आवश्यक CSS और फ़ॉन्ट्स को इनलाइन करें; गैर-क्रिटिकल CSS को स्थगित करें; क्लास-आधारित लेजी-लोडिंग संकेत सौंपें और संपत्तियों के URLs को तेज मूल से परोसे जाने सुनिश्चित करें।
3. मापन और सत्यापन: वैश्विक पृष्ठों के सेट पर पुनःमापन करें; पहले/बाद के मूल्यों की तुलना सीधे करें; परिवर्तनों के बाद कौन सा ब्लॉक-लेवल कंटेंट सबसे बड़ा हिस्सा दर्शाता है इसका मूल्यांकन करें; सत्यापित करें कि LCP अब लक्ष्य थ्रेशोल्ड्स से नीचे गिरता है।
4. शासन: मालिकों और योगदानकर्ताओं को बजट ट्रैक करना चाहिए, नई संपत्तियों को हल्के स्कोरिंग शीट में जोड़ें, और तिमाही जांच शेड्यूल करें; यदि एक नया ब्लॉक सबसे बड़ा उभरता है, तो अपडेटेड स्रोतों के साथ डीकोड और पुनःआकार चक्र दोहराएं।
5. 롤आउट और निगरानी: परिवर्तनों को स्टेजिंग URL पर धकेलें, फिर क्षेत्रों में निगरानी करें; सफल सत्यापन के बाद, न्यूनतम जोखिम के साथ प्रोडक्शन में तैनात करें; संक्षिप्त रोलबैक योजना शामिल करें।

• ओवरसाइज्ड हीरो इमेजरी
• अनुकूलित फ़ॉन्ट्स
• गैर-लेजी-लोडेड फोल्ड के ऊपर ब्लॉक्स
• इनलाइन बड़े HTML ब्लॉक्स
• सर्वर-साइड लेटेंसी
• CSS रेंडर-ब्लॉकिंग
• प्रारंभिक पेलोड में अत्यधिक URLs

एकाधिक URLs से, इनलाइन पृष्ठों और गतिशील रूट्स सहित, चल रही मापन होनी चाहिए। जब पैटर्न खोजे जाते हैं, तो मालिकों को एकल समाधान पर लिंगर न करें, बल्कि पुनरावृत्ति करें, और निर्णयों को निर्देशित करने के लिए उपलब्ध वैश्विक डेटा का उपयोग करें।

वास्तविक LCP एलिमेंट और उसके प्रारंभिक रेंडर में भूमिका की पहचान करें

क्लीन लोड को रीप्ले करके वास्तविक LCP उम्मीदवार को पिन डाउन करें: डेवटूल्स खोलें, परफॉर्मेंस टैब, रीलोड करें, और देखें कि कौन सा संसाधन पहला पेंट हावी करता है। वह संपत्ति जो प्रारंभिक दृश्य में रेंडर होती है और व्यूपोर्ट के अधिकांश को कवर करती है प्राथमिकता लेती है; DOM में इसकी स्थान और फाइल साइज नोट करें ताकि यह कितना भारी है पता चले। यह उन वेबसाइटों के लिए मायने रखता है जिनमें विशाल हीरो ब्लॉक्स और भारी फ़ॉन्ट्स हैं।

सामान्य उम्मीदवारों में बड़ी हीरो छवि, बैकग्राउंड वीडियो, या फ़ॉन्ट-हैवी ब्लॉक शामिल हैं। फ़ॉन्ट्स के लिए, यह मायने रखता है क्योंकि फ़ॉन्ट फाइलें टेक्स्ट रेंडरिंग को विलंबित कर सकती हैं, इसलिए महत्वपूर्ण फ़ॉन्ट्स को पूर्व-लोड करने या font-display: swap का उपयोग करने पर विचार करें। प्रीकनेक्ट और प्रीलोड संकेतों का उपयोग आइडल समय को कम करने के लिए करें; कैश रणनीतियां ब्राउजर को सामग्री तेजी से डिलीवर करने में मदद करती हैं; रिस्पॉन्सिव छवियां और आधुनिक प्रारूप जैसी तकनीकें इसी तरह काम करती हैं।

तीन मूर्त क्रियाएं सुधारती हैं: फोल्ड के नीचे सामग्री के लिए लेजी लोडिंग; गैर-क्रिटिकल स्क्रिप्ट्स को अक्षम करें; छवियों को संपीड़ित करें; आधुनिक प्रारूपों में परिवर्तित करें; कैश हेडर्स सुनिश्चित करें; डिलीवरी को तेज करने के लिए होस्टिंगर जैसे CDN से कनेक्ट करें; अप्रयुक्त CSS को हटाकर बर्बाद डेटा की मात्रा कम करें; अनुरोधों की संख्या कम रखें। यह उच्च-वेग दृष्टिकोण मुद्दों को कम करता है और दृश्य स्पष्ट रूप से तेज महसूस होता है।

मापन योजना: विविध नेटवर्क स्थितियों में तीन रन, LCP समय रिकॉर्ड करें, डिवाइसों में दृश्य देखें; जांचें कि क्या कमी लक्ष्य राशि से अधिक है, जैसे 200–600 ms। यदि परफॉर्मेंस बैज लाइटहाउस या कोर वेब विटल्स में हरा हो जाता है, तो आप जानते हैं कि आप सही दिशा में चले गए हैं। CPU समय और लंबे कार्यों को देखकर विवाद ट्रैक करें; कार्य को विभाजित करके या वेब वर्कर्स पर ऑफलोड करके विवाद कम करें।

LCP को चलाने वाले कंटेंट स्रोत डेटाबेस-चालित कंटेंट से आ सकते हैं; सुनिश्चित करें कि लेजी लोडिंग मुख्य संपत्ति को न छिपाए; सत्यापित करें कि फ़ॉन्ट्स और छवियां कैश से लोड हों; प्रारंभिक रेंडर के दौरान अनावश्यक थर्ड-पार्टी स्क्रिप्ट्स को अक्षम करें; यह व्यावहारिक दृष्टिकोण आपको बताएगा कि सुधार कहां मायने रखते हैं और लगभग किसी भी वेबसाइट के लिए तेज अनुभव कैसे डिलीवर करें। ट्यूटोरियल मानसिकता छोटे से शुरू करें, मापें, और पुनरावृत्ति करें।

वास्तविक-उपयोगकर्ता डेटा के साथ LCP मापें और सटीक क्षण को चिह्नित करें जब यह होता है

आपको पृष्ठों में LCP को कैप्चर करने वाले वास्तविक-उपयोगकर्ता डेटा संग्रह को कॉन्फ़िगर करना है। नोट: पूर्ण दृश्य प्राप्त करने के लिए क्रोम-साइड टाइमिंग्स और सर्वर लॉग्स पर निर्भर रहें। विधियों का उपयोग करें जैसे डेटा-संग्रह स्क्रिप्ट्स, प्लगइन्स, और कोड जो एनालिटिक्स प्लेटफॉर्म्स को फीड करते हैं। डिवाइस प्रकार, नेटवर्क, और क्षेत्र जैसे क्षेत्रों द्वारा परिणामों को फ़िल्टर करें; डेटा की मात्रा विश्वसनीयता के लिए मायने रखती है।

सटीक क्षण की पहचान दृश्य नोड को टाइमस्टैम्प करके करें जो LCP मानदंडों को संतुष्ट करता है। लंबे कार्यों और संसाधन टाइमिंग के लिए PerformanceObserver का उपयोग करें; डेटा स्टोर्स में इवेंट समय रिकॉर्ड करें और संसाधन लोड्स के साथ सहसंबंधित करें। जब आप सफेद हीरो ब्लॉक या बड़ी ग्राफिक रेंडर देखते हैं, तो उस सेकंड को कैप्चर करें। रेंडर होने वाले नोड्स जांचें; संपत्ति प्रकारों के लिए, webp अक्सर भारी; नोट करें यदि डिस्क या नेटवर्क विलंब होता है, तो आप सर्वरों में अंतर माप सकते हैं; अस्थायी नेटवर्क हिचकी टाइमिंग डेटा में स्पाइक्स के रूप में दिखाई देती हैं।

सर्वोत्तम अभ्यास: केंद्रीय डेटा वेयरहाउस में मेट्रिक्स स्टोर करें। आप प्रगति ट्रैक करने के लिए डैशबोर्ड बना सकते हैं। शामिल नोड्स को ढूंढने के लिए क्रोम डेवटूल्स टाइमलाइन का उपयोग करें। आप संसाधन प्रकार द्वारा फ़िल्टर करके एकाधिक कारणों (छवियां, फ़ॉन्ट्स, थर्ड-पार्टी से स्क्रिप्ट्स) की पहचान कर सकते हैं। यदि एकाधिक कारण हैं, तो प्राथमिकता क्रम में संबोधित करें: संपत्तियों को अनुकूलित करें, गैर-क्रिटिकल स्क्रिप्ट्स को स्थगित करें, और थर्ड-पार्टी कोड को ट्रिम करें। साथ ही, स्थिरता दर्शाने के लिए रिलीज पर परफॉर्मेंस-अनुकूलित बैज संलग्न करें।

उदाहरण टीमों से दिखाते हैं कि webp छवियों को अनुकूलित करना और लेजी-लोडिंग सक्षम करना LCP टाइमिंग को पर्याप्त रूप से कम कर सकता है। एक पैटर्न है: एकाधिक सर्वरों से संपत्ति डिलीवरी अतिरिक्त राउंड ट्रिप्स का कारण बन रही है, विशेष रूप से पृष्ठ के प्रारंभ में सफेद स्थान के लिए। रूट्स को ट्रिम करके, एक ही डोमेन से परोसकर, और संपत्तियों को संपीड़ित करके, मेट्रिक्स सुधरते हैं। बेहतर प्रभाव के लिए, प्रोडक्शन में ट्यूटोरियल-शैली वर्कफ्लो चलाएं और विसंगतियों के उत्पन्न होने पर डिस्कॉर्ड अलर्ट्स के माध्यम से परिणाम साझा करें।

व्यावहारिक रन में टूल्स और टिप्स: परिवर्तनों के बाद अस्थायी निगरानी विंडो कॉन्फ़िगर करें, दूसरे टेस्ट विंडो के साथ सत्यापित करें, और पुनरावृत्ति करें। याद रखें कि डेटा गुणवत्ता को उच्च रखें, एकल सैंपल पर ओवरफिटिंग से बचें, और स्पष्ट उदाहरणों के साथ निष्कर्षों को दस्तावेज़ीकरण करें। इन चरणों को किसी भी परफॉर्मेंस-अनुकूलित रिलीज के लिए दोहराने योग्य प्रक्रिया के रूप में लागू करें।

सामान्य LCP अपराधियों का ऑडिट करें: हीरो छवियां, बड़े टेक्स्ट ब्लॉक्स, और एम्बेडेड मीडिया

तीन अपराधियों पर फोकस करते हुए त्वरित ट्रायेज शुरू करें: हीरो विजुअल्स, बड़े टाइपोग्राफिक ब्लॉक्स, एम्बेडेड मीडिया। आपने .hero, header, [data-hero] जैसे सेलेक्टर्स द्वारा संपत्तियों की पहचान की है, फिर थ्रॉटल्ड टेस्ट्स पर परिवर्तनों को निष्पादित करें ताकि प्रभाव की पुष्टि हो। यह दृष्टिकोण जल्द ही निर्णयों के लिए बेहतर संकेत प्रदान करता है।

1. हीरो विजुअल्स

   • कारण: हीरो जल्दी लोड होता है और अक्सर उच्च पेलोड चलाता है। .hero, header, [data-hero] जैसे सेलेक्टर्स के साथ सभी हीरो आइटम्स को एकल समीक्षा स्ट्रीम में मैप करें।
   • संपीड़न: squoosh का उपयोग करके webp या AVIF में परिवर्तित करें, गुणवत्ता बनाए रखते हुए फाइल साइज कम रखें। जहां संभव हो, 1200px-चौड़े हीरो के प्रति 100–200 KB के नीचे लक्ष्य रखें; रीटच्ड बैनर्स के लिए, 300 KB के नीचे लक्ष्य रखें।
   • प्रारूप और डिलीवरी: ब्राउज़र्स के लिए वेरिएंट स्टोर करें, webp को डिफ़ॉल्ट और jpeg/png को फॉलबैक के रूप में। यह फर्स्ट पेंट टाइम को कम करता है और थ्रॉटल्ड नेटवर्क्स पर वास्तविक सुधार दिखाता है।
   • लेआउट स्थिरता: लेआउट शिफ्ट्स को रोकने के लिए स्पष्ट चौड़ाई/ऊंचाई या aspect-ratio घोषित करें। यदि हीरो लोड पर साइज बदलता है, तो यह LCP को फुलाता है; सुसंगत स्थान बनाए रखें।
   • डिलीवरी रणनीति: गैर-लैंडिंग पृष्ठों के लिए साइटवाइड केवल गैर-क्रिटिकल हीरो विजुअल्स को लेजी लोड पर रखें। आपको सुनिश्चित करना है कि महत्वपूर्ण हीरो फोल्ड के ऊपर रहे और गैर-क्रिटिकल वाले ब्लॉक न करें।
   • टूल्स और प्लगइन्स: जहां उपलब्ध हो इमेज-ऑप्टिमाइजेशन प्लगइन्स का लाभ उठाएं; पहली यात्रा के बाद कैश से परोसे जाने के लिए स्टोरेज रणनीतियों को जोड़ें। अनुकूलन के बाद पेलोड कमी अक्सर 20–60% रेंज में पाई जाती है।
   • टेस्टिंग: 3G या धीमे पर थ्रॉटल करें, डिवाइसों में प्रभाव विश्लेषण करें। जल्द ही आप हीरो संपत्तियों पर निर्भर पृष्ठों में दिखाने के समय में अंतर देखेंगे।

2. टाइपोग्राफी ब्लॉक्स

   • कारण: ओवरसाइज्ड ब्लॉक्स लेआउट समय और रिफ्लो को आकर्षित करते हैं। लंबे पैराग्राफ को पचाने योग्य चंक्स में तोड़ें और लाइन लंबाई को उचित रखें ताकि रेंडर कार्य कम हो।
   • फ़ॉन्ट्स: जहां संभव हो सिस्टम फ़ॉन्ट्स चुनें या फ़ॉन्ट फैमिली को प्रतिबंधित करें। रेंडरिंग को तेज करने के लिए font-display: swap और फ़ॉन्ट होस्ट्स से प्रीकनेक्ट का उपयोग करें। बॉडी बनाम हेडिंग्स के लिए अनुकूलित वर्शन सेट बनाएं ताकि स्टोरेज कम हो।
   • संपत्ति रणनीति: महत्वपूर्ण पथों पर कस्टम वेबफ़ॉन्ट्स को सीमित करें; बोल्ड या डिस्प्ले वेरिएंट्स को केवल आवश्यकता पर लोड करें। एकल वेट सेट का उपयोग अक्सर एकाधिक वेट्स की तुलना में टेक्स्ट तक बेहतर समय प्रदान करता है।
   • संपीड़न और प्रारूप: यदि टेक्स्ट छवियों पर निर्भर है, तो जहां संभव हो सजावटी ब्लॉक्स को वास्तविक टेक्स्ट से बदलें या छोटे पेलोड के साथ तेजी बनाए रखने के लिए वेक्टर-आधारित विकल्पों में परिवर्तित करें।
   • लेआउट संकेत: बड़े रिफ्लो से बचने के लिए CSS सेट करें (भारी मार्जिन, महंगे लाइन-हाइट्स से बचें)। पेंट के दौरान शिफ्ट्स को रोकने के लिए स्थिर फ़ॉन्ट मेट्रिक्स बनाए रखें।
   • साइटवाइड विचार: पृष्ठों में कंटेंट टेम्प्लेट्स की समीक्षा करें। एकाधिक संस्करणों में दोहराए जाने वाले भारी ब्लॉक्स को न्यूनतम करके स्टोरेज कम होता है और सामुदायिक साइटों में सुसंगति सुधरती है।
   • मापन: टाइपोग्राफी ट्वीक्स के बाद CLS परिवर्तनों का विश्लेषण करें ताकि सुनिश्चित हो कि सुधार कहीं और नई लागत पर न आएं।

3. एम्बेडेड मीडिया

   • कारण: iframes, विजेट्स, या विज्ञापन पेंट को विलंबित करते हैं; फोल्ड के ऊपर मीडिया को प्राथमिकता दें और अन्य को स्थगित करें। गति बढ़ाने के लिए गैर-क्रिटिकल एम्बेड्स को हटाएं या स्थगित करें।
   • लेजी लोडिंग: iframes और भारी एम्बेड्स पर loading="lazy" लागू करें; लोड के दौरान खाली स्थान से बचने के लिए हल्के पोस्टर प्लेसहोल्डर्स प्रदान करें।
   • परफॉर्मेंस-फ्रेंडली एम्बेड्स: जहां संभव हो लाइट प्लेयर्स या स्टेटिक प्रीव्यू पसंद करें। वीडियो के लिए, पोस्टर छवि का उपयोग करें और उपयोगकर्ता इंटरैक्शन के बाद ही वीडियो लोड करें।
   • विज्ञापन कंटेंट और थर्ड-पार्टी: थर्ड-पार्टी स्क्रिप्ट्स का ऑडिट करें; प्रारंभिक लोड पर गैर-क्रिटिकल को ब्लॉक करें; साइटवाइड परफॉर्मेंस को बरकरार रखने के लिए क्षेत्र या रूट द्वारा लोडिंग नीतियों पर विचार करें।
   • निदान: कुछ एम्बेड्स के साथ और बिना पृष्ठों की तुलना करने के लिए थ्रॉटल्ड टेस्ट्स का उपयोग करें। आपको विश्लेषण करना है कि एक पृष्ठ दूसरे की तुलना में क्यों सुधार जल्दी दिखाता है और अतिरिक्त ब्लॉक्स को हटाने के लिए सेलेक्टर्स समायोजित करें।
   • स्टोरेज रणनीति: एम्बेड स्क्रिप्ट्स को सावधानी से कैश करें; पुनःभ्रमण पर दोहराए जाने वाले संसाधन फेच को कम करें ताकि साइटवाइड अनुभव सुधरे।
   • टेस्टिंग और प्रभाव: परिवर्तनों के बाद, वास्तविक उपयोगकर्ता मेट्रिक्स और सिंथेटिक टेस्ट्स के साथ सत्यापित करें। एम्बेड्स को प्रून करने के बाद LCP टाइमिंग में लाभ अक्सर 15–40% से अधिक होते हैं।

सलाह: तीन अपराधियों के लिए जीवित चेकलिस्ट बनाए रखें, साइट के विकास के साथ सेलेक्टर्स अपडेट करें, और समय के साथ संपत्तियों के संस्करणों को ट्रैक करें। यदि कुछ पेलोड कम करता है लेकिन दृश्य निष्ठा को नुकसान पहुंचाता है, तो डेस्कटॉप पर उच्च गुणवत्ता प्रदान करके मोबाइल के लिए प्रगतिशील एन्हांसमेंट के साथ संतुलित दृष्टिकोण बनाएं। गैर-क्रिटिकल क्षेत्रों से क्लटर हटाएं ताकि कोर कंटेंट तेज पहुंचे, और साइटवाइड रणनीतियों को परिष्कृत करने के लिए सामुदायिक सबकों पर झुकें।

फोल्ड के ऊपर संपत्तियों को अनुकूलित करें: पुनःआकार, संपीड़ित, और उपयुक्त प्रारूप चुनें

मुख्य फोल्ड के ऊपर विजुअल्स को 1200–1400 px चौड़े में पुनःआकार दें और डिवाइस घनत्व से मेल खाने के लिए srcset (1x, 2x, 3x) के माध्यम से रिस्पॉन्सिव उम्मीदवार प्रदान करें।

संपीड़न निर्णयों को इष्टतम गुणवत्ता बनाम साइज के लिए संतुलित होना चाहिए; लोगो और आइकॉन्स के लिए लॉसलेस का उपयोग करें, और फोटोग्राफी के लिए लॉसी; मोबाइल पर 150 KB के नीचे साइज लक्ष्य रखें ताकि उपयोगकर्ता धारणा पर्याप्त तेज रहे; यह समस्या अक्सर तब प्रकट होती है जब संपत्तियां अनुकूलित नहीं होतीं।

प्रारूप बुद्धिमानी से चुनें: जहां ब्राउज़र समर्थन करते हैं WebP या AVIF; पुराने क्लाइंट्स के लिए फॉलबैक JPEG/PNG शामिल करें, संगतता बनाए रखते हुए।

जहां संभव हो संपत्तियों को जोड़कर अनुरोधों को न्यूनतम करें; क्रिटिकल CSS को इनलाइन करें, फिर बाकी को असिंक्रोनस लोड करें; रेंडर को ब्लॉक करने वाली किसी भी चीज से बचें; कम अनुरोध तेज रेंडर का मतलब है।

डिलीवरी स्टैक मायने रखता है: क्लाउड CDN से संपत्तियों को परोसें; ऑटोमेटिक संपीड़न और प्रारूप रूपांतरण के लिए संपत्तियों को होस्टिंगर या किन्स्टा में माइग्रेट करें, जो रॉकेट गति प्रदान करता है और स्थिर संपत्तियों के लिए विलंब कम करता है।

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

विंडो लोड टाइमिंग और पहली दृश्य सामग्री के माध्यम से प्रभाव मापें; उनके अनुरोधों को ट्रैक करें और पुष्टि करें कि विलंब गिरते हैं।

सामान्य बेसलाइन बनाए रखें: मुख्य संपत्तियों को दुबला रखें, बाकी को प्रकार और उपयोग द्वारा विचलित करें, और विश्वसनीयता और गति सुधारने के लिए क्लाउड प्रदाताओं में पाइपलाइनों को विविधीकृत करें। निर्णयों को सही ठहराने और दूसरों से सीखने के लिए मेट्रिक्स में गोता लगाएं।

रॉकेट दृष्टिकोण चल रही ट्यूनिंग की आवश्यकता है। डन।

संसाधन डिलीवरी सुधारें: फ़ॉन्ट्स, CSS, और छवि लोडिंग तकनीकें

महत्वपूर्ण फ़ॉन्ट्स और CSS को पूर्व-लोड करें; font-display: swap का उपयोग करें; फ़ॉन्ट्स को समान मूल पर होस्ट करें; वेरिएबल फ़ॉन्ट्स पसंद करें; आवश्यक ग्लिफ्स के लिए फ़ॉन्ट्स को सबसेट करें; थीम्स प्रति सही फ़ॉन्ट टोकन परिभाषित करें; यह दृष्टिकोण थीम्स में लेआउट शिफ्ट्स को कम करता है ताकि कथित प्रदर्शन सुधरे।

छोटे क्रिटिकल CSS को इनलाइन करें और शेष को स्थगित करें; फोल्ड के ऊपर नियमों को तुरंत लोड करें; प्रारंभिक पेलोड में शीर्ष रूट्स के लिए प्रीरेंडर करें; संसाधनों के लिए प्राथमिकता सेट करें; साथ ही अप्रयुक्त सेलेक्टर्स को प्रून करें ताकि बाइट्स कम हों।

छवियां: ऑफस्क्रीन संपत्तियों के लिए लेजी लोडिंग सक्षम करें; रिज़ॉल्यूशन को अनुकूलित करने के लिए srcset और sizes प्रदान करें; संपत्तियों को WebP या AVIF में परिवर्तित करें; JPEGs के लिए प्रगतिशील रेंडरिंग लागू करें; शिफ्ट्स से बचने के लिए स्पष्ट चौड़ाई और ऊंचाई प्रदान करें; CDN में संपत्तियों को स्टोर करना साइटवाइड डिलीवरी का समर्थन करता है; यह दृष्टिकोण छवि वजन को भी कम करता है और फर्स्ट कंटेंटफुल रेंडर को तेज करता है।

संसाधन डिलीवरी रणनीति सर्वर-साइड अनुकूलन को मिश्रित करती है: होस्ट्स से प्रीकनेक्ट, प्रीलोडिंग, और समर्थित जहां HTTP/2 पुश या लिंक हेडर्स; फ़ॉन्ट्स और क्रिटिकल CSS को कैश करने के लिए छोटे सर्विस वर्कर लागू करें; स्थिर संपत्तियों के लिए लंबी अवधि वाली सही कैशिंग नीतियां विश्वसनीयता सुधारती हैं बिना दोहराए फेच के; लेजी लोडिंग कमजोर कनेक्शनों के लिए प्रगतिशील एन्हांसमेंट को पूरक करती है।

स्टेजिंग वातावरणों में टेस्ट और मापन होते हैं; पूर्व बेसलाइन्स के साथ मेट्रिक्स की तुलना करने के लिए टेस्ट चलाएं; परिवर्तनों को निर्देशित करने के लिए थ्रेशोल्ड्स की गणना करें; मजबूत बजट को ट्यून करने के लिए प्रगतिशील पुनरावृत्तियों का उपयोग करें; तेज, अधिक स्थिर उपयोगकर्ता अनुभवों और डिवाइसों में कम रिग्रेशनों का लक्ष्य रखें।

फ़ॉन्ट्स	कुंजी फ़ॉन्ट्स को पूर्व-लोड करें, ग्लिफ्स को सबसेट करें, font-display swap का उपयोग करें, स्थानीय रूप से होस्ट करें	ब्लॉकिंग कम करता है, पहली सार्थक दृश्य सामग्री सुधारता है
CSS	क्रिटिकल CSS को इनलाइन करें, गैर-क्रिटिकल को स्थगित करें, अप्रयुक्त सेलेक्टर्स को प्रून करें	प्रारंभिक रेंडर समय सुधारता है, अप्रयुक्त पेलोड कम करता है
छवियां	लेजी लोडिंग सक्षम करें, srcset/sizes का उपयोग करें, WebP/AVIF में परिवर्तित करें, चौड़ाई/ऊंचाई सेट करें	वजन कम करता है, लेआउट स्थिर करता है, दृश्य सामग्री तेज करता है
कैशिंग और डिलीवरी	सर्वर-साइड अनुकूलन, प्रीकनेक्ट, प्रीरेंडर, CDN स्टोरेज	साइटवाइड विश्वसनीयता, कम फेच, तेज दोहराए यात्राएं