How to Cut Your Framer Site's Load Time in Half

If your Framer site takes more than 2-3 seconds to load, there's a good chance images are the bottleneck. Most designers upload full-resolution exports straight from Figma or camera rolls without thinking about file size. The result? A beautiful site that nobody waits around to see.

In this guide, we'll walk through exactly how to identify the heaviest images in your Framer project and compress them - without sacrificing visual quality.

Step 1: Measure Your Baseline

Before optimizing anything, you need to know where you stand. Open your published Framer site and run a Google PageSpeed Insights test. Pay attention to two metrics:

• Largest Contentful Paint (LCP) - this is the time it takes for the biggest visible element (usually an image) to render. Google considers anything over 2.5s as "needs improvement."
• Total Page Weight - scroll down to the diagnostics section and look for "Avoid enormous network payloads." This shows you exactly which files are the heaviest.

Step 2: Scan Your Project with Skwiz

Open Skwiz in your Framer project. You have several scanning options:

• Current Page - Scans only the page you're on. Great for targeted optimization.
• Entire Project - Finds every image across all pages. Best for a full audit.
• Scan CMS - If you have CMS collections (blog posts, portfolio items, product pages), this finds all images within them.

For your first pass, use Entire Project to get the full picture. Skwiz will load all images and show you each one's current size.

Step 3: Identify the Worst Offenders

Once your images are loaded, sort by file size. You'll typically find that:

• Hero images and full-width backgrounds are the biggest culprits (often 2-5MB each)
• PNG screenshots or illustrations with transparency are surprisingly large
• CMS images tend to be inconsistently sized - some optimized, many not

Focus on images over 500KB first. These are your quick wins.

Step 4: Choose the Right Format

This is where most people go wrong. They compress a JPEG as a JPEG and call it a day. But format conversion is where the biggest savings happen:

WebP is the sweet spot for almost everything. It's supported by all modern browsers (97%+ global support) and delivers dramatically smaller files than JPEG or PNG at equivalent visual quality.

In Skwiz, select all your images and set the output format to WebP. Use quality 80-85 for photos - this is the golden range where file size drops significantly but visual differences are nearly impossible to spot.

Step 5: Preview Before Committing

Skwiz shows you a real-time preview of every compressed image before it replaces anything. Use the comparison slider to check:

• Are text elements still sharp?
• Are gradients smooth (no banding)?
• Are fine details preserved?

If something looks off, adjust the quality slider for that specific image. You have full per-image control.

Step 6: Batch Replace

Once you're happy with the previews, hit the batch replace button. Skwiz will replace each image in your Framer project with the optimized version. This happens through Framer's asset API - the images are updated in-place, so your layout stays exactly the same.

For CMS images, the process is identical. Skwiz replaces images within CMS items directly.

Step 7: Measure the Results

Publish your updated site and run PageSpeed Insights again. Compare your before/after numbers.

In our testing across dozens of Framer sites, the typical results are:

Pro Tips

• Duplicate your project first - Before any large-scale optimization, duplicate your Framer project as a backup.
• Don't over-compress - Quality 75-85 for WebP is the sweet spot. Going below 70 starts to show artifacts on most images.
• Re-optimize after content updates - Every time you add new CMS items or replace images, run Skwiz again. New content won't be optimized automatically.
• Check mobile - Test your site on actual phones after optimization. Some images that look fine on desktop may show compression artifacts on high-DPI mobile screens.