Frontend Performance20-35 min
Async vs Defer Scripts
Prevent render-blocking scripts by using deferred execution for app code and async loading for independent third-party scripts.
HTMLJavaScriptBrowser Loading
Prerequisites
- A page that includes script tags directly.
- Knowledge of which scripts depend on DOM order.
- A before/after load measurement.
1
Plan the implementation
Start by choosing the exact page, route, API, or deployment surface you want to improve. A narrow target makes the implementation measurable and easier to verify.
- Write down the current behavior and the user-facing problem it creates.
- Pick one measurable success signal such as bundle size, latency, error rate, security coverage, or UI responsiveness.
- Identify the files, routes, providers, and environment variables involved.
- Create a rollback note before changing production-sensitive configuration.
2
Set up the required tools
Install or configure only the tools needed for this implementation. Keep config close to the feature so future developers can find the moving parts quickly.
Implementation snippet
npm run preview
# In DevTools Performance, record page load.Checklist
- Dependencies are added to the correct workspace package.
- Environment variables are documented in `.env.example` when needed.
- Local development still starts without production-only secrets.
- The change is small enough to review in one pull request.
3
Implement the core pattern
- Mark application scripts as `defer` when they need DOM readiness and execution order.
- Use `async` only for independent scripts that do not depend on other scripts.
- Prefer `type="module"` for modern app entry files because modules defer by default.
- Move non-critical scripts near the end of the page or lazy-load them.
- Verify that script execution order still matches feature expectations.
Implementation snippet
<script defer src="/app.js"></script>
<script async src="https://analytics.example.com/script.js"></script>
<script type="module" src="/src/main.tsx"></script>4
Handle edge cases
Checklist
- No synchronous third-party script blocks first render.
- Dependent scripts do not use `async` in a way that creates race conditions.
- Analytics failures do not break application startup.
- The app still hydrates or mounts correctly in production build.
5
Verify before production
- Run the app locally and test the normal success path.
- Test one failure path, one empty state, and one slow-network or retry path.
- Run the project build and any related unit or integration tests.
- Check browser console, server logs, and network responses for hidden warnings.
- Document the final behavior, commands used, and any follow-up work.