Gone are the days, you can simply have a website to attract users. Nowadays, you need to focus on speed optimization in order to stay on top of the Google search results. Though there are many speed optimization issues you can face, render blocking resources is the most popular one. Many bloggers and webmasters struggle to fix render blocking resources in WordPress. In this article, we will explain how you can fix the issue and improve the page speed. Also, learn how to fix render blocking issue with Jetpack Devicepx script.
What is Render Blocking?
Whenever you open a webpage, the browser tries to render the page by getting data from web server. In other words, you can call this rendering as a visualization of webpage on the browser’s frontend. Unfortunately, some components on the webpage can block the rendering of a webpage on browser. This will result in delaying and user needs to wait till the time the component is completely loaded. After the blocking components or resources are loaded, users can see the above the fold content visually.
In summary, any resources that blocks rendering of above the fold content of a webpage on a browser is called render blocking resources.
Render Blocking Issue in Google PageSpeed
Since render blocking resources delay the loading time of a visual content, you have to fix the issue to improve the page loading speed. You can view all render blocking resources in Google PageSpeed Insights tool when testing a page.
Render Blocking Resources
There are multiple resources that can block rendering of your webpage:
- CSS – depending upon your site’s setup, sometime CSS can also delay the loading and result in render blocking. This generally happens when you use heavy bloated theme or plugin.
Fixing Render Blocking Resources in WordPress
- For CSS, you can find the blocking part and inline the styles in the header to eliminate the issue.
Free Plugin Options
What you have to do is to click on the dropdown and select one of the non-blocking options. You have three non-blocking options with W3 Total Script:
- Non-blocking using JS
- Non-blocking using “async”
- Non-blocking using “defer”
You have to test the site’s layout and find which option is working for you. In most cases, the async option should work fine.
Make sure to click on “Save Settings & Purge Caches” to delete the cache when you test the layout. Learn how to check whether W3 Total Cache is working on your site or not.
Similarly, scroll down and enable “Optimize CSS Code?” option under “CSS Options” section.
Click “Save Changes and Empty Cache” button.
Paid Plugin Options
Fix Render Blocking CSS with WP Rocket
First, purchase WP Rocket plugin from their website. After uploading and activating WP Rocket plugin, go to “File Optimization” section.
Enable “Optimize CSS Delivery” under “CSS Files” section. This will help you to generate critical CSS and load with above the fold content. It can help you to increase the page speed score drastically and fix eliminate render blocking resources for CSS. You can generate above the fold critical CSS for each pages separately if required when you are in Gutenberg or Classic editor. The latest WP Rocket version also recommends to use remove unused CSS option to fix render blocking CSS issues.
With many other options available, WP Rocket is the easy way to fix render blocking resources issue in WordPress.
Use Perfmatters Plugin to Fix Render Blocking Issues
If your hosting company provides caching plugin or server level caching, then WP Rocket and Autoptimize plugins will be redundant. In this case, you can go for Perfmatters plugin which helps to remove all the bloating codes from your WordPress site. This plugin does not offer caching and other related options like minification or combining files. You can generate used CSS and delay JavaScrip execution to fix render blocking CSS and JS issues in Google PageSpeed Insights tool. After installing and activating the plugin, go to “Settings > Perfmatters > Assets” section. Enable “Delay JavaSscript” and “Remove unused CSS” options and customize the settings as per your requirements.
The best part of Perfmatters is that it also offers a Script Manager to disable CSS and JS files on per post basis. You can use this feature to disable plugins on site wide or per post and improve the page loading speed.
Do I Need to Fix the Issue Mandatorily?
Remember, as Google PageSpeed indicates “Eliminate render-blocking resources” is an opportunity to improve the loading time. However, it does not directly affect the page speed score. Therefore, it is not always necessary to fix the issue. This is especially true for all jQuery based themes. In addition, WordPress also supplies jQuery as part of the core files and hence deferring it will break the layout in many cases. Similarly, inlining CSS will cause more trouble though it will fix render blocking issue. Here, you can use WP Rocket and generate critical CSS with single setting.
Therefore, first make sure to test whether you site works perfectly and the user experience is good. Even though Google shows render blocking issues, you can safely ignore them as there will be no impact on the speed score with that.