๐ช๐ต๐ฒ๐ป ๐๐ผ ๐๐น๐ผ๐ฐ๐ธ ๐ฅ๐ฒ๐ป๐ฑ๐ฒ๐ฟ๐ถ๐ป๐ด ๐ช๐ถ๐๐ต ๐ฆ๐ฐ๐ฟ๐ถ๐ฝ๐๐
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