Loading web resources

Objectives

By the end of the lesson, you can explain how the browser discovers the resources of a page, what defer, async, and loading="lazy" mean, and you can distinguish the resources needed for the first usable view from those that can arrive later.

Why does the order of loading matter?

Opening a page consists of several HTTP requests. If the browser had to wait for everything before showing anything, the page would seem slow. If it loads in the wrong order, the user sees a blank page or unordered content. The loading time and order of resources directly shape the user experience.

The main document is only the beginning

The browser first requests the document. The HTML, however, can refer to style sheets, a logo, photos, fonts, and JavaScript files. The browser starts further requests for these, and carries out part of the downloads in parallel.

flowchart LR
    H[HTML document] --> C[CSS]
    H --> J[JavaScript]
    H --> K[Images]
    C --> B[Fonts]
    J --> A[Later data request]

The diagram shows dependencies, not a rigid chronological order. A font, for example, is only discovered after the CSS has arrived, and JavaScript can request further data.

References in the HTML

<link rel="stylesheet" href="/assets/site.css">
<script src="/assets/course.js" defer></script>
<img src="/images/course.webp" width="640" height="360"
     alt="Students in a lecture hall" loading="lazy">

• link refers to a style sheet, script to a program file, img to an image. The paths are resolved into separate URLs relative to the address of the page (see 2.1).
• The width and height attributes of the image help reserve space before loading, and alt provides a text alternative.

The three behaviors of script

MDN summarizes how the script element works like this:

Setting	Download	Execution
no attribute	parsing stops until it downloads	immediately, stopping the parsing
defer	in parallel with parsing	after parsing, before the DOMContentLoaded event, in document order
async	in parallel with parsing	as soon as downloaded, in no particular order; it can stop the parsing meanwhile

defer is therefore a good choice for programs that count on the whole document. defer can only be used with an external script (one with a src attribute), and it is the default for module scripts.

Critical and later-needed resources

Not every file is equally important for the first usable view. Without the style sheet the page stays unordered or (because of the render-blocking nature of CSS) blank. A large photo at the bottom of the page can arrive later, it does not hinder reading. The browser tries to handle this with priorities, but the developer's decisions matter too.

The loading="lazy" attribute postpones the download of the image until the image approaches the viewport within a distance determined by the browser. It is useful for a gallery at the bottom of the page, but a mistake for an important image on the first screen. MDN gives three cautions: the postponement works only when JavaScript is enabled, the load event may fire before the postponed image is visible, and giving width/height is especially important for postponed images.

The size and origin of a resource

A single large image, font, or JavaScript bundle can slow the page. Besides the size, it also matters when the browser discovers the resource, what it waits for, and where it comes from. An element loaded from an external service also means an operational and privacy dependency: if the provider of a map module is not available, the page should still show the text address of the location.

Partial failures have different symptoms. If the CSS file gets a 404, the HTML arrives but the appearance gets worse. If an image is missing, the text remains readable. If the enrolment button becomes usable only after a large, late-arriving program, that is a significant delay for the user.

Worked example: what does the Kurzuspont course page need?

Resource	How critical?	Recommended handling
HTML (course description)	essential	should arrive in the server's response
site.css	essential (blocks rendering)	keep it small, do not let it be late
course.js (filter)	convenience	defer
instructor's photo on the first screen	important	no lazy, width/height given
gallery at the bottom of the page	fine to come later	loading="lazy"
external map	optional	the address is also given as text

With this distribution the user sees the readable content immediately, and the convenience features arrive afterwards.

Common misconceptions

Statement	Clarification
"A page is a single HTTP request."	The document can refer to further resources.
"Fewer requests always mean a faster page."	Size, timing, and processing matter too.
"It is worth postponing every image."	The important images of the first view must be loaded on time.
"When all files have been downloaded, the interface is ready."	Processing and later data requests can keep changing it.
"defer and async are the same."	defer runs in order after parsing; async runs as soon as it is ready, in no order.

In brief

• The main document calls further resources, and the browser downloads them partly in parallel.
• defer runs in order after parsing, async as soon as it is ready; a plain script stops parsing.
• loading="lazy" is useful for images at the bottom of the page, harmful on the first screen.
• Critical resources (CSS, basic content) must be separated from convenience resources.

Review questions

1. Why is defer better than a plain script on a short information page?
2. What happens if the style sheet gets a 404, and what if the image does?
3. Which image must not be loaded with lazy, and why?
4. What does it mean that a resource is "critical"?

Learning resources

• <script> element (MDN) — the exact description of defer and async.
• <img> element (MDN) — the loading attribute, the role of width and height.
• Critical rendering path (MDN) — what blocks rendering.