Reduce the JavaScript that blocks the page while it loads

Why it matters

Total Blocking Time is a lab number that measures how long scripts keep the page from responding while it loads, and it is slightly above the threshold. Deferring scripts you do not need at once usually fixes it.

Staged change. Do this in stages and check each one before the next, so a mistake does not break your site or your mail.

The fix

1. Find what blocks the main thread while the page loads. Run Lighthouse (in Chrome DevTools or PageSpeed Insights) and open the audits "Reduce JavaScript execution time", "Minimize main-thread work" and "Reduce unused JavaScript". Record a load in the DevTools Performance panel with the CPU throttled; long tasks are marked in red, and the bottom-up view shows which script owns them.
2. Remove or delay third-party scripts (tag managers, chat widgets, A/B testing, heatmaps, social embeds) until the visitor needs them, and load your own scripts that are not needed for the first view with defer or as modules.
3. Ship less JavaScript. Drop libraries you do not use, split the bundle so each page loads only its own code, and load heavy widgets on demand, for example when the visitor clicks, with a dynamic import.
4. Break long tasks into smaller pieces that yield to the browser between them, so the page can respond while it loads.
5. Run Lighthouse again a few times, since lab numbers vary from run to run. Total Blocking Time is a lab number; real interaction speed shows up as INP once Google has enough field data for the page.

<script src="/js/app.js" defer></script>
<script type="module">
  // load a heavy widget only when the visitor asks for it
  document.querySelector('#chat-button').addEventListener('click', async () => {
    const { openChat } = await import('/js/chat.js');
    openChat();
  }, { once: true });
</script>

Read the documentation ↗(opens in a new tab)

Related

• Reported by the Core Web Vitals check
• Make the largest element on the page load faster
• Make the largest element on the page load faster
• Stop the page layout from jumping while it loads
• Stop the page layout from jumping while it loads
• Make the page respond faster to clicks and taps
• Make the page respond faster to clicks and taps
• Reduce the JavaScript that blocks the page while it loads
• Collect real-user speed data for your site