Analytics दिखाते हैं कि आपके landing पेज का LCP मोबाइल पर पांच सेकंड है पर आपके laptop पर वह ठीक लगता है। आप इस पर कैसे बढ़ेंगे?

अपनी मशीन से नहीं, field डेटा से शुरू करें: पता करें कि LCP element कौन सा है और समय को time to first byte, resource load delay, resource load time तथा render delay में बांटें। इससे पता चलता है कि दिक्कत सर्वर के जवाब की है, image देर से मिलने की, खुद image के आकार की, या main thread की। फिर स्थानीय रूप से मध्यम श्रेणी का डिवाइस और धीमा network throttle करें ताकि कुछ बदलने से पहले आप उसे दोहरा सकें।

पहले मैं अपने laptop पर भरोसा करना बंद करता हूं। मैं field डेटा निकालता हूं यह देखने कि असल में LCP element कौन सा है और किन पेजों पर, फिर CPU throttling और धीमे connection के साथ स्थानीय रूप से उसे दोहराता हूं। फिर मैं नंबर तोड़ता हूं, क्योंकि हर हिस्से का इलाज अलग है। अगर time to first byte भारी पड़ रहा है तो यह सर्वर या caching की समस्या है और image पर कितनी भी मेहनत बेकार है। अगर load delay लंबा है तो image देर से मिल रही है, आमतौर पर इसलिए कि वह CSS में सेट है या JavaScript से डाली गई है, तो मैं उसे fetchpriority high के साथ HTML में रखता हूं और preload करता हूं। अगर load time भारी है तो मामला फाइल का है, यानी आधुनिक format, सही dimensions और ढंग का srcset। अगर render delay है तो main thread scripts पढ़ने में उलझा है। मुझे ठीक यही एक बार मिला जहां hero पर loading lazy लगा था, जिसने उसी एक image को टाल दिया जिसे टलना नहीं चाहिए। उसे हटाकर fetchpriority high जोड़ने से throttled मोबाइल पर LCP करीब 4.8 सेकंड से 2.1 पर आ गया।