How to reduce total blocking time in WordPress
Are you tired of watching that little loading circle spin endlessly while your site struggles to load? Fret not, because today we’re diving into the world of Total Blocking Time (TBT) in WordPress, and I’m here to guide you step-by-step on your journey to a lightning-fast website.
Total Blocking Time is the nemesis of seamless browsing experiences, and it’s high time we put an end to it.
In simple terms, TBT measures the time your browser spends doing nothing while waiting for long tasks to complete, like parsing JavaScript or rendering images.
The higher the TBT, the slower your site feels to users, and nobody likes a sluggish site, right?
So, buckle up and get ready to supercharge your WordPress site as we explore the ins and outs of reducing Total Blocking Time, and unlock the full potential of your online presence. Trust me, your visitors (and Google’s ranking algorithm) will thank you!
Before making any changes, make sure to create a complete backup of your WordPress website. This will allow you to revert to a previous state if anything goes wrong during the process.
7 easy ways to reduce total blocking time in WordPress
- Minifying CSS and JS
- Update PHP Version
- Limit HTTP Requests
- Remove jQuery
- Limit web fonts
- Optimize database queries
- Choose a lightweight theme
Minifying CSS and JS
Minifying CSS and JS files can help reduce your website’s total blocking time and improve performance. In WordPress, you can achieve this by following the steps below:
Step 1: Backup Your Website
Always keep backup of your website.
Step 2: Choose a Minification Plugin
There are several WordPress plugins available for minifying CSS and JS files. Some popular choices include:
Choose the one that best suits your needs and is compatible with your WordPress theme and other plugins.
Step 3: Install and Activate the Plugin
After selecting the plugin, install it by navigating to your WordPress dashboard, clicking on ‘Plugins’ > ‘Add New’, and searching for the chosen plugin. Once found, click ‘Install Now’, and then ‘Activate’.
Step 4: Configure the Plugin Settings
Each minification plugin has its own settings, but they generally involve enabling CSS and JS minification. Navigate to the plugin settings page in your WordPress dashboard, and enable the options for minifying CSS and JS files. You may also find options for combining files, which can help further reduce blocking time.
Step 5: Test Your Website
After configuring and saving your settings, visit your website and ensure everything is working correctly. Check your website’s appearance and functionality to make sure no issues have arisen due to minification.
Step 6: Measure Performance Improvements
Use tools like Google PageSpeed Insights, GTmetrix, or WebPageTest to measure the performance improvements after minifying your CSS and JS files. Check the total blocking time, and compare it with the previous value to confirm the optimization has been successful.
Step 7: Troubleshooting
In case of any issues, such as broken layouts or missing functionality, disable the minification plugin, and identify the problematic files. You may need to manually minify these files or exclude them from the minification process. If necessary, consult the plugin’s documentation or support forums for further assistance.
Update PHP Version
Step 1: Backup Your Website
Always create a complete backup of your WordPress website before making any changes.
Step 2: Check Current PHP Version
Log into your WordPress dashboard and navigate to ‘Tools’ > ‘Site Health’ > ‘Info’ > ‘Server’. You will see the current PHP version listed there.
Step 3: Check WordPress and Plugin Compatibility
Make sure your WordPress version and all active plugins are compatible with the latest PHP version. You can check the compatibility by visiting the plugin/theme pages in the WordPress repository or their respective websites.
Step 4: Contact Your Hosting Provider
Ask your hosting provider to update the PHP version for your website, or follow their guidelines if they provide a self-service option.
Step 5: Update the PHP Version
Once your hosting provider has updated the PHP version or provided you with the necessary information, follow the steps to update the PHP version. This process may vary depending on your hosting provider and control panel.
Step 6: Test Your Website
After updating the PHP version, visit your website and ensure everything is working correctly. Check the appearance and functionality of your website to ensure no issues have arisen due to the PHP update.
Limit HTTP Requests
Step 1: Combine CSS and JS Files
Using a minification plugin like Autoptimize or W3 Total Cache, combine multiple CSS and JS files into single files to reduce the number of HTTP requests.
Step 2: Use a Content Delivery Network (CDN)
A CDN can help distribute your static assets, like images, CSS, and JS files, across multiple servers, reducing the number of HTTP requests made to your server.
Step 3: Optimize Images
Use image optimization plugins like WP Smush or EWWW Image Optimizer to compress images and reduce their file size, which in turn reduces the number of HTTP requests.
Step 4: Use CSS Sprites
Combine multiple small images, like icons, into a single image (CSS sprite) and use CSS to display the appropriate section of the image. This will reduce the number of HTTP requests for image files.
Step 5: Remove Unnecessary Plugins and Widgets
Deactivate and delete unnecessary plugins and widgets to reduce the number of HTTP requests generated by these components.
Limit web fonts
Too many custom fonts can slow down your site. Stick to a few essential fonts and, when possible, use system fonts. You can use the ‘font-display’ CSS property to control how custom fonts are loaded and rendered.
To limit web fonts and reduce total blocking time in WordPress, follow these steps:
Step 1: Identify the web fonts in use
Analyze your site to identify which web fonts are being used. Use browser developer tools, such as Chrome DevTools, or online tools like Google PageSpeed Insights or WebPageTest to get an overview of the fonts being loaded.
Step 2: Choose necessary fonts
Review the web fonts in use and decide which ones are necessary. Keep only the fonts that are essential for your design, and remove or replace the others with system fonts.
Step 3: Optimize font files
Convert your font files to modern formats like WOFF2, which offer better compression and faster loading times. You can use online tools like Google Fonts or Font Squirrel to generate optimized font files.
Step 4: Self-host fonts
Host the fonts on your own server to avoid relying on third-party servers, which can lead to increased loading times. Download the font files and upload them to your WordPress server.
Step 5: Load fonts asynchronously
Use a plugin like “Autoptimize” or “Async JavaScript” to load your fonts asynchronously, which helps to reduce total blocking time.
Step 6: Preload important fonts
Add the ‘rel=”preload”‘ attribute to the important font files in your HTML to prioritize their loading. This will help reduce the time it takes for the browser to load and render these fonts.
Optimize database queries
Regularly clean up and optimize your database using plugins like WP-Optimize or WP-Sweep. This process removes unnecessary data and optimizes database tables, improving query performance.
Choose a lightweight theme
Opt for a well-optimized, lightweight theme that doesn’t rely on excessive features or bloated code. Themes like GeneratePress, Astra, or Neve are known for their fast performance.
What’s Next
And there you have it! Now that we’ve covered the ins and outs of reducing total blocking time in WordPress, it’s time to put those newfound skills into action.
Remember, speed matters more than ever in today’s digital landscape. By following these steps and remaining committed to optimizing your WordPress site, you’ll not only reduce total blocking time but also keep your visitors engaged and coming back for more.
So, buckle up and get ready to watch your website soar into the fast lane!
