Reducing Total Blocking Time (TBT) is crucial for improving webpage interactivity and providing a better user experience. TBT measures the total time during which the main thread of a web page is blocked and unresponsive to user input. High TBT can result in a sluggish user experience. Here are 28 tips to reduce Total Blocking Time:

  1. Minimize Render-Blocking Resources:
    • Eliminate or defer render-blocking JavaScript and CSS to ensure that the main thread can execute critical tasks without interruption.
  2. Optimize JavaScript:
    • Split large JavaScript files into smaller modules to load only what’s needed when it’s needed.
    • Use asynchronous loading for non-essential scripts.
    • Implement code splitting and tree shaking to eliminate unused code.
    • Remove any unnecessary JavaScript that doesn’t contribute to page functionality.
  3. Prioritize Critical Rendering Path:
    • Use the async and defer attributes for script tags to control when scripts are loaded and executed.
    • Load critical CSS inline to speed up initial rendering.
  4. Lazy Loading:
    • Lazy load images, videos, and iframes to ensure they are only loaded when they become visible in the viewport.
  5. Efficiently Load Fonts:
    • Optimize web font loading by using the font-display: swap; CSS property to ensure text remains visible while web fonts load.
  6. Optimize Third-Party Scripts:
    • Limit the use of third-party scripts and only load those that are essential for your page’s functionality.
    • Use asynchronous loading for third-party scripts to minimize their impact on the main thread.
  7. Reduce Layout Thrashing:
    • Minimize frequent DOM layout changes, which can cause performance issues. Batch DOM updates when possible.
  8. Defer Non-Essential Tasks:
    • Defer non-essential tasks like analytics tracking and non-critical user interactions until after the page has fully loaded.
  9. Implement Web Workers:
    • Offload CPU-intensive tasks to web workers to prevent them from blocking the main thread.
  10. Optimize Images and Media:
    • Compress and resize images and videos to reduce their file sizes.
    • Use modern image formats like WebP and AVIF.
    • Serve responsive images based on device capabilities.
  11. Minimize Long Tasks:
    • Identify and address long tasks in your code that can cause TBT. Break them into smaller, asynchronous tasks if possible.
  12. Content Delivery:
    • Serve content from a content delivery network (CDN) to reduce latency and speed up resource delivery.
  13. Performance Monitoring:
    • Regularly use performance monitoring tools like Google PageSpeed Insights, Lighthouse, and Chrome DevTools to identify TBT issues and track improvements.
  14. Implement Critical Request Prioritization:
    • Use resource hints like <link rel="preload"> with the as attribute set to “script” or “style” to prioritize critical assets.
    • Ensure that essential assets are fetched and loaded before non-essential ones.
  15. Optimize Network Requests:
    • Minimize the number of network requests your page makes by combining CSS and JavaScript files.
    • Use HTTP/2 or HTTP/3 to take advantage of multiplexing, reducing the overhead of multiple requests.
  16. Use RequestAnimationFrame (RAF):
    • Utilize requestAnimationFrame for animations and updates to ensure that these operations are synchronized with the browser’s rendering cycle. This helps prevent layout thrashing and ensures smoother animations without causing blocking.
  17. Optimize Third-Party Dependencies:
    • Review and optimize third-party libraries and dependencies that you include in your webpage. Consider alternatives or custom implementations for specific functionality to reduce the impact of third-party scripts on TBT.
  18. Minimize DOM Manipulation:
    • Avoid excessive DOM manipulation, as frequent updates can lead to layout thrashing and increased TBT. Instead, batch DOM updates and use techniques like documentFragment for efficient manipulation.
  19. Optimize JavaScript Execution:
    • Profile your JavaScript code using browser developer tools to identify and optimize performance bottlenecks.
    • Move JavaScript code that isn’t needed for initial rendering to be loaded asynchronously or after the page is fully interactive.
  20. Implement Server-Side Rendering (SSR):
    • Consider using server-side rendering to pre-render HTML on the server and send it to the client, reducing the initial rendering workload on the client-side JavaScript.
  21. Reduce Third-Party Cookies:
    • Limit the use of third-party cookies, which can significantly impact TBT. Evaluate and minimize the number and size of third-party cookies used on your site.
  22. Optimize Data Fetching:
    • Efficiently load data from APIs by using techniques like data prefetching or batching requests.
    • Implement client-side caching to reduce the need for repetitive data fetching during user interactions.
  23. Implement Client-Side Routing Wisely:
    • If you’re using client-side routing in single-page applications (SPAs), be mindful of how it affects TBT. Ensure that route changes are optimized, and consider preloading resources for anticipated routes.
  24. Optimize Third-Party Widgets:
    • If your website uses third-party widgets (e.g., social media feeds, chat widgets), ensure they are implemented efficiently and asynchronously. Evaluate their impact on TBT and consider alternatives or custom implementations if they are causing performance issues.
  25. Implement Resource Hints:
    • Use resource hints such as prefetch or preload to indicate to the browser which resources should be fetched in advance. This can help reduce TBT by ensuring critical assets are available when needed.
  26. Monitor User Interactions:
    • Track user interactions and user behavior on your website using tools like Google Analytics or user session recording tools. This can help you identify areas where TBT might be impacting user experience and prioritize optimizations accordingly.
  27. Optimize Critical Rendering Path:
    • Ensure that the critical rendering path is as efficient as possible by minimizing the number of round trips to the server. Use techniques like HTTP/2 server push or inlining critical assets to speed up rendering.
  28. Evaluate and Optimize JavaScript Frameworks:
    • If you’re using a JavaScript framework or library, regularly review its performance and consider optimizing your code or using alternative lightweight libraries that can reduce the impact on TBT.

Reducing Total Blocking Time often involves a combination of optimizing assets, scripting, and critical rendering paths. Continuous monitoring and optimization are key to maintaining a responsive and fast-loading web page.