Skip to content
Learn Measure Blog Case studies About
On this page
  • Feedback

Optimizing the Critical Rendering Path

Mar 31, 2014 — Updated Aug 17, 2018
Ilya Grigorik
Ilya Grigorik
TwitterGitHub
On this page
  • Feedback

To deliver the fastest possible time to first render, we need to minimize three variables:

  • The number of critical resources.
  • The critical path length.
  • The number of critical bytes.

A critical resource is a resource that could block initial rendering of the page. The fewer of these resources, the less work for the browser, the CPU, and other resources.

Similarly, the critical path length is a function of the dependency graph between the critical resources and their bytesize: some resource downloads can only be initiated after a previous resource has been processed, and the larger the resource the more roundtrips it takes to download.

Finally, the fewer critical bytes the browser has to download, the faster it can process content and render it visible on the screen. To reduce the number of bytes, we can reduce the number of resources (eliminate them or make them non-critical) and ensure that we minimize the transfer size by compressing and optimizing each resource.

The general sequence of steps to optimize the critical rendering path is:

  1. Analyze and characterize your critical path: number of resources, bytes, length.
  2. Minimize number of critical resources: eliminate them, defer their download, mark them as async, and so on.
  3. Optimize the number of critical bytes to reduce the download time (number of roundtrips).
  4. Optimize the order in which the remaining critical resources are loaded: download all critical assets as early as possible to shorten the critical path length.

Feedback #

Last updated: Aug 17, 2018 — Improve article
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.