Avoid chaining critical requests

Published on Updated on

Critical request chains are series of dependent network requests important for page rendering. The greater the length of the chains and the larger the download sizes, the more significant the impact on page load performance.

Lighthouse reports critical requests loaded with a high priority:

A screenshot of the Lighthouse Minimize critical request depth audit

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

How Lighthouse identifies critical request chains

Lighthouse uses network priority as a proxy for identifying render-blocking critical resources. See Google's Chrome Resource Priorities and Scheduling for more information about how Chrome defines these priorities.

Data on critical request chains, resource sizes, and time spent downloading resources is extracted from the Chrome Remote Debugging Protocol.

How to reduce the effect of critical request chains on performance

Use the critical request chains audit results to target the resources that have the biggest effect on page load first:

  • Minimize the number of critical resources: eliminate them, defer their download, mark them as async, and so on.
  • Optimize the number of critical bytes to reduce the download time (number of round trips).
  • 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.

Learn more about optimizing your images, JavaScript, CSS, and web fonts.

Stack-specific guidance

Magento

If you are not bundling your JavaScript assets, consider using baler.

Resources

Source code for Minimize critical request depth audit

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.