Introduction:
Slow page load times are a big issue for WordPress sites. One important metric to monitor is Total Blocking Time (TBT), which measures how long a page is blocked from responding to user input during load.
A high TBT indicates performance problems that negatively impact the user experience. Users are frustrated by slow response times, and high blocking times increase bounce rates.
Optimizing TBT should be part of any WordPress performance tuning strategy. In this post, we’ll dig into what TBT means, and I’ll share five proven ways to reduce it in WordPress.
What is total blocking time?
Total blocking time is a metric that tracks how long a page is non-interactive during load. It measures the total amount of time from the initial navigation until the DOM is loaded and the page responds to input.
TBT identifies performance bottlenecks such as slow servers, uncached pages, and unoptimized assets that block interaction. The lower the TBT, the faster the page will become interactive and usable for visitors.
Google recommends a TBT under 1.5 seconds on mobile and 3 seconds on desktop. Higher values indicate optimization opportunities. You can measure TBT with tools like PageSpeed Insights and WebPageTest.
5 Ways to Reduce TBT in WordPress
Here are 5 effective ways to lower total blocking time and speed up your WordPress site:
1. Use a Caching Plugin
Caching plugins like WP Rocket and WP Fastest Cache are the most impactful ways to reduce TBT in WordPress. They save rendered pages, so full PHP and database processing are avoided on each request.
Most caching plugins include options specifically optimized for TBT, like separating CSS and JS from HTML caching. This allows the HTML to render quickly while assets load async.
2. Minify CSS, JavaScript, and HTML.
Minification strips out unnecessary characters from code like CSS, JavaScript, and HTML to reduce file size. This makes static assets lighter and faster to load, directly improving TBT.
Plugins like Autoptimize can automatically minify and combine assets for you. Make sure to enable options like “optimize JS/CSS delivery” to prevent render blocking.
3. Optimize Images
Large, unoptimized images significantly slow down page load and increase blocking time. Using EWWW Image Optimizer or ShortPixel to compress images helps.
Converting images to next-gen formats like WebP further reduces size with better compression. Removing unused images also improves TBT.
4. Defer Offscreen Images
Images outside the visible area upon load still block rendering. Defer them with a plugin like Rocket Lazy Load, which displays a placeholder first and then loads images asynchronously as they scroll into view.
This prevents offscreen images from blocking and lowers TBT. Used with caching, deferred lazy loading provides a huge boost.
5. Upgrade to PHP 7.4+.
Newer PHP versions, like 7.4 and 8.0, have faster request processing and improved object caching. This makes backend scripts like WordPress code execute more efficiently.
If you’re on an older PHP version, ask your host to upgrade for reduced TBT. Use PHP 7.4 or 8.0 for maximum WordPress performance.
Conclusion:
Optimizing total blocking time should be part of your WordPress performance approach. By following these 5 tips, you can eliminate bottlenecks and deliver faster, more interactive pages to users.
Check your TBT reports to find problem pages. Then utilize caching, minification, image optimizations, deferred loading, and PHP 7.4+ to reduce blocking and improve site speed.
For more in-depth WordPress performance advice, check out this excellent resource from TechVirtuosity: how you can reduce your total blocking time for you WordPress website
