63 things to optimize page speed on your webflow projects.

Images:

1. Resize images to the right dimensions:
   Ensure images are scaled appropriately for their display size to avoid loading unnecessary data. Images should be twice as big as you want them to render on the front end. If your image element has a 400px width, the file should have 800px. Without it, it would be pixelated on MacBook retinas.
2. Images are in the right format (WebP, AVIF, or SVG): Use modern image formats like WebP and AVIF for raster images and SVG for vector graphics, as they offer better compression and faster load times.
3. Images are optimized (both WebP and SVG): Compress images to reduce file size without sacrificing quality. Tools like squoosh.app, TinyPNG, or vecta.io can be useful for this.
4. Images are lazy-loaded: Implement lazy loading for images so they only load when they enter the viewport, reducing initial page load time. In Webflow they are lazy loaded by default, but it is worth checking to be sure nothing interferes with the loading of critical resources
5. Combine a few images into one: You could consider combining them into one file if you have used many images to build a visual composition. This way, you will reduce the number of HTTP requests.
6. Optimize og:image: OG Image needs to be downloaded the same way the other images are. Don't forget to optimize it too. It should has right dimentions and be as small as possible

Videos:

1. Videos are lazy-loaded: Defer loading of videos, so they are loaded with an interaction with the website
2. Videos are rendered without 3rd party players like Vimeo/YouTube: Host videos on a server, to avoid the extra load and tracking scripts that come with third-party players. Good places to host files are: custom server, AWS S3 or Cloudflare R2

Fonts:

1. Fonts are in WOFF2 format: Use the WOFF2 font format as it provides better compression and faster load times compared to older formats like TTF or OTF.
2. Fonts have removed useless glyphs: Subset fonts to include only the characters you need, reducing the font file size. Many fonts have glyphs for different alphabets. Feel free to remove it if you won’t need them. You can use fontsquirrel or fontforge to do this
3. Reduce number of used fonts: Limit the number of different fonts and font weights used to decrease the amount of data the browser needs to download.
4. Combine similar font weights if the difference is negligible. For example, the difference between font weights 800 and 900 is very subtle. You should consider whether you want to sacrifice some points in Lighthouse by adding another font variant.
5. Remove the connection to external APIs (Google and Adobe): By removing fonts you’re not always breaking the connection to the API. Take a look at your performance report to see if you see an issue with e.g. Google API. To successfully report the connection you should remove the font from all classes & elements, and add fonts as a custom file, but use different names than the original ones (like ‘{{font name}} web’)‍
6. Use system fonts instead of custom ones: Consider using system fonts that are pre-installed on users' devices, eliminating the need to download additional font files.

Structure:

1. Right HTML structure: Organize your project structure to avoid deeply nested elements, which can slow down rendering. Your elements shouldn’t have too many children as well
2. Remove links to external CSS: Avoid linking to external CSS files (like Bootstrap) that are not necessary. Thanks to it, you won’t need to run another HTTP request and download another file.
3. Remove links to external fonts: Host fonts locally and remove links to external fonts. This allows you to run fewer HTTP requests and have a lighter project
4. Use scripts only on pages where you need them: Ensure that scripts are only loaded on the pages where they are needed. This allows you to have a better page load on some pages. 
5. Remove hidden elements from rendering: Use the visibility hidden option in the element setting instead of display: none to hide elements. This way you won’t need to remove component from your project, but you won’t render them in a code base.
6. Style single class instead of combo: Use single classes for styling to simplify your CSS and reduce redundancy. Feel free to combine classes later, to build more complex style compositions

Project Setup:

1. Global style guide optimized for reusable classes: Create a style guide with reusable classes to maintain consistency and reduce redundant CSS. We found MAST Framework to be the most effective when it comes to CSS size in large projects
2. Unused CSS & Interactions are deleted: Remove any CSS and interactions that are not being used to minimize file sizes.
3. Remove unused components: Clean up your project by deleting unused components as they contain classes and interactions that are loaded globally.
4. Remove all draft pages: Delete draft pages that are not needed as they contain classes and interactions that are loaded globally.
5. CSS & JS is minified: Minify CSS and JavaScript files to reduce their size and improve load times.
6. Remove unused Webflow dependencies (e-commerce, reCAPTCHA, membership, etc.): Disable Webflow features that you are not using. Every enabled module requires extra code. These files are usually quite heavy or require extra dependencies.
7. Remove active styles (with a blue background) that don’t change anything. On some projects, we found hundreds of styles we could remove without any impact on a project‍
8. Semantic elements: Use semantic HTML elements (like <header>, <footer>, <main>, <section>) to improve accessibility and SEO.

Interactions:

1. Build a system for reusable interactions, based on classes: Create interaction patterns that can be reused across your site to reduce the need for duplicate code. To do so, you should trigger interactions on class and target elements by class
2. Change animation trigger from page to element triggers: Use element-specific triggers for animations to avoid unnecessary JavaScript execution on a page load.
3. Replace Webflow interactions with custom ones, built interactions in CSS or JavaScript: Use CSS or JavaScript for animations where possible, as you can manage when the code will be fired.
4. Hover states are built in CSS instead of Webflow interactions: Use CSS for hover effects instead of Webflow interactions to improve performance.
5. GSAP and other animation libraries are lazy-loaded

3rd Party Tools:

1. There are no unused 3rd party tools: Remove any third-party scripts that are not being used to reduce load times.
2. Unoptimized 3rd party tools are replaced with faster alternatives: Evaluate and replace slow third-party tools with faster alternatives. For example, plenty cookie solutions significantly slow down your page
3. All 3rd party tools are lazy-loaded: Load third-party tools only when they are needed to improve initial page load time.
4. Load 3rd party non-critical scripts asynchronously (async & defer): Use async and defer attributes to load non-critical scripts without blocking the page render.
5. Load scripts server-side if applicable (e.g., Weglot): Where possible, load scripts on the server side to reduce client-side processing. It means that sometimes you can add a 3rd party tool by DNSes instead of adding a script to your codebase
6. Use built-in advanced components instead of implementing custom ones, like sliders, tabs, lightboxes, forms, etc.: Webflow loads logic for these components anyway, so why won’t you leverage it then?‍
7. Avoid 3rd party widgets (like Capterra, Clutch, etc.) - they load a bunch of heavy and unuseful stuff, like extra fonts or analytics. If you can, you should rebuild the component by yourself

1. Lottie lazy load - Initially load just the first frame and defer the rest until after critical content is loaded.
2. Optimize Image LCP as much as you can: Ensure that the Largest Contentful Paint (LCP) image is optimized and loads quickly. LCP is one of the most important metrics in the Lighthouse score.
3. Preload LCP: Use the preload attribute to prioritize the loading of the LCP image.
4. Preload other critical resources: Preload key resources like fonts, CSS, and JavaScript to ensure they are available as soon as needed.
5. Set the correct dimensions for images: Specify width and height attributes for images to help browsers allocate space correctly and improve layout stability.
6. Fix CLS (Cumulative Layout Shift) by setting dimensions on elements that are shifting: Assign explicit sizes to elements to prevent unexpected layout shifts and improve user experience.
7. Minify custom code: Minify custom HTML, CSS, and JavaScript code to reduce file sizes and improve load times.
8. Remove custom breakpoints: Stick to standard breakpoints to maintain consistency and reduce the complexity of your CSS.
9. Paginate items on CMS: Use pagination to break up long lists of items into more manageable chunks, improving load times and user experience.‍
10. Reduce the number of plugins: As every plugin loads extra code to your project, you should limit the number of plugins to only those that are absolutely necessary.