प्रत्येक CORE WEB VITAL को ठीक करें
तीन मेट्रिक्स, तीन अलग-अलग काम। जो फिक्स हर एक को आगे बढ़ाते हैं, सिद्धांत के झंझाट के बिना।
← Guides All guides in this topic
LCP: मुख्य चीज़ को तेज़ी से लोड करें
Largest Contentful Paint आमतौर पर hero image, बड़ी headline, या poster frame होता है। वह element खोजें। बाकी सब कुछ तब तक secondary है जब तक वह fast न हो जाए।
LCP को आगे बढ़ाने वाले levers: resource को compress और resize करें, modern format use करें, dimensions set करें, exact URL को preload करें जब वह late में discoverable हो, उसे CDN पर रखें, और TTFB को reduce करें ताकि bytes शुरू हो सकें। LCP image को lazy-load करने से बचें। Carousels से बचें जो real LCP node को delay करते हैं।
Server angle: अगर HTML itself late है, तो कोई भी image trick आपको नहीं बचाएगा। पहले cache और origin को ठीक करें।
Key takeaway: LCP element को name करें, फिर उस file और उसके discovery path को boringly fast बनाएँ।
INP: मुख्य थ्रेड को मुक्त रखें
Interaction to Next Paint इस बात से care करता है कि page tap या click के बाद कितनी जल्दी respond करता है। Main thread पर heavy JavaScript आमतौर पर culprit है: big hydration, expensive handlers, third-party scripts जो forever चलते हैं।
Levers: third parties को delete या defer करें, handlers को split करें, marketing pages पर large synchronous components से बचें, small islands के साथ server-rendered HTML को prefer करें, और real mid-tier Android device पर test करें, सिर्फ desktop throttling preset पर नहीं।
Key takeaway: INP तब improve होता है जब आप main thread से work remove करते हैं, न कि जब आप CSS transition को micro-optimise करते हैं।
CLS: पेज को जंपिंग से रोकें
Cumulative Layout Shift visual instability है। Dimensions के बिना images, fonts जो late में swap होते हैं और text को resize करते हैं, ads और embeds जो layout में hole खोलते हैं, banners जो content के ऊपर inject होते हैं।
Levers: media पर width और height या CSS aspect-ratio, ads के लिए reserved slots, font-display strategies जो layout को detonate न करें, और late-loading UI को existing content के ऊपर न रखें। Existing space को transform करना prefer करें new blocks को top पर insert करने के बजाय।
मुख्य निष्कर्ष: अगर कोई चीज़ बाद में दिखाई दे, तो पहले ही उसकी जगह आरक्षित करें।
जो गलतियां बार-बार फेल करवाती हैं
| Metric | Common miss | Better move |
|---|---|---|
| LCP | Lazy-loading the hero | Eager + preload the real LCP URL |
| LCP | Optimising a non-LCP image | Identify the LCP node first |
| INP | Blaming CSS animations | Cut JS and third parties |
| INP | Testing only on desktop | Use a mid-tier phone |
| CLS | Ignoring font metrics | Subset fonts, reserve space |
| CLS | Cookie banners without space | Reserve or overlay carefully |
मुख्य निष्कर्ष: ज़्यादातर बार-बार होने वाली विफलताएँ प्रक्रिया की गलतियाँ होती हैं, सूक्ष्म अनुकूलन की कमी नहीं।
तीनों को पास करने का तरीका
विफल साइट पर संचालन का क्रम: पहले LCP साफ़ करें, फिर INP, फिर CLS। हर कदम के बीच फ़ील्ड डेटा को दोबारा मापें। लॉन्च गेट के रूप में CWV चेकलिस्ट का उपयोग करें और जब आप अभी भी सर्वर को फ्रंट एंड से अलग नहीं बता सकते तो स्लो-साइट गाइड का उपयोग करें।
मोबाइल पर 75वें पर्सेंटाइल पर तीनों को पास करना काफ़ी है। फ़ील्ड डेटा स्वस्थ होने के बाद लैब में 100 के लिए रिलीज़ को बंधक न बनाएँ।
मुख्य निष्कर्ष: पहले LCP साफ़ करें। एक बार मुख्य कंटेंट पाथ ईमानदार हो जाए तो INP और CLS आसान हो जाते हैं।
एक सप्ताह की बचाव योजना
दिन 1: फ़ील्ड डेटा खींचें, शीर्ष तीन टेम्प्लेट पर LCP एलिमेंट का नाम बताएँ, हर तीसरे पक्ष की स्क्रिप्ट को मालिक के साथ सूचीबद्ध करें। दिन 2 और 3: सिर्फ़ LCP मीडिया और डिस्कवरी फ़िक्स भेजें। दिन 4: सबसे बुरी तीसरी-पक्ष की स्क्रिप्ट को हटाएँ या स्थगित करें और फ़ोन पर INP को फिर से जाँचें। दिन 5: उन CLS अपराधियों के लिए जगह आरक्षित करें जो आप फ़ील्ड अनुभव में देख सकते हैं। दिन 6 और 7: दोबारा मापें, जो बचा है उसे डॉक्यूमेंट करें, और तय करें कि बची हुई कार्य लॉन्च-अवरुद्ध करने वाली है या नहीं।
वह सप्ताह एक महीने की मिश्रित रिफ़ैक्टरिंग को हराता है क्योंकि हर दिन का एक मीट्रिक और एक सबूत लूप होता है। अगर दिन 3 के बाद भी LCP लाल है, तो डिज़ाइन सिस्टम क्लीनअप शुरू न करें। LCP एलिमेंट पर तब तक रहें जब तक वह हिल न जाए।
मुख्य निष्कर्ष: दोबारा माप के साथ एक दिन में एक मीट्रिक मिश्रित परफ़ॉर्मेंस बैकलॉग को हराता है।