Middle+

What can block the first rendering in the browser after receiving HTML? What can be done about synchronous loading of JS and CSS?

sobes.tech AI

Answer from AI

The first rendering in the browser can be blocked due to the synchronous loading and execution of JavaScript and CSS.

What blocks rendering:

CSS: the browser must load and process all CSS files before displaying the page to avoid "flickering" without styles (FOUC).
JavaScript: scripts connected without async or defer attributes block HTML parsing, as the browser must load and execute them immediately.

What can be done:

For CSS:
- Minimize and combine files.
- Use media attributes for deferred loading of styles not critical for the first screen.
- Inline critical CSS in <head> to speed up the first render.
For JavaScript:
- Add async or defer attributes to <script> tags so that loading and execution do not block HTML parsing.
- Move scripts to the end of <body>.
- Lazy load scripts that are not needed immediately.

Example of using defer:

<script src="script.js" defer></script>

This allows the browser to continue parsing HTML, and the script will execute after the DOM is built.