In this article

  1. What is PageSpeed Insights?
  2. Understanding Your Score
  3. The Six Core Metrics
  4. What Framer Controls vs What You Control
  5. Image-Related Opportunities
  6. Step-by-Step: Fixing Your Score

You've published your Framer site and excitedly run it through Google PageSpeed Insights. The score comes back: 43. Your heart sinks. But before you panic, let's understand what this number actually means and what you can realistically do about it.

What is PageSpeed Insights?

PageSpeed Insights (PSI) is Google's tool for measuring web page performance. It gives you a score from 0-100 and detailed recommendations. The score is based on Lighthouse, Google's open-source auditing tool.

0-49Poor
50-89Needs Work
90-100Good

Understanding Your Score

The score is a weighted average of six performance metrics. Not all metrics contribute equally:

MetricWeightWhat You Can Control
Total Blocking Time (TBT)30%Limited (Framer's runtime)
Largest Contentful Paint (LCP)25%Yes - image optimization
Cumulative Layout Shift (CLS)25%Partially (image dimensions)
First Contentful Paint (FCP)10%Partially (image sizes)
Speed Index10%Partially (visible images)
Interaction to Next Paint0%Limited
Key insight: LCP alone accounts for 25% of your score, and it's the metric most directly impacted by image size. Optimizing images is the single most impactful action you can take.

What Framer Controls vs What You Control

Some performance aspects are determined by Framer's platform:

Framer controls:

  • JavaScript bundle size and execution
  • HTML rendering strategy
  • CDN and caching configuration
  • Font loading strategy

You control:

  • Image file sizes (the biggest factor by far)
  • Image formats (WebP vs JPEG vs PNG)
  • Image dimensions (not serving 4000px images for 400px slots)
  • Number of images loaded above the fold
  • Use of video vs animated images

Image-Related Opportunities

PageSpeed Insights flags several image-specific issues. Here's how to fix each one:

"Serve images in next-gen formats"

This means you're using JPEG or PNG where WebP would be smaller. Fix: Open Skwiz, select all flagged images, set format to WebP, and replace.

"Properly size images"

You're serving images much larger than their display size. Fix: In Skwiz, set maximum dimensions to match your layout (typically 1920px max width for full-width, 1200px for content).

"Efficiently encode images"

Your JPEG/WebP quality is too high (typically 95-100). Fix: In Skwiz, set quality to 80-85 for WebP or 82-88 for JPEG. Preview to verify quality is acceptable.

"Avoid enormous network payloads"

Your total page weight exceeds Google's threshold (usually 1.6MB). Fix: Optimize all images on the page - this is usually the quickest way to cut total payload.

Step-by-Step: Improving Your Score

  1. Run PSI on your worst-performing page (usually the homepage)
  2. Identify the LCP element in the diagnostics section
  3. Open Skwiz and scan that page
  4. Optimize the LCP image first (convert to WebP, quality 80-85)
  5. Optimize remaining images on the page
  6. Publish and re-test
  7. Repeat for other key pages

Most Framer sites see a 15-35 point improvement from image optimization alone. Combined with Framer's built-in optimizations, it's realistic to reach scores in the 80-95 range.

Remember: A "perfect" 100 score is not necessary. Scores above 90 are considered "good" by Google. Focus on getting into the green zone, not chasing the last few points.