critical rendering path ان steps کا سلسلہ ہے جنہیں browser HTML، CSS، اور JS کو screen پر pixels میں بدلنے کے لیے چلاتا ہے۔ جو کچھ بھی پہلے paint سے پہلے مکمل ہونا لازمی ہو وہ render-blocking ہے۔
critical rendering path ان steps کا سلسلہ ہے جنہیں browser HTML، CSS، اور JS کو screen پر pixels میں بدلنے کے لیے چلاتا ہے۔ جو کچھ بھی پہلے paint سے پہلے مکمل ہونا لازمی ہو وہ render-blocking ہے۔
<script> HTML parsing روک دیتا ہے جب تک وہ download اور چل نہ جائے۔<!-- Blocks parsing: browser waits here before continuing -->
<script src="/app.js"></script>
<!-- defer: download in parallel, run after HTML is parsed, in order -->
<script src="/app.js" defer></script>
<!-- async: download in parallel, run as soon as ready (order not guaranteed) -->
<script src="/analytics.js" async></script>
DOM کو چھونے والے app code کے لیے defer استعمال کریں، اور analytics جیسے آزاد scripts کے لیے async۔ critical CSS کو inline کریں اور باقی کو بغیر block کیے load کریں۔
یہ تقریباً ہر load-time fix کے پیچھے کا ذہنی model ہے: render-blocking CSS/JS سست first paint اور خراب LCP کی سب سے بڑی وجہ ہے۔ یہ جاننا کہ defer/async کیوں موجود ہیں، ظاہر کرتا ہے کہ آپ محض syntax نہیں بلکہ browser کو سمجھتے ہیں۔
تفصیلی جوابات کے ساتھ IT انٹرویو سوالات کی ایک لائبریری — جونیئر سے سینئر تک۔
عطیہ دیں