critical rendering path என்பது HTML, CSS, மற்றும் JS-ஐ திரையில் pixel-களாக மாற்ற browser இயக்கும் படிகளின் வரிசை. முதல் paint-க்கு முன் முடிக்க வேண்டிய எதுவும் render-blocking ஆகும்.
critical rendering path என்பது HTML, CSS, மற்றும் JS-ஐ திரையில் pixel-களாக மாற்ற browser இயக்கும் படிகளின் வரிசை. முதல் paint-க்கு முன் முடிக்க வேண்டிய எதுவும் render-blocking ஆகும்.
<script> download ஆகி இயங்கும்போது HTML parsing-ஐ நிறுத்துகிறது.<!-- 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 போன்ற சுயாதீன script-களுக்கு async-ஐயும் பயன்படுத்துங்கள். critical CSS-ஐ inline செய்து மீதியை block செய்யாமல் load செய்யுங்கள்.
இதுவே ஏறக்குறைய ஒவ்வொரு load-time fix-க்குப் பின்னாலும் உள்ள mental model: render-blocking CSS/JS என்பது மெதுவான first paint மற்றும் மோசமான LCP-க்கு முதன்மைக் காரணம். defer/async ஏன் இருக்கின்றன என்பதை அறிவது நீங்கள் syntax-ஐ மட்டுமல்ல, browser-ஐ புரிந்துகொள்கிறீர்கள் என்பதைக் காட்டுகிறது.
விரிவான பதில்களுடன் கூடிய IT நேர்காணல் கேள்விகளின் நூலகம் — Junior முதல் Senior வரை.
நன்கொடை