If your site has consistently poor Total Blocking Time scores, which approach should you take to improve this metric?
- Remove all videos from your site that are 1MB or larger
- Optimize images and use srcset and sizes attributes to provide the browser multiple image options depending on the user’s device
- Self-host fonts instead of fetching them from a third party
- Reduce the total amount of JavaScript loaded on your site while also efficiently loading the site’s JavaScript
Explanation: The correct approach to improve consistently poor Total Blocking Time (TBT) scores is to reduce the total amount of JavaScript loaded on your site while also efficiently loading the site’s JavaScript. Total Blocking Time measures the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI) during which the main thread is blocked and unable to respond to user input. High TBT scores indicate that JavaScript execution is blocking the main thread, causing delays in rendering and interactivity, which can lead to a poor user experience. By reducing the total amount of JavaScript loaded on the site, developers can minimize the time spent parsing, compiling, and executing JavaScript code, thereby reducing TBT. Strategies to achieve this include removing unnecessary or redundant JavaScript, optimizing code for performance, implementing code-splitting techniques to load only essential scripts initially, and deferring the loading of non-critical scripts. Additionally, optimizing the delivery of JavaScript resources, such as leveraging browser caching, using asynchronous loading techniques, and minifying code to reduce file size, can further improve TBT scores. Overall, prioritizing JavaScript optimization efforts is crucial for enhancing Total Blocking Time metrics and ensuring a smoother, more responsive browsing experience for users.