HTML · Module 12 · Lesson 53 of 54

Resource Preloading & Performance

What is Resource Preloading?

Imagine hosting a dinner party. Before your guests arrive, you pre-heat the oven, set the table, and put drinks in the fridge. You don't wait for guests to sit down before starting these tasks, otherwise they would wait hours for their meal.

In HTML, Preloading tells the browser which critical files (like fonts, styles, or scripts) to load early in the background:

<link rel="preconnect" href="...">: Resolves DNS and establishes server handshakes early.

<link rel="preload" href="..." as="...">: Downloads high-priority resources immediately.

Why does it matter?

Preloading improves page loading speed. Preconnecting to servers like Google Fonts can save hundreds of milliseconds, preventing the page from shifting layouts or loading fonts with noticeable delays.

How to write it

Place these tags at the top of your <head> section:

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
</head>

Common Mistakes

Preloading too many files: If you preload every single script and image, you defeat the purpose. The browser gets overloaded, slowing down the display of the main page. Only preload critical assets needed on initial load.

Quick Reference

<link rel="preconnect" href="URL"> — Connects to external servers early.

<link rel="preload" href="path" as="type"> — High-priority download.

Your Task

In the `<head>`, preconnect to Google Fonts by creating a `<link>` with `rel="preconnect"` and `href="https://fonts.googleapis.com"`.

index.html

Type code above to start the lesson.

Live Preview