Hitting a sub 2 second LCP on Framer

Framer ships fast static pages out of the box. Sub 2 second LCP at the 75th percentile is achievable on virtually any project, but it requires deliberate choices around hero imagery, fonts, and animation libraries.

The three big levers

Here is the process broken into clear steps. Take them one at a time and check each off before moving on.

1. Hero image: AVIF or WebP, never above 200KB, with explicit width and height to prevent CLS.
2. Fonts: maximum two families, one weight each above the fold, swap strategy enabled.
3. Animations: defer non critical Framer Motion components below the fold.

Measuring against the budget

A budget only works if it is checked regularly against real field data, not just a single lab test taken once during the build.

• Test with Chrome DevTools on a throttled connection during development.
• Confirm with PageSpeed Insights field data once the page has traffic.
• Check CrUX data monthly for the 75th percentile LCP, not just the average.
• Re test after any hero image, font or animation change.

What to do when LCP creeps back up

LCP tends to drift upward as teams add hero content, new fonts or extra animation over time, so plan for periodic maintenance rather than a one off fix.

1. Check whether the hero image size or format changed since the last audit.
2. Confirm fonts are still self hosted and using display swap.
3. Review any new third party embeds added to the hero section.
4. Re run the test on a throttled mobile connection, not a fast office network.