WordPress: Remove resources that block rendering | Necessity

There are currently 810 million people Websites using WordPressaccording to Recent research by Colorlib. These numbers are staggering, but they show no signs of slowing down.

The same study shows that 500 new sites are built on WordPress every day. To put that in perspective, this number equates to just 60-80 new sites per day on platforms like Squarespace and Shopify.

WordPress is popular for a reason. It is an easy-to-use platform that anyone can use to start a blog or business. Additionally, a library of plugins gives users nearly unlimited functionality on their site. However, this plugin’s library can also cause problems.

Google is open about the fact that page speed is an important ranking signal for SEO. This is because the speed at which a page loads is directly related to the overall user experience.

Your site may need to be adjusted to reach a page speed level that is acceptable to Google. One adjustment that Google typically requests is to remove JavaScript rendering blocking in WordPress.

Identifying resources that block rendering

The first step in learning how to remove render-blocking resources in WordPress is to identify what these resources are. This process is not difficult, but it does require the use of some website analysis tools.

Google Chrome’s DevTools provides three options for identifying rendering-blocking resources: These three tools are:

Lighthouse uses resources that block rendering.[機会]tab, but only if these resources are causing problems on your site.[機会]Select a tab to flag render-blocking resources and see a brief description of the problem they caused, along with suggestions on how to fix it.

PageSpeed ​​Insights and GTmetrix are platforms that use Lighthouse’s libraries to measure some of Google’s ranking factors such as page speed, Core Web Vitals, etc. These list “Eliminate Render Blocking Resources” as one of the site’s solutions, but it is listed as a low priority.

Although the platform may claim it is a low priority, it will list the individual files causing the problem and provide detailed solutions.

Common rendering block resources

Typically, in the WordPress world; The term “render blocking resource” refers to JavaScript or CSS..

Not all CSS or JavaScript files block rendering, but most site speed issues are caused by both sources. Additional rendering block resources include:

• HTML import
• CSS style sheet

Although HTML imports are less common, it’s still important to be aware of them. Even though these are legacy technologies, they may still be present on many older websites.

How to remove rendering-blocking resources in WordPress

Now that you have a little background on why it’s important to remove render-blocking JavaScript in WordPress, let’s take a look at a step-by-step process to speed up your WordPress site.

Step 1: “Minify” your CSS and JavaScript files

Reducing the amount of CSS and JavaScript files that run your website is the first step here. This can be achieved by reducing the amount of unnecessary white space and comments in your website’s code.

Step 2: Connect CSS and JavaScript

This process may sound more complicated than it actually is. All concatenation means combining the appropriate .css and .js files to compress the amount of space they consume. You probably only have a few files to concatenate within your website’s code, so there’s no need to overdo it.

Step 3: Defer JavaScript loading

You can configure JavaScript files to fire after all other elements on your web page. One common way to do this is a more advanced topic called asynchronous loading, which we’ll cover later.

These three steps complete the process of how to remove rendering-blocking JavaScript in WordPress without using plugins. The same steps apply to CSS files.

These steps are very simple, but can be difficult to do manually in WordPress. This is mainly due to the nature of WordPress plugins. Each front-end plugin on your site may be running multiple, unique CSS and JavaScript files.

WordPress provides a list of all JavaScript and CSS files across plugins in one place. Although this makes your life easier, the easiest way to remove render-blocking resources is with a plugin.

Eliminate render-blocking CSS and JavaScript resources using WordPress plugins

WordPress plugins are great tools that provide all kinds of functionality to your site, especially in the e-commerce world. However, many of these plugins also provide solutions to technical issues with your website, such as page speed or removing resources that block rendering.

Here is a list of some popular plugins and tools you can use to eliminate render-blocking resources and speed up your site pages.

1. Jet pack

Installing JetPack Boost on your site gives you all the tools you need to remove render-blocking resources and optimize page speed. JetPack Boost includes a toggle switch that allows you to easily turn on CSS optimization and defer non-essential JavaScript directly from the plugin settings.

Although it is not a rendering-blocking resource, it can also defer non-essential images, which can improve overall site speed. Additionally, JetPack Boost provides an overall score for his website and allows you to monitor how changes affect your site.

2.JCH optimization

WordPress users need to be a little more tech-savvy with this plugin than others, but it can help speed up your pages. JCH Optimize improves speed by reducing the number of HTTP requests required to load a web page.

Plugins are also useful when: Optimize images for your WordPress site Via a sprite generator. This feature combines large site images into mini “sprites” that are easier to load in the browser.

Unfortunately, JHC Optimize requires a paid subscription, but at $29 per month, over 10,000 WordPress users feel it’s worth the money.

3. Speed ​​Booster Pack

This plugin’s features help remove clutter, optimize CSS, and enable “lazy loading” of website elements. The development team keeps the plugin up to date and integrates with WooCommerce to help e-commerce users.

Setting up a free plugin properly may require quite a bit of “trial and error”, but there’s no need to be left alone. One of the biggest benefits of Speed ​​Booster Pack is its support. The development team offers three hands-on, professional-level support packages to help you configure Speed ​​Booster Pack to suit your site’s specific needs.

4.WP Rocket

WP Rocket offers several features to help you remove rendering-blocking resources. Optimize your WordPress site for speed. Plugins help you:

• Defer remote JavaScript queries
• Perform CSS and JavaScript minification
• Implement “lazy loading” of images

Although this plugin provides an easy setup process for WordPress, some users may not like the changes it makes to the WP dashboard. If you’re used to a traditional WordPress setup, it might take some getting used to. Regardless of the interface changes, the plugin continues to provide functionality and tools to remove render-blocking resources.

WP Rocket costs $49 per year to run as the primary plugin. You can also add some free extra features from the WordPress plugin library.

4. Automatic optimization

Autoptimize has a unique way to compress images to improve site speed. The plugin does this by converting all images to her WebP format. Additionally, Autoptimize offers all the basic render-blocking tools you can imagine, including CSS and JavaScript minification and script caching features. The Autoptimize plugin is Async JavaScript plugin.

This plugin works with PageSpeed ​​Insights to specifically optimize for issues identified by that platform. Setting up Autoptimize can be a little complicated, but once users get used to the interface, they’ll come to appreciate the features Autoptimize has to offer.

This plugin is available for purchase in two versions. The custom configuration version costs $165 and the expert configuration version, which comes with expert reviews on the website, costs $667.

Advanced techniques to eliminate rendering-blocking resources

For those who want to go a step further and have more control over the removal of render-blocking resources within their WordPress site, there are several manual methods that can be implemented.

Asynchronous and lazy loading of JavaScript and CSS files

Adding JavaScript to WordPress (or CSS) allows you to add “async” or “defer” attributes within your website’s code. Assigning this marker to certain files tells your website to treat those files as non-essential and signals your browser to display them separately from other important files on your site.

To assign asynchronous loading to a specific script, add “