Network dependency tree

The Network Dependency Tree insight is a new combination of the previous “Preconnect to required origins” and “Avoid chaining critical requests” audits.

Network dependency tree

Avoid chaining critical requests by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.

Understanding Network Dependency Tree Insight

Resources that the browser must load first in order for your page to be fully rendered are considered critical requests. These resources can include HTML, CSS, JavaScript, and font files that are potentially render-blocking or high-priority. When these critical resources are not discovered early, it can affect the loading of your site as well as Core Web Vitals like Largest Contentful Paint (LCP).

The Network Dependency Tree insight shows how these critical requests are chained together, helping you identify the files that are slowing down the rendering of your page.
The Insight shows the Maximum critical path latency which is the total time required to load all resources in the critical path chain. It will also list the Preconnected domains (third-party resources) and other good candidates you can still preconnect.
Critical request chains should be minimized wherever possible to improve a page's loading speed.

How to improve it with WP Rocket

Upon WP Rocket activation, Caching, Minify CSS and Minify JavaScript, Optimizing Critical Images, and Automatic Lazy Rendering will be automatically applied to your site, which will improve this insight.

In addition to that, you can enable WP Rocket’s:

  • Remove Unused CSS: This will reduce the CSS files' size and request chains.
  • Preload Fonts: This will detect and preload the important fonts used in the above-the-fold text, allowing them to be discovered earlier in the chain.
    Note: In some cases, PageSpeed might trigger more fonts than the fonts used in the above-the-fold text; in this case, it might be better to use the default Remove unused CSS font preload option.
  • Preconnect to external domain - this will make downloading external resources present in your site faster.
  • Self-host Google Fonts. This feature will host Google Fonts locally from your own web server and reduce the dependency on this third-party service.
  • Delay JavaScript execution and Load JavaScript deferred: these features will help with delaying the non-critical resources until after user interaction.

Additional Resources

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.