How Framer reduced LCP using Rolldown

Framer is a no-code website builder that lets customers like Miro, Perplexity, and Scale AI rapidly create and update dynamic websites without requiring developer support. The key to their growth is speed. Framer lets their customers ship fast sites. Sites as fast or faster than having a team of the best frontend developers. That means constantly looking at ways to improve their customers’ core web vitals like Large Contentful Paint, LCP.

The challenge: Improving bundling and chunk splitting ​

Like most modern websites, Framer bundles their customers’ websites to make the websites faster. The purpose of bundling is to reduce the total number of network requests. But a single big JavaScript file isn’t ideal either - in order to achieve the best possible performance, bundles are often split into “chunks”, and an optimal balance between chunk size and the number of chunks is needed. This relies on a bundler feature called “chunk splitting”.

Chunks are files of optimized code created by bundlers and loaded on demand by browsers.

Framer used an open-source bundler called esbuild, which redefined performance for JavaScript bundlers. Esbuild was significantly faster than everything else at that time, and it allowed Framer to provide a fast publishing experience when their customers made changes to their websites.

However, esbuild has limitations when it comes to chunk splitting. It sometimes produces too many chunks, affecting the website’s LCP. Framer’s performance engineers were looking for ways to improve LCP with a better chunk splitting strategy. The team had explored alternative bundlers like Rollup, Parcel, and farm-fe - but none were comparable to esbuild’s bundling speed and would negatively impact their customer’s publishing speed. This was when Rolldown came into consideration.

The solution: Rolldown’s advancedChunks unlocked flexibility ​

Rolldown was the new kid on the block. Written in Rust, it promised bundling speed that matches esbuild’s. As important is a configuration feature Rolldown had called advancedChunks, which gives users the option to fine-tune how chunks are created. Instead of relying on a standard algorithm to bundle and split their code, users can set chunking rules to better fit their code repository. This flexibility is a powerful feature and was exactly what Framer was looking for.

The Framer team made a bet. They became a VoidZero customer and started working directly with VoidZero’s Rolldown team. The goal was to fine-tune chunking and improve LCP. The partnership launched a series of rapid Rolldown iterations.

VoidZero prioritized Framer's feature requests and issues. When new versions of Rolldown were released, Framer quickly provided feedback on their impact on code chunks. For instance, Framer requested a rule to place code shared by multiple files into separate chunks, leading Rolldown to add the minShareCount option.

The results: Chunks decreased by 67% and LCP improved ​

Framer’s Rolldown implementation decreased chunks by 67% for the majority of Framer’s websites. But how did Framer progress against their ultimate goal of faster LCP? Did the optimized chunks improve caching and make load times faster for returning visitors? Let’s take a look.

The bigger the website, the more room for optimization. Small Framer websites, like hobby projects or simple landing pages, already load quickly and have little overhead to further reduce. Whereas, large Framer websites reduced LCP by a whopping 41%! Framer’s customers were delighted.

"I’ve been optimising every single page with small incremental gains and then suddenly BANG after the Rolldown drop. Thank you performance team!"

Tristan Owen - UX/UI Web Designer & Framer Expert

"Site performance and publish speed seem significantly better … I just didn’t expect such a visible increase in perf."

Ben Gold - Freelancer & Framer Expert

Next steps ​

Framer has 2 distinct and very different build artifacts:

1. Framer website, the website customers publish
2. Framer canvas, the web app customers design their website in

All the Framer websites now use Rolldown in the build process. The next step is to migrate the Framer canvas build process to Rolldown to load faster, improve publishing times, and even reduce storage costs.

In the meantime, Framer is also looking to adopt other VoidZero projects like the native-speed linter, Oxlint, and formatter, when available.

* Metrics are based on the 75th percentile, which is how Core Web Vitals, like LCP, are calculated. Numbers are TTFB adjusted.