In this article

  1. What is Lazy Loading?
  2. How Framer Handles Lazy Loading
  3. The Limitation Most Designers Miss
  4. Lazy Loading + Compression = Speed
  5. Above-the-Fold Strategy
  6. CMS and Dynamic Content

Lazy loading is one of the most effective web performance techniques — it delays loading images until they're about to enter the viewport. But in Framer, it's not quite as straightforward as adding a loading="lazy" attribute. Here's what every Framer designer needs to know.

What is Lazy Loading?

Lazy loading defers the download of offscreen images. Instead of downloading all 20 images when the page loads, the browser only downloads the 3-4 visible ones. The rest load as the user scrolls down.

Benefits:

  • Faster initial load — fewer bytes to download before the page is usable
  • Lower bandwidth — users who don't scroll don't download offscreen images
  • Better Core Web Vitals — reduces resource contention for above-the-fold content

How Framer Handles Lazy Loading

Framer automatically applies lazy loading to images that are below the fold. This is built into the framework and works without any configuration. However, there are nuances:

  • Automatic detection — Framer determines which images are above/below fold based on component position
  • Responsive images — Framer generates multiple sizes and uses srcset for responsive delivery
  • No manual control — you can't override lazy loading behavior per-image in the Framer editor

The Limitation Most Designers Miss

Here's the critical insight: lazy loading doesn't reduce file sizes. It only delays the download. A 5MB image is still a 5MB image — it just loads 2 seconds later.

This means:

  • Your above-the-fold images are never lazy loaded — they always download immediately
  • Scrolling users still wait for heavy images to download
  • Total bandwidth consumption is the same for users who scroll the full page
  • Mobile users on slow connections still experience jank when lazy-loaded images are large
Key insight: Lazy loading is a delivery optimization. Compression is a file size optimization. You need both.

Lazy Loading + Compression = Speed

The optimal strategy combines both techniques:

TechniqueWhat it DoesImpact on LCPImpact on Full Page
Lazy loading onlyDelays offscreen imagesModerateLow
Compression onlyReduces all file sizesHighHigh
Both combinedSmaller files + delayed loadingMaximumMaximum

Framer handles the lazy loading automatically. Your job is to handle the compression. Use Skwiz to convert all images to WebP at quality 80 and resize to appropriate dimensions.

Above-the-Fold Strategy

Since above-the-fold images always load immediately (no lazy loading), they need the most attention:

  1. Identify your LCP element — usually the hero image or primary visual
  2. Compress aggressively — target under 150KB for the LCP image
  3. Minimize the number of above-fold images — fewer images = less contention for bandwidth
  4. Prioritize WebP format — smallest possible file size at acceptable quality

CMS and Dynamic Content

CMS collection pages present a unique challenge. The listing page might show 20-50 thumbnails, many of which are below the fold and benefit from lazy loading. But even with lazy loading, uncompressed thumbnails create problems:

  • Scrolling becomes janky as heavy images load in bursts
  • Mobile data usage is unnecessarily high
  • The browser's image decode thread gets overwhelmed

Use Skwiz's Scan CMS feature to batch-compress all collection images. With proper compression, lazy-loaded images appear instantly instead of fading in slowly.

The takeaway: Lazy loading is automatic in Framer and helps with performance. But it's not a substitute for compression. Optimize your source images with Skwiz and let Framer handle the delivery.