Poor website performance - TBT 61 000ms (PLEASE HELP)

Publishing help SEO
1

Hi, I don’t know how to go on anymore and I feel I’m at the absolute end. While testing my site I got Poor score both on mobile and desktop. I have no idea where the problem is because I am not a very experienced developer and would need help.

Desktop
Desktop971×937 91.1 KB

Mobile
Mobile966×942 85.2 KB

Any help will help a lot.

Thank you

Here is my site Read-Only: (Webflow - WebFuse)

1 Like
2

You have to be know basic understanding of web vitals how they work get these all information, compress all the images with native webflow option remove and unused css and unused interaction and project settings in publish enable minify html, css and js at last watch this finsweet video which is on speed optimisation you will come to know idea about it https://youtu.be/UqTcrsMTdtg?si=apOz_cE3uVuk__QT

3

Here are some quick tutorial of what you can do to improve your Performance score:
Implement Lazy Loading for Images and Videos
Use WebP or AVIF Format for Images
Minify CSS, JavaScript, and HTML
Optimize Fonts and Reduce Font Loading Times
Delete unused classes

And a bit more technical
Use Asynchronous Loading for custom CSS and JavaScript
Minimize Use of Third-Party Scripts and Widgets

Good luck with this.

4

@Martin_Gocik1 you need to follow a few key steps, and once you implement them, your score will definitely improve. I’ve spent many hours on this, and unfortunately, Webflow doesn’t provide an easy way to enhance page speed. I’m sharing a blog that covers all the necessary optimizations. —please take a look: Optimize Webflow Website Page Speed

5

Hi,

To tackle the TBT (Total Blocking Time) of 61,000ms and improve your website’s performance, here are a few key steps you can take:

  1. Minify JavaScript and use async or defer for non-essential scripts.
  2. Optimize CSS by inlining critical styles and using font-display: swap for fonts.
  3. Remove or delay third-party scripts that aren’t essential for the initial load.
  4. Lazy loads images and videos to speed up the page load.
7

I’ve generated a quick checklist for you to follow when building websites.

You can find YouTube tutorial for each of these pain points and see how you can optimize it in Webflow.

Here’s a checklist of optimizations specifically tailored for Webflow, focusing only on what can be controlled within the Webflow platform to improve website speed:

1. Image Optimization

  • Compress images before uploading (use tools like TinyPNG or Squoosh).
  • Use modern formats like WebP for better compression and quality.
  • Enable lazy loading for all non-critical images.
  • Resize images to their intended display size before uploading.
  • Avoid using large images for small thumbnails or icons.

2. Fonts

  • Limit the number of font families and weights used on the website.
  • Use Webflow’s font management to ensure only necessary fonts are loaded.
  • Set fonts to swap display to prevent invisible text during loading.

3. Animations and Interactions

  • Avoid overusing complex animations that can slow down rendering.
  • Use Webflow interactions sparingly and optimize their trigger and duration settings.
  • Turn off animations for mobile devices where they aren’t necessary.

4. Components and Elements

  • Reuse Webflow symbols to reduce duplicate DOM elements.
  • Simplify layouts by reducing the number of nested elements.
  • Avoid excessive use of background videos or set them to load on demand.

5. Assets

  • Audit and remove unused assets from the Webflow asset manager.
  • Use Webflow’s Asset Panel to ensure optimized images are uploaded.
  • Use smaller or compressed videos for background or hero sections.

6. Styles

  • Consolidate and reuse classes to reduce duplicate CSS.
  • Avoid inline styling; use global classes wherever possible.
  • Clean up unused classes from the Style Manager.

7. Lazy Loading

  • Enable lazy loading for all images and videos on the page.
  • Ensure iframe content, like embedded maps or videos, is set to lazy load.

8. Webflow CMS

  • Optimize CMS collection templates by limiting the number of items displayed per page.
  • Use conditional visibility for CMS content to load only necessary items.

9. Page Structure

  • Limit the number of DOM elements on each page.
  • Use Webflow’s built-in pagination for large collections instead of loading everything at once.
  • Use clean and minimal design to reduce unnecessary content or layout complexity.

10. External Embeds

  • Minimize the use of custom embed code that pulls in external scripts.
  • If embeds are necessary, use Webflow’s embed settings to load them conditionally.

11. Code Optimization

  • Consolidate custom code snippets and avoid unnecessary duplication.
  • Use Webflow’s Head/Body Code settings to place non-critical custom code at the end of the page.

12. Responsive Design

  • Optimize mobile versions of the site by hiding or removing unnecessary elements.
  • Ensure images and videos are appropriately sized for different breakpoints.

13. Webflow Hosting Settings

  • Enable Webflow’s minification for CSS and JavaScript in the project settings.
  • Use Webflow’s automatic gzip compression (built into their hosting).

14. Testing and Iteration

  • Regularly audit performance using Webflow’s Preview Mode and external tools like Lighthouse.
  • Simplify pages with long load times and re-evaluate content priorities.

This checklist ensures you make the most of Webflow’s built-in tools to optimize your website for speed without needing server-side control.