Optimizing Framer, Astro, and Next.js Templates Without Visual ChangesOptimizing Framer, Astro, and Next.js Templates Without Visual Changes
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
How fast can a template get without changing a single pixel? ⠀ We just optimized 11 of our templates in Framer, Astro and Next.js. The rule was simple: nothing visible changes, only how things load. ⠀ What we changed: CSS inside the page, fonts from our own domain instead of Google Fonts, WebP images with phone-sized copies, videos that load when you scroll near them, heavy videos re-encoded without visible loss (one template went from about 20 MB of video to 2.4 MB), WebGL that starts near the screen, and analytics after the page. Every page was checked pixel by pixel at three widths before and after. ⠀ Mobile PageSpeed now, Astro / Next.js:
Sunbeam 100 / 100 Auria 100 / 96 Lapse 97 / 98, up from 64 / 66 Parley 97 / 94 Nova Quinn 93 / 92 ⠀ On desktop, Mote scores 98 in Framer and 100 in Astro and Next.js. More posts on the individual fixes coming.
Post image
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started