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.
7.
8.
9.
10.
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.
It quantifies the sum of all periods between First Contentful Paint (FCP) and Time to Interactive (TTI), where the main thread is blocked for periods longer than 50 milliseconds, causing a delay in user 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.
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.
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 is often confused with other metrics that sound similar or are calculated similarly. Let's compare TBT with each & understand the differences.
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.
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.
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.
Google values TBT as a crucial metric because it directly impacts user experience.
According to Google, aim for a Total Blocking Time of under 200 milliseconds for a good user experience.
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.
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.
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.
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.
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. Select the timespan mode and start recording.
4. Perform interactions on the page to capture TBT data.
5. Stop recording and review the audit to find TBT scores and recommendations.
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.
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.
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 minimize the number of HTTP requests. This reduces download times and enhances page load speed.
2. Minify CSS and JavaScript: Optimize your CSS and JavaScript files by removing unnecessary characters and whitespace. Use tools to compress these files, making them smaller and quicker to download.
3. Use GZip Compression: Enable GZip compression on your server to compress text files during transfer. This significantly reduces file sizes, speeding up download times and improving overall site performance.
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.
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. Regularly Audit Third-Party Scripts: Use performance monitoring tools to continually evaluate the impact of third-party scripts on your site's performance.
2. Defer Non-Essential Scripts: Apply async or defer attributes to non-essential third-party scripts to prevent them from blocking page rendering and interactivity.
3. Lazy-Load Third-Party Widgets: Implement lazy loading for widgets or elements that are not essential to the initial user experience to enhance performance.
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.
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 needed. This speeds up the loading process.
2. Prioritize Critical Resources: Use (link rel="preload" href="...") for important resources. This tells the browser to load these resources early in the page load process.
3. Efficiently Load Non-Critical Resources: Use lazy loading for non-essential resources, such as images or scripts near the viewport. This means they load only when needed, not 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.
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: Make sure your server is set up correctly for the workload it handles. This may include upgrading hardware, optimizing server-side scripts, or setting up proper caching.
2. Use a Content Delivery Network (CDN): A CDN caches your content at multiple locations around the world. This helps users far from your server get content faster.
3. Database Optimization: Improve your database performance by optimizing queries and indexing. This helps reduce server response times.
4. Adopt HTTP/2 or HTTP/3: These newer protocols are faster than HTTP/1.1. They include features like multiplexing and header compression, which reduce latency and improve performance.
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.
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.
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.
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.
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.
Total Blocking Time (TBT) 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.
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.
Try our growth engine for free with a test drive.
Our AI SEO platform will analyze your website and provide you with insights on the top opportunities for your site across content, experience, and discoverability metrics that are actionable and personalized to your brand.
.svg)
.svg)
