How to remove resources blocking rendering of your WordPress website

How to remove resources blocking rendering of your WordPress website



Have you ever finished creating a WordPress website and loved everything? So you quickly started hating it after realizing it takes forever to charge? Slow loading speeds are not only a hassle for you and your visitors, but they can also cost you significantly when it comes to SEO. Since 2010, Google algorithms took into account upload speed in sorting decisions, so slow pages appear lower in the results pages. You may be familiar with the common culprits for poor page performance: excessive content, uncompressed image files, insufficient hosting, and lack of caching, to name a few. But, there is another perpetrator at play that is often overlooked: processing blocking resources.

  <h2>What are processing lock resources?</h2>

    Render blocking facilities are pieces of code in website files, usually CSS and JavaScript, that prevent a web page from loading quickly.  These resources take a relatively long time for the browser to process, but may not be necessary for the immediate user experience.  Resources that block processing can be removed or delayed until the browser needs to process them.  Don't get me wrong, CSS and JavaScript are great.  Without CSS, websites would be plain text walls.  Without JavaScript, we would not be able to add dynamic, interactive and attractive elements to our websites.  But, if run at the wrong time, both CSS and JavaScript can affect the performance of your website.  Here's why: When a web browser first loads a web page, it parses all of the HTML on the page before displaying it on screen to a visitor.  When the browser finds a link to a CSS file, a JavaScript file, or an inline script (that is, JavaScript code in the HTML document), it pauses the HTML parsing to find and run the code, slowing everything down.  If you have <a rel="nofollow noopener" target="_blank" href="https://academy.hubspot.com/courses/website-optimization">optimized your page performance</a> on WordPress and still having issues, resources blocking processing may be to blame.  Sometimes it is important to run this code on the first load, but most of the time it can be removed or pushed to the end of the queue.  In this post, we will show you how to remove this annoying code from your WordPress website and increase its performance.




  <h2>How to remove resources blocking rendering in WordPress</h2>



          Identify the resources that are blocking processing.  Remove resources that are blocking processing manually or with a plug-in.  Run a site scan again.  Check your website for errors.

1. Identify the resources that are blocking processing.

Before making any changes, you must first locate the render blocking resources. The best way to do this is with a free online speed test like Google PageSpeed ​​Insights tool. Paste your site URL and click Analyze. When the scan is complete, Google assigns your website an aggregate speed score, from 0 (slowest) to 100 (fastest). A score in the range of 50 to 80 is average, so you will want to land at the top of this range or above it. To identify the files that are blocking rendering and slowing down your page, scroll down to Opportunities, then open the Delete Resources Blocking Processing accordion.

Image source
You will see a list of files that slow down the “first paint” of your page; These files affect the loading time of all the content that appears in the browser window at the initial page load. This is also called “top half of page” content. Make a note of files that end with the .css and .js extensions, as these are the ones you’ll want to focus on.

2. Remove the rendering-blocking resources manually or with a plug-in.

Now that you have identified the problem, there are two ways to fix it in WordPress: manually or with a plugin. We will cover the plugin solution first. Various WordPress plugins can reduce the effect of render blocking resources on WordPress websites. I will cover two popular solutions, Autoptimize and W3 Total Cache.

How to remove resources blocking rendering with the Autoptimize plugin

Self-optimize is a free plugin that modifies your website files to deliver faster pages. Autoptimize works by adding files, minimizing code (that is, reducing file size by removing redundant or unnecessary characters), and delaying the load of resources that block processing. Since you are modifying the backend of your site, remember to be careful with this plugin or any similar plugin. To remove resources that block processing with Autoptimize: 1. Install and activate the Autoptimize plug-in. 2. From your WordPress dashboard, select Settings> Automatic optimization. 3. Under JavaScript Options, check the box next to Optimize JavaScript code ?. 4. If the box appears next to Add JS files? is checked, uncheck it. 5. Under CSS Options, check the box next to Optimize CSS code ?. 6. If the box appears next to Add CSS files? is checked, uncheck it. 7. At the bottom of the page, click Save changes and empty cache. 8. Scan your website with PageSpeed ​​Insights and see if there are any improvements. 9. If PageSpeed ​​Insights still reports JavaScript files blocking rendering, go back to Settings> Automatic optimization and check the boxes next to Add JS files? and added CSS files?. Then click on Save Changes and Empty Cache and scan again.

How to remove resources blocking processing with the W3 Total Cache plugin

W3 total cache is a widely used caching plugin that helps address lagging code. To remove JavaScript blocking processing with W3 Total Cache: 1. Install and activate the W3 Total Cache plugin. 2. A new Performance option will be added to the WordPress dashboard menu. Select Performance> General Settings. 3. In the Minify section, check the box next to Minify, then set the Minify mode to Manual. 4. Click Save All Settings at the bottom of the Minify section. 5. From the dashboard menu, select Performance> Minify. 6. In the JS section next to JS minify settings, make sure the Enable box is checked. Then, under Operations in areas, open the first Keying Type drop-down menu and choose No blocking using “defer”. 7. In JS file management, choose your active theme from the Theme drop-down menu. 8. Review the PageSpeed ​​Insights results from your previous analysis. For each item in Remove processing-blocking resources ending in .js, click Add a script. Then copy the full URL of the JavaScript resource from PageSpeed ​​Insights and paste it into the File URI field. 9. Once you have pasted all the rendering blocking JavaScript resources reported by PageSpeed ​​Insights, click Save Settings and Purge Caches at the bottom of the JS section. 10. In the CSS section next to CSS minification settings, check the box next to CSS minification settings and make sure the Minify method is set to Combine & Minify. 11. In CSS file management, choose your active theme from the Theme drop-down menu. 12. For each item in the Remove render blocking resources ending in .css in the PageSpeed ​​Insights scan results, click Add a stylesheet. Then copy the full URL of the CSS resource from PageSpeed ​​Insights and paste it into the File URI field. 13. Once you’ve pasted in all render-blocking CSS resources reported by PageSpeed ​​Insights, click Save Settings and Purge Caches at the bottom of the CSS section. 14. Scan your website with PageSpeed ​​Insights and see if there are any improvements.

How to manually remove the JavaScript render block

Plugins can handle the backend work for you. On the other hand, the plugins themselves are just more files added to your web server. If you want to limit these additional files, or if you just prefer to handle the programming yourself, you can address the JavaScript blocking processing manually. To do this, locate the