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
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
Fixing 404 errors is critical for improving site speed and overall user experience.
4) Reduce Page Size
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.
- 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
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?
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.
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.
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.
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.
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.
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.