What is Resource Loading?

What is resource loading?

Resource loading is how a browser finds, requests, prioritises and processes the files a page needs: HTML, CSS, JavaScript, fonts, images, video and API calls. The order and timing of those requests decide when content appears and when the page responds. A page is often slow not because its files are huge, but because an important file starts downloading too late.

How the browser loads resources

The browser downloads the HTML first and finds further files as it reads it: a stylesheet link, a script tag, an image. Some files are only discovered later still, such as a font named inside a stylesheet or an image set as a CSS background. Each file on a new origin also pays for DNS, connection and TLS set-up before the first byte moves. Along the way the browser gives every request a priority. By default images start at low priority and are raised only once layout finds them in the viewport (web.dev, "Optimize resource loading with the Fetch Priority API"). Stylesheets and classic scripts in the head can hold up the first paint, which is the critical rendering path.

Four ways to improve it

• Discover important files earlier. Use resource hints such as preload for a hero image or key font, and preconnect for a third-party origin you will certainly use.
• Load non-critical files later. Add defer or async to scripts (see asynchronous loading) and use lazy loading for images and iframes below the fold.
• Raise or lower priority. The fetchpriority attribute (high, low, auto) works on img, script and link. It is a hint, not a command, and it does not make the browser find a file sooner. web.dev supports it in Chrome and Edge 102, Firefox 132 and Safari 17.2.
• Load less, from closer. Remove unused code, compress files, and serve them from a CDN so each round trip is shorter. Good cache headers let repeat visits skip the download altogether.

Example

A product page has a large hero image, six gallery images below it, an analytics script and a chat widget. Loaded naively, the browser starts all of them together, so the hero image competes with the chat widget for bandwidth. A better plan: mark the hero fetchpriority="high", set loading="lazy" on the gallery, add defer to the analytics script and load the chat widget after the page is interactive.

<img src="/hero.webp" fetchpriority="high" alt="Product">
<img src="/gallery-1.webp" loading="lazy" alt="Detail">
<script src="/analytics.js" defer></script>

web.dev reports one Google Flights test where marking the LCP image fetchpriority="high" improved LCP from 2.6 s to 1.9 s. That is one site on one setup, so measure your own page.

Common mistakes

• Lazy-loading the hero image. It tells the browser to wait for something the visitor sees at once, which delays the Largest Contentful Paint.
• Preloading everything. Hints compete with each other, and past a few they stop helping. Keep them for files that gate the first render.
• Many third-party origins. Each one needs its own connection and can stall the page if it is slow.
• Async scripts that depend on each other. Order is not guaranteed with async; use defer.
• Ignoring repeat visits. Without cache headers, returning visitors download everything again.

How it relates to testing and monitoring

The network waterfall is the main tool: it shows what started when, what waited for what, and which requests were blocked. Check it on a throttled connection and from more than one location, since distance changes connection cost. LoadFocus page speed monitoring runs Google Lighthouse audits on a schedule from 25 cloud regions, so you can see whether a loading change helped everywhere or only near your server. The free Core Web Vitals checker shows real-user LCP, INP and CLS from Google's CrUX data. For a broader list of fixes, read the 10-step guide to improving website speed.

FAQ: resource loading

What is the difference between resource loading and lazy loading?

Resource loading is the whole process of fetching a page's files. Lazy loading is one technique inside it: it delays files, usually images and iframes, until they are about to be seen.

In what order does a browser load resources?

It starts with the HTML, then requests the files it finds while parsing, each with a priority. Files named inside CSS, such as fonts and background images, are discovered later, which is why hints like preload exist.

What does fetchpriority do?

It asks the browser to fetch a resource at higher or lower priority than its default. It is a hint the browser may override, and it does not help the browser discover a file earlier.

Does loading JavaScript block rendering?

A classic script without async, defer or type module blocks HTML parsing while it is fetched and run. Adding defer or async avoids that.

How do I see how my resources load?

Open the Network panel in browser DevTools, or run a Lighthouse audit and read its waterfall and render-blocking list.