If you’ve been running performance tests on your Framer site using PageSpeed Insights (or Lighthouse), you might have seen this recommendation come up:

But what does that actually mean, and how can you implement it in Framer?

In this guide, we’ll cover:

• What fetchpriority=high is

• When you should use it

• How to add it in Framer (with code)

Ready? Let’s jump into it!

What is fetchpriority=high?

fetchpriority is an HTML attribute that tells the browser how important a resource is for loading the page. When its priority is set to high, the browser will fetch that resource from the server as early as possible.

This becomes especially relevant for Core Web Vitals, and in particular, the Largest Contentful Paint [LCP] metric. LCP measures how long it takes for the largest element above the fold to become visible to the user. The faster it loads [ideally under 2.5s], the better.

If your LCP element is an image, you want the browser to fetch it immediately so it can start painting. Fetching isn’t the only step required for rendering, but it’s a critical one.

For example: if the browser delays fetching the LCP element by 500 ms because it’s busy with other resources, your LCP score will also be delayed by 500 ms - exactly what you don’t want.

Now that we know what fetchpriority=high is, let’s look at when you should [and shouldn’t] apply it.

When should you apply fetchpriority=high?

When a page loads, the browser begins fetching the resources it needs—HTML, CSS, JavaScript, images, and so on.

Each resource takes time to download, and together they form what’s known as the “network waterfall”, which you can see this in the Network tab of your browser’s dev tools.

Modern browsers are pretty good at deciding the order in which resources should be fetched. But it’s not perfect, that’s where fetchpriority comes into play.

You should only use fetchpriority=high for the LCP image. Applying it to multiple elements, or to content below the fold, can actually backfire by pulling resources away from your LCP and worsening your score.

By setting fetchpriority=high on the right resource, you’re telling the browser: “Fetch this first.” That ensures it appears at the very top of the network waterfall and starts loading as soon as possible.

Now, let’s look at how to implement this in Framer.

How to add fetchpriority=high in Framer

Framer is a fantastic tool and takes care of most performance optimizations in the background. At the moment, though, fetchpriority isn’t supported natively — the only way to add it is with a code override.

[Thanks to Framer’s simulated DOM technology , this will likely be automated in the future.]

Here’s what the override looks like:

import type { ComponentType } from "react"

export function withFetchPriority(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                background={{
                    ...props.background,
                    fetchPriority: "high",
                }}
            />
        )
    }
}

Add this snippet to your Framer project, then apply the override to your LCP image - like so:

I’ve applied it to a duplicate of this exact blog structure, and here’s a before-and-after comparison from PageSpeed Insights:

Before:

After:

⚠️ Important: Only apply this to your true LCP element, and keep an eye on Framer updates - once native support is added, this override may no longer be necessary. Also note that future updates may change or break this code. While we do our best to provide accurate information, it’s ultimately your responsibility to make sure any custom code in your project continues to work as expected.

Hope you found this helpful!

- Luca

Related resources:

1. Framer website speed optimisation: a full guide to improving performance in Framer.
   
   

2. Framer SEO guide: performance is a ranking factor but it's not the only one, learn how to optimise your Framer site for search engines.