demo · v139

Loading Timeline Planner

Build a resource list, assign blocking="full-frame-rate" to critical assets, and see how the load timeline shifts. The planner shows first paint and first full-rate frame markers, then generates the <link> tags to paste into your HTML.

Name Type Size Blocking Load time (sim)
No resources added yet. Use the form above or click "Load example set".

loading timeline

first paint
first full-rate frame

the markup

<!-- Fonts and critical CSS: use full-frame-rate to
     throttle animations while they load -->
<link rel="preload" as="font"
      href="/hero.woff2"
      crossorigin
      blocking="full-frame-rate">

<link rel="stylesheet"
      href="/critical.css"
      blocking="full-frame-rate">

<!-- Non-critical images: no blocking hint -->
<img src="/hero.webp" fetchpriority="high">

see also