Ultimate Guide To Eliminate Render-Blocking
With 83% of users expecting fast-loading websites, optimizing performance ensures better user experience, engagement, and search visibility.
Ultimate Guide To Eliminate Render-Blocking
Despite significant changes to the organic search landscape, the speed and efficiency of web pages have remained paramount. Users demand quick and seamless online interactions, with 83% online users reporting that they expect websites for loading.
Google is setting the bar even higher, needing a Largest Contentful Paint of less than 2.5 seconds to be considered Good.
What Is The Critical Rendering Path?
The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. Optimizing the critical render path improves render performance. The critical rendering path includes the Document Object Model (DOM), CSS Object Model (CSSOM), render tree and layout. Understanding and optimizing the critical rendering path is important to ensure reflows and repaints can happen at 60 frames per second, to ensure performant user interactions, and to avoid jank.
The primary reason for optimizing critical rendering path is prioritizing resources needed to render meaningful, above-the-fold content. Identify and deprioritize render-blocking resources that are not necessary to load above the fold content and prevent the page from rendering as quickly as it could.
About Render-Blocking Resources
Render-blocking is any part of the process of loading a website that blocks rendering of the user interface, it is bad for web performance as it increases the length of time until the user interacts with the site, for example, viewing content or interacting with controls. The most common causes of render-blocking are initially loaded CSS or JavaScript files.
1. Render-Blocking CSS
CSS is treated as a render-blocking resource, which means that the browser won't render any processed content until the CSSOM is constructed. Make sure to keep your CSS lean, deliver it as quickly as possible, and use media types and queries to unblock rendering.
2. Render-Blocking JavaScript
Unlike CSS, the browser doesn’t need to download and parse all JavaScript resources for rendering the page, so it is not technically a required step. JavaScript is an extremely expensive resource, and for many websites, it is the main cause of slow and unresponsive pages. Thus, optimizing its delivery is key to a smooth user experience and better SEO.
How Do Render-Blocking Resources Impact Core Web Vitals?
Optimizing critical rendering path and reducing render blocking resources benefitting INP and CLP –
Allow for quicker interaction. The amount of time the browser spends parsing and running JavaScript, which might impede user interactions, can be decreased with a simplified critical rendering path. Making sure scripts load quickly can improve INP by enabling fast user interaction response times.
Ensure resources are loaded in a predictable manner. A predictable and effective loading of items can be ensured by optimizing the critical rendering path. By controlling the timing and sequence of resource loading, CLS can be improved by avoiding abrupt layout changes.
How To Identify Render-Blocking Resources
PageSpeed Insights & Lighthouse provide a quick and easy way to identify render-blocking resources. Testing a URL in either tool for navigating “Eliminate render-blocking resources” under “Diagnostics”, and expanding the content to see a list of first-party and third-party resources blocking the first paint of the page. Two types of render-blocking resources are JavaScript resources and CSS resources.
1. WebPageTest.org
WebPageTest is a web page performance testing tool developed by AOL and open-sourced, producing its metrics using real-world browsers to load the web page being tested. It is actively maintained by Google on GitHub, so that you can download and install it on your own server if you prefer, and best of all, it is free.
2. Google PageSpeed Insights
Google PageSpeed Insights tool analyzing the performance of a website and provides suggestions for optimizing page load time, and one of the suggestions is about render-blocking resources.
3. GTmetrix
GTmetrix is another popular solution that also analyses the performance of your website and provides recommendations for improving the page load time. It also offers detailed information about the resources that are causing delays in the page load time.
4. Chrome DevTools
Most modern browsers have a built-in set of developer tools that you can use to debug and troubleshoot issues with your website. The tools enable you to inspect the source code of your webpage, view the network requests made by the page, and see the performance of your website.
5. Inspect the page source code
By right-clicking on the page and selecting “View Page Source” or “Inspect”, you can view the source code of your webpage. In the source code, look for any script tags that are blocking the rendering of the page. These are typically located at the top of the page, before the content.
How To Reduce Render-Blocking
1. Place JavaScript At The Bottom Of The HTML
Place links to CSS stylesheets at the top of the HTML <head> and place links to external scripts at the bottom of the HTML <body>. When the JavaScript alert function is placed at the top of the HTML, page rendering is immediately blocked, and no visual content appears on the page. When the JavaScript alert function is moved to the bottom of the HTML, some visual content appears on the page before page rendering is blocked.
Although it is still a common best practice to place JavaScript resources at the bottom of the HTML, this approach is not the greatest way to remove render-blocking scripts from the critical path.
2. Use The Async Or Defer Attribute
Async attributes signalling to the browser to load JavaScript asynchronously, and fetching the script when resources become available. Once the script is fetched and downloaded, HTML parsing is paused while the script is executed. The defer attribute signals to the browser to load JavaScript asynchronously and to wait to execute JavaScript until the HTML parsing is complete, resulting in additional savings.
3. Use CSS Media Queries
CSS media queries unblock the rendering by flagging resources that are only used some of the time and setting conditions on when the browser should parse the CSS (based on print, orientation, viewport size, etc.). All CSS assets would be requested and downloaded regardless but with a lower priority for non-blocking resources.
