.svg)
.svg)
What is Total Blocking Time & How to Improve it?
Total Blocking Time (TBT): What is it & How to Optimize for it?
Have you ever found yourself staring at a screen, clicking repeatedly, yet nothing happens? It's not just you; this high Total Blocking Time (TBT) is a widespread frustration, symbolizing the lag between your action & the website's response.
This critical performance metric reflects the duration a page is unresponsive to user inputs, directly affecting user experience & retention. Optimizing for TBT enhances user interaction & significantly boosts your website's usability & engagement.
In this blog, we will explore strategies for minimizing TBT, enhancing your site's responsiveness, and keeping your users engaged.
Table of Contents
7.
8.
9.
10.
Understanding Total Blocking Time (TBT)
Total Blocking Time (TBT) is a metric that measures the total amount of time that a page is blocked from responding to user input quickly, such as mouse clicks, screen taps, or keyboard presses.
TBT quantifies the sum of all time periods between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread of a web page was blocked for long enough to prevent input responsiveness.
In a web browser, the main thread is the primary thread where the execution of JavaScript, the rendering of the webpage layout (also known as layout or reflow), painting (drawing pixels on the screen), and handling of user interactions (like clicks and scrolls) occur. It's essentially the backbone of the browser's rendering process for web content.
In TBT quantification, each time period is considered "long" if it exceeds 50 milliseconds, as tasks that run longer than 50ms without yielding to the browser's event loop can prevent the user from interacting with the page smoothly.
Total Blocking Time is a critical measure within web performance optimization because it helps identify the impact of potentially heavy JavaScript execution. If a webpage has a high TBT, it indicates that the JavaScript being used on the page is causing significant computing work that could hinder the user's ability to interact with the page immediately.
Reducing TBT can lead to a more responsive and pleasant user experience.
It plays a significant role in the overall Lighthouse Performance score, accounting for 30% & is often used as an alternative to First Input Delay when running tests in the lab. A lower TBT means a better, more responsive webpage, which can also help with how high the page ranks on SERP.
How is Total Blocking Time Calculated?
When you click a button on a webpage, it starts processing your request. If the webpage gets too busy & spends over 50 milliseconds on a task, we call the extra time "blocking time."
For example, if a task takes 120 milliseconds to finish, we only count the extra 70 milliseconds as blocking time. We add these extra times to find the Total Blocking Time (TBT) score.
So, if one task takes 120ms, another takes 80ms, and a third takes 45ms (which doesn't count because it's under 50ms), the Total Blocking Time is 100ms [70ms (120-50) + 30ms (80-50) + 0ms (45<50)]. This score helps us see how long the webpage is stuck, affecting how quickly you can interact with it.
Factors Impacting Total Blocking Time
1. Heavy JavaScript use can slow down the website because it takes a long time to complete tasks, delaying responses to user clicks or inputs.
2. Not loading website resources in the right order can mistakenly focus on less important things, slowing down crucial website functions.
3. A large webpage structure (DOM) makes the website slower to load & respond because of more processing effort.
4. Slow or large external scripts (like ads or analytics) can slow the website, especially if they don't load in the background.
5. Slow server responses delay the website from getting the information it needs, making everything else wait longer to load or respond.
Total Blocking Time Compared
Total Blocking Time is often confused with other metrics that sound similar or are calculated similarly. Let's compare TBT with each & understand the differences.
Total Blocking Time (TBT) vs Time to Interactive (TTI)
TBT & Time to Interactive (TTI) are important for measuring website performance but focus on different things. TBT measures when the page starts showing content to when it becomes fully interactive. It highlights moments when user input is delayed by over 50 milliseconds and shows how often & how long users experience unresponsiveness during page loading.
On the other hand, TTI marks when the page is ready for user interaction without significant delays. It emphasizes the page's ability to handle user input promptly, regardless of minor lags, giving a broader view of when a page becomes usable.
But what determines the moment the page shows valuable content?
That’s where First Contentful Paint (FCP) comes into play. It informs you about the timing of the first text or image appearing on the screen.
At this juncture, Total Blocking Time (TBT) plays its role. TBT evaluates the activity occurring from FCP to TTI.
Both metrics are crucial for improving user experience. TTI tells us when the page is technically interactive, while TBT gives detailed insight into the quality of user experience leading up to that point. Balancing the two ensures a website functions correctly and feels smooth & responsive to users.
Total Blocking Time (TBT) vs First Input Delay (FID)
TBT & First Input Delay (FID) are critical metrics in assessing web performance, particularly in user interaction. As mentioned earlier, TBT measures the time between FCP and TTI, capturing the period during which the main thread is busy enough to prevent input responsiveness.
On the other hand, FID focuses specifically on user interaction by measuring the delay between a user's first input (like clicking a button or tapping on a link) and the browser's response to that input.
While TBT measures overall speed, including delays in showing images & running scripts, FID focuses on how fast a website responds to clicks or taps.
Websites with high TBT values may suffer from slow loading elements & script execution, leading to delayed responsiveness to user interactions. Conversely, high FID values indicate that users may experience frustrating delays when interacting with the page, even if it appears visually loaded.
What is a Good Total Blocking Time (TBT) Score?
Google values TBT as a crucial metric because it directly impacts user experience.
According to Google, a total blocking time of less than 200 milliseconds on mobile is a good target.
Let us see the exact threshold for TBT scores in the Google Lighthouse report:
TBT scores of less than 200 milliseconds indicate that a webpage is likely to provide a smooth & responsive user experience. Anything above this threshold could be perceived as laggy or unresponsive, potentially frustrating users & increasing bounce rates.
Impact of Total Blocking Time on Performance Score & SEO
1. Increased Bounce Rates
High TBT can frustrate users due to longer load times. It increases the likelihood that users will leave your site before it fully loads, directly affecting your site's bounce rate & overall user satisfaction.
2. Lower User Engagement
High TBT signals that your website might be sluggish & unresponsive to user interactions. This sluggishness can significantly decrease the user's willingness to engage with your content, reducing page views per visit & time spent on site.
3. Decreased SEO Rankings
Search engines like Google have integrated site speed & user experience into their ranking algorithms. A higher TBT can negatively affect your site's SERP ranking, making it harder for potential visitors to discover your content organically.
4. Reduced Conversion Rate
According to Google, 53% of mobile users will abandon a website if it takes more than 3 seconds to load. A higher TBT means users are less likely to complete purchases or sign-ups due to delays, impacting your site's bottom line.
5. Adverse Effect on Mobile Experience
High TBT can slow down your website, especially for mobile users with lower processing power & slower internet connections. This delay can frustrate users, leading them to leave your site quickly.
Tools to Measure Total Blocking Time
Total Blocking Time (TBT) is a crucial metric for assessing a webpage's interactivity & responsiveness. While it's possible to measure TBT in real-world scenarios, Google advises against it due to the high variability caused by user interactions in the real world.
Instead, for a more controlled & consistent analysis, lab tools are recommended. These tools simulate a page load in a consistent environment, allowing you to understand a page's interactivity without the noise of real-world variances.
Let us look at the tools to measure total blocking time.
1. Chrome DevTools to Measure TBT
Chrome DevTools is a powerful suite of web developer tools built directly into the Google Chrome browser. It helps developers diagnose problems quickly, allowing them to build better websites, faster.
It offers a wide range of features such as inspecting HTML & CSS, debugging JavaScript, and viewing messages output from a web page. It's like having a magnifying glass to peer into the inner workings of web pages.
It also helps you measure the total blocking time for your web pages. To measure TBT using Chrome DevTools, developers can follow these steps:
1. Open your web page in Google Chrome.
2. Right-click anywhere on the page and select "Inspect" to open Chrome DevTools.
3. Navigate to the "Performance" tab. Click ">>" if you don't see it.
4. Click the "Record" button to start recording performance data.
5. Interact with your web page to trigger TBT measurements.
6. After recording, analyze the results to identify TBT & other performance metrics.
2. Total Blocking Time & Google Lighthouse
Lighthouse is an open-source, automated tool designed by Google to improve web page quality. It can audit performance, accessibility, progressive web apps, SEO, and more, providing a holistic view of your page's potential areas for enhancement.
Lighthouse generates a report with scores in each category. It allows developers to pinpoint areas where a site may be lacking & provides actionable advice for enhancing site performance, accessibility, and user experience.
To measure TBT using Google Lighthouse, follow the steps:
1. Navigate to the web page you want to audit.
2. Open Google Chrome DevTools by right-clicking on any webpage & selecting “Inspect” or pressing `Ctrl+Shift+I` on Windows/Linux or `Cmd+Opt+I` on macOS.
3. Go to the “Lighthouse” tab.
4. Select the performance audit options & run the audit.
5. After the audit, review the Lighthouse report to find your TBT score & recommendations for improvement.
3. WebPage Test to Measure TBT
WebPageTest is an open-source web performance testing tool that allows you to run free website speed tests from multiple locations using real browsers & consumer connection speeds.
The ability to simulate real-world conditions makes WebPageTest particularly valuable for developers, webmasters, and digital marketers. It allows them to optimize their websites' speed, user experience, and, ultimately, their search engine rankings.
Follow the steps to measure TBT using the WebPage test.
1. Visit the WebPage Test website.
2. Enter your web page URL and select the desired test location, browser, and connection speed.
3. Click the "Start Test" button to initiate the test.
4. After the test, review the performance report to find your TBT score & recommendations for improvement.
How to Improve Total Blocking Time?
1. Optimize JavaScript Execution and Minimization
JavaScript often takes up a big chunk of work on the main thread, causing delays in how fast your website responds to users. When JavaScript takes too long to execute, it slows interaction & responsiveness, making your site feel sluggish.
1. Minify JavaScript: Remove unnecessary characters from JavaScript files to make them smaller.
2. Defer & Delay JS Execution: Use the 'defer' attribute for non-essential scripts to avoid interrupting the page load.
3. Optimize & Reduce JavaScript Execution Time: Audit scripts with tools like Lighthouse to identify & eliminate bottlenecks, refactor inefficient algorithms, or adopt web workers.
Optimizing JavaScript execution & minimizing file sizes leads to faster parsing, compiling & executing times. It directly decreases TBT, improving user experience & reducing the time until it becomes interactive.
2. Minimize Main Thread Work
The main thread parses HTML, executes JavaScript, and renders pages. Excessive work on the main thread, such as styling, layout, and heavy script execution, can block user interactions, leading to a poor experience.
1. Reduce Requests: Combine and compress files to reduce download times.
2. Minify CSS: Make your CSS files smaller by trimming them down. Use tools to compress them so they take less time to download.
3. Use GZip Compression: Compress text files during transfer to speed up downloads.
Minimizing the work required on the main thread ensures that the browser can respond more quickly to user inputs. It makes the page more interactive sooner & significantly enhances the user experience by ensuring smoother scrolling & faster execution of interactive functionalities.
3. Reduce the Impact of Third-Party Code
Third-party code, such as analytics scripts, advertising networks, and external widgets, can significantly increase Total Blocking Time. These scripts often execute on the main thread & can carry a high-performance cost.
1. Audit & Monitor Third-Party Scripts: Regularly use performance monitoring tools to evaluate the impact of third-party scripts on your site's performance.
2. Defer or Async Non-Essential Third-Party Scripts: Apply async or defer attributes to third-party scripts wherever possible to ensure they don't block page rendering & interactivity.
3. Lazy-load Third-Party Widgets: Consider lazy loading for widgets or elements not essential to the initial user experience.
It eliminates unnecessary blocking of the main thread, allowing the browser to prioritize loading and processing critical resources & content. It results in a smoother, faster, and more responsive site for the end user.
4. Prefetch DNS Requests and Optimize Resource Loading
DNS prefetching & optimizing resource loading help reduce the time the browser spends retrieving resources necessary for rendering the page. It involves anticipating future navigation & fetching resources before they're needed.
1. Implement DNS Prefetching: Use <link rel="dns-prefetch" href="..."> to resolve domain names before they're requested.
2. Prioritize Critical Resources: Use <link rel="preload" href="..."> for critical resources to instruct the browser to load them early in the page load process.
3. Efficiently Load Non-Critical Resources: For non-critical resources, consider techniques like lazy loading, which loads resources as they're needed (e.g., images or scripts near the viewport) instead of during the initial page load.
Doing so can improve website performance by ensuring the browser waits less on network requests. It helps you reduce the time to the first byte (TTFB) and the overall time needed for page resources to become available & improve user experience.
5. Reduce Server Response Time and Optimize Time to First Byte (TTFB)
Server response time, or the Time to First Byte (TTFB), measures how quickly a server sends the file's first byte in response to a request. A slow TTFB can delay the loading process, contributing to a longer Total Blocking Time. Optimizing server response time involves improving the server's speed & efficiency in handling requests.
1. Optimize Server Configuration: Ensure that your server is well-configured for the workload it's handling. It might involve upgrading hardware, optimizing server-side scripts, or configuring caching appropriately.
2. Use a Content Delivery Network (CDN): A CDN can greatly reduce TTFB for users located far from the original server by caching content at edge locations closer to the user.
3. Database Optimization: Optimizing queries & indexing can significantly reduce server response times for sites that rely heavily on database interactions.
4. Implement HTTP/2 or HTTP/3: These newer versions of the HTTP protocol offer improvements over HTTP/1.1, including multiplexing & header compression, which can reduce latency.
Reducing server response time & optimizing TTFB directly impact how quickly a page can start loading, thereby reducing Total Blocking Time. Faster server responses mean that the browser can begin downloading & processing critical resources sooner. It improves the actual site performance, leading to better engagement, lower bounce rates, and potentially higher conversion rates.
Optimize for TBT & Enhance Loading Speed With Quattr
Understanding & optimizing Total Blocking Time is essential for enhancing your website's performance, user experience, and SEO rankings. By following the best practices, you can optimize your TBT score & achieve a faster website loading speed. It helps you boost engagement & conversion rates and also strengthens your website's competitive edge in search engine results.
However, achieving this optimization requires a strategic approach and the right tools. This is where Quattr's capabilities shine. Quattr underscores the most significant opportunities to enhance your website speed by providing a comprehensive & prioritized audit list. It offers a unique perspective on your search competitors' website speeds, enabling effective performance comparison & necessary improvements.
With Quattr's precise & actionable recommendations, you can navigate from your current state to optimal performance without squandering crucial resources.
Improve Website Loading Speed at Scale Using Quattr!
Get StartedTotal Blocking Time (TBT) FAQs
How often should I measure Total Blocking Time?
To ensure optimal website performance, measure Total Blocking Time (TBT) after significant updates or changes. A monthly TBT analysis is recommended to identify trends & address issues proactively for ongoing improvement.
Is too low Total Blocking Time beneficial?
Having a very low Total Blocking Time (TBT) isn't always good. It might mean you're not doing enough important work on your website. The goal is to find a good balance that keeps the website working well without hurting user experience.
Does Total Blocking Time affect mobile performance differently than desktop?
Total Blocking Time (TBT) impacts mobiles more than desktops. It is because mobiles often have weaker processing power & less stable internet. So, mobile users might notice more delays.
How does Total Blocking Time affect Core Web Vitals and Google Page Experience?
Total Blocking Time (TBT) is part of Core Web Vitals, which measures how long a website can become fully interactive. High TBT means longer loading times, which can make users unhappy & possibly lower your website's ranking. Fixing TBT can make your website faster & improve user experience.
About The Author
About Quattr
Quattr is an innovative and fast-growing venture-backed company based in Palo Alto, California USA. We are a Delaware corporation that has raised over $7M in venture capital. Quattr's AI-first platform evaluates like search engines to find opportunities across content, experience, and discoverability. A team of growth concierge analyze your data and recommends the top improvements to make for faster organic traffic growth. Growth-driven brands trust Quattr and are seeing sustained traffic growth.
