Have you ever been diagnosed with eliminating render-blocking resources while running a page speed insight test? It’s quite common if you’re website is built of JavaScript, HTML, and CSS codes (every website is built on these).
It is a critical issue affecting website performance (loading speed) and Core Web Vitals (an important Google ranking factor).
Here is the complete article to elaborate on the concept of eliminating render-blocking resources, how render-blocking resources affect website performance and methods to eliminate them.
What Is Eliminate Render-Blocking Resources?
Render-blocking resources hurt your website performance as they block the web page’s rendering. Before that, you should understand how rendering happens.
When a user comes to your web page, their browser starts reading the codes of the page from top to bottom. The time the browser encounters JavaScript, HTML, or CSS files; it stops reading the page.
It has to download, parse, and execute each JavaScript (scripts), CSS (stylesheets), and HTML file. The browser’s time to download, parse, and execute these resources can increase the website’s loading speed.
- When <link rel=”stylesheet”> (CSS) doesn’t have a disabled or media attribute matching the user’s device, it becomes a render-blocking resource.
- <script> files (JavaScript) in <head> tags without async or defer attributes are a render-blocking resource.
- <link rel=”import”> without async attribute.
These render-blocking resources delay the time for the first contentful paint (FCP). FCP is the time to load the initial color of the background, borders, text, images, etc.
Eliminating render-blocking resources can help load the website fast and pass the core web vitals.
How to Find Render-Blocking Resources of Your Website?
To check the render-blocking resources, you should scan your website on Page Speed Insight.
Once you run the audit, you will be provided with web vital scores, along with opportunities and diagnostics.
Under opportunity, if you find eliminate render-blocking resources, then just click that tab to check the list of render-blocking resources (js, CSS, third-party codes, etc.).
You can provide the list of URLs to your web developer to take action on them to avoid render blocking.
Render-blocking resources are the important reason for failed web vitals like FCP (First Content Paint), TBT (Total Blocking Time), FID (First Input Delay), TTI (Time to Interactive), and sometimes LCP (Largest Contentful Paint).
How Does Eliminating Render-Blocking Resources Affect Page Performance
Rendering web pages happens every time the browser loads a page; it parses HTML, JavaScript, and CSS files in rendered pixels, which are critical resources of the web page.
The rendering path includes DOM (Document object model), CSS Object Model(CSSOM), render tree, and web page layout.
As the browser goes through a page’s HTML, it may encounter external scripts and stylesheets. This requires the browser to stop, download, parse, and execute them.
This process of stopping, downloading, parsing, executing, and again reading the HTML tag delay the web page loading speed.
To get a loading speed under 2.5 seconds on mobile or desktop, you should either delay the execution or asynchronous the loading of these critical resources.
Minimizing these critical render-blocking resources can result in the rapid appearance of the first paint. This keeps your visitors spending quality time on your web page and avoids unhealthy bounce rates.
How to Eliminate Render-Blocking Resources?
You need to optimize both JavaScript and CSS files to avoid render blocking on the website.
Eliminate render-blocking resources CSS:
Web performance gets enhanced when you optimize CSS files. It’s a little risky to work on these files without ample knowledge of them. Get the help of experienced developer if required.
There are two ways to eliminate render-blocking CSS files:
- Minifying or combining critical CSS
- Removing unused or non-critical CSS files
Be careful not to delay CSS that is required to render above-the-fold content.
Here are the recommendation to follow while eliminating CSS render-blocking resources.
- Develop inline styles for above-the-fold content and deliver those styles alongside HTML.
- For device-specific CSS resources, use the media attribute on the links that pull in CSS files.
3. Use async or deferred non-critical CSS.
These steps help to eliminate render-blocking resources in CSS.
Eliminate render-blocking JavaScript:
Here are two ways to eliminate the render-blocking Javascript resources.
Async – This method helps the browser parse the entire HTML code of the web page, even though it downloads the JavaScript files.
The parsing process continues while the file downloads. After the script has been downloaded, the HTML parser will be paused to execute it.
Defer Execution – This allows the JavaScript download while parsing HTML, but the execution of JavaScripts wait until complete HTML parsing is done.
Defer attribute with <script> helps attain maximum loading speed, as it only executes the downloaded JavaScript files after completing HTML parsing.
From the below image, you can compare the <script>, <script async>, <script defer> execution of Javascript files.
Compared to defer, async can cause issues to all JavaScript files execution, as it breaks the resource code.
Async causes broken jQuery resources to load before jquery.js has been added to the document.
How to eliminate both JavaScript and CSS render-blocking?
1. Use Async or Defer to Delay Third-Party Scripts:
Both these attributes (defer and async) make sure the third-party codes don’t block rendering and enhance the overall page speed performance.
2. Minify and Compress render-blocking resources:
This technique doesn’t eliminate these resources, yet they reduce the effects on performance.
First, compress these files. Compression reduces the size of the codes and is available in binary codes, making the code files lighter.
Following this, you can minify these render-blocking resources. This process helps to remove unwanted elements like whitespace, comment, and line breaks from the code.
3. Reduce or Remove CSS and JS files:
Unused scripts and stylesheets can be found on every website using the plugins, theme, and third-party codes.
Inspect the DevTool of the website and go to Coverage to check the number of unused CSS and JS files.
How to Eliminate Render-Blocking Resources Through WordPress Plugin?
We recommend using plugins like WP Rocket and Nitropack to eliminate render-blocking resources.
Let us dive deep into the steps one by one.
WP Rocket Eliminate Render-Blocking Resources
WP rocket is a premium cache plugin that helps optimize resources like HTML, JavaScript, and CSS Files.
Once you enter the settings of WP rocket, you will be provided with multiple optimization options; choose File optimization.
Under file optimization, select the following settings:
- Minify CSS Files
- Optimize CSS delivery – Remove Unused CSS
- If your server uses HTTP/2, don’t combine CSS and JS files
- Minify JavaScript Files
- Load JavaScript deferred
- Delay JavaScript execution
Finally, save the setting.
After this, run the page speed insight test, and all your render-blocking resources will be eliminated.
Eliminate Render-Blocking Resources using Nitropack
Nitropack is another premium cache plugin with CDN in-built, which helps in eliminating render-blocking resources.
You have all the settings to optimize HTML, CSS, and JS. Here are a few options you should select
- Reduce unused CSS,
- JavaScript lazy loading,
- Minification and compression
Finally, save the setting to optimize the page performance and pass the web vital metrics.
Conclusion:
- Render-blocking resources (JavaScript and CSS files) affect your website performance.
- These resources delay the time of the browser to display the first paint to the visitor.
- Use defer or async attribute to eliminate render-blocking JavaScript (<script>) resources.
- Use media attribute to eliminate render-blocking CSS files (<link rel=”stylesheet”>).
- When you use WordPress, you can work on plugins like WP Rocket or NitroPack to eliminate all these render-blocking resources.
