Having a website that loads fast is crucial if you want to rank high in search engine results pages (SERPs). That is why it helps you optimize the loading speed of your site. If you get a warning «Remove resources that block rendering» while using the tool, don’t worry. In this article, we will show you how to fix the problem by removing the javascript that is blocking the display of content.
What does it mean to remove content-blocking JavaScript and CSS from the top of the page?
If you look at the Google, removing the JavaScript that blocks the display of content is one of them. Any failure to do so will result in a slower page load speed. But how can the JavaScript and CSS in your HTML page slow down your site?
Well, every time you install a new theme or plugins, they add JavaScript and CSS code to the front-end. As a result, browsers may need more time to load the page.
Above the fold or top of the page refers to the section of your page that is visible on first load. Any other part you have to scroll down to get to it is not included.
Therefore, if non-relevant JavaScript and CSS renders when visitors load your website, you may receive a warning to reduce the number of render-blocking JavaScript and CSS in content resources at the top of your page. the page.
Use Google PageSpeed Insights to find JavaScript and CSS blocks
The first step to fix render crash is to test your site speed with .
- Visit the page and paste the URL of your site in the field «Type a web page URL«.
- click on Analyze to get the report.
Most sites score between 50-70; this should serve as a reference point for your score. Google will also display suggestions to improve your site’s performance.
If you find the suggestion to remove the display-blocking JavaScript and CSS in the content at the top of the page, then you will need to fix the problem.
Keep in mind that you shouldn’t push your site to get a score of 100 points. Just do your best to get a good score without sacrificing user experience.
If you have scripts on your WordPress site that are essential for a good experience, you shouldn’t remove them just to get a slightly higher PageSpeed Insights score.
The rules by which Google rates your sites are merely guidelines and should be taken as such.
Remove the javascript that blocks the display of content
With WordPress, reducing render-blocking JavaScript and CSS resources on your website is easy. You can use the three plugins listed below:
W3 Total Cache
One of our favorites is the plugin . Once activated, follow these steps in your WordPress admin panel:
- go to Performance -> General adjustments.
- Scroll to Minimize. You will see some options under this header.
- check the box Activate in Minimize. Then in Minimization methodChoose Manual.
- click on Save all settings.
- Get all render-blocking JavaScript and CSS scripts, which you can find through Google PageSpeed Insights.
- Once you have found the cause of the problem, navigate to Performance – > Minimize in your WordPress dashboard.
- Find the JS section. In Operations in the areasselect the type of embedding I don’t block using “defer” for Before .
- In JS file managementselect your active theme and click Add a script. Copy and paste the Google PageSpeed Insights JavaScript URLs into the fields provided, as shown below.
- Scroll down to the section CSS. In CSS file managementchoose your active theme and click Add a style sheet. As in the previous step, copy the PageSpeed Insights CSS style sheet URLs and paste them into the appropriate fields.
- To finish, click the button Save Settings & Purge Caches.
Autooptimize
You can also use the plugin to resolve JavaScript and CSS rendering blocking error. Follow these steps in your dashboard once the plugin is installed and activated:
- go to Settings -> Autooptimize.
- check the boxes Optimize JavaScript code? Y Optimize CSS code?
- click on Save changes and empty the cache.
In most cases, this is enough to fix the problem. However, the result may vary depending on your theme and active plugins.
To make sure your issue has been resolved, run your site through PageSpeed Insights again. If there are any blocking JS and CSS resources left, take the optimization even further by following these steps:
- Go back to Settings –> Autooptimize.
- Select options Include embedded JS? and Include embedded CSS?
- Save the changes.
Speed Booster Pack
Another popular plugin that you may find useful to fix render crash for your WordPress site is .
- Go to the section Speed Booster Pack and go to Resources.
- Under Optimize JavaScript, enable Move to footer.
- Go to the menu of Optimize CSS to set the CSS render blocking optimization.
- You will find additional settings to embed all CSS and minimize all embed CSS. Experiment with these options to find a suitable solution.
Enabling all options will make your site load faster, but it can also introduce the unwanted FOUC effect. This occurs when the browser loads the web page without waiting for the style sheet to load, causing a momentary flash of the unstyled page.
After trying the above methods, go back to Google PageSpeed Insights to make sure the rendering block is no longer an issue.
further reading
conclusion
Website speed is one of the most critical factors in attracting and retaining visitors. This is because search engines take site speed into account when ranking results.
assigns a score to websites based on their loading speed. If when analyzing the performance of your WordPress site you get the suggestion to remove the content-blocking JavaScript and CSS from the top of the page, simply fix the problem with the plugins.
We hope this tutorial will be useful to you. Feel free to comment below if you have any questions. Good luck!
Gustavo is passionate about creating websites. He focuses on the application of SEO strategies at for Spain and Latin America, as well as the creation of high-level content. When he is not applying new WordPress tricks you can find him playing the guitar, traveling or taking an online course.
Facebook Comments
Disqus