𝗪𝗵𝗲𝗻 𝘁𝗼 𝗕𝗹𝗼𝗰𝗸 𝗥𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 𝗪𝗶𝘁𝗵 𝗦𝗰𝗿𝗶𝗽𝘁𝘀
Web developers love non-blocking scripts. You use async or defer to speed up your page. This is a good habit. But some cases require blocking rendering.
Blocking means the browser stops painting. It waits for the script to finish. This slows down the first view. But it prevents bigger problems.
Use blocking scripts for these needs:
- Security. Validate tokens before the page shows sensitive data.
- Visual stability. Calculate element sizes first. This stops content from jumping.
- Critical functions. Payment tools must run before user input.
- Browser support. Load polyfills before other code.
- Third party tools. Some scripts need a specific DOM state to avoid data loss.
Blocking delays First Contentful Paint. This is a high price. Only pay this price if functional integrity is more important than speed.
Follow this simple rule:
- Block if timing affects security or function.
- Defer if timing is flexible.
Do not follow rules blindly. Use the right tool for your specific goal.
Source: https://dev.to/pavkode/blocking-rendering-with-scripts-when-and-why-to-avoid-asyncdefer-in-the-pp