Lazy Loading Strategy for Performance Budgets

Lazy Loading and Performance Budgets

Lazy loading is the primary technique for meeting performance budgets on content-rich pages. By deferring below-the-fold resources, you reduce the initial load budget while still delivering a complete page experience.

Two-Tier Budget Approach

Tier	What It Includes	Budget
Initial load	Above-fold content only	300 KB
Total page	All resources after scrolling	1200 KB

The initial load budget is what the Performance Budget Tracker should primarily track. The total page budget ensures the page does not become unreasonably heavy even after all lazy content loads.

What to Lazy Load

Resource Type	Lazy Load?	Technique
Below-fold images	Yes	loading="lazy"
Video embeds	Yes	Facade pattern
Comments section	Yes	Intersection Observer
Social widgets	Yes	Load on interaction
Below-fold JS	Yes	Dynamic import
Chat widgets	Yes	Load after 5s or on click
Analytics	Partial	Load after first interaction

What NOT to Lazy Load

Resource Type	Why Not
LCP image	Delays the most important metric
Critical CSS	Blocks first render
Above-fold content	Visible immediately
Navigation JS	Users need to navigate
Core fonts	Causes FOUT/layout shift

Implementation Patterns

Native lazy loading:

<img src="photo.webp" loading="lazy" width="800" height="600" alt="...">

Intersection Observer for components:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadComponent();
      observer.unobserve(entry.target);
    }
  });
});

Facade pattern for embeds: Show a static thumbnail that looks like the embed. Load the actual embed only when the user clicks. YouTube facades save 500+ KB per embed.

Tracking in the Budget Tracker

Add only initial-load resources to the tracker. Document lazy-loaded resources separately in the export JSON notes. This keeps the budget focused on what affects initial page load metrics.