CWV चेकलिस्ट

लंबी चेकलिस्टें कभी इस्तेमाल नहीं होती। Core Web Vitals चेकलिस्ट जो जीतती है वह इतनी छोटी है कि एक इंजीनियर प्रोडक्शन में पुश करने से पहले इसे चला सकता है बिना यह सोचे कि यह एक काम है। मेरी में बारह आइटम हैं।

जो साइटें लॉन्च पर सभी बारह को पास करती हैं, उन्हें प्रोडक्शन में शायद ही कभी CWV समस्याएँ होती हैं। जो साइटें तीन या चार को छोड़ देती हैं, वे अंततः 75वें पर्सेंटाइल पर विफल हो जाती हैं और टीम को Google के ध्यान देने के बाद इसे ठीक करने के लिए दौड़ना पड़ता है।

1. हीरो इमेज को link rel=preload as=image के साथ हेड में प्रीलोड किया गया है।

2. Fold के ऊपर की इमेजेज़ के पास स्पष्ट width और height attributes होते हैं, इसलिए layout लोड होने से पहले स्पेस रिजर्व कर लेता है।

3. WebP फॉर्मेट, quality 82, अपलोड से पहले actual render dimensions तक रिसाइज़ किया गया।

4. Critical CSS को head में इनलाइन किया गया, बाकी को async load के लिए deferred किया गया।

5. Web fonts self-hosted हैं font-display: swap के साथ।

6. हर public-facing page पर Initial JavaScript 100KB से कम है।

7. Analytics, marketing, और social-pixel scripts सभी deferred हैं।

8. CSS Grid columns minmax(0, 1fr) का इस्तेमाल करते हैं, 1fr नहीं, ताकि लंबी content पर overflow न हो।

9. Static rendering जहाँ content के अनुसार संभव हो।

10. Cloudflare या equivalent CDN को origin के सामने रखा गया है।

11. Field data को हर हफ़्ते Search Console > Core Web Vitals के ज़रिए मापा जाता है।

12. Build-time SEO linter बिल्ड को regressions पर fail करता है।

किसी भी बड़े launch से पहले इस list को manually चलाएँ। चल रहे engineering work के लिए, items 6, 8, 11, और 12 को CI में automate करें; बाकी template-level checks हैं जो design time पर होती हैं और शायद ही कभी regress होती हैं।

जब CWV production में regress होता है, तो regression लगभग हमेशा इन बारह items में से किसी एक के silently violate होने पर निकलता है। Diagnostic flow यह है: list को चलाएँ, violation खोजें, इसे fix करें, CrUX के update के लिए 28 दिन का इंतज़ार करें, confirm करें।