Frontend Performance45-60 min
Third-Party Script Optimization
Inventory every third-party script, remove unused vendors, defer non-critical scripts, and measure main-thread cost.
GTMPartytownChrome DevToolsReact
Prerequisites
- A list of analytics, chat, marketing, and payment scripts.
- Access to tag manager configuration if used.
- Performance recording before changes.
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
# DevTools > Performance > record reload.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
- List every external script and who owns it.
- Remove vendors that are not used by product, marketing, or support.
- Delay chat widgets and surveys until after primary content is interactive.
- Load analytics only after consent if your product requires consent.
- Measure main-thread blocking time before and after cleanup.
Implementation snippet
function loadAnalyticsAfterConsent() {
if (!window.localStorage.getItem("analytics-consent")) return;
return loadExternalScript("https://analytics.example.com/client.js");
}4
Handle edge cases
Checklist
- No vendor loads twice through both code and tag manager.
- Third-party failures do not break the app.
- Scripts respect privacy and consent requirements.
- Critical conversion flows still work after deferring scripts.
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.