HTML/CSS - 28

HTML/CSS - 28: Performance Optimization Deep Dive

A fast website is easier to use, especially on slower connections and less powerful devices.

Performance optimization is not about making your HTML as short as possible. It is about helping the browser download, display, and respond to the page efficiently.

In this lesson, you will focus on practical improvements involving images, layout stability, fonts, and unnecessary page resources.

Your challenge: Improve a simple content page so its images load efficiently, its layout stays stable, and it avoids downloading more than it needs.

Why do images matter so much?

Images can be some of the largest files on a webpage. A very large image can take much longer to download than the surrounding HTML and CSS.

Using an efficient format such as WebP can often reduce image file size while keeping good visual quality.

The example already uses: space-waffles.webp

The file format is only one part of image optimization. The image should also be reasonably sized for the place where it will appear.

Add width and height:

Try adding: width="700" and height="450" using values that match the actual proportions of the image you are using.

Providing image dimensions lets the browser reserve space for the image before it finishes loading.

Without reserved space, other content may suddenly move when the image appears.

That unwanted movement is called a layout shift.

Responsive images can still have dimensions:

Your CSS can contain: max-width: 100%; and height: auto;

This allows the image to shrink on smaller screens while its HTML width and height still help the browser understand its proportions.

What does lazy loading do?

For an image farther down a page, you can add: loading="lazy"

This tells the browser that it may wait before downloading the image until the visitor gets closer to it.

That can prevent the browser from immediately downloading images that the visitor may never scroll far enough to see.

But do not lazy-load everything.

If an important image is visible near the top of the page, delaying it can actually make the page feel slower. Lazy loading is generally more useful for images farther down the page.

Try this experiment:

Add a large amount of content above the image so it appears farther down the page. Then add: loading="lazy" to the image.

The HTML might look like: <img src="space-waffles.webp" alt="Waffles floating against a starry background" width="700" height="450" loading="lazy">

What are Core Web Vitals?

Core Web Vitals are measurements that help describe important parts of the visitor's experience. You do not need to memorize every technical detail yet, but three useful ideas are:

Loading: How quickly important visible content appears.

Responsiveness: How quickly the page reacts when someone interacts with it.

Visual stability: Whether content stays in place instead of unexpectedly jumping around.

Performance work often improves one or more of these areas.

Avoid unnecessary resources:

Every extra stylesheet, font, script, image, or other file can add more work for the browser. That does not mean a page must contain almost nothing. It means each resource should have a useful purpose.

If a page includes a large script that it never uses, removing it is more useful than simply trying to make the HTML look shorter.

Font performance:

Custom web fonts can look great, but they also need to be downloaded. Using a system font such as: font-family: system-ui, sans-serif; can avoid an additional font download.

That does not mean custom fonts are bad. It simply means they are another resource worth considering when performance matters.

What about minifying code?

Production websites often remove unnecessary spaces and comments from CSS and JavaScript to reduce file size. This is called minification.

While learning, however, readable code is more valuable. Do not make your practice code difficult to understand just to remove a few spaces. Build clean code first and let production tools handle minification when appropriate.

Performance checklist:

Ask yourself whether images use suitable formats and dimensions, whether below-the-fold images can be lazy-loaded, whether important content loads promptly, whether page elements have stable dimensions, and whether every large resource is actually needed.

Good performance habit: Optimize the things that matter rather than trying random tricks. Large images, unnecessary scripts, unstable layouts, and excessive resources usually matter much more than tiny differences in HTML formatting.

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0">

  <title>Performance Lab</title>

  <style>

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 30px;
      font-family: system-ui, sans-serif;
    }

    main {
      max-width: 700px;
      margin: 0 auto;
    }

    img {
      max-width: 100%;
      height: auto;
    }

  </style>

</head>

<body>

  <main>

    <h1>Performance Lab</h1>

    <p>
      This example uses an efficient image format,
      responsive styling, and explicit dimensions.
    </p>

    <p>
      Imagine that enough content appears here to
      place the image farther down the page.
    </p>

    <img
      src="space-waffles.webp"
      alt="Waffles floating against a starry background"
      width="700"
      height="450"
      loading="lazy">

  </main>

</body>

</html>