How to make your site fast
We are aiming for best in class performance across the board. Our unique technical advantage is that we take your designs and use a custom designed compiler to compile your designs into efficient JavaScript. The compiler can make smart decisions about shortcuts or leaving things out that humans simply wouldn’t do because it would be too much work.
Performance
Upgrade to a paid plan to get the best site performance.
Every other part of our infrastructure is heavily optimized for the best possible performance.
If you want to find out how fast your site currently is you can run a Lighthouse test:
• How to see if your site is fast with Lighthouse
• How to debug your site performance
Hosting
The Framer hosting infrastructure is world class and built for simplicity, performance and reliability. Technically, our infrastructure is built on Amazon Web Services (AWS), leveraging CloudFront, S3 and multiple global, load balanced frontends with large in-memory caches.
Let’s first start with the hosting features unique to Framer:
• Instant deployments and updates. Framer publish is optimized for sub-second upload times, so your site is deployed, updated or deleted instantly without waiting – across the globe. Instant deployments are liberating quite addictive. You won’t go back.
• Dynamic resources. We resize and optimize your images, stream your media and bundle, chunk and tree-shake your scripts to deliver them at optimal speeds in the context of your site, all automatically. We can do this because we know what you designed, unlike normal hosting providers.
• Pre rendering. As soon as you publish your site, our servers render it in the background (server-side rendering) and send a copy of the pre-rendered site with every visit. This greatly speeds up how fast the site loads for users. We additionally pre-render every responsive version too so you get these advantages on any device. Pre rendering also makes sure that Google can index your site the best way for SEO.
• Staging and versioning. Optionally, you can publish preview links by default without updating your main domain. After inspection, you can instantly promote a specific preview link to your main domain. If something goes wrong, you can instantly roll back to any version.
But we do the (advanced) basics extremely well too:
• Global presence. We leverage a global content delivery network (AWS CloudFront) to deliver and cache all your resources close to your users, so they are delivered at the lowest latency and highest bandwidth, wherever they are in the world.
• Load balancing. We host your site on many multiple machines around the world so they can handle a sudden spike in traffic with ease, avoid downtime and guarantee high availability.
• Content compression. We compress your content whenever we can (using gzip or Brotli) to deliver your site as fast as possible.
• Multiplexing. We use the http2 protocol if your visitors browser supports it so we can send multiple resources over a single connection to speed things up.
• SSL certificate. We dynamically generate (and update) an SSL certificate (using Let’s Encrypt) for your custom domain to deliver your site in a secure way.
• Application firewall. We protect your website with a global application firewall and dDos protection to avoid bad actors from hacking your site or bringing it down.
Pre Rendering
We pre-render every website as soon as you deploy it (also called server side rendering). The pre rendered html makes sure that the Google bot can analyze your website without running any JavaScript and at a huge speed boost which will favor your site in the rankings.
Pre rendering and breakpoints typically don’t go so well together, as the server does not know your screen size before you request the page, so it can’t send you the right version for your current device. But Framer automagically takes care of this for you, sending the pre rendered content per component for different screen sizes if needed, displaying the right ones using media queries.
The way pre rendering technically works is whenever you publish a website, we start a small process in the background that uses JavaScript to render your html and css (on an AWS Lambda). After a successful render
You can learn more about pre-rendering at Netlify or other services that offer this as a standalone service like Prerender.io, Brombone or Prerender.cloud.
