Site Optimization

Search

Site Optimization

Framer automatically applies multiple optimizations to keep sites fast – but it can’t figure out everything. If your website is not loading as fast as you want it to, try applying the suggestions below.

Images

You don't need to worry about converting images to WebP or resizing them. Just upload them as-is, and Framer will optimize them automatically.

Tips & Tricks

  • Most images: Upload them as-is and keep "Fill" → "Image" → "Resolution" set to Auto. You don't need to worry about converting images to WebP or resizing them; Framer will optimize them automatically.


  • AVIF images: For now, make sure they're not too big as they are served as-is and not optimized. Alternatively, convert them to JPEGs/PNGs/WebPs before uploading.

  • SVG images: Upload them as image fills (draw a frame → "Fill" → "Image").

If you notice poor image compression, please post on our community channel – our engineers would love to learn about what we can improve.

How Framer Optimizes Images

  • Images are converted to WebP. Framer automatically converts JPEG, PNG, GIF and TIFF images to WebP. However, if the converted WebP image is larger than the original, we still serve the original image. For browsers that don't support WebP (like Safari 13), we serve a recompressed version of the original file.

  • Images are resized to allow the browser pick the best size. Mobile users have smaller screens, so we automatically resize images to avoid wasting network resources. The "Resolution" dropdown in Fill → Image controls this logic. "Auto" enables the automatic resizing, while "Small", "Medium", "Large", and "Full" skip the logic and force specific sizes. When “Auto” is on, every uploaded image is scaled down to 512, 1024, 2048, and 4096 pixels. (Note that we never upscale images, only scale them down.) When scaling, we measure the size along the larger side of the image. For every <img> tag, we generate srcset and size attributes to let the browser pick the best variant.

For more details, see the Image Optimization FAQ.

Fonts

Tips & Tricks

  • When using web fonts, pick font weights between Light and Extra Bold. This way, the text won’t be hidden while the font loads. (Under the hood, we use font-display: swap to achieve that.)

  • When picking web fonts, prefer fonts from Google Fonts. These fonts load faster because they’re split into multiple subfonts per alphabet – so if your site uses only English, the browser can completely skip downloading Cyrillic or Hebrew characters. (The technical term for this is “subsetting”.)

  • If you uploaded a custom font before Nov 2023, re-upload it. This will make it smaller by converting it to the WOFF2 format.

How Framer Optimizes Fonts

  • Framer uses WOFF2 format for all fonts (except custom fonts uploaded before Nov 2023). WOFF2 is the modern font standard that provides the best compression for fonts.

  • Framer applies font-display: swap to the most common font weights (Light to Extra Bold) and styles (Serif and Sans Serif). We’re not applying it to every font to avoid unpleasant jumps when the web font loads. We also adjust the system font’s size to minimize layout shift.

  • Framer splits every web font coming from Google fonts into subsets for different alphabets, so you don’t have to download Cyrillic or Hebrew characters if you don’t use them.

For more details, see the Font Optimization FAQ.

Videos

Framer doesn’t optimize videos (except for lazy-loading). Optimizing videos is tricky and expensive; if we were to do it properly, we’d have to build the same infrastructure YouTube or Vimeo have, but from scratch. Instead of spending years on that, we prefer to focus on what we do best: helping you create great sites.

Tips & Tricks

  • Prefer YouTube or Vimeo videos over uploading videos straight to Framer. YouTube and Vimeo adjust the video quality based on the user’s screen or network speed; Framer doesn’t do that. This means e.g. that if you upload a 4K video to Framer, we’ll serve it in 4K even for mobile users with small screens.

    You’ll find YouTube and Vimeo components in the Insert menu:


  • When uploading videos straight to Framer, avoid setting them to auto-play. Auto-playing videos have to load and start playing as soon as the page loads; this makes them compete for traffic with images, fonts, and scripts.

  • When using auto-playing videos, keep them muted and without controls. Every muted looped video without controls (basically, a video that works like a GIF) will lazy-load and only play when it becomes visible. This means your images and fonts will get more network bandwidth to load!

For more details, see the Video Optimization FAQ.

Custom Code

You can add Custom code to the start or end of your head tag or the start or end of your body tag. It's important to note that checking for any unnecessary third-party scripts can help improve your website's performance. For instance, if you only need the MailChimp script on one page, you should avoid loading it on all pages to prevent any negative impact on your site's speed.

The custom code you add in the Project settings → Custom code will run on every page of your site whereas the code added to a single page through Page settings → Custom code will only run on that page.

Cases where you might need to add to the whole site:

  1. Analytics and Tracking: For integrating site-wide analytics or tracking tools like Google Analytics, Facebook Pixel, etc you would embed the tracking code in a global script.

  2. SEO Enhancements: To improve SEO, custom meta tags, schema markup, or other SEO-related attributes might be added to the head of the document.

  3. Third-Party Integrations: Integrating third-party services or APIs such as chatbots, customer support widgets, or social media feeds.

  4. Global Event Listeners: For handling global events like keyboard shortcuts, window resizing, or offline/online status changes.

Cases where you might need to add to a single page:

  1. Custom Forms and Validation: For pages with forms requiring custom validation logic or dynamic form fields.

  2. Integrating Third-Party APIs: If you're fetching data from an API specifically for a single page, like displaying weather information on a dashboard page.

  3. Embedded Widgets or Tools: Incorporating tools or widgets, such as a map or a calculator, that are only relevant to a specific page.

  4. A/B Testing: When conducting A/B testing, you might add custom code to a single page to test new features or designs with a segment of your users.

Shadows and Blurs

Blurs and shadows should be used carefully because they are expensive operations for computers. This is because, to draw a single pixel, they suddenly need to average all the pixels around it (depending on your blur radius). To draw 100 pixels with a 10px blur, it has to calculate 100 * (10 + 10) * (10 * 10) = 40,000 pixels (instead of 100). While they won’t make the page load slower, large blurs and shadows can affect animations and scrolling performance. It's recommended to use blurs and shadows in places where it's necessary and use a value of less than 10 for better performance.

External embeds and iframes

Embedding external content, such as HubSpot forms or Spline 3D illustrations or embedding a website 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.

In case you’re still facing issues, feel free to share your concerns in our community channel.