The Guide already has a strong, purpose-built preload timeline. This review concerns the lighter shared diagram for illustrating discovery order in Design System examples, where no network duration or FCP measurement is claimed.
The refined shared diagram is adopted. The original Guide timeline remains in its lesson.
Request-order treatments
All shared treatments use the same four resources. The Guide timeline has its own preload scenarios and illustrative FCP marker because it teaches that specific page-loading condition.
01
Original Guide
Detailed preload timeline
Without preload
The runtime script starts late, then imports the manifest.
EarlierLater
HTML
Parse
base.css
Download
Runtime script
Download
Default manifest JSON
Late
FCP
With preload
The runtime script and manifest module start early, so first paint can move earlier.
EarlierLater
HTML
Parse
base.css
Download
Runtime script
Preload early
Default manifest JSON
Preload early
FCP
Conceptual request timing for critical runtime resources. The FCP marker is illustrative and shows when first paint can happen after the stylesheet, runtime script, and manifest are ready.
The original Guide uses labeled phases, resource colors and an illustrative FCP line to explain its specific preload example. It stays in the Guide.
02
Current
Shared request-order diagram
Discovered by the runtime
HTML exposes the stylesheet and script. The manifest waits until the runtime entry executes.
EarlierLater
HTML
Base CSS
Runtime script
Manifest JSON
Illustrative order · no time scale
The newer Design System diagram uses simple intervals and two accent roles for conceptual discovery order without implying measured duration.
03
Adopted
Clearer row hierarchy
Discovered by the runtime
HTML exposes the stylesheet and script. The manifest waits until the runtime entry executes.
EarlierLater
HTML
Base CSS
Runtime script
Manifest JSON
Illustrative order · no time scale
The same diagram gives resource names and the order axis more presence, separates the axis from the tracks and increases the bar target height on narrow screens.
Actual Guide use
The published preload lesson keeps its resource phases and FCP condition.
The runtime script starts late, then imports the manifest.
EarlierLater
HTML
Parse
base.css
Download
Runtime script
Download
Default manifest JSON
Late
FCP
With preload
The runtime script and manifest module start early, so first paint can move earlier.
EarlierLater
HTML
Parse
base.css
Download
Runtime script
Preload early
Default manifest JSON
Preload early
FCP
Conceptual request timing for critical runtime resources. The FCP marker is illustrative and shows when first paint can happen after the stylesheet, runtime script, and manifest are ready.
The generic Design System diagram describes order only. The Guide retains its richer, lesson-specific visual and accompanying text.