Loading Performance

Fast pages keep visitors: every extra second of loading time loses people, especially on mobile networks. Many of the biggest performance wins come from small changes to your HTML — how images, scripts, fonts and other resources are requested.

How a page loads

1. The browser downloads the HTML and starts reading it top to bottom.
2. It discovers resources — CSS, scripts, images, fonts — and requests them.
3. CSS and non-deferred scripts in the head block rendering: nothing is painted until they're loaded.
4. The browser lays out and paints the page, then keeps loading images and the rest.

Good HTML helps the browser discover important resources early, delay unimportant ones, and avoid blocking.

Core Web Vitals

Search engines measure three user-centred metrics:

Images

<!-- The main image near the top: load it immediately, and with high priority -->
<img src="hero.webp" alt="Our café on a sunny morning" width="1200" height="600" fetchpriority="high">

<!-- Images further down: load only when the user scrolls near them -->
<img src="gallery-1.webp" alt="Barista pouring latte art" width="600" height="400" loading="lazy" decoding="async">

• Always set width and height to prevent layout shift.
• loading="lazy" for below-the-fold images and iframes — but never for the main image, which would delay it.
• fetchpriority="high" on the most important image helps it arrive sooner.
• Serve modern formats (WebP, AVIF) at the right size with srcset (lesson 13).

Scripts

<title>Fast page</title>
<script src="app.js" defer></script>
<script src="analytics.js" async></script>

Use defer (or type="module") so scripts don't block rendering, and async for independent third-party scripts (lesson 37). The fastest script is the one you don't ship — audit what each script actually does.

CSS

• Link stylesheets in the head so the page doesn't flash unstyled content.
• Keep CSS lean; remove unused framework code.
• For a very fast first paint, some sites inline the small amount of "critical" CSS needed for the top of the page in a <style> element.

Resource hints

<title>Hints</title>
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="https://analytics.example.com">
<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/img/hero.webp" as="image" fetchpriority="high">
<link rel="prefetch" href="/checkout.html">
<link rel="modulepreload" href="/js/main.js">

Use preloads sparingly: preloading everything means nothing is prioritised.

Fonts

Custom web fonts can delay text from appearing. Use WOFF2 files, load only the weights you use, preload the main one, and set font-display: swap in CSS so text shows immediately in a fallback font.

Speculative loading

Chromium-based browsers support speculation rules, which can prerender likely next pages so navigation feels instant:

<script type="speculationrules">
{
  "prerender": [{ "where": { "href_matches": "/courses/*" }, "eagerness": "moderate" }]
}
</script>

Browsers that don't support it simply ignore the script.

Measuring

• Lighthouse (in Chrome DevTools) audits performance and suggests fixes.
• PageSpeed Insights combines a lab test with real-user data from Chrome.
• The Network panel shows every request, its size and timing; throttle it to "Slow 4G" to feel what mobile users experience.

Quick wins checklist

• Images: right format, right size, width/height, lazy below the fold.
• Scripts: defer/async, fewer third-party tags.
• Preconnect to critical third-party origins; preload the hero image and main font.
• Enable compression and caching on the server (most hosts do this automatically).