6 techniques to eliminate render blocking resources in WordPress

What are “render blocking resources” ?

JavaScript scripts and CSS stylesheets are examples of render-blocking resources because they prevent or delay the browser from displaying page content on the screen. These resources postpone the First Paint, or the moment when something (such as background colors, borders, text, or pictures) is rendered for the first time by your browser. Removing render-blocking resources can make your page load much more quickly and enhance the user experience on your website. In this Article I’ll show you 6 techniques to eliminate render blocking resources in WordPress.

How to eliminate render-blocking resources in WordPress ?

1. Find & Remove Unused JavaScript & CSS

Before you remove any CSS or JS Code I strongly recommend to clone the website and make a staging environment and try it there first then you can try it on your live website.

First you need to know How do you tell whether your pages contain any code that shouldn’t be there? There are several approaches to this.

a. Find Unused JavaScript & CSS

1. Speed Testing Tools

These incredible tools, including Google PageSpeed Insights, GTmetrix, and the Lighthouse Chrome Extension can help you find the unused JS and CSS

2. Browser Developer Tools

Using the browser developer tools is an additional choice. Open the tools in Chrome (using the menu, More Tools > Developer Tools, or Cmd/Ctrl+Shift+I), press Esc to reveal the drawer, and then choose Coverage from the three dots in the top left corner.

b. Remove Unused JavaScript & CSS

Removing Unused CSS and JavaScript With a WordPress Plugin

I recommend one of the following plugins

Asset Cleanup plugin, Jetpack Boost, and WP Rocket

Remove Unused CSS and JS in WordPress Without Plugins

Personally I prefer to remove the Unused CSS and JS without plugins

If you want to remove unused CSS entirely, you can use tools such as PurifyCSS, UnusedCSS, and UnCSS Online to find out how much CSS file size can be reduced. Once you get the CSS code you should eliminate, you have to remove it manually from the page.

and if you want to remove unused JavaScript using a code by making the following changes to your functions.php file:

/**
 * We will Dequeue the jQuery UI script as example.
 *
 * Hooked to the wp_print_scripts action, with a late priority (99),
 * so that it is after the script was enqueued.
 */
function wp_remove_scripts() {
// check if user is admin
	if (current_user_can( 'update_core' )) {
            return;
        } 
	else {
    // Check for the page you want to target
    if ( is_page( 'homepage' ) ) {
        // Remove Scripts
		wp_dequeue_style( 'jquery-ui-core' );
	    }
	}
}
add_action( 'wp_enqueue_scripts', 'wp_remove_scripts', 99 );

2. Avoid using @import rule in CSS

CSS @import is infamous for loading each imported file sequentially rather than in concurrently. In other words, instead of being able to load all of your CSS files at once, the visitor’s browser must wait for each imported file to load. The quantity of CSS files you import will determine how much this will slow down your website. Additionally, using @import to include additional CSS files generates additional HTTP requests for your visitor’s browser to handle.

Use a standard stylesheet link tag instead of @import

Use this in your HTML :

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=font"/>

3. Load custom fonts locally

By including custom fonts locally rather than downloading them from a content delivery network like Google CDN, you may lessen the effect they have on how a page first renders. Many of the @font-face rules added by font vendors are unnecessary.

4. Defer non-critical CSS

In order for the browser to render the page, CSS files must first be loaded and processed. Unnecessarily huge styles slow down the rendering of web pages.

5. Code Splitting and Refactoring

Code splitting is the practice of dividing up JavaScript bundles and transmitting only the initial, most-essential portions. Since a large portion of the JavaScript is supplied on demand, this lessens the initial load on the browser.

JavaScript module bundles like Webpack and Rollup either automatically break code into chunks or offer simple methods for doing so. Even some well-known frameworks, like Next.js and Gatsby, come pre-configured with Webpack.

Since the browser’s Main Thread is also responsible for reacting to user interactions, code splitting aids in rendering speed and interactivity. The better, the less JavaScript

Refactoring the code for your website is a difficult task that cannot entirely be automated. There isn’t a program that can completely rebuild the code of your website to create a new, high-performance version.

Because of this, some optimizations require more time and specialized knowledge but can result in significant speed improvements. The website can become much sluggish or even unresponsive with just one line of poor JavaScript code.

6. Compress and Minify Code Files

First, compression shrinks code files by applying a variety of methods. Compressed files are substantially lighter than the originals because they have different binary coding.

On the other side, minification eliminates unused components from the code, such as line breaks, comments, and whitespace. Although the decrease in file size is not as significant as with compression, the browser can still manage the final product better.

To summarize…..

This article covered 6 techniques to eliminate render blocking resources in WordPress. To sum it up:

Remove Unused JavaScript & CSS
Avoid using @import rule in CSS
Load custom fonts locally
Defer non-critical CSS
Code Splitting and Refactoring
Compress and Minify Code Files

Mo'tasem Odeh