Which approach helps prevent render-blocking in CSS loading?

Which approach helps prevent render-blocking in CSS loading?

• A. Using the <link> element instead of CSS @import to load stylesheets.
• B. Inlining all CSS in the HTML via style tags.
• C. Using CSS @import with media queries to delay loading.
• D. Using @font-face for all fonts.

Answer: (B)

Render-blocking happens when the browser has to wait for CSS to load before it can paint the page. Inlining all CSS inside the HTML puts the styles directly in the document, so the browser doesn’t need to fetch a separate file or wait for a network request to render the initial view. The styles are available immediately as the HTML is parsed, enabling the first paint to proceed without delay. This approach eliminates the extra HTTP request and makes the initial render faster. In practice, many projects inline only the critical CSS for the viewport to balance performance with maintainability, while loading the rest of the styles asynchronously. The other options still rely on external CSS or introduce delays and aren’t as effective at removing the render-blocking bottleneck.

Render-blocking happens when the browser has to wait for CSS to load before it can paint the page. Inlining all CSS inside the HTML puts the styles directly in the document, so the browser doesn’t need to fetch a separate file or wait for a network request to render the initial view. The styles are available immediately as the HTML is parsed, enabling the first paint to proceed without delay.

This approach eliminates the extra HTTP request and makes the initial render faster. In practice, many projects inline only the critical CSS for the viewport to balance performance with maintainability, while loading the rest of the styles asynchronously. The other options still rely on external CSS or introduce delays and aren’t as effective at removing the render-blocking bottleneck.