एक पेज को कुछ काम की चीज़ दिखाने में चार सेकंड लगते हैं। HTML आने और पहले paint के बीच क्या होता है और उसे क्या रोकता है, बताइए।

HTML के stream होते ही parser DOM बनाता जाता है, लेकिन stylesheet rendering रोक देती है क्योंकि ब्राउज़र बिना style वाले content के साथ paint नहीं करेगा, और defer या async के बिना कोई classic script parser को पूरी तरह रोक देती है। CSS और रोकने वाली scripts निपटने पर ब्राउज़र render tree बनाता है, layout करता है, paint और composite करता है। आम अपराधी हैं render रोकने वाली CSS, head में synchronous scripts और देर से पता चलने वाले fonts या hero images।

HTML के stream होते ही parser DOM को टुकड़ों में बनाता जाता है, और साथ ही preload scanner आगे देखकर images, scripts और stylesheets ढूंढता है ताकि उन्हें जल्दी लाना शुरू कर सके। CSS render रोकती है, क्योंकि ब्राउज़र ऐसा content paint नहीं करेगा जिसे एक frame बाद दोबारा style करना पड़ सकता है, तो DOM तैयार होने के बावजूद धीमी stylesheet पहला paint रोके रखती है। बिना defer या async वाला classic script tag इससे भी बुरा है, क्योंकि वह download और execute होते समय parsing पूरी तरह रोक देता है। styles आ जाने पर ब्राउज़र render tree बनाता है, layout करता है, paint और composite करता है। जब मुझे चार सेकंड का पहला paint मिलता है तो मेरी पहली तीन जांचें हैं: head में कोई script रोक तो नहीं रही, CSS एक विशाल फाइल तो नहीं जिसे critical inline हिस्से में बांटा जा सके, और LCP वाली image HTML में मिलती है या JavaScript से डाली जाती है। पिछली साइट में hero image के लिए preload जोड़ने और एक tag manager script को defer पर ले जाने से 4G पर LCP से करीब 1.6 सेकंड कम हो गए।