Render-Blocking Resources

Render-blocking resources are elements that delay a webpage's loading efficiently. Typically consisting of JavaScript and CSS files, the browser must fully download, pars, and execute these resources before the page content can be displayed. Until the elements are completely processed, the browser's initial rendering is blocked, resulting in slower load times.

Purpose of Render Blocking Resources

The browser needs specific resources to process the critical rendering path of a webpage. Such resources are essential for the webpage to be displayed correctly and to function as intended. However, due to their loading behavior, the resources must be managed and optimized correctly. Otherwise, they can negatively impact website performance and increase load times.


Types of Rendering Blockers

CSS files, JavaScript files, and web fonts are typically rendering blockers.

CSS Files

CSS files define a webpage's visual layout and styling, including layouts, colors, and animations. CSS can be included in a webpage in three different ways:

  1. External stylesheets: loaded via <link> tags in the <head> section.
  2. Internal CSS: written within <style> tags, typically in the <head> section of the HTML.
  3. CSS imports: included using @import statements within a CSS file or <style> tags.

JavaScript Files

JavaScript files allow dynamic and interactive functionality on webpages, like real-time updates or animations, providing an inviting and functional user experience. There are different ways to include JavaScript in a webpage:

  1. External JavaScript: linked via <script src="script.js"> to load JavaScript from an external file for reusability and modularity.
  2. Inline JavaScript: written directly inside a <script> tag within the HTML document for small scripts or specific functionality.
  3. JavaScript in event handlers: added directly to HTML elements as event attributes, but this is not recommended for modern practices.
  4. JavaScript modules: included with <script type="module" src="module.js"> to enable ES6 module functionality and scoped execution.
  5. Dynamic loading: loaded dynamically via JavaScript itself, using methods like document.createElement('script') for conditional or asynchronous loading.

Web fonts

Web fonts enrich the visual appeal and branding of a webpage. They feature custom typography and allow a unique and consistent design on various devices and browsers. There are several common ways web fonts are included in webpages:

  1. Using @font-face: defined custom fonts in CSS with the @font-face rule, linking to font files hosted locally or externally.
  2. Google fonts or other services: embed fonts by adding a <link> tag in the <head> section or an @import statement in CSS.
  3. Font embedding via CSS: using services that provide CSS code snippets to include fonts directly in your stylesheets.

Images are not considered render-blocking resources because the browser can render visible content while images are still loading. However, image optimization images is important to enhance performance and reduce page load time.

Identifying Rendering Blockers

Render-blocking resources can be identified with the help of various tools:

  • Google Lighthouse: provides a performance audit that highlights render-blocking JavaScript and CSS files. The audit is available in the "Eliminate render-blocking resources" section. Furthermore, Lighthouse offers recommendations for optimization, such as deferring JavaScript or inlining critical CSS.
  • Google-Page-Speed-Insights: uses Lighthouse as its underlying engine to identify render-blocking resources. The tool offers a detailed report for rendering blockers.
  • Wattspeed: with the help of Google Lighthouse, the tool identifies render-blocking resources as part of its performance optimization capabilities.
  • Chrome DevTools: the Network and Performance panels allow to analyze the critical rendering path, measure resource loading times, and see which resources block rendering.

Fixing Render-Blocking Resources

To improve webpage performance, it is crucial to eliminate render-blocking resources.

Category Methods to fix rendering blockers
JavaScript → use the async attribute for scripts that can run independently. → add the defer attribute to load scripts after HTML parsing. → minify JavaScript files to reduce size and load time. → remove unused JavaScript to eliminate unnecessary code. → dynamically load JavaScript only when needed. → use lazy loading for non-critical scripts. → place scripts before the closing </body> tag to prioritize HTML loading. → add essential code directly in HTML to eliminate extra HTTP requests.
CSS → inline critical CSS directly into the HTML for faster above-the-fold rendering. → minify CSS files to reduce file size. → preload key CSS files using the \ tag to prioritize important styles. → replace @import with <link> tags for faster loading. → remove unused CSS to streamline stylesheets. → combine CSS files by merging multiple stylesheets to reduce HTTP requests. → use media queries in <link> to load styles only when needed with the media attribute, such as media="print".
Web fonts → use the font-display: swap; property to display fallback fonts while custom fonts load. → preload font files using \ to prioritize their loading. → use modern, compressed font formats like WOFF2 to reduce file sizes. → subset font files to include only the characters needed in font files. → move scripts by placing them just before the closing </body> tag so the HTML loads first. → inline critical JS by adding important JavaScript directly into the HTML to avoid extra requests.

Advantages of Eliminating Render-Blocking Resources

Eliminating render-blocking resources directly improves page performance. By allowing the browser to render visible content faster, it provides several advantages:

  1. Better user experience: reducing blocking resources helps pages load faster, displaying content more quickly. This encourages users to stay longer on the page, reduces bounce rates, and enhances overall satisfaction.
  2. Higher SEO rankings: metrics like Largest Contentful Paint (LCP), First Contentful Paint (FCP), and Total Blocking Time (TBT) improve when render-blocking resources are eliminated, helping search engines prioritize the website in rankings.
  3. Increased conversion rates: visitors find faster-loading websites more professional and reliable to visitors, increasing the likelihood of converting them into customers.

Unlock Your Website's Potential