Sunday, January 23rd, 2022

How to Remove Render-Blocking JS and CSS for Site Speed

While the aesthetics of a website is important, its content and loading speed keep people coming back. WordPress supplies 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 creates them automatically as script files. They are often poorly optimized. As such, they can significantly slow down your website.

This can be frustrating for readers. Thus, in this guide, we will figure out how to find and remove these render-blocking scripts and show you how to increase the loading speed of your WordPress website.

What are render-blocking JS and CSS scripts and why are they bad?

Most web pages on the Internet are made up of three major components: JavaScript, CSS, and Hypertext Markup Language. HTML serves as the base, while JavaScript and CSS are built-in to it. However, these days, it is more traditional to embed calls to external scripts in an HTML document.

These scripts are placed 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 looking at the source code is to download it from your (Ctrl+S) web browser. The web browser will download the HTML document along with a folder that will contain all (or most) scripts, images, and other files used by the web page.

The more complex scripts your webpage has to call from the queue, the longer it will take to render. Often, web browsers will download web page resources such as scripts and images into a local cache to make web pages load faster. While client-side users can speed up web page rendering times by disabling JavaScript, increasing the cache size, and using adblockers, this is not an ideal solution. The responsibility should be on the web developer.

If you receive complaints or notice that your website has problems serving 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 script to eliminate or optimize, you should assess the speed of your website or web page. You can use online platforms like GTmetrix or Google’s PageSpeed ​​Insights. All you need to do is enter the URL of the website or webpage you want to test, and the tool will grade it and provide other information.

They will also suggest audits that you can use to make your website faster. For example, they will offer that you use fewer elements in your webpage or minimize unused CSS and JavaScript. GTmetrix will show you which scripts need to be optimized.

Coverage tab of Chrome DevTools

Alternatively, you can use the Coverage tab of Chrome DevTools to show usage data for your scripts. Once you identify which scripts are sub-optimal, you can do a few things to fix them. However, implementing these steps successfully will require considerable coding skills. You will need at least a basic understanding of functional JavaScript programming.

It’s also a good idea to join a coding tutorial course (or bootcamp) to help you develop your skills further. On average, a coding bootcamp can take up to fifteen weeks to complete, and while it may seem like a long time, it’s worth it when you consider that basic code literacy is an important skill in the modern world. Nevertheless, here are five ways to fix render-blocking scripts and increase your webpage speed.

1. Optimize load orders

major section ,) is used for pre-loading elements of the web page. The foundation of your web page should be here, so a white screen doesn’t greet the user when they load your web page. While embedded CSS is fine, you should avoid having JavaScript in here.

Once you have customized the head section, you need to customize the body. Most web browsers render web pages from top to bottom. You need to call the scripts according to their importance and complexity. You should be calling scripts that are not critical to the final rendering of the web page, as well as complex scripts that take time.

2. Minify Code

Minifying code involves rewriting it and removing unnecessary characters such as white spaces, 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 for your web page.

Plugins and tools like W3TC have modules that minify the JavaScript and CSS in your theme. Alternatively, you can manually minify your script code with a free online tool such as JavaScript Minifier.

3. Use Deferred and Asynchronous Loading of JavaScript

Web browsers read code from top to bottom. When they find a script tag, they stop loading the web page and read the script file. This slows down rendering.

you can use asynchronous Attribute to load scripts parallel to the web page and execute it as soon as it becomes available. Alternatively, you can use defer The characteristic of postponing the analysis of scripts. This means that it will also load the script parallel to the web page but execute it only when the browser parses the web page.

We recommend that you do not use asynchronous Or defer Attributes on scripts used to render and display visual elements. The JavaScript keywords are equivalent to these attributes: asynchronous And Wait keyword. You can use them to load your JavaScript more asynchronously without editing the HTML tags on your web page.

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 lacked basic UI tools such as controls and sliders.

Then CSS 3 came along. It introduced new colors, box shadows, opacity, etc. JavaScript is great for adding complex user interface controls. However, JavaScript is heavy on resources compared to CSS.

Thus, using an excessive amount of JavaScript slows down your website significantly. If you notice that your web page is using JavaScript to take up Slack where previous versions of CSS fell flat, you should replace it and replace all unnecessary JavaScript with CSS — where you can. Huh. This will allow web pages to load faster.

5. Remove All Unnecessary Scripts

The purpose of JS and CSS is to extend functionality and add logic to web pages where HTML cannot. However, HTML 5.3 has come with new tags that will make some CSS and JS operations unnecessary. Using HTML instead of script naturally makes your web pages load faster.

Thus the best way to optimize your website speed is to eliminate all less used scripts. You have to analyze which scripts are completely unnecessary and remove them. Again, you can use Chrome DevTools’ Coverage tab or GTmetrix to find the least used scripts on your web page and then remove them.

Once you remove all unnecessary functions or tags, you can add scripts that have similar functions. If you already know how to tweak your way around the source code of your web page, this shouldn’t be a difficult task for you. However, users who are not as experienced or knowledgeable in web design should not fret. WordPress makes it easy for you to identify scripts on your website and edit them using various customization plugins. We will cover them further.

6. Using Plugins to Optimize Your WordPress Website

Again, you don’t need a working knowledge of programming to optimize your WP website. Although some experience would help. Nevertheless, there are a variety of plugins designed for script optimization. Some of them use AI to minify code, change load order, and replace less used scripts with more efficient code and scripts.

Some of the best plugins for script optimization include:

  • WP Rocket: It is one of the most popular plugins for web optimization. It can automatically detect which scripts are problematic and fix them for you. You can use it for quick caching, diff, compression and minification.
  • customize yourself: It can suspend and terminate non-essential scripts, integrate inline CSS, and minify scripts, HTML, and images. Auto-Optimization is highly customizable through an open API and advanced options.
  • W3 Total Cache: A bit of work is required to use this plugin. You must manually track and detect them before deleting or editing the script. In most cases, this plugin is already available with your WordPress package.
  • async javascript: An open-source plugin offered by WordPress. This allows you to detect render-blocking JavaScript and then defer or load it asynchronously.

So why didn’t we just recommend plugins in the first place? Unfortunately, some of these plugins will cost you. For example, Autoptimize costs $49 per year. While this is a reasonable fee, it may not be ideal for those who are already paying a large portion for hosting and other applications and plugins.

Still, whether you’re using plugins or finding scripts manually, you need to understand concepts like minification, asynchronous loading, and load order. This will make it easier for you to troubleshoot any loading issues if one of your scripts fails.

Source link