How to improve speed by removing render-blocking JS & CSS

Although the beauty of a website is important, its content and loading speed will make people look back. WordPress provides users with a sophisticated toolbox of plugins and themes to quickly create their own custom websites.

However, these themes and plugins require JavaScript (JS) and Cascading Style Sheets (CSS) to work. WordPress automatically creates them in the form of script files. They are usually not well optimized. Therefore, they will greatly reduce the speed of your website.

This may frustrate the reader. Therefore, in this guide, we will explore how to find and remove these render-blocking scripts, and show you how to improve the loading speed of your WordPress website.

What are JS and CSS scripts that prevent rendering, and why are they bad?

WordPress script

Most web pages on the Internet consist of three key components: JavaScript, CSS, and Hypertext Markup Language. HTML As a base, And JavaScript and CSS are embedded in it. However, nowadays, it is more traditional to embed calls to external scripts in HTML documents.

These scripts are stored in the queue used by the web browser to render the web page. The easiest way to see which scripts a webpage uses without looking at the source code is to download it from the (Ctrl + S) web browser. The web browser will download HTML documents and folders containing all (or most) of the scripts, images, and other files used by the web page.

The more complex the script that your page must call from the queue, the longer it will take to render. Generally, web browsers download web resources such as scripts and images in the local cache to load web pages faster.Although client users can speed up web page rendering time in the following ways Disable JavaScript, Increase the cache size and use AdBlockers, this is not an ideal solution. The responsibility should be borne by the web developer.

If you receive a complaint or notice that your website has problems rendering its content, it’s not too late to fix it.

How to optimize your website by finding and fixing render blocking scripts

Before deciding which scripts to terminate or optimize, you must evaluate the speed of your website or webpage. You can use online platforms such as GTmetrix or Google’s PageSpeed ​​Insights. All you need to do is insert the URL of the website or webpage you want to test, and the tool will score it and provide additional insights.

They will also suggest reviews that you can use to speed up your website. For example, they will recommend that you use fewer elements in your web pages or reduce unused CSS and JavaScript. GTmetrix will try to show you which scripts need to be optimized.

Coverage tab of Chrome DevTools

Or you can use Coverage tab of Chrome DevTools Show you the utilization data of the script. Once you have determined which scripts are suboptimal, you can do something to fix them. However, these steps require considerable coding to be successfully implemented. You need at least a basic understanding of functional JavaScript programming.

Taking a coding tutorial course (or bootcamp) is also a good idea to help further develop your skills.On average, coding bootcamp may require 15 weeks to completeAlthough this may sound long, it is well worth it when you consider that basic code literacy is an important skill in the modern world. However, here are five ways to fix render blocking scripts and improve web page speed.

1. Optimize loading order

Head part () Is used to preload elements. The basis of your web page should be placed here, so when the user loads your web page, the white screen will not greet the user. Although embedded CSS is great, you should avoid putting JavaScript here.

Once you optimize the head part, you need to optimize the body. Most web browsers render web pages from top to bottom. You need to sort script calls according to their importance and complexity. You should put calls to scripts that are not important to web page rendering and complex scripts that require time at the end.

2. Minify the code

Minifying the code involves rewriting it and removing unnecessary characters such as spaces, comments, commas, newlines, etc. This makes the code more concise and compact, ultimately reducing the size of the script and increasing the load time of the web page.

Plug-ins and tools such as W3TC have modules that can reduce the JavaScript and CSS in the theme. Alternatively, you can use free online tools such as JavaScript Minifier to manually minify the script code.

3. Use JavaScript’s delayed and asynchronous loading

The web browser reads the code from top to bottom. When they encounter the script tag, they will stop loading the web page and read the script file. This will slow down the rendering speed.

you can use it asynchronous The attribute loads the script in parallel with the web page and executes it as soon as it is available.Or you can use put off Attribute to postpone the parsing of the script. This means that it will also load the script in parallel with the web page, but only execute it when the browser parses the web page.

We recommend that you do not use asynchronous or put off The attributes of the script used to render and display visual elements.The JavaScript keywords equivalent to these attributes are asynchronous with wait Key words.You can use them to Load your Javascript more asynchronously No need to edit HTML tags on web pages.

4. Replace JavaScript visual elements with CSS3

In the past, CSS was not as versatile as it is today. For example, CSS 1.0 and 2.0 did not have UI tools like basic controls and sliders.

Then CSS 3 appeared. It presents new colors, box shadows, opacity, etc. JavaScript is great for adding complex user interface controls. However, compared with CSS, Javascript is heavier in terms of resources.

Therefore, using too much JavaScript can significantly slow down your website. If you notice that your web page is using JavaScript to make up for the shortcomings of the previous version of CSS, you should change it and replace all unnecessary JavaScript with CSS—if you can. This will make the page load faster.

5. Eliminate all unnecessary scripts

The purpose of JS and CSS is to extend functionality to web pages and add logic where HTML cannot be implemented. However, HTML 5.3 brings new tags, which will make some CSS and JS operations unnecessary. Using HTML instead of scripts will naturally make your web pages load faster.

Therefore, the best way to optimize website speed is to eliminate all underutilized scripts. You need to analyze which scripts are completely unnecessary and delete them. Similarly, you can use Chrome DevTools’ Coverage Tab or GTmetrix to find underutilized scripts on your web pages and delete them.

After removing all unnecessary functions or tags, you can combine scripts with similar functions. If you already know how to deal with the source code of a web page, then this shouldn’t be a difficult task for you. However, users who have no experience or knowledge in web design should not worry. WordPress makes it easier for you to identify scripts on your website and edit them with various optimized plugins. We will introduce these next.

6. Use plugins to optimize your WordPress site

Likewise, you don’t need a working knowledge of programming to optimize your WP website. Although some experience will help. Nevertheless, there are a series of plugins optimized for scripts. Some of them use AI to shrink code, change the load order, and replace underutilized scripts with more efficient code and scripts.

Some of the best plugins for script optimization include:

  • WP Rocket: This is one of the most popular webpage optimization plugins. It can automatically detect which scripts have problems and fix them for you. You can use it for fast caching, compliance, compression, and reduction.
  • Automatic optimization: This can postpone and eliminate unnecessary scripts, integrate inline CSS and shrink scripts, HTML and images. Autooptimize can be highly customized through open APIs and advanced options.
  • W3 total cache: This plugin requires some work to use. Before deleting or editing the script, you need to manually track and identify the script. In most cases, this plugin is already provided with your WordPress package.
  • Asynchronous JavaScript: Open source plugin provided by WordPress. It allows you to detect JavaScript that is blocking rendering, and then delay it or load it asynchronously.

So why don’t we recommend plugins in the first place? Unfortunately, some of these plugins will cost you. For example, the annual cost of Autooptimize is $49. Although this is a reasonable fee, it may not be ideal for people who have already paid a lot of money for hosting and other apps and plugins.

Nevertheless, whether you are using plugins or manually looking for scripts, you need to understand concepts such as minification, asynchronous loading, and loading order. If one of your scripts fails, it will make it easier for you to resolve any loading issues.