Skip to content
Back to Blog
Performance
Updated

Set a performance budget for third-party scripts

Give analytics, chat, video, and other external scripts an owner and a measurable budget before they enter the production website.

Branded abstract 5e Labs cover image for Set a performance budget for third-party scripts

Set a third-party script budget in terms of transferred bytes, execution cost, and loading conditions, then assign someone to enforce it. Counting tags alone is not enough: a small loader can fetch substantial code later. A budget should cover the behavior it introduces, not just the first file in the markup.

This is a purchasing decision as well as an engineering task. Every new chat widget or tracking tool asks visitors to spend time and device resources before its business value is established.

Inventory the job before measuring the cost

For each external tool, record its owner, purpose, affected templates, trigger, and removal method. Ask which decision its data supports or which visitor task it enables. “Marketing requested it” is an origin story, not a continuing reason to load it everywhere.

Separate tools required for a page’s core task from optional additions. A payment-related dependency on checkout and a video widget on an article should not automatically share a loading policy.

Review tools installed through the tag manager too. A clean application bundle can still sit underneath an expensive collection of injected scripts.

Budget the journey you actually test

Choose repeatable conditions: device profile, network, browser, cache state, and consent state where relevant. Define the observation window. Test initial navigation separately from opening chat or playing media.

The web.dev guide to third-party JavaScript describes testing with external domains blocked to isolate their effect. Use that comparison as a diagnostic, then confirm the real journey still works with the intended loading policy.

Use both transfer and execution limits. Bytes alone miss code that arrives cheaply but occupies the main thread. Keep raw traces or reports so an exception can be reviewed instead of debated from screenshots of a score.

A hypothetical budget decision

Suppose a hypothetical service site sets a combined external-script budget of 200 KB compressed transfer and 120 milliseconds of attributed main-thread work during the first five seconds of a controlled mobile navigation. These are illustrative project limits, not industry standards or 5e Labs measurements.

In the example, analytics uses 60 KB and 30 milliseconds. A proposed chat tool adds 110 KB and 160 milliseconds. The combined transfer fits, but execution exceeds the budget. Approving it on file size alone would miss the failure.

The team could load chat after an explicit request, choose a lighter option, or document why an exception is worth the cost. Retest the interaction that triggers chat; deferring the cost does not eliminate it. Also verify that a failed chat provider does not block access to the ordinary inquiry form.

Make exceptions expire

Before approving any script, confirm:

  • A named owner can explain its purpose.
  • Its template coverage and loading trigger are intentional.
  • Measurements include the dependencies it fetches.
  • The page remains useful if the provider fails.
  • A review date and removal path exist.

Adding async is not a complete remedy. MDN documents its execution behavior: asynchronous fetching does not make execution free or preserve dependency order.

Start by disabling one optional tool in a controlled test and comparing the same journey. Use that evidence to set the initial budget with 5e Labs web development, rather than choosing a limit that merely accommodates every tag already installed.

Have a project in mind?

Get in Touch