One of the most common Lighthouse Performance Audits that a lot of Web Pages fail is Eliminating Render Blocking Resources. Passing this audit can not only improve the performance scores but also significantly improve perceived load time.
This article will cover everything about Render-Blocking Resources and how you eliminate them on different platforms and frameworks such as WordPress, React, Shopify, Drupal, and more!
What are Render-Blocking Resources?
Render-blocking resources are files that the browser must download, parse, and execute before it can proceed with rendering a webpage.
These resources are typically CSS and JavaScript files. When a browser encounters these files, it must pause, download, parse, and execute them before it can continue rendering the rest of the page. This pause can significantly slow down the page load time, leading to a poor user experience.
Stylesheets are considered render-blocking when they lack a disabled attribute or a media attribute that matches the user's device.
Similarly, script tags are flagged as render-blocking when they're placed in the page's head tag without a defer or async attribute. Other common resources like images are not render-blocking, but they still need to be optimized and lazy-loaded for optimal performance.
How to Determine if a Resource is Render-Blocking
Identifying render-blocking resources is the first step towards optimizing your webpage's performance. Tools like Google's PageSpeed Insights (PSI) and WebPageTest can help you locate these problematic files.
PSI has an audit that detects render-blocking resources, which can be found in the Opportunities section. If you click on the suggestion, you'll see which files you need to remove or optimize, along with the potential load time savings.
WebPageTest provides a waterfall chart that shows the order in which browsers handle resources. The render-blocking resources are marked by a small "X" to the left of their name, allowing you to see their impact on load time.
Eliminating Render Blocking Resources
Once you've identified the render-blocking resources, the next step is to eliminate or optimize them. Here are ten strategies to help you achieve this:
Inline Critical CSS and JavaScript: Extract the CSS and JavaScript that are critical for rendering above-the-fold content and inline them in the HTML document. This allows the browser to render the initial view without needing to fetch external stylesheets or scripts.
Defer Non-Critical CSS and JavaScript: Use the defer or async attributes on script tags to prevent them from blocking the rendering of the page. Defer is used when the scripts need to be executed in order, while async is used when the scripts are independent and can be executed as soon as they're available.
Eliminate Unnecessary CSS and JavaScript: Remove any code that isn't being used. This reduces the size of your files and the number of requests the browser needs to make.
Minify CSS and JavaScript: Minification removes unnecessary characters (like spaces and comments) from the code, reducing its size and consequently, the download time.
Use Media Queries: Split your CSS into different files based on media queries and load them conditionally based on the user's device. This ensures that only the necessary CSS is loaded.
Implement Code Splitting: Break your JavaScript into smaller chunks and only load the necessary chunks for each page or view. This can be achieved using modern JavaScript module bundlers like Webpack or Rollup.
Use Content Delivery Network (CDN): A CDN can cache your files in multiple locations around the world, reducing the time it takes for users to download them.
Optimize Fonts: If you're using web fonts, ensure they're being loaded efficiently. Consider using the font-display CSS property to control how fonts are rendered during load.
Lazy Load Images: Instead of loading all images when the page loads, use lazy loading to only load images when they're about to enter the viewport.
Use HTTP/2: HTTP/2 allows multiple files to be transferred simultaneously over a single connection, reducing the number of round trips between the server and the client. This can significantly reduce the load time of your resources.
Eliminating render-blocking resources is a crucial aspect of web performance optimization. By following these strategies, you can significantly improve your site's load time, enhance user experience, and potentially boost your SEO rankings.
Remember, the goal is not just to make your site faster, but to make it more efficient and user-friendly.
Platform Specific Recommendation
Different platforms have unique characteristics and thus require specific strategies to eliminate render-blocking resources.
While the general principles of eliminating render-blocking resources remain the same, the implementation can vary based on the platform you're using. Always consider the specific characteristics and capabilities of your platform when optimizing your site's performance.
Here are some platform-specific recommendations:
WordPress
WordPress offers a variety of plugins that can help you optimize your site's performance. Plugins like Autoptimize, W3 Total Cache, and WP Rocket can help you inline critical CSS, defer non-critical CSS and JavaScript, and minify your files. However, remember to use plugins judiciously as they can add extra load to your site. Check out our WordPress Performance Checklist to learn more.
Joomla
Joomla also provides several plugins that can help you optimize your site. JCH Optimize is a popular choice that offers features like file minification, deferral of scripts to the page's bottom, and CSS sprite generator.
Drupal
For Drupal users, the Advanced CSS/JS Aggregation module can help in optimizing the site's performance. It provides options for bundling, compressing, and caching CSS and JavaScript files, thus reducing the number of HTTP requests and the size of files.
Check out our Drupal Performance Checklist for more.
Shopify
Shopify doesn't allow as much flexibility as WordPress, Joomla, or Drupal, but you can still optimize your theme's CSS and JavaScript. Minify your CSS and JavaScript files and use the 'async' and 'defer' attributes for scripts. Also, consider using a theme that is optimized for speed.
You can also learn more about Shopify Performance Optimization by following our checklist.
React
In React, you can use code splitting and lazy loading to optimize your application's performance. React.lazy() and Suspense allow you to lazily load components only when they're needed. Also, consider using tools like Webpack for bundling and splitting your code.
Angular
Angular also supports lazy loading, which can significantly improve your application's startup time. You can use Angular CLI to generate lazy-loaded routes. Also, consider using Ahead-of-Time (AOT) compilation, which compiles your Angular components and templates into JavaScript code during the build phase, reducing the load and execution time in the browser.