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 ਅਤੇ run ਨਹੀਂ ਹੋ ਜਾਂਦਾ।<!-- 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 ਦੇ ਪਿੱਛੇ ਵਾਲਾ mental model ਹੈ: render-blocking CSS/JS ਹੌਲੀ ਪਹਿਲੇ paint ਅਤੇ ਮਾੜੇ LCP ਦਾ ਸਭ ਤੋਂ ਵੱਡਾ ਕਾਰਨ ਹੈ। defer/async ਕਿਉਂ ਮੌਜੂਦ ਹਨ ਇਹ ਜਾਣਨਾ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਤੁਸੀਂ browser ਨੂੰ ਸਮਝਦੇ ਹੋ, ਨਾ ਕਿ ਸਿਰਫ਼ syntax ਨੂੰ।
ਵਿਸਤ੍ਰਿਤ ਜਵਾਬਾਂ ਨਾਲ IT ਇੰਟਰਵਿਊ ਸਵਾਲਾਂ ਦੀ ਇੱਕ ਲਾਇਬ੍ਰੇਰੀ — ਜੂਨੀਅਰ ਤੋਂ ਸੀਨੀਅਰ ਤੱਕ।
ਦਾਨ ਕਰੋ