This week we went through the PageSpeed scores of our templates, in Framer and in their Astro and Next.js versions. The rule was that nothing visible could change, only how things load.

In Framer, the levers we found were all in the parts you control yourself.

Code components that load images: add lazy loading to anything below the fold, and when a component draws into a small canvas, pick a smaller image size from the srcSet instead of the original.

Code components that run WebGL or canvas effects: start them when they come within about 1500px of the screen instead of at page load, and render them right away on the Framer canvas.

Background and hero videos: re-encode heavy files before uploading. One 4K hero film went down 25% with no visible difference, and two section loops went from 20 MB to 2.4 MB.

Google Fonts links inside code components block rendering, even when Framer already serves the same font. Remove them.

Every change was checked with screenshots of every page at three widths, before and after, compared pixel by pixel.

On desktop most of our Framer templates now score 90 or more in PageSpeed. Mote is at 98: https://mote.framer.ai

This week we went through the PageSpeed scores of our templates, in Framer and in their Astro and Next.js versions. The rule was that nothing visible could change, only how things load.

In Framer, the levers we found were all in the parts you control yourself.

Code components that load images: add lazy loading to anything below the fold, and when a component draws into a small canvas, pick a smaller image size from the srcSet instead of the original.

Code components that run WebGL or canvas effects: start them when they come within about 1500px of the screen instead of at page load, and render them right away on the Framer canvas.

Background and hero videos: re-encode heavy files before uploading. One 4K hero film went down 25% with no visible difference, and two section loops went from 20 MB to 2.4 MB.

Google Fonts links inside code components block rendering, even when Framer already serves the same font. Remove them.

Every change was checked with screenshots of every page at three widths, before and after, compared pixel by pixel.

On desktop most of our Framer templates now score 90 or more in PageSpeed. Mote is at 98: https://mote.framer.ai