{"id":5175,"date":"2019-12-04T08:02:01","date_gmt":"2019-12-04T08:02:01","guid":{"rendered":"https:\/\/www.hostinger.com\/tutorials\/?p=5175"},"modified":"2025-04-23T09:42:03","modified_gmt":"2025-04-23T09:42:03","slug":"how-to-eliminate-render-blocking-javascript-and-css","status":"publish","type":"post","link":"\/uk\/tutorials\/how-to-eliminate-render-blocking-javascript-and-css","title":{"rendered":"How to Eliminate Render-Blocking JavaScript and CSS on WordPress"},"content":{"rendered":"

Having a website that loads fast is crucial if you want to rank high in search engine result pages (SERP). That’s why website speed testing tools are there to help you optimize your site. If you’re getting an “Eliminate render-blocking JavaScript and CSS in above-the-fold content<\/strong>” warning while using the tool, fret not. In this article, we’ll be showing you how to fix the issue.<\/p>

Download all in one WordPress cheat sheet<\/a><\/p>

\n\n\n\n\n\n\n<\/p>

Getting to Know “Eliminate render-blocking JavaScript and CSS in above-the-fold content” Warning<\/h2>

If you look at Google’s PageSpeed rules<\/a>, eliminating render-blocking JavaScript and CSS is one of them. Any failure in that will result in a slower page loading speed. But how can JavaScript and CSS on your HTML page slow down your site?<\/p>

Well, every time you install a plugin<\/a> or a new theme, they add a JavaScript and CSS code to the front-end. As a result, browsers may need more time to load the page.<\/p>

Above-the-fold (ATF) means the part of your webpage that is visible when the page first loads. Any part of the page that you have to scroll down to reach is non-ATF.<\/p>

So, if non-relevant JavaScript and CSS code are rendered when visitors load your website, you might get a warning to reduce the number of render-blocking JavaScript and CSS in above-the-fold content resources.<\/p>

Finding Out Render-Blocking JavaScript and CSS Using Google PageSpeed Insights<\/h2>

The first step in fixing render-blocking is testing your site’s speed using Google PageSpeed Insights<\/a>. Follow these steps to do so:<\/p>

    \n
  1. Visit the page, and paste your website’s URL in the “Enter a web page URL<\/strong>” field.<\/li>\n\n\n\n
  2. Click Analyze<\/strong> to get the report.<\/li>\n<\/ol>
    \n
    \"Google<\/a><\/figure><\/div>

    \n\n

    \n

    Pro Tip<\/h4>\n

    Most sites score between 50-70; this should serve as a benchmark for your score. Google will also list suggestions to improve the performance of your website.<\/p>\n <\/div>\n\n\n<\/p>

    \n
    \"Google<\/a><\/figure><\/div>

    If you also find the suggestion to eliminate render-blocking JavaScript and CSS in above-the-fold content, then you will need to fix the issue.<\/p>

    Keep in mind that you should not force your website to score a perfect 100. Just try your best to get a good score without sacrificing user experience.<\/p>

    If there are scripts on your WordPress site that are essential for a robust UX, you shouldn’t remove them just to get a slightly higher score on PageSpeed Insights.<\/p>

    \n\n\n

    \n

    Pro Tip<\/h4>\n

    The rules on which Google scores your websites are merely guidelines and should be taken as such.<\/p>\n <\/div>\n\n\n\n<\/p>

    Fixing “Eliminate render-blocking JavaScript and CSS in above-the-fold content” Error<\/h2>

    With WordPress, reducing render-blocking JavaScript and CSS resources on your WordPress site is easy. You can use the three plugins we’ve listed below:<\/p>

    W3 Total Cache<\/h3>

    One of our favorites is the W3 Total Cache<\/a> plugin. Once it’s installed and activated, follow these steps on your WordPress admin dashboard<\/a>:<\/p>