Optimizing the Critical Rendering Path

In order to deliver the fastest possible time to first render, we need to optimize three variables:

• Minimize the number of critical resources.
• Minimize the number of critical bytes.
• Minimize the critical path length.

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, etc.
3. Optimize the order in which the remaining critical resources are loaded: you want to download all critical assets as early as possible to shorten the critical path length.
4. Optimize the number of critical bytes to reduce the download time (number of roundtrips).

Optimize JavaScript Use

• Prefer async JavaScript resources
• Avoid synchronous server calls
• Defer parsing JavaScript
• Avoid long running JavaScript

Optimize CSS Use

• Put CSS in the document head
• Avoid CSS imports
• Inline render-blocking CSS