Owning a website means keeping it in tip-top shape and making sure it’s as pleasing to your visitors, customers, and even those crawlers that Google employs to check your site.
But don’t worry, in this article, we’ll talk about how we can address these issues and give you the best options on how to fix them.
Let’s get started.
Generally speaking, the browser needs to load a queue of JS, CSS, and HTML files before the user can see the main content. Now, if you have too many of these JS scripts which will delay the main HTML content from loading. This, in turn, slows down your website and forces the users to wait.
You see, people don’t like to wait. If a site takes over 3 seconds to fully load, then it can suffer from an 11% bounce rate. The number goes up to 38% if your site’s loading time is more than 5 seconds.
With more people bouncing off your website eventually search engines like Google will move your site further down their search results leading to less traffic and less people on your site.
The general rule of thumb is to keep your site’s code as minimal and clean as possible. Also, make sure that the content above-the-fold (the part of your website visible to your visitors right away) loads unhindered.
But first, let’s check out the things that we can do manually, that is, if and only if you already know what you’re doing. Since changing these files, especially on WordPress can undeniably break your site, we’d advise caution.
Now, if the external scripts are small, you can directly use them in your HTML document. This removes the network request latency completely.
Here is an example of how to do this.
Let’s say your HTML document contains an external JS file –
And let’s assume that anotherSource.js contains the following JS code:
All you need to do is copy the JS code from the second source and paste it to your original document like this:
It’s a simple technique that removes the need to send an external request for anotherSource.js thereby improving your loading time.
However, do note that inlining the JS will result in increased file size which in turn will increase the loading time. So only inline small JS files.
If you see a large file with multiple pages of JS, then refer to one of the other solutions.
Therefore, one way to resolve the issue is to defer the JS loading such that it loads after the critical parts of your website has finished loading. This can help prevent resource contention and improve performance.
Now, one of the ways to defer JS loading is to move it to the footer. This can be done manually, or you can use one of the plugins listed below.
Asset CleanUp is a free WordPress plugin that scans all your WordPress posts and pages and detects all JS and CSS files that are loaded. It then gives you the option to disable the JS and CSS files that are not necessary, thereby removing the extra load.
Not only that, but the plugin can also help minify and combine the JS/CSS files to make it shorter and easier (quicker) to load.
Here is a step by step guide on using the plugin:
Step 1: Log in to your WordPress Dashboard. Then from the left-hand sidebar, go to Plugins > Add New. Search for the Asset CleanUp plugin and hit the Install Now button followed by Activate.
Step 2: Now, again from the left-hand sidebar, navigate to Asset CleanUp > CSS/JS Load Manager. Here you will find all your website content starting from the homepage, to posts, pages, and custom post types. Select the one that you want to optimize.
Step 3: Selecting one of the options will show you all the active CSS/JS files running on the webpage. You can now selectively deactivate the files that you don’t need to reduce the load during website rendering.
Step 4: Once done, click Update and move to the next page, post, or custom post type and repeat step 3.
Note: The plugin also comes with a built-in Test Mode. First, deactivate the JS files in the test mode to make sure it doesn’t break your website.
2. WP Rocket
Step 1: Install and activate WP Rocket on your WordPress website. Since it is a premium plugin, you can’t install it from the WordPress plugin repository. After purchasing the plugin, you will get to download it in a .zip file.
Now, log in to your WordPress dashboard, Plugins > Add New and click on the Upload Plugin option. Now simply choose and upload the plugin to your website and activate it.
Step 2: Once done, go to Settings > WP Rocket. Here you will find all the options available with WP Rocket.
Another awesome Speed optimization plugin we would like you to try out is Hummingbird. It is a free feature-packed plugin with options to help you with caching, minification, deferring critical JS and CSS files, lazy loading and much more.
Step 1: Install and activate the Hummingbird plugin on your WordPress website.
Step 2: After activating the plugin, you should notice a new “Hummingbird” option added to the left-hand sidebar of your WordPress dashboard. You will need to go to Hummingbird > Asset Optimization.
Step 3: Now, as shown in the image below, Enable Advanced Mode in order to move the JS files to the footer.
Step 4: Now simply select the JS files that are causing the render-blocking issues and move them to the footer.
This should defer their loading time and allow the content above-the-fold to load up unhindered.
However, if you are still facing problems, then don’t hesitate to mention them down in the comments below. Our team or one of our fellow readers will surely help you out.