हमारी मार्केटिंग साइट का Core Web Vitals स्कोर खराब है। इसे ठीक करने पर आप कैसे बढ़ेंगे?

पहले field डेटा निकालिए, क्योंकि lab स्कोर छिपा देते हैं कि असली डिवाइस पर असली यूज़र क्या झेलते हैं। LCP आमतौर पर hero image या render रोकने वाला font होता है, तो image preload कीजिए, आधुनिक formats दीजिए और साफ dimensions सेट कीजिए। CLS बिना आकार वाली media और बीच में घुसने वाले banners से आता है। INP लंबे JavaScript tasks से आता है, तो code split कीजिए, तीसरे पक्ष की scripts टालिए और hydration का काम घटाइए। हर बदलाव के बाद दोबारा नापिए।

lab स्कोर लोगों से गलत चीज़ optimize कराते हैं, तो मैं असली sessions के field डेटा से शुरू करता हूं, डिवाइस और connection के हिसाब से बंटा हुआ। फिर मैं हर मेट्रिक बारी बारी लेता हूं। LCP लगभग हमेशा hero image या render रोकता font होता है, तो मैं image preload करता हूं, सही आकार में AVIF या WebP देता हूं, और font host पर preconnect के साथ font-display swap इस्तेमाल करता हूं। CLS आमतौर पर width और height के बिना लगी images या fold के ऊपर खुद को ठूंसता cookie banner होता है, और पता चलने के बाद दोनों सस्ते में ठीक हो जाते हैं। INP मुश्किल वाला है, क्योंकि उसका मतलब है कि जब कोई tap करता है तब main thread व्यस्त है। वहां मैं लंबे tasks देखता हूं, analytics और chat widgets को interaction के बाद तक टालता हूं, और वह JavaScript काटता हूं जिसकी वहां ज़रूरत ही नहीं। एक साइट पर सबसे बड़ी अकेली जीत तीन मार्केटिंग tags को पहले interaction के बाद load करने पर ले जाना थी, जिससे मोबाइल पर LCP करीब 4.1 सेकंड से 1.9 पर आ गया। फिर मैं CI में bundle size का बजट जोड़ देता हूं ताकि दो sprint बाद यह चुपचाप दोबारा न बिगड़े।