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">

dns-prefetch allows early DNS resolution for an origin. It is a lighter hint than preconnect, which can also establish a connection.

8. Responsive Resource Loading

Use responsive images, sensible image sizes and appropriate resource priorities. Let the browser choose from valid resources instead of downloading oversized assets for every device.

9. Performance Best Practices

• Use efficient image formats and appropriately sized files.
• Specify image dimensions where possible to reduce layout shifts.
• Defer non-critical classic scripts when suitable.
• Use lazy loading for appropriate off-screen images and embeds.
• Preload only resources that are genuinely critical.
• Measure actual performance before adding resource hints.

Common Mistakes

• Using async for scripts that depend on a specific execution order.
• Preloading resources that the page never uses.
• Lazy-loading the most important visible image without testing.
• Adding preconnect hints for too many origins.
• Assuming resource hints guarantee that a resource loads first.

Practice Exercises

1. Write a script tag using defer.
2. Explain when async is preferable to defer.
3. Add lazy loading to an off-screen image.
4. Write a font preload link.
5. Identify which resources on a sample page genuinely need priority.

Revision Quiz

1. When does a deferred classic script execute?
2. Which script attribute is suitable for independent scripts that can execute as soon as ready?
3. What is the purpose of preload?
4. What does preconnect attempt to establish?
5. Why should off-screen images sometimes use lazy loading?
6. Can excessive preloading hurt performance?

Answer Key and Explanations

1. After HTML parsing finishes — Deferred classic scripts execute after parsing and preserve their document order.
2. async — It executes the script as soon as it is ready, without guaranteeing order relative to other async scripts.
3. Fetch an important resource early — It can help reduce discovery delays.
4. An early connection to an origin — It may establish DNS, transport and secure-connection setup.
5. To avoid downloading it too early — This can reduce competition for resources needed by the visible page.
6. Yes. It can consume bandwidth needed by more critical resources.