Google looks for different factors on a website before ranking them on the top. There are various tools available to check these factors for a website. While checking for your website, sometimes you might see “Eliminate Render-Blocking Javascript and CSS”.
We are here with the solution to fix this warning on your WordPress website. We are going to share a complete guide to resolve “Eliminate Render-Blocking Javascript and CSS” on WordPress.
Why did you get the “Eliminate Render-Blocking Javascript and CSS” warning?
If you have ever tested your website on Google PageSpeed Insights, it is a specified rule over there. If your website doesn’t comply with this rule, it is said to have issues in the speed as well.
Whenever you install a plugin or theme on your WordPress website, It comes with different javascript & CSS files for its functionality. This puts a burden on the website & because of this, the website speed decreases. Any browser will consume more time & data to load such websites.
How to find Eliminate Render-Blocking Javascript and CSS in above-the-fold content” warning?
Well, It is easy to check if your website is facing a similar type of issue. You can check if there is any similar warning on your website by testing its page speed. Google PageSpeed Insight is a great option to check the page speed of your website.
- Firstly, visit the Google PageSpeed Insight website.
- Enter your website URL in the field which says “Enter a Web page URL”.
- Now, Click on Analyse and wait for the results to appear.
- Once you see the result of your webpage speed, look for the warnings.
- It will show you various warnings that you can fix on your website.
- Check all the warnings and see if there is something which says “Eliminate Render-Blocking Javascript and CSS in above-the-fold content”. If you see this warning, you will need to fix it.
There are multiple suggestions available there on the page speed insights page. It is not necessary to get 100 Score by making poor User Experience of your website. You should never force your website to get 100.
How to Fix Eliminate Render Blocking Javascript and CSS in above-the-fold content on WordPress
It is easier to fix this issue if you are using WordPress as your CMS. You don’t require to do any major changes to your website. There are already great resources available on WordPress to fix this issue on your website.
1. W3 Total Cache
This is the first plugin that we are going to use. This is one of the most popular plugins from this list. If you have the plugin already installed on your website, skip the installation steps, and continue.
- Go to the WordPress dashboard of your website
- Then Click on Plugins > Add New Plugins
- Search for W3 Total Cache. Install the plugin
- Activate the plugin that you just installed.
- Now, navigate to the WordPress dashboard
- Click on Performance and then select General Settings
- Now, look for an option named as Minify. Under this section, you will see a lot of settings.
- Click on the checkbox to Enable the Minify option.
- In the Minify mode, select Manual instead of Automatic.
- Click on Save All Changes
- Now, open the Google Pagespeed Insights. Look for the Render-Blocking Javascript and CSS scripts under the warning.
- Once you get a clear idea about what is causing the issue, come back to the Minify option from the Performance tab on WordPress.
- Now look for the JS Minify settings. From the Operation in Areas section, select the ‘Non-blocking using “defer”’ option in the “Before </head> settings.
- Under JS file management settings, choose the theme that is currently active on your website. Now click on Add Script.
- Now copy the javascript URLs that were shown on Google PageSpeed Insight page.
- Paste the javascript URLs in the fields under JS File Management settings.
- Now, navigate further to see CSS settings.
- Under CSS File Management settings, again choose the theme that is currently active on your website.
- Now, click the “Add a Stylesheet” button.
- Again copy the CSS URLs from the Google PageSpeed Insight page under the warning.
- Paste the CSS URLs in the fields under CSS File Management Settings
- Click on Save Changes & purge all the cache using the same plugin.
2. Autoptimize
Now, it is time for another plugin in action. We are going to use the Autoptimize plugin on the WordPress website. It is also available on the WordPress library. Follow these steps in order to use this plugin for fixing the warning on your website:
- Navigate to your WordPress Dashboard. Click on Plugins > Add New Plugin
- Search for Autoptimize. Install and activate this plugin.
- Once done with the installation, click on Settings and then select Autoptimize.
- Now, you will see checkboxes against Optimize Javascript Code & Optimize CSS Code. You need to tick on both of these options.
- Once you have clicked on both the checkbox, click on Save Changes and Empty Cache.
The issue must have been resolved till now. You might not see any warning regarding Render-Blocking Javascript and CSS scripts on your website. However, some themes or plugins might still create the issue & resulting in the warning for your website.
- Navigate to the Settings > Autoptimize again.
- Click on “Show Advanced Settings”
- Now, click on the checkbox against “Also Aggregate Inline Javascript”.
- Similarly, click on the checkbox against “Also Aggregate Inline CSS”
- Once you have clicked on both of these boxes, click on Save Changes.
3. Speed Booster Pack
This is also a great plugin that you can use for optimizing your WordPress website. As the name suggests, It helps in boosting the speed of your website as well. We just need it for optimizing the Javascript and CSS that are causing the warning.
- Firstly, Navigate to the WordPress dashboard. Click on Plugins > Add New Plugin
- Search for Speed Booster Pack. Install & Activate the plugin on your website.
- Now, Navigate to the settings of Speed Booster Pack.
- Click on Advanced button from the settings
- From the Javascript Optimization settings, Click to toggle on Move Scripts to the Footer and also toggle Defer parsing of Javascript files
- Now scroll down to see the CSS Optimization settings.
- You will see the toggle to Inline all CSS, Minify all (previously) inlined CSS, Move all inlined CSS into the footer.
- You can enable different toggles at different times & check if the issue is resolved. You just have to ensure that the Google PageSpeed Insight does not show any warning regarding the same.
Let’s Conclude
That is how you can fix “Eliminate Render Blocking Javascript and CSS in above-the-fold content” warning on WordPress. We have tried to go as deep as we could. These are some of the most widely used methods to resolve the same warning from different sources.
That was all about this one. If you have tried any of the above methods, share your experience with us if you were successful or not to fix the warning. Follow us on Social media platforms to get the latest updates.
Happy Fixing😉!!
