Website loading speed is the most important factor to attract and collect visitors. If the website’s performance is no problem, it will attract more users.
We're your Core Web Vitals Developers!
We will fix the core web vitals issue on reported URL's then submit them until they are in the 'Green' section..
Core Web Vitals are becomes ranking factors for search results form May 2021. So search engines consider Site Speed and User Experience to rank a Website in search results. So, if you want to compete in terms of SEO, then prioritize the speed of your site.
Measuring website speed may not necessarily run smoothly. Many reasons might affect how you check the speed of your website, from internet connection speed to geographic location.
This is where you can take advantage of Google’s PageSpeed Insights. This service is provided free of charge to determine a website’s score based on its loading speed.
When using PageSpeed Insights, of course you want to get the highest score possible. However, it turned out to be not as easy as one thought.
Many things need to be improved, one of which is Eliminate render-blocking JavaScript and CSS.
Here are some explanations of what Eliminate render-blocking JavaScript and CSS are and how to work around them.
What does Eliminate render-blocking JavaScript and CSS mean?
Render-blocking means loading. So, if Javascript is blocking, it means that Javascript is holding the page from loading. Google itself recommends removing Javascript which can interfere with loading your web page content.
To understand these instructions further, we must look at Google’s criteria for scoring sites on PageSpeed Insights. There are ten rules regarding website loading speed that have been set by Google, and if you fail to apply any of these rules, it will result in a reduction in points or scores.
Render-blocking is one of these ten rules. In particular, JS and CSS scripts make web browsers delay loading HTML pages. Of course, you don’t want this.
No one wants to see unorganized content. However, render-blocking JS and CSS refer to those scripts, which carry loading latency but are not used in above-the-fold (ATF) content.
ATF content refers to the part of the web page that is visible when the page loads. So, through this guide, Google would like to inform you that there are JS and CSS scripts on this web page that perform unnecessary slowdown of the web page.
Then how to fix Error Eliminate render-blocking JavaScript and CSS in above-the-fold content? You can use Google PageSpeed Insights to identify render-blocking scripts.
Then, you can use 3 different methods to fix this Eliminate render-blocking JavaScript and CSS Error on your WordPress site.
Ways to Eliminating render-blocking JavaScript and CSS
JS and CSS are the most important things for any website to function in all parts. However, poor performance will always exist. There are several ways you can make your site faster, such as defer ( defer ) JavaScript parsing.
However, sometimes that just isn’t enough. To solve this problem, all you need to do is look for various possibilities for improvement.
There are 3 best WordPress plugins to Eliminate render-blocking resources:
1. Core Web Vitals & PageSpeed Booster Plugin
Our next way to Eliminate render-blocking resources like Javascript and CSS is using Core Web Vitals & PageSpeed Booster plugin.
This plugin has decent features and options to optimize your website for CWV. Plugin developers continuously update this plugin to make it more effective and up to date with the WordPress version.
Here are some great features of this plugin:
- Webp images: Page speed insight shows us an error in the opportunity section while checking the page speed of our website, that is ” Serv next-gen images”. From the next-gen image formats, Webp is one of the low-weight formats. With the help of this feature, you can convert your website’s image formats to Webp format in clicks.
- Lazy Load: Lazy loading can make your website fast effectively and improves website performance. With this feature, you can implement lazy loading to your images and videos.
- Minification: Website loading time totally on your website or page size. With the minification feature, you can reduce website file size easily. Minification removes white spaces, lines, and unnecessary characters from the source code.
- Remove Unused CSS: Unused CSS code or files can be found in your theme and plugin database. Especially this feature helps fix Eliminate render-blocking resources error. JavaScript and CSS Removing this unused CSS from any website can significantly improve website performance and page speed.
- Google Fonts Optimizations: Everyone uses Google fonts to make their website more beautiful. But using Google fonts affects your website speed and core web vitals. With this google fonts optimization feature, you can optimize and load google fonts locally.
- Delay JavaScript Execution: What if your website loads only necessary things or the user needs it? With this feature, you can delay JavaScript based on user interaction. When the user scrolls down and is about to interact with your website, it will load javascript at that time.
- Cache: We have to say that Caching is one of the important parts of optimizing your website for speed and core web vitals. So this plugin also has this cache feature that makes it more useful.
One of the best thing about this plugin is that it is free to use and have active development.
2. W3 Total Cache
After knowing the render-blocking code on the website. You can download a plugin that makes things easy when dealing with this kind of error. One of those plugins is W3 Total Cache. follow the steps below.
- Go to Performance – General Settings. Look for the Minify heading on the page.
- Under the heading, there will be several options. The first option is Minify; check the Enable box next to that option.
- In Minify mode, select Manual, and click the Save all settings button.
- At this point, you should remove all JS and CSS scripts that are causing render-blocking. You can find these two scripts through Google PageSpeed Insights. If you don’t close the PageSpeed tab as suggested in Step 1, then you’ll find the clickable Show how to fix text under the render-blocking instructions. Click the text. After that, all lists containing the render-blocking scripts and stylesheets can be identified.
- Back to WordPress. Go to Performance -> Minify. You have to minify both JS and CSS files separately.
- First, let’s look at JS. On that page, look for the JS heading. Then you will see the Operations in areas section. Select Non-blocking using defer as the embed type for the before <head> tag.
- Under the JS file management sub-heading, select the active theme and click the Add Script button. Then copy ( copy ) the JS URL from the PageSpeed tab, and paste ( paste ) the scripts one by one. This step repairs the JS file.
- Now it’s time to tackle the CSS. On this page, scroll down to find the CSS section. Under the CSS file management sub-heading, select the active theme and click Add a style sheet. As with any JS script, copy/paste ( copy/paste ) the stylesheet from PageSpeed Insights into this section.
- Finally, click on the Save settings and then the Purge Cache button.
Watch the below-given video to learn how to eliminate render-blocking resources with W3 Total cache:
Return to the Google PageSpeed Insights page to check if the render-blocking has been resolved.
3. Autoptimize
Another easier step to solve the render-blocking issue is to use another plugin called Autoptimize. Download and install the plugin.
After the Autoptimize plugin installation process is complete, go to the Settings -> Autoptimize menu in WordPress. Check the box for Optimize Javascript Code? and Optimize CSS Code? and click the Save Changes and Empty Cache button.
Generally, this method is sufficient to solve the rendering-blocking problem (depending on the active theme and plugin). To find out if this method works, then open your site via PageSpeed Insights one more time.
If you want to optimize further, then go back to Settings -> Autoptimize. Click the Show Advanced Settings button. Check Also aggregate inline JS and Also aggregate inline CSS.
Then, finish by clicking on Save changes and Empty Cache. To see if this step worked, open PageSpeed Insights again.
When the technical part comes to the task, most people prefer video or visual content. So below given video will help you to learn how ho remove render-blocking resources like CSS and Java Scripts in WordPress using Autoptimize plugin:
Conclusion
Render-blocking negatively affects the speed and performance of a WordPress website. And as you know core web Vitals becomes a ranking factor, so a good website speed is matters.
In this WordPress tutorial, you’ve learned how to work around Eliminate render-blocking JavaScript and CSS in above-the-fold content on a website. If you think you can’t do it then don’t worry, Our professional developers are here for your help.
We have a development team that fixes CWV (Core Web Vitals) errors significantly for our clients for highest Website Speed and Performance. So drop us a message or see our Affordable Pricing if you’re struggling with Core Web Vitals stuff, and we’ll fix all Core Web Vitals errors for you.
If you enjoyed this article, Don’t forget to share it.
Really very useful information given by you. this article is really amazing and very useful. I learned a lot of things from this post. the article is nicely explained and easy to understand. thanks for sharing this valuable information with us. keep your the good work.
Thanks for your kind words.