Back

15 Simple Ways to Improve Performance in Framer

looking to optimize your site's performance? Look no further! In this comprehensive guide, we'll walk you through various strategies and best practices to ensure your Framer site is lightning-fast, accessible, and easy to edit

Nabeel

Founder @ SegmentUI

1. Improving Page Loading Speed

Use Shadows and Blurs Sparingly

Shadows and blurs can impact performance, especially with large values. Use values less than 10 for better performance. This includes layer blur and background blur and shadow blur

Minimize External Embeds and Iframes

Embedding external content can slow down your site. Remove unnecessary embeds to improve load times. If you must use embeds, ensure they are optimized for performance.

Optimize Image and Asset Loading

Images and other media assets often account for the bulk of a page's load time. Optimize these elements by:

  1. Using next-gen formats: Convert images to WebP or AVIF for better compression and quality.

  2. Compressing images: Use tools like TinyPNG to reduce file size without losing quality.

  3. Serving scaled images: Ensure images are not larger than their display size.

Simplify Custom Components

Using pre-made components and 3rd party custom components can impact performance. Consider using still elements or recreating components with simpler animations. SegmentUI offers a variety of lightweight, performance-optimized components that can replace heavy, resource-intensive ones.

Simplify animations

Long unnecessary loading animations and transforms can slow down your page unnecessarily. This includes variant animations as well

Optimize Custom Code in <head> <body>

Add custom code only to relevant pages. Custom codes, embedds and outdated libraries can slowdown your page by a lot

Preload Large Files and Lazy Load Images

Utilize third-party libraries to preload large files and lazy load images. Preloading ensures that essential resources are available when needed, while lazy loading defers the loading of non-critical images until they are required, improving initial load times.

Use default fonts

Use default fonts provided by Framer rather than uploading custom fonts. Although this isn't a huge dealbreaker, it can definitely help.

Lighthouse & diagnostics

use lighthouse and other diagnostic tools to figure out where your page is slowing down

2. Improving Accessibility

Metadata

Add meta data and connect CMS fields to descriptions and titles to optimise page rankings and SEO. This tells search engines and users what your page is about at first glance.

Leverage Semantic HTML

Using semantic HTML tags (<p>, <h1>, <nav>, etc.) helps structure your content better, making it more readable for both users and search engines.

Best Practices for Semantic HTML:

  • Header Tags: Use header tags (<h1>, <h2>, etc.) to define the hierarchy of your content.

  • Nav Tag: Use the <nav> tag for navigation menus to improve accessibility and SEO.

  • Sectioning Elements: Use <section>, <article>, and <aside> to clearly define different parts of your content.

Use Alt Text and ARIA Labels

Alt text and ARIA labels improve the accessibility of your site for visually impaired users.

Best Practices for Alt Text and ARIA Labels:

  • Descriptive Alt Text: Provide concise and descriptive alt text for all images.

  • ARIA Labels: Use ARIA labels to describe the purpose of interactive elements, like buttons and links.

3. Improving Editing Experience

Switch on Performance Mode

Framer's performance mode optimizes the editing experience by reducing the load on your machine during the design process.

How to Enable Performance Mode:

  • Go to your project settings in Framer.

  • Navigate to the performance settings section.

  • Toggle on the performance mode.

Use the Web App Instead of the Native App

The Framer web app is optimized for faster performance and better resource management compared to the native app. By switching to the web app, you can improve your editing experience, especially for content-heavy projects.

Power up your Framer Workflow

Constantly updating, 360 degree solutions for Framer. Build more, design faster, sell more, charge more

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Brian

@ZeroSevDesigns

Framer Partner

"…The Fastest way to get started on your framer projects…"

Marc Andrew

@mrcndrw

Founder, Cabanna Design System

"This is a no-brainer. Nabeel is a master at his craft and someone who only builds products of extreme value to the end-user. 100% recommend."

Carlos G

@CarlosGeeronimo

Framer Designer

"Anyone who creates things with Framer should keep the SegmentUI kit in mind to improve their workflow!"

Ajinkya Gajbhiye

@Ajinqya

Designer

"Amazing work Nabeel. This should be really helpful for people wanting to launch framer websites at speed."

Jemsee D

@jemsee_d

Official Framer Partner

"…Watch your vision come to life without writing a single line of code…"

Anand Koonath

@anand_koonath

Developer

"Yoo, SegmentUI was one of the first sites I had used to learn Framer. Pumped to see you make a UI kit..."

Charles Brewer

@charlesbrewer

Designer

"Great job! This is super useful to the Framer community!..."

Danny Sapio

@Dannysapio

Founder, FramerOverrides, FramerAuth

"If you're a freelancer, agency, or just someone who makes a lot of Framer sites then this such a solid investment and time saver. Nabeel you crushed it on this one dude!"

Punit Chawla

@PunitChawla

Founder Designwings UX/UI School

"…Its basically a never ending list of 100s if not 1000s of templates in one place"

Ghostncrypt G

@ghostncrypt

Designer

"…SegmentUI has been one of the best value purchases I have made this year by far, with constant updates and a wide selection to choose from. “

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

psst, you're eligible for a secret discount. Use SCHOLARSJOURNEY at checkout

Pro

$89

One Time Payment

Full Access to the Framer UI Kit

Styles, Components, Code Overrides, Sections & Layouts

4 Premium Templates

Foundation Kit for Figma

CMS Upgrades

Framer Code Genie GPT

Light, Dark & Dynamic Mode

Commercial License Only

Use for personal and client projects

Use for unlimited projects

Request Components & Layouts

Pro Creator

$149

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

What is SegmentUI?

Is this a one time payment or a subscription?

Will I get Future updates if I purchase now?

Is there a free version?

Do you have a student discount?

How do I access after purchasing?

What makes this special?

Is there a dark mode for the UI Kit?

Supercharge your Framer workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components. Preview Kit

Join our Mailing List

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.

Power up your Framer Workflow

Constantly updating, 360 degree solutions for Framer. Build more, design faster, sell more, charge more

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Brian

@ZeroSevDesigns

Framer Partner

"…The Fastest way to get started on your framer projects…"

Marc Andrew

@mrcndrw

Founder, Cabanna Design System

"This is a no-brainer. Nabeel is a master at his craft and someone who only builds products of extreme value to the end-user. 100% recommend."

Carlos G

@CarlosGeeronimo

Framer Designer

"Anyone who creates things with Framer should keep the SegmentUI kit in mind to improve their workflow!"

Ajinkya Gajbhiye

@Ajinqya

Designer

"Amazing work Nabeel. This should be really helpful for people wanting to launch framer websites at speed."

Jemsee D

@jemsee_d

Official Framer Partner

"…Watch your vision come to life without writing a single line of code…"

Anand Koonath

@anand_koonath

Developer

"Yoo, SegmentUI was one of the first sites I had used to learn Framer. Pumped to see you make a UI kit..."

Charles Brewer

@charlesbrewer

Designer

"Great job! This is super useful to the Framer community!..."

Danny Sapio

@Dannysapio

Founder, FramerOverrides, FramerAuth

"If you're a freelancer, agency, or just someone who makes a lot of Framer sites then this such a solid investment and time saver. Nabeel you crushed it on this one dude!"

Punit Chawla

@PunitChawla

Founder Designwings UX/UI School

"…Its basically a never ending list of 100s if not 1000s of templates in one place"

Ghostncrypt G

@ghostncrypt

Designer

"…SegmentUI has been one of the best value purchases I have made this year by far, with constant updates and a wide selection to choose from. “

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

psst, you're eligible for a secret discount. Use SCHOLARSJOURNEY at checkout

Pro

$89

One Time Payment

Full Access to the Framer UI Kit

Styles, Components, Code Overrides, Sections & Layouts

4 Premium Templates

Foundation Kit for Figma

CMS Upgrades

Framer Code Genie GPT

Light, Dark & Dynamic Mode

Commercial License Only

Use for personal and client projects

Use for unlimited projects

Request Components & Layouts

Pro Creator

$149

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

What is SegmentUI?

Is this a one time payment or a subscription?

Will I get Future updates if I purchase now?

Is there a free version?

Do you have a student discount?

How do I access after purchasing?

What makes this special?

Is there a dark mode for the UI Kit?

Supercharge your Framer workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components. Preview Kit

Join our Mailing List

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.

Power up your Framer Workflow

Constantly updating, 360 degree solutions for Framer. Build more, design faster, sell more, charge more

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Brian

@ZeroSevDesigns

Framer Partner

"…The Fastest way to get started on your framer projects…"

Marc Andrew

@mrcndrw

Founder, Cabanna Design System

"This is a no-brainer. Nabeel is a master at his craft and someone who only builds products of extreme value to the end-user. 100% recommend."

Carlos G

@CarlosGeeronimo

Framer Designer

"Anyone who creates things with Framer should keep the SegmentUI kit in mind to improve their workflow!"

Ajinkya Gajbhiye

@Ajinqya

Designer

"Amazing work Nabeel. This should be really helpful for people wanting to launch framer websites at speed."

Jemsee D

@jemsee_d

Official Framer Partner

"…Watch your vision come to life without writing a single line of code…"

Anand Koonath

@anand_koonath

Developer

"Yoo, SegmentUI was one of the first sites I had used to learn Framer. Pumped to see you make a UI kit..."

Charles Brewer

@charlesbrewer

Designer

"Great job! This is super useful to the Framer community!..."

Danny Sapio

@Dannysapio

Founder, FramerOverrides, FramerAuth

"If you're a freelancer, agency, or just someone who makes a lot of Framer sites then this such a solid investment and time saver. Nabeel you crushed it on this one dude!"

Punit Chawla

@PunitChawla

Founder Designwings UX/UI School

"…Its basically a never ending list of 100s if not 1000s of templates in one place"

Ghostncrypt G

@ghostncrypt

Designer

"…SegmentUI has been one of the best value purchases I have made this year by far, with constant updates and a wide selection to choose from. “

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

psst, you're eligible for a secret discount. Use SCHOLARSJOURNEY at checkout

Pro

$89

One Time Payment

Full Access to the Framer UI Kit

Styles, Components, Code Overrides, Sections & Layouts

4 Premium Templates

Foundation Kit for Figma

CMS Upgrades

Framer Code Genie GPT

Light, Dark & Dynamic Mode

Commercial License Only

Use for personal and client projects

Use for unlimited projects

Request Components & Layouts

Pro Creator

$149

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

What is SegmentUI?

Is this a one time payment or a subscription?

Will I get Future updates if I purchase now?

Is there a free version?

Do you have a student discount?

How do I access after purchasing?

What makes this special?

Is there a dark mode for the UI Kit?

Supercharge your Framer workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components. Preview Kit

Join our Mailing List

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.