Help center

SEO & Performance

How to debug your site performance

Search

How to debug your site performance

Framer automatically handles various technical aspects to optimize your site’s speed, such as local caching, pre-rendering, and image optimization. If your site is slower than desired, it’s usually due to specific issues that can be fixed.

You, Others, and Google

Site speed is different on different devices and networks.

To see if your site is slow for others, check it on different computers or run a PageSpeed Insights test. To see how Google measures your performance, check the Core Web Vitals report (Google doesn’t use PageSpeed Insights for ranking).

Common Issues

Based on our analysis of many Framer websites, here are the most common factors that contribute to slow loading.

Third-Party Scripts: Scripts like Google Analytics, Twitter SDK, and Facebook SDK often slow loading due to running a lot of code. Minimize their usage, e.g. by loading them only on pages they need to run on.

Custom or Google Fonts: Fonts, even when optimized by Framer, can still slow down your site. In general, prefer Google fonts over custom ones. (See the Font Optimization FAQ for best font practices.)

Videos: Videos consume significant bandwidth and can slow down loading of images or fonts. The best thing to do is to host a video on YouTube. If you can’t do that, consider disabling autoplay, or try compressing videos with an online tool. (See the Video Optimization FAQ for more details.)

External embeds and iframes: Embedding external content, such as HubSpot forms or Spline 3D illustrations, can make the performance score worse. Framer lazy loads embeds, but the embeds can still run a lot of code and slow down the site. Try removing the embeds (on a copy of your site) and seeing how that affects performance.

Lottie Animations: Ensure that the source JSON file for Lottie animations is small (<100kb) to avoid performance issues.

Images: Framer optimizes images by recompressing them to the appropriate size and format. Ensure your have “Resolution” set to “Auto”. (See the Image Optimization FAQ for best image practices.)

Blur, Shadows, and Background Blur: Blurs and shadows require computationally expensive operations. While they won’t make the page load slower, large blurs and shadows can affect animations and scrolling performance.

SVG Images: Upload SVGs as regular images (create a new frame → Fill → Image) instead of graphics. Avoid including raster images within SVG files. (See the Image Optimization FAQ for ”why”.)

Scroll Effects: Use Appear effects – not Scroll Animation effects – for any elements in the top 1000px of your site. Appear effects are optimized to run as soon as the page renders, whereas Scroll Animation effects don’t run until Framer JavaScript loads.

Very Large Pages: Creating excessively tall pages with numerous elements can result in slow loading and scrolling.

Optimization Errors: Custom code components may introduce subtle errors that hinder optimization. If you encounter optimization warnings, refine your code components for better performance.

“Which of these issues apply to me?”

Different sites have different performance issues: if Google Tag Manager is a bottleneck on one site, it’s not necessarily an issue on another one. So before investing time into implementing each of these tips, figure out which ones help you the most!

Here’s how:

  1. Test your live site in PageSpeed Insights. Remember the performance score

  2. Duplicate your site’s project

  3. Take a look through the tips below. Pick one that seems most relevant; apply it to the copy of the site in the quickest, dirtiest way possible; and test the copy in PageSpeed Insights.

    “Quickest, dirtiest way possible?” The quicker you do it, the better; the goal is to estimate how much each tip helps, even if it breaks the copy of the site. For example, to measure how much third parties or a specific video affect speed, you can just remove them.

    PageSpeed Insights gotcha: when testing the copy, add ?force=<some random number> to the end of the URL. (Replace <some random number> with a random number, and change that number every time.) This will force PageSpeed Insights to re-run the test instead of showing you older results from 5-10 minutes ago

  4. Compare the score with the live site. Did the score go up by 2 points or by 20? Write the difference down.

  5. Undo the change you’ve done

  6. Repeat with the next tip

After you go through this, you’ll have a list of every tip next to how much it helps, like:

# Example
Removing third parties: 15 points
Switching videos to not autoplay: 2 points

Now, you know what to actually work on!

Known Issues

We are actively working on improving page performance. Here are some known issues:

  • We aren’t perfect at determining the correct image pixel size to load – in cases when images are in some grids or smart components.

  • We aren’t perfect at lazy-loading all images that deserve that.

  • Custom code can potentially impact page performance. Most performance issues we observe are due to custom code! However, we aren’t great yet at helping you figure out which code, specifically, affects performance the most.

Further Reading