Understanding Asset Prioritization and Critical Request Optimization for Web Front‑End Performance

Translation note: This article is adapted from Ben Schwarz's post on Calibre (original URL: https://calibreapp.com/blog/critical-request) with permission and minor Chinese‑language adjustments.

What Is Asset Priority?

Modern browsers parse HTML with a streaming parser, discovering assets before the document is fully downloaded. When an asset is found, the browser adds it to the network queue according to a pre‑determined priority level (Lowest, Low, Medium, High, Highest). Prioritization lets the browser know which requests are most important for fast page rendering.

Chrome’s DevTools (Priority column) and the Performance panel can be used to view these priorities.

How Chrome Schedules Resource Priority

Resources are queued in the order they appear in the markup, then the browser works to fetch the highest‑priority items first. Each resource type has its own default priority:

Resource Type

Priority

HTML

Highest

Fonts

High

Stylesheets

Highest

Stylesheets loaded via @import

Highest (after blocking scripts)

Images

Low (upgraded to Medium when rendered in the initial viewport)

JavaScripts

Low, Medium or High (see Addy Osmani’s guide)

Ajax / XHR / fetch()

High

Which Requests Are Critical?

Critical requests are the assets that appear in the page’s initial viewport. They directly impact Core Web Vitals such as Largest Contentful Paint (LCP) and First Contentful Paint (FCP). For the example page the critical assets are:

HTML

CSS

Logo image

Three weight‑related assets

The headline image (the LCP element)

These resources (note the absence of JavaScript) should be loaded first. Recommended audit steps include visual inspection of the viewport, ensuring the first five HTTP requests are the HTML plus the four critical assets, avoiding redirects, and serving optimized, compressed, cache‑friendly files with correct HTTP headers.

Lighthouse Audit: Avoid Critical Request Chains

Lighthouse provides an audit called “Avoid chaining critical requests” that highlights linked requests forming a dependency chain. Reducing the number and length of such chains improves LCP and overall user experience.

@font-face {
  font-family: 'Calibre';
  font-weight: 400;
  font-display: swap;
  src: url('/Calibre-Regular.woff2') format('woff2'),
       url('/Calibre-Regular.woff') format('woff');
}

.carousel-bg {
  background-image: url('/images/main-masthead-bg.png');
}

Strategies to cut chain length include reducing request count, compressing/minifying assets, marking non‑critical scripts as async, inlining @font-face declarations, avoiding CSS background images or @import, preloading key resources, and using tools like bundlephobia to find smaller library alternatives.

Technique: Controlling Request Priority

The preload link element forces a resource to be fetched with high priority:

<link rel="preload" href="Calibre-Regular.woff2" as="font" crossorigin />

Preloading can dramatically speed up font rendering, but overusing it may degrade performance, affect LCP and Cumulative Layout Shift (CLS). Use it judiciously and test both before and after.

Technique: Image Lazy‑Loading

By default browsers load every <img> in the markup, even those never scrolled into view. Adding loading="lazy" defers loading until the image is near the viewport, reducing data transfer and improving LCP.

Make sure to specify width and height attributes to avoid layout shifts when the lazy‑loaded image finally appears.

Technique: font‑display

About 69% of sites use web fonts, yet many suffer from invisible‑text flashes that increase CLS. Using font-display: swap tells the browser to render fallback text immediately and swap in the web font once it loads, cutting perceived text‑render time from ~2.44 s to ~0.84 s in the author’s tests.

body {
  font-family: Calibre, Helvetica, Arial;
}

When font-display is omitted, text appears only after the font file finishes loading; with swap , text appears instantly and is replaced later, a behavior well‑supported across modern browsers.

Critical Request Checklist

Enable the Priority column in Chrome DevTools.

Minimize the number of critical requests.

Identify which requests must be sent before the page is fully rendered and preload them with <link rel="preload"> .

Use link prefetching for resources likely needed on the next navigation.

Declare preloadable resources via Link Preload HTTP headers.

Specify correct image dimensions.

Inline SVG for logos and icons.

Adopt modern image formats such as AVIF or WebP.

Apply font-display: swap for text rendering.

Compress fonts (WOFF2, variable fonts).

Inspect network events in chrome://net-internals/#events .

Remember: the fastest request is the one that never happens.

Happy optimizing!

References

JavaScript Loading Priorities in Chrome – https://tech.bytedance.net/articles/7025506101156118536#:~:text=JavaScript%20Loading%20Priorities%20in%20Chrome

Core Web Vitals – https://tech.bytedance.net/articles/7025506101156118536#:~:text=%E8%BF%99%E4%BA%9B%E8%B5%84%E6%BA%90%E5%AF%B9-,Core%20Web%20Vitals,-%E4%B8%AD%E8%AF%B8%E5%A6%82%20Largest

Largest Contentful Paint – https://web.dev/lcp/

First Contentful Paint – https://tech.bytedance.net/articles/7025506101156118536#:~:text=First%20Contentful%20Paint

Bundlephobia – https://bundlephobia.com/package/[email protected]

preload – https://tech.bytedance.net/articles/7025506101156118536#:~:text=%E4%BC%98%E5%85%88%E7%BA%A7%E4%BC%9A%E8%A2%AB-,preload,-%E7%9A%84%E4%BD%BF%E7%94%A8%E6%89%80

Page‑performance degradation warning – https://tech.bytedance.net/articles/7025506101156118536#:~:text=%E8%BF%87%E5%A4%9A%E7%9A%84%E8%B5%84%E6%BA%90%EF%BC%8C-%E9%A1%B5%E9%9D%A2%E6%80%A7%E8%83%BD%E4%BC%9A%E5%8A%A3%E5%8C%96

Cumulative Layout Shift – https://web.dev/cls/

Browser‑native lazy loading – https://caniuse.com/?search=lazy

Web‑font usage statistics – https://httparchive.org/reports/state-of-the-web?start=latest#fonts

CSS font-display – https://css-tricks.com/almanac/properties/f/font-display/

Link prefetching – https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ

Link Preload HTTP headers – https://www.w3.org/TR/preload/