Section 28: Loading Performance and Resource Hints

Learning Objectives

Understand how HTML affects page loading performance.
Use defer and async for external scripts.
Understand preload, preconnect and dns-prefetch.
Use lazy loading for suitable resources.
Learn how to avoid unnecessary resource downloads.

1. Why HTML Loading Performance Matters

A browser must discover, download, parse and process page resources. Poor loading decisions can delay important content, increase bandwidth use and make a page feel slow.

2. Classic Script Loading

<!-- May block HTML parsing while it downloads and executes -->
<script src="/js/app.js"></script>

<!-- Downloads in parallel and executes after HTML parsing -->
<script src="/js/app.js" defer></script>

<!-- Downloads in parallel and executes as soon as ready -->
<script src="/js/analytics.js" async></script>

defer is useful for scripts that depend on the parsed document or must execute in document order. async is appropriate for independent scripts that do not rely on execution order.

3. Module Scripts

<script type="module" src="/js/main.js"></script>

Module scripts are deferred by default. Their dependencies and loading behavior differ from classic scripts, so choose the script type according to the application.

4. Lazy Loading Images and Iframes

<img
  src="/images/article-example.webp"
  width="800"
  height="450"
  loading="lazy"
  alt="Example HTML article image">

<iframe
  src="https://example.com/embed"
  title="Embedded example"
  loading="lazy"></iframe>

Lazy loading is useful for off-screen content. The embedded URL must support framing. Do not lazy-load a resource that is critical to the initial visible page without considering the performance impact.

5. Preload

preload tells the browser to fetch a resource that is important for the current page as early as appropriate.

<link
  rel="preload"
  href="/fonts/site-font.woff2"
  as="font"
  type="font/woff2"
  crossorigin>

Font preloads often need crossorigin because fonts are fetched using CORS-enabled requests. The crossorigin setting and resource URL must match how the resource is actually loaded.

Use preload carefully. Preloading too many resources competes for bandwidth and can slow more important content.

6. Preconnect

<link rel="preconnect" href="https://fonts.example.com" crossorigin>

preconnect asks the browser to establish an early connection to an important origin. Use it only for origins the page is likely to need soon.

7. DNS Prefetch

<link rel="dns-prefetch" href="//cdn.example.com">

Loading & Performance