Although the aesthetics of a website are important, its content and loading speed keep people coming back. WordPress provides users with a sophisticated toolbox of plugins and themes to quickly create their own customized websites.
However, these themes and plugins require JavaScript (JS) and Cascading Style Sheets (CSS) to work. WordPress automatically creates them as script files. They are often poorly optimized. As such, they can slow down your website considerably.
This can be frustrating for your readers. Therefore, in this guide, we will explore how to find and remove these rendering-blocking scripts and show you how to increase the loading speed of your WordPress website.
What are JS and CSS rendering-blocking scripts and why are they harmful?
Most web pages on the Internet are composed of three key components: JavaScript, CSS and Hypertext Markup Language. HTML serves as the base , while JavaScript and CSS are embedded in it. However, these days, it is more conventional to embed calls to external scripts in the HTML document.
These scripts are kept in a queue that your web browser uses to render the web page. The easiest way to see what scripts a web page uses without reading the source code is to download them from the web browser (Ctrl + S). The web browser will download the HTML document along with a folder with all (or most) of the scripts, images, and other files used by the web page.
The more complex scripts your web page has to call from the queue, the longer it will take to render. Web browsers often download web page resources such as scripts and images into a local cache to load web pages faster. Although client-side users can speed up web page rendering times by disabling JavaScript , increasing cache sizes, and using AdBlockers, this is not an ideal solution. The responsibility should lie with the web developer.
If you receive complaints or have noticed that your website is having problems displaying its content, it is not too late to fix it.
How to optimize your website by finding and fixing rendering-blocking scripts
Before deciding which scripts to terminate or optimize, you need to evaluate the speed of your website or web page. You can use an online platform such as GTmetrix or Google PageSpeed Insights. All you will be asked to do is enter the URL of the website or web page you wish to test, and the tool will evaluate it and provide other insights.
These tools will also suggest audits that you can use to make your website faster. They will suggest, for example, that you use fewer elements in your web page or reduce unused CSS and JavaScript. GTmetrix will show you which scripts need to be optimized.
Alternatively, you can use the Coverage tab of Chrome DevTools to view your script usage data. Once you have identified which scripts are suboptimal, you can do several things to fix them. However, these steps will require some code knowledge to implement them successfully. You will at least need a basic knowledge of functional JavaScript programming.
Taking a coding course (or bootcamp) is a good idea to further develop your skills. On average, a programming bootcamp can take up to fifteen weeks to complete, and although it may seem like a lot , it is worth it when you consider how basic code literacy is an important skill to have in the modern world. However, here are five ways to fix rendering-blocking scripts and increase the speed of your web page.
- Optimize the loading order
The head section ( ) of the web page is used for preloading elements. The base of your web page should go here, so a blank screen does not greet the user when loading your web page. Although embedding CSS here is fine, you should avoid embedding JavaScript.
Once you have optimized the head section, you need to optimize the body of the page. Most web browsers render web pages from top to bottom. You need to sort calls to scripts according to their importance and complexity. You should make calls to scripts that are notfundamental to rendering the web page last along with complex scripts that take time.
- Minimize code
Code minimization involves rewriting and eliminating unnecessary characters such as whitespace, comments, commas, line breaks, etc. This makes the code more concise and compact, which ultimately reduces the size of the script and increases the loading time of your web page.
Plugins and tools such as WP Rocket have modules that minimize JavaScript and CSS in your themes. Alternatively, you can manually minimize your script code with a free online tool such as JavaScript Minifier.
- Use deferred and asynchronous loading of JavaScript.
Web browsers read code from the top down. When they encounter a script tag, they stop loading the web page and read the script file. This slows down the rendering of the page.
You can use the ‘async attribute to load the script in parallel with the web page and execute it as soon as it is available. Alternatively, you can use the defer attribute to defer script parsing. This means that it will also load the script in parallel with the web page, but will only execute it when the browser parses the web page.
It is recommended not to use the async or defer attributes on scripts used for rendering and displaying visual elements. The JavaScript keywords equivalent to these attributes are the keywords async and await . You can use them to load your JavaScript asynchronously without changing the HTML tags on your web page.
- Replace JavaScript visual elements with CSS3.
In the past, CSS was not as versatile as it is today.CSS 1.0 and 2.0, for example, lacked UI tools such as basic controls and sliders.
Then CSS3 came along. It introduced new colors, box shadows, opacity, etc. JavaScript is great for adding complex controls to the user interface but is heavier than CSS.
Therefore, using an excessive amount of JavaScript slows down your website considerably. If you notice that your web page is using JavaScript to do the job where previous versions of CSS have failed, you should modify it and replace all unnecessary JavaScript with CSS where you can. This will allow web pages to load faster.
- Eliminate all unnecessary scripts
The purpose of JS and CSS is to expand functionality to web pages and add logic where HTML cannot. However, HTML 5.3 came with new tags that would make some CSS and JS operations unnecessary. Using HTML instead of scripts speeds up the loading of your web pages.
So the best way to optimize the speed of your website is to eliminate all underutilized scripts. You will have to analyze which scripts are completely unnecessary and remove them. Again, you can use the Coverage tab of Chrome DevTools or GTmetrix to find the most underutilized scripts on your web page and then remove them.
After removing all unnecessary functions or tags, you can combine scripts whose functions are similar. If you already know how to mannipulate the source code of your web page, this should not be a difficult task for you. However, users who are not so experienced or knowledgeable in web design should not worry. WordPress makes it easier for you to identify scripts on your website and modify them using various optimization plugins that we will see in a moment.
- Use plugins to optimize your WordPress website.
Once again, you do not need a working knowledge of programming to optimize your WordPress website. although some experience would help. However, there is a range of plugins geared toward script optimization. Some of them use artificial intelligence to minimize code, change the loading order and replace underutilized scripts with more efficient code and scripts.
Some of the best script optimization plugins include:
- WP Rocket : This is one of the most popular plugins for web optimization. It can automatically detect which scripts create problems and fix them for you. You can use it for quick caching, compression and minimization.
- Autooptimize : can defer and delete non-essential scripts, integrate inline CSS and minimize scripts, HTML and images. Autoptimize is highly customizable via an open API and advanced options.
- W3 Total Cache : This plugin requires some work to use. You will have to manually track and identify scripts before removing or modifying them. In most cases, this plugin is already available with your WordPress package.
- Async JavaScript : an open source plugin presented by WordPress. It allows you to detect JavaScript that blocks rendering and then resend or load it asynchronously.
So why didn’t we simply recommend plugins right away? Because, some of these plugins require an investment. For example, Autoptimize costs $49 per year. While this is a reasonable rate, it may not be ideal for those who are already investing a large sum of money for hosting, other applications, and plugins.
However, regardless of whether you are using plugins or found the scripts manually, you need to understand concepts such as minimization, asynchronous loading, and loading order. It will make it easier for you to troubleshoot any loading problems if one of your scripts fails.