133
critical rendering path
What the browser must have before it can paint. Everything else waits.
What is critical rendering path?
The critical path is HTML, the CSS that styles the first screen, and the JS that blocks parsing. Fonts, images, and below-the-fold scripts are not on it unless you put them there. Render-blocking CSS in the head is a choice.
Why does critical rendering path matter when vibe coding?
Models add fonts, icon kits, and a client framework to a static page. First paint waits on all of it. Name what is allowed to block.
How do you do critical rendering path?
Inline or prioritize CSS for the first screen. Defer the rest. Give images width and height. Do not put a synchronous script in the head that the first paint does not need.
How do you ask a model for critical rendering path?
Protect the critical path for (page). First paint must not wait on (analytics, below-fold widgets, extra fonts). Set image dimensions. Defer nonessential script.
What goes wrong with critical rendering path?
Preloading everything “to be safe.” Preload is a priority bump. Ten preloads means nothing is a priority.