Eliminating Render-Blocking JavaScript and CSS on WordPress
Tags: wordpress, html, css, javascript
Published: 2020-02-28 15:33:37

<p>Outstanding loading speed is an essential website feature for a high ranking in <b>SERP </b>(<b>S</b>earch <b>E</b>ngine <b>R</b>esult Pages). <a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a> by Google is an excellent tool for precisely that - optimizing your website’s loading <a href="https://www.hostinger.com/tutorials/website-speed-test/">speed</a>. Let’s say you’re using this tool and get the “<b>Eliminate render-blocking JavaScript and CSS in above-the-fold content</b>” warning. No need to worry! In this tutorial, I will show you how to address the issue.<cut></p>
<h2>Understanding “Eliminate render-blocking JavaScript and CSS in above-the-fold content” Warning
</h2>
<p>While reading Google’s <a href="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/page-speed-rules-and-recommendations">PageSpeed rules</a>, you can see that “Eliminate render-blocking JavaScript and CSS” is one of the rules. Failing to do this will affect your website’s loading speed - slow it down. Now you’re probably wondering how can JavaScript and CSS make your website slower?</p>
<p>To put it simply, whenever you set up a new plugin or theme, they will enrich the front-end with new JavaScript and CSS code. Therefore browsers may take longer to load the webpage.</p>
<p><b>ATF</b> (<b>A</b>bove <b>T</b>he <b>F</b>old) is the part of your website that is visible after the first load. Any other part - anything you see after scrolling down is <b>BTF</b> (<b>B</b>elow <b>T</b>he <b>F</b>old).</p>
<p>This warning gets pretty clear now doesn’t it? If any irrelevant JavaScript and CSS are rendered when someone visits your website, you might receive a warning to decrease the range of render-blocking JavaScript and CSS in above-the-fold content.</p>
<h2>Discovering Render-Blocking JavaScript and CSS Using Google PageSpeed Insights</h2>
<p>To fix render-blocking, you should first test your website’s speed with <a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a>:</p>
<ol>
	<li>Go to the page, paste your website’s URL address in the “<b>Enter a web page URL</b>” field.</li>
	<li>Hit <b>Analyze</b> to get the results.

<p><i>Since most websites score around 50 to 70, this should help you measure your score. Also, Google will list recommendations to improve the performance of your site.</i></p>

<img src="https://habrastorage.org/webt/kr/n0/pz/krn0pzp487owxjn3g1pxoian0w8.png" />
        </li>
</ol>
<p>If you happen to discover the recommendation to remove render-blocking JavaScript and CSS in above-the-fold content, then I’d suggest you settle the issue.</p>

<img src="https://habrastorage.org/webt/lg/df/vo/lgdfvoakuvjdqw5dt5qghk_n8je.png" />

<p>Remember that your site doesn’t have to reach the maximum score, which is 100. Your goal is to try to receive a nice score without sacrificing UX.</p>
<p>Also, understand that you shouldn’t remove any scripts that are crucial for quality UX only to get a bit higher score on PageSpeed Insights.</p>
<p><i>The rules on which Google evaluates your site are only directions to consider for improving your website. In the end: use your own judgment!</i></p>
<h2>Solving the “Eliminate render-blocking JavaScript and CSS in above-the-fold content” Error</h2>
<p>It is really easy to diminish render-blocking JavaScript and CSS resources on WordPress websites. There are my three plugin recommendations that would help you fix the error:</p>
<h3>W3 Total Cache</h3>
<p>One of my favorite plugins: <a href="https://wordpress.org/plugins/w3-total-cache/">W3 Total Cache</a>. After you’ve finished installing and activating it follow these actions on your WordPress admin dashboard:</p>
<ol>
	<li><b>Performance </b>-> <b>General </b>Settings.</li>
	<li>Look for the Minify heading and you’ll see some choices below the heading.</li>
	<li>Check the “<b>Enable</b>” box for <b>Minify</b>. After that choose “<b>Manual</b>” for the <b>Minify mode</b>.</li>
	<li>Click the “<b>Save all settings</b>” button.  
<p><img src="https://habrastorage.org/webt/_m/_w/xz/_m_wxznesjdwjfy9ew11lcl3l4w.png" /></p>
<br/>
</li>
	<li>Retrieve all render-blocking JavaScript and CSS scripts. Google PageSpeed Insights will assist you in finding them.</li>
	<li>After finding the rogue script, find your way back to <b>Performance </b>-> <b>Minify</b>.</li>
	<li>Locate the <b>JS</b> intersects. Select the embed type<b> Non-blocking using “defer”</b> for the <b>Before &lt;head&gt;</b> tag in the <b>Operations in areas</b> section.</li>
	<li>Select your website’s active theme and push the “<b>Add Script</b>” button in the <b>JS file management</b> section. Copy the JavaScript URLs from the PageSpeed Insights and paste it on the provided fields.

<p><img src="https://habrastorage.org/webt/da/_y/bx/da_ybxfztox4_kqay1bm9sjtypk.png" /></p>
</li>
<li>Down below you’ll find the <b>CSS</b> segment. Now find the “<b>CSS file management</b>” part. Select your website's current theme and hit <b>Add a style sheet</b>. Like in the previous step, copy and paste the CSS stylesheets URLs from the Google PageSpeed Insights to the required fields.

<p><img src="https://habrastorage.org/webt/u2/zf/ql/u2zfql9ti71omppcguq81ltrygc.png" /></p>
</li>
<li>Lastly, hit the “<b>Save Settings & Purge Caches</b>”.</li></ol>

<h3>Autoptimize</h3>
<p>Another option would be using the plugin called <a href="https://wordpress.org/plugins/autoptimize/">Autoptimize</a> might also help in solving the render-blocking JavaScript and CSS error. Implement these actions on your dashboard after installing and activating the plugin:</p>
<ol>
	<li>Visit <b>Settings</b> -> <b>Autoptimize</b>.</li>
	<li>In the <b>JavaScript</b> and <b>CSS Options</b> sections individually tick the “<b>Optimize JavaScript Code?</b>” and “<b>Optimize CSS Code?</b>”.</li>
	<li>Hit “<b>Save Changes and Empty Cache</b>”.

<p><img src="https://habrastorage.org/webt/eg/ay/fk/egayfkxsynqs88f04qpm2kwdrt8.png" /></p>
</li>
</ol>
<p>To guarantee that the matter has been fixed, check your website on Google PageSpeed Insights once more. If the warning doesn’t appear, that’s great - you can move on! Otherwise, let’s try adding some additional optimizations:</p>
<ol>
	<li>Navigate to <b>Settings</b> -> <b>Autoptimize</b>.</li>
	<li>Click the “<b>Show Advanced Settings</b>”.</li>
	<li>Once there, find and tick both the “<b>Also aggregate inline JS</b>” and “<b>Also aggregate inline CSS</b>” selections.

<p><img src="https://habrastorage.org/webt/z3/sl/kq/z3slkqumcnmtsztkb6_1dofjlsw.png" /></p>
</li>
	<li>Save your adjustments.</li>
</ol>
<h3>Speed Booster Pack</h3>
<p>Last but not least - <a href="https://wordpress.org/plugins/speed-booster-pack/">Speed Booster Pack</a>. This plugin also may be effective in getting rid of render-blocking JavaScript and CSS error on your website. In order to do this with the mentioned plugin, you should follow these actions:</p>
<ol>
	<li>Navigate to the <b>Speed Booster Pack</b> segment and enter the <b>Advanced</b> tab.</li>
	<li>Find the <b>JavaScript Optimization</b> menu, activate <b>Move scripts to the footer</b> and <b>Defer parsing of Javascript files</b>.</li>
	<li>Find the <b>CSS Optimization</b> menu down below and enable the <b>CSS render-blocking optimization</b>.</li>
	<li>You will also see the extra options like <i>Inline all CSS, Minify all (previously) inlined CSS, Move all inlined CSS</i> into the footer. You can do some tests with these settings to reach appropriate results.
<p><i>By activating all of these settings, you will make your website load faster, although it could present an instance called <b>FOUC </b>(<a href="https://en.wikipedia.org/wiki/Flash_of_unstyled_content"><b>F</b>lash <b>O</b>f <b>U</b>nstyled <b>C</b>ontent</a>). To explain it shortly - it’s an occurrence when a website appears briefly with the browser’s default styles prior to loading an external CSS stylesheet due to the web browser engine rendering the page before all information is retrieved.</i></p>
</li>
</ol>
<p>Once you’ve tried the mentioned methods, try to run your website through Google PageSpeed Insights again to make sure that the render-blocking problem is solved.</p>
<h2>Conclusion</h2>
<p>Since search engines consider websites’ loading times when ranking results, it is one of the major elements in captivating and keeping visitors.</p>
<p><a href="https://developers.google.com/speed/pagespeed/insights/">Google’s PageSpeed Insights</a> gives the website a rating based on its loading speed. In a case where you’re testing your WordPress website and receiving the notorious “Eliminate render-blocking JavaScript and CSS in above-the-fold content” warning, you can efficiently resolve the problem with mentioned plugins!</p>