Images, Fonts, and Third-Party Scripts: The Big Three Bottlenecks

After auditing many sites, the same bottlenecks show up: images, fonts, and third-party scripts. Fixing them in that order usually gives the biggest gain.

Images: size, format, and priority

Large, unoptimized images dominate LCP and bandwidth. Resize to the display size (or a small set of responsive sizes) and serve modern formats (WebP, AVIF) where supported. Use lazy loading for below-the-fold images; use priority (or preload) for the LCP image so it doesn’t wait for parser or other resources. Set width and height (or aspect-ratio) to avoid CLS. Prefer a single pipeline: CMS or build step that outputs optimized assets and consistent markup (e.g. next/image or a similar component) so every image follows the same rules.

<Image
  src={hero}
  alt="Hero"
  width={1200}
  height={630}
  priority
  sizes="100vw"
/>

Fonts: avoid blocking and FOUT

Custom fonts often block first paint or cause a visible flash when they load. Subset fonts to the glyphs you use. Self-host and use font-display: swap (or optional) so text appears immediately with a fallback and swaps when the font is ready. Preload the font file for the critical path (e.g. the one used in the hero). In Next.js, next/font handles subsetting and loading; use it so you don’t block on external font URLs. Limit the number of weights and families; each extra font is another request and more layout work.

Third-party scripts: defer and limit

Analytics, chat, ads, and tags add JS and network work. Load them after the page is interactive (e.g. afterInteractive or lazyOnload in Next.js Script). Prefer one tag manager over many separate scripts. If a script is only needed on certain pages or after user action, load it then. Measure impact: if a script shows up in the long tasks or in LCP breakdown, defer it further or replace it with a lighter option. You can’t always remove third parties, but you can control when they run.

Order of attack

Tackle images first (LCP and bandwidth), then fonts (blocking and CLS), then third-party scripts (main-thread and network). Re-run Lighthouse after each step so you see the gain and don’t over-optimize one area while ignoring the others. The big three stay the main levers for most sites.

Summary

Optimize images (size, format, priority, dimensions); optimize fonts (subset, self-host, font-display, preload); defer and limit third-party scripts. Fix in that order and re-measure. That’s how you address the three biggest bottlenecks in a systematic way.