Ep 2: Slot reserve करें: CLS ठीक करें

आपका ad देर से load होता है, और पूरा article नीचे धकेल देता है।

इस झटके का score Cumulative Layout Shift, यानी CLS, कहलाता है। ज़ीरो पॉइंट एक या उससे कम अच्छा माना जाता है।

recipes.example पर phone की screen आठ सौ pixels ऊँची है, और recipe ऊपर के चार सौ pixels में है। तीन सौ बाय ढाई सौ का एक ad उसके ऊपर load होता है, और text को ढाई सौ pixels नीचे धकेल देता है। पहले और बाद को मिलाकर, text आठ सौ में से साढ़े छह सौ pixels घेरता है, यानी impact लगभग ज़ीरो पॉइंट आठ। वो आठ सौ में से ढाई सौ खिसका, यानी distance लगभग ज़ीरो पॉइंट तीन। दोनों का गुणा कीजिए, तो एक ad का score ज़ीरो पॉइंट दो पाँच से थोड़ा ऊपर आता है। ये poor है। Fix ये है, ad tag चलने से पहले, CSS में ढाई सौ pixels की height reserve कीजिए। Multi-size slots में, वो size reserve कीजिए जो सबसे ज़्यादा fill होता है।

जाँचिए कि आपके page के हर ad container की CSS में minimum height दी गई है।

अगला episode, ads की lazy loading, बिना impressions खोए।