Founder of Goodspeed
A slow website can frustrate visitors and hurt your search rankings. For Framer site owners, understanding performance metrics is crucial to ensuring a seamless user experience. That’s where Google PageSpeed Insights for Framer sites comes in—offering a clear breakdown of speed scores, Core Web Vitals, and actionable recommendations.
However, standard PSI advice doesn’t always account for Framer’s unique design elements, such as animations, layered interactions, and high-resolution media.
This guide walks you through running tests, interpreting results, and implementing fixes tailored to Framer website speed optimisation. Whether you’re a marketer, a startup founder, or a non-technical website owner, you’ll gain the insights needed to keep your Framer website fast and optimised for performance.
1. Setting Up for a PSI Test on Your Framer Site
Before diving into performance improvements, you need accurate test results. Many site owners make the mistake of running PSI on preview links or unpublished pages, leading to misleading scores. Here’s how to correctly set up your Framer speed test for reliable results.
1.1 Publishing Your Framer Site
PSI analyses live URLs, so your Framer project must be fully published to get accurate results. If you only have a preview link, your test scores may fluctuate due to temporary hosting environments.
For best accuracy:
Publish your Framer site on a custom domain.
If still in development, use a Framer subdomain rather than a preview link.
Run tests from both desktop and mobile views, as mobile loading speeds tend to be slower.
If you’re still optimising your design, check out Optimising Your Framer Template for Speed and Performance for practical techniques.
1.2 Accessing Google PageSpeed Insights
To begin your test:
Go to PageSpeed Insights.
Enter your Framer site’s URL in the search bar.
Choose between desktop or mobile analysis—mobile results tend to highlight speed issues more prominently.
Most high-ranking websites load in 1.65 seconds or less, setting a benchmark for Google PSI for Framer websites. If your Framer page falls short, it’s a sign that optimisations are needed.
2. Interpreting PSI Results for Framer Sites
PSI provides a score between 0 and 100, but the real value lies in understanding Core Web Vitals. These key performance indicators measure how users actually experience your website.
2.1 The Performance Score & What It Means
Your Framer website performance score is an aggregate of multiple factors, including load time, interactivity, and visual stability. Here’s a general breakdown:
90-100 (Good): Your site is well-optimised.
50-89 (Needs Improvement): Some elements slow down performance.
0-49 (Poor): Critical speed issues need attention.
Framer sites often include high-resolution hero images and complex animations, which can lower PSI scores. However, with the right Framer PSI optimisation strategies, it’s possible to achieve an A+ Lighthouse rating, just as Formula Bot did when it improved load speeds by 75% after migration.
2.2 Core Web Vitals Breakdown
Largest Contentful Paint (LCP): Measures how long it takes for the largest element on the page (often a hero image) to load. Ideally, LCP should be under 2.5 seconds.
First Input Delay (FID): Evaluates how quickly your site responds to user interactions. If you’re using Framer’s interactive components, ensure they load without delays.
Cumulative Layout Shift (CLS): Tracks how much elements shift unexpectedly as your site loads. Poor CLS scores often come from unoptimised Framer animations or images without defined dimensions.
Only 12% of mobile sites currently pass all three Core Web Vitals thresholds, highlighting how performance optimisation is a competitive advantage.
2.3 Field Data vs. Lab Data
PSI reports two types of data:
Field Data: Real-world data collected from actual visitors.
Lab Data: Simulated tests run in a controlled environment.
If you’ve recently launched your Framer site, field data may not yet be available. In that case, rely on lab data to diagnose performance issues.
3. Key PSI Metrics & Recommendations Relevant to Framer
Google PageSpeed Insights provides a list of recommended improvements, but not all apply directly to Framer sites. Below are the most relevant PSI suggestions and how to implement them effectively within Framer.
3.1 Optimising Images
Images are often the biggest contributors to slow load times, especially for visually rich Framer sites. PSI frequently flags issues like “Properly size images” and “Serve images in next-gen formats.”
How to optimise images in Framer:
Use WebP format whenever possible—it reduces file size by up to 30% compared to PNG or JPG without compromising quality.
Compress images before uploading using tools like TinyPNG or Squoosh.
Limit the use of large hero images unless absolutely necessary.
Poor image handling can lead to slow Largest Contentful Paint (LCP) times, a key metric in Google PSI for Framer websites. To improve Framer performance, follow the best practices outlined in How to Optimise Images and Assets on Your Framer Website for Faster Loading.
3.2 Reducing Unused JavaScript or CSS
PSI may flag “Remove unused JavaScript” or “Eliminate render-blocking resources.” This is often caused by hidden sections or interactive components in Framer that still load assets even when not in view.
Framer-specific fixes:
Audit your design and remove unused interactions or hidden elements.
Defer non-critical scripts so they load after the main content.
Minify CSS and JavaScript to reduce unnecessary code.
A great example of this approach in action is the Financial Services Site case study, where performance and SEO improved significantly by reducing unused resources.
3.3 Minimising Render-Blocking Resources
Render-blocking elements delay how quickly a page becomes usable, leading to a poor First Input Delay (FID) score.
Solutions for Framer sites:
Limit the number of third-party scripts (e.g., embedded widgets, tracking tools).
Use Framer’s native caching and preloading features.
Avoid adding too many external fonts that increase initial load times.
Did You Know? A 1-second delay in page load time can reduce conversions by 7%, making performance optimisation a key factor in revenue growth.
4. Running Multiple Tests & Comparing Scores
Performance scores can fluctuate based on external factors, including server load, network conditions, and even time of day. To get a true performance benchmark, you must run multiple tests and track changes over time.
4.1 Why Variations Occur
If your PSI scores change between tests, don’t panic—it’s normal. Fluctuations occur due to:
Different testing conditions (e.g., mobile vs. desktop).
Server response times or temporary slowdowns.
Browser caching and preloaded resources.
For a more reliable Framer speed test, test at different times of day and average your results.
4.2 Tracking Progress Over Time
The best way to measure Framer website speed improvement is to track PSI scores before and after every major change.
How to monitor performance:
Use a simple spreadsheet to log scores over time.
Document what changes were made and how they affected speed.
Check both mobile and desktop performance separately.
5. Prioritising PSI Recommendations for Framer
Not all PSI recommendations carry equal weight. Some improvements deliver a higher impact, while others provide only marginal benefits.
5.1 Identify “High-Impact” Suggestions
Focus first on changes that directly affect Core Web Vitals and PSI scores.
High-priority fixes for Framer sites:
Optimise large hero images for faster LCP times.
Eliminate unnecessary animations or interactions.
Defer third-party scripts that block rendering.
Remove unused JS in Framer to cut down on excess load time.
The Nations case study demonstrates this strategy in action. By implementing PSI-recommended optimisations, the site achieved near-instant page loads and higher user engagement.
5.2 Implementing Quick Wins in Framer
If you need fast improvements, start with small but effective fixes.
Easy optimisations:
Swap uncompressed images for optimised versions.
Remove animations on mobile to enhance speed.
Use simpler sections instead of multiple layered elements.
For a deeper dive, check out The Ultimate Guide to Speed Optimisation for Framer Websites.
Conclusion
Google PageSpeed Insights is not a one-time tool—it should be used regularly to maintain consistent performance and high rankings. Speed bottlenecks can arise over time as you add new images, animations, and content to your Framer site.
To ensure your site remains fast and efficient, follow these ongoing Framer website speed optimisation strategies:
Schedule regular PSI tests—especially after major design updates.
Reassess image sizes to ensure they remain optimised.
Monitor Core Web Vitals to identify any emerging performance issues.
Use additional testing tools, such as GTmetrix and Lighthouse, for a broader view of your site’s speed.
If performance declines, audit your latest changes and prioritise fixing high-impact issues first.
Website performance is an ongoing process. Regular testing, small tweaks, and strategic updates will keep your Framer website speed improvement on track. If you need expert guidance, book a free consultation to optimise your Framer website speed or download our Framer migration checklist for more guidance.
Written By
Harish Malhi
Founder of Goodspeed
Share this article
