Total Blocking Time (TBT) is actually caused by the long tasks and third-party coding in WordPress. Such as unsuitable CSS, JavaScript, plugins, etc. It could also be affected by the different fonts and images.
To be sure about the Total Blocking Time, first, you need to measure it. Understanding the measurement is simple. It measures how much time your web browser gets stuck when doing tasks that take longer than 50 ms.
TBT is closely related to user interaction and the first response of the browser’s main thread to the user.
Simply, short TBT will make websites respond faster to your clicks. As a result, it’ll create a flawless user experience.
When a website takes more than 50 ms to respond the delay becomes evident. To solve this issue there are various tools and methods to go by.
Proper optimization and solving this issue will ensure the website can respond to user requests at a higher rate. And improve the overall performance of the website.
As of 2023, approximately 810 million websites rely on WordPress, accounting for around 43% of all websites. So, this issue is most likely to be faced by a great number of users. Let’s see how to reduce total blocking time in WordPress in 2023.
Why is TBT Important for WordPress Websites?
Total blocking time is important in WordPress for every website, because it directly impacts the user experience. This metric is particularly significant for several reasons such as User Experience, SEO, Conversion Rate, and Responsiveness.
Also, some major things impact TBT in WordPress sites:
- Slow-loading websites frustrate visitors. When users encounter a site that takes too long to load or respond, they are more likely to abandon it in favor of a faster alternative. This can lead to higher bounce rates and lower user engagement.
- Search engines like Google consider page speed and user experience as important ranking factors. Websites with longer total blocking times may rank lower in search engine results, potentially resulting in reduced organic traffic.
- Also, when trying to index your site on Google that time Google search console doesn’t allow indexing for low-speed web pages.
- Slow-loading websites can negatively impact conversion rates. Whether it’s e-commerce sales, lead generation, or any other type of conversion, users are less likely to take action on a website that doesn’t load quickly and smoothly.
- With the increasing use of mobile devices, it’s crucial to reduce total blocking time. Mobile users are often on slower connections, and a fast-loading site can make a significant difference in their experience.
Ways to Reduce Total Blocking Time (TBT) in WordPress
While there are various ways to minimize TBT, JavaScript optimization has the most significant impact. Below, we’ll explore common JavaScript issues and actions to address them, using clear examples.
Here are the top 7 types of problems and we’ll discuss in detail how exactly to reduce TBT (Total Blocking Time) on the WordPress site.
1) Fix 404 Errors
When a browser encounters a resource it can’t load, such as a broken image or a non-existent JavaScript file, it needs to process this issue. A custom 404 error, which indicates that the requested resource is missing, can cause more problems compared to a generic error page served by the server.
Example: Imagine your website uses a JavaScript library, and the browser tries to fetch it but receives a custom 404 error. This triggers extra processing and negatively affects TBT.
Fixing 404 errors is critical for improving site speed and overall user experience.
2) Reduce JavaScript
Eliminating unnecessary JavaScript files, plugins, and other elements is a straightforward step. Often, websites accumulate unused tools or scripts, like analytics trackers, over time. Running a test to identify and remove unused components is essential.
Example: If your site once integrated a user behavior analysis tool like Hotjar or Lucky Orange but no longer uses it, keeping this JavaScript code on your site unnecessarily increases TBT.
Reducing the volume of JavaScript leads to faster page load times. Your goal should be to keep the size of your JavaScript files below half a megabyte, as exceeding this limit will slow down your site due to increased processing.
3) Defer JavaScript
Deferment of JavaScript is a fundamental optimization technique. JavaScript can load in various ways: raw, asynchronously, or deferred. Raw JavaScript loading can slow down a site and block interactions.
Example: Imagine your website loads a large JavaScript file without any optimization tags. This file can hinder the WordPress site’s performance, especially for users with slower connections.
Using the “async” tag allows the browser to download and process JavaScript without blocking the main thread.
However, for optimal TBT in WordPress sites, it’s better to “defer” JavaScript. With defer, the browser doesn’t pause while downloading.
Instead, it waits until the HTML file is fully processed before executing the JavaScript. This ensures the JS loads later in the loading process, minimizing disruptions to user interactions.
4) Reduce Page Size
Reducing the overall page size is always beneficial, as it reduces the amount of data that needs to be loaded. Elements contributing to page size include images, videos, extensive JavaScript, and third-party tools.
Example: Consider a webpage with numerous high-resolution images that are not optimized. Each image adds significant weight to the page, resulting in slower loading times.
Solutions for reducing page size include image compression, lazy loading, and adopting newer image formats like WebP.
Image compression retains image quality while decreasing file size. Lazy loading delays the loading of elements until users scroll to them, conserving resources.
5) Optimize CSS
For sites with substantial CSS, optimizing stylesheets can impact TBT. Most websites have CSS files under 200 kilobytes, which typically don’t significantly affect TBT.
Example: If your website’s CSS exceeds 300 kilobytes, it may contribute to TBT issues. Bloated CSS files can slow down rendering.
Tools like WP Rocket can help optimize CSS by inlining and compressing it. This minimizes the number of requests made by the browser, enhancing TBT.
6) Remove Unused JavaScript
- Go to the page or post you want to edit.
- Look at all the scripts that are loading on that page.
- If you see a script that’s loading but not actually used on that page, you can turn it off.
- You can turn it off just for this page, turn it off using some fancy code rules, or turn it off for all pages except this one, or specific pages or posts.
- You might need to do this for several pages or posts on your website, especially if they have different things loading that you don’t need.
7) Optimize Main Thread
The main thread is the primary thread of execution in a web browser. It handles tasks like rendering the page, executing JavaScript, and responding to user input. When the main thread is blocked, it can cause delays and impact the user experience.
So, optimizing the main thread improves the TBT. To do so you can split the code to make the browser process easy. Along the way, optimize additional JavaScript codes and fonts as well.
What is a Decent TBT in WordPress?
In general, for a satisfactory user experience, your web page’s Total Blocking Time score should be under 300 milliseconds. However, if your TBT score exceeds 300ms, it indicates the need for improvement.
Because when the Total Blocking Time on a browser’s main thread surpasses 300 milliseconds, users are likely to perceive significant delays while interacting with your webpage during its loading process.
According to Lighthouse metrics:
- 0–200 milliseconds: Green (fast)
- 200-600 milliseconds: Orange (moderate)
- Over 600 milliseconds: Red (slow)
So, a web page is considered to offer an excellent user experience when its Total Blocking Time (TBT) score is under 300 milliseconds.
When the TBT score falls within the range of 300 to 600 milliseconds, the page’s loading time is moderate and still acceptable. Yet, it’s recommended for a better TBT score for a smooth user experience.
If the TBT score is over 600 milliseconds, the loading time is slow. It leads to noticeable delays in user interactions with the webpage. This can result in a negative action of your website among users.
Now that we’ve established what constitutes an excellent TBT score, the next step should be to work on reducing the TBT score.
Before jumping into strategies for improving a web page’s Total Blocking Time score, let’s explore how TBT is measured.
How To Measure TBT?
According to Google, we should respond to a user’s input within 100 milliseconds to make sure the website feels responsive. 50MS would be better anyway.
The reason for this is, that there might be other tasks happening alongside the one handling the user’s input. For example, a short task might be running when the user makes their input.
So, we need to consider this extra 50 milliseconds (taken up by the ongoing task), which leaves us with only 50 milliseconds to respond to the user’s input.
To Identify the tasks individually and get the estimated TBT
It is indicated by the presence of red flags, in gray. Beneath each task, you’ll find a stack-like list of functions that trigger one another. You’ll spot them arranged top to bottom.
Click on these functions to access detailed information regarding the sections of code that’s responsible for any problems.
To add a special note, always count TBT after FCP (First Contentful Paint)
First Contentful Paint (FCP) is a performance metric used to measure the loading speed of a web page. It indicates the point in time when a user first sees any visual content rendered on the screen during the page load. This visual content can be anything, such as text, images, or graphics.
Additional Page Speed Metrics: TTI, FID, FCP
Time to Interactive (TTI)
It is a critical metric for ensuring a positive user experience on websites. Users today expect web pages to be responsive and interactive as soon as they arrive. A slow TTI can lead to frustration and dissatisfaction, potentially resulting in lost traffic.
It has implications for search engine ranking, as a high bounce rate is caused by slow TTI. It can harm a website’s visibility. Since TTI directly impacts user engagement and conversion rates, it is pivotal for success.
Faster TTI not only improves immediate user satisfaction but also encourages user retention, trust, and loyalty. Together they are vital for building a strong brand image. TTI serves as a measurable metric that aids in identifying and prioritizing performance issues.
Ultimately it is for enhancing the overall user experience. Improved TTI can have a positive effect on other performance metrics, such as page load times.
First Input Delay (FID)
FID, or First Input Delay, is like a stopwatch for how long it takes for a website to react when you try to click on stuff.
You know those times when a web page looks fully loaded, but when you click buttons or interactive things, nothing happens right away? Well, that’s what FID keeps track of.
Think of it as sitting between two other measurements: First Contentful Paint (when the page starts showing stuff) and Time to Interactive (when you can fully use the page).
FID measures the time between when the page first starts showing something (FCP) and when it’s ready to respond to your clicks and taps.
Let’s take a quick look at it:
Imagine you’re on a website, and you see the webpage is loaded with all its images and text. It looks complete, so you try to click on a button or a link and nothing happens. You have to wait a moment before it responds to your click.
That waiting time is what the FID metric is all about. It measures how long you have to wait between seeing the webpage and actually doing what you want when you click on it.
First Contentful Paint (FCP)
The First Contentful Paint (FCP) is the very first thing you see when you visit a webpage. FCP is one of the six performance measures that PageSpeed Insight uses Lighthouse to check.
It’s important because it can impact how users experience a website and how it performs in search engines, so it’s a good idea to make sure your FCP is fast.
To make it more clear, let’s dive into the example here: Imagine you’re browsing a news website. When you open an article, you might notice that the text and images appear on the screen gradually.
The very first thing you see, like the article’s title or logo, is the First Contentful Paint (FCP). It’s important for a good user experience and for how well the website ranks in search results.
So it’s essential to make sure the FCP happens quickly.
How to fix TTI, FID, and FCP on WordPress Website?
TTI
Optimize your code: Make sure your code is as efficient as possible. This includes minimizing the use of JavaScript, CSS, and images, and removing any unnecessary or redundant code.
Minimize HTTP requests: Reduce the number of HTTP requests by combining or minimizing files. This will help speed up the loading time of your page.
Reduce the size of resources: Compress images and other assets to reduce their size, and use modern image formats like WebP to improve performance.
Optimize server response times: Ensure that your server responds quickly to requests by using caching, reducing database queries, and using a faster server.
FID
To enhance FID (First Input Delay) scores for WordPress websites focus on optimizing performance. Start by deferring JavaScript parsing, delaying non-essential scripts until after the page loads.
Implement browser caching and compress HTML/CSS files to reduce load times.
Use cache control headers for efficient content caching and minimize file sizes through minification. Embrace lazy loading for images and inline critical CSS to enhance perceived loading speed.
Optimize your web server for improved performance and remove unnecessary plugins and third-party scripts that can slow down your site.
Lastly, automate these optimizations across your WordPress site for consistent improvements in FID scores. They are vital for providing a responsive and user-friendly web experience.
FCP
Creating website caching is essential to improve website performance. Caching involves storing a copy of your site to serve subsequent users, reducing the need to generate pages from scratch. This speeds up the First Contentful Paint (FCP) time.
Reducing Time to First Byte (TTFB) is critical for better FCP. TTFB, essentially server response time, effects FCP. Faster hosting providers or optimizing server response times can help.
Minimizing unnecessary JavaScript and CSS is crucial. Clear whitespace and useless code, and defer JavaScript loading to prevent content rendering delays.
Compress large logo images to an ideal size of 5-10 kb for better FCP.
Reducing the web page Document Object Model (DOM) size is essential. Lazy loading, organizing page sections, and removing unused CSS can help.
Fix 404 errors promptly to avoid FCP issues.
Avoid multiple page redirects as they slow down loading speed, especially affecting FCP. Minimize redirects to enhance website performance.
FAQ About how to reduce total blocking time in WordPress.
Final Thoughts
Reducing Total Blocking Time (TBT) in WordPress is not just a technical optimization. It is an important step towards improving your website’s user experience and search engine ranking.
By following the strategies and techniques outlined in this article, you can minimize TBT. It’ll ensure that your visitors have a seamless browsing experience. Since this optimization is an ongoing process.
Try to keep your website in a routine check. Remember, a faster website means a great user experience. Also, lower bounce rates, and improved SEO rankings.
It’s more than being better than the competitors rather, creating a user-centric online atmosphere.
About Author
Hi, I’m Abdullah – a WordPress performance, core web vitals expert dedicated to making sites fast. After 3 years of optimizing 150+ sites, I’ve cut page load times 50%+ and scored 90+ on PageSpeed.My passion is optimizing your WordPress site for lightning speed and an excellent user experience. With proven expertise in making sites blazing fast, I share tips to boost your site’s performance. Ask me anything! I’m here to help the WordPress community succeed online.