1. Quickread
Having a website that loads fast is crucial if you want to rank high on search engine result pages. That’s if you’re getting an “Eliminate render-blocking resources” warning while using the tool. In this blog, we’ll be showing you how to fix the issue.
If you look at Google’s PageSpeed opportunities, eliminating render-blocking resources is one of them. Any failure in that will result in a slower page loading speed. 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. 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 resources.
In order to analyze and fix the first step in fixing render-blocking is testing your site’s speed using Google PageSpeed Insights. Follow these steps to do:
“Enter a web page URL” field and click Analyze to get the report.
You will find the suggestion to eliminate render-blocking resources, then you will need to fix the issue.
When Google tells you to eliminate render-blocking resources, it’s essentially saying, “don’t load unnecessary resources at the top of your site’s code because it’s going to make it take longer for visitors’ browsers to download the visible part of your content”.
You can eliminate render-blocking by moving critical code out of head. In most cases, it has been found that js and CSS are included in the Head code. If there is no defer associated with these includes then that code will block rendering. This should be avoided if “defer” was not needed or reduced to the highest possible extent. Also on times, there are Java script lines embedded in the head this again will do the render-blocking if these are getting executed.
2. What are Render-Blocking Resources?
When a website loads in the browser, it sends out calls to each and every script in a queue. That queue needs to be empty before the website is visible in the browsers. When the script queue is very long, it can take a while before visitors are able to access your site. Sometimes any of these scripts aren’t necessary for viewing the website right away, and could just as easily wait to run until after the site itself is fully loaded.
When referring to render-blocking resources, we’re usually talking about:
- CSS
- JavaScript
It’s important to understand that not all CSS and JavaScript files are render-blocking.
3. How to Eliminate Render-Blocking JavaScript
There a few different strategies to eliminate render-blocking JavaScript.
- Async – Once visitors visit the website, browsers download the JavaScript while still parsing the rest of the HTML.
- Defer – lets the HTML parser download the JavaScript while parsing the rest of the HTML and waits to execute the script until the HTML parsing is finished.
To “Eliminate render-blocking JavaScript and CSS in above, load CSS in the headers but Js in the footer.
Eliminate render-blocking JavaScript and CSS, You can add htaccess code for better performance.
Once you’ve identified critical code, move that code from the render-blocking URL to an inline script tag on your HTML page. When the page loads, it will have what it needs to handle the page’s core functionality.
If there’s code in a render-blocking URL that’s not critical, you can keep it in the URL, and then mark the URL with async or defer attributes.
4. How to eliminate render-blocking stylesheets?
Similar to inlining code in a scrip tag, inline critical styles required for the first paint inside a style block at the head of the HTML page. Then load the rest of the styles asynchronously using the preload link (see Defer unused CSS).
Consider automating the process of extracting and inlining “Above the Fold” CSS using the Critical tool. Another approach to eliminating render-blocking styles is to split up those styles into different files, organized by a media query. Then add a media attribute to each stylesheet link.
Conclusion
This blog will help you to understand the concept of render-blocking resources and its importance in the speed optimization of the Magento 2 site. If any queries related to this blog or if you need Optimization Service then Contact Us.
