Opinion
Beginner

A comprehensive checklist for optimizing your Webflow projects

Explore a comprehensive list of things to consider when optimizing your Webflow builds, organized by category.

Summary:

Default Settings

1. Turn all 5 "Advanced Publishing Options" on.

2. Disable indexing of webflow subdomain.

3. Enable auto-generate sitemap.

4. Set Global Canonical URL.

Scripts

1. Move all scripts you can to before </body>

2. Reduce any unnecessary scripts.

3. Use defer and async in your scripts.

Images

1. Export in the right image formats.

2. Size images properly.

3. Compress all static and CMS images to WebP.

4. Do not use images as background elements.

5. Lazy load most images.

6. Eager load critical images (e.g. hero section)

7. Use SVGs where possible.

8. Embed small SVGs directly.

Videos

1. Optimize your video size (use sites like H)

2. Host videos externally through the Custom element.

Fonts

1. Minimize the number of fonts.

2. Manually upload fonts through swap.

3. Use fallback fonts.

4. Preload fonts with code.

5. Check all fonts for contrast (at least AA).

6. Use REM or EM instead of pixels for better accessibility.

Styles

1. Stick to a proven class naming system 

(e.g Client-first, MAST, Lumos)

2. Clean unused classes regularly.

Animations

1. Use CSS-based animations where possible.

2. Use GSAP for more complex animations.

3. Clean any unused animations regularly.

SEO

1. Add Page Titles, Meta Descriptions and OG images on static and Dynamic (CMS) pages.

2. Set alt texts for static and dynamic assets.

Tags:
A comprehensive checklist for optimizing your Webflow projects

Subscribe for updates

Load more