Project final - Performance page
Combine all performance techniques and document the page.
Combine all techniques
In the final lesson you complete the page. You already have:
- In head:
preload,preconnect,dns-prefetch. - In body: an optimized
<img>(srcset, sizes, width/height, loading, decoding). - Inside main:
<template>and<noscript>.
This lesson adds three things: modern image formats (AVIF, WebP) via <picture> and <source>, HTML comments documenting the performance decisions, and a <footer> with the copyright year.
Document performance choices with comments
HTML comments (<!-- ... -->) are invisible in the browser but stay in the source. Documenting performance choices with comments helps the team understand why each decision was made.
In this project you'll add comments at three key points: the early connection in head, the LCP image, and the <picture> section. Keep comments short and to the point; don't overdo it.
In the same lesson you'll introduce AVIF and WebP formats with <picture> and two <source> tags; these modern formats give smaller file sizes.
Exercise Add a comment, picture and footer
Take the page with template and noscript from the previous lesson. Add three things:
- In
<head>, before<link rel="preconnect">, add an HTML comment (e.g. Performance: connect to CDN early and preload the LCP image). - Inside
<main>, add a new<section>; inside put an h3 (e.g. Featured story) and a<picture>. Inside the picture put two<source>tags: one with type="image/avif", the other type="image/webp", each with srcset. At the end of the picture add an<img>(fallback). - At the end of
<body>, add a<footer>; inside put a<p>with the copyright year (e.g. © 2026 Fast News).
Show example solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fast News - Home</title>
<!-- Performance: connect to CDN early and preload the LCP image -->
<link rel="preconnect" href="https://cdn.fastnews.com">
<link rel="dns-prefetch" href="https://cdn.fastnews.com">
<link rel="preload" as="image" href="https://cdn.fastnews.com/cover/main-story-960.webp">
</head>
<body>
<header>
<h1>Fast News</h1>
<p>Your fast news source</p>
</header>
<main>
<!-- LCP image: srcset picks the right width per viewport -->
<article>
<h2>Markets hit a new high</h2>
<img src="https://cdn.fastnews.com/cover/main-story-960.webp"
srcset="https://cdn.fastnews.com/cover/main-story-480.webp 480w,
https://cdn.fastnews.com/cover/main-story-960.webp 960w,
https://cdn.fastnews.com/cover/main-story-1440.webp 1440w"
sizes="(max-width: 600px) 100vw, 50vw"
width="960" height="540"
alt="Rising chart on a market screen"
loading="lazy" decoding="async">
</article>
<!-- Featured story: picture serves AVIF and WebP sources -->
<section>
<h3>Featured story</h3>
<picture>
<source type="image/avif" srcset="https://cdn.fastnews.com/featured/weather-480.avif 480w, https://cdn.fastnews.com/featured/weather-960.avif 960w">
<source type="image/webp" srcset="https://cdn.fastnews.com/featured/weather-480.webp 480w, https://cdn.fastnews.com/featured/weather-960.webp 960w">
<img src="https://cdn.fastnews.com/featured/weather-960.jpg"
width="960" height="540"
alt="Weather map"
loading="lazy" decoding="async">
</picture>
</section>
<!-- Breaking template: cloned when JS is on; noscript shown otherwise -->
<template id="breaking-template">
<article>
<h2>Breaking headline</h2>
<p>Details loading...</p>
</article>
</template>
<noscript>
<p>Enable JavaScript to see breaking news.</p>
</noscript>
</main>
<footer>
<p>© 2026 Fast News</p>
</footer>
</body>
</html>Performance page complete!
Congratulations! After 5 lessons you have a working Fast News page: critical resource order in head, an optimized image in body, modern formats via picture, progressive enhancement with template and noscript, documented decisions in comments, and a footer with the copyright year.
Each lesson's starting code carried the previous lesson's solution; you only added the new piece. You can now fill this structure with your own news content, add new formats, or run performance measurements.
Test yourself
-
What's the best approach for the LCP image in this project?
- Preload the image early and leave it eager
- Lazy-load the image and skip preload
- Make the image a CSS background-image only
- Inject the image later with JavaScript
Show answer
Preload the image early and leave it eager — Correct. The LCP image is preloaded early and left eager; lazy is only for off-screen images.
-
Match each technique to its benefit
- preload
- Loads LCP resource early
- srcset + sizes
- Picks by viewport density
- width + height
- Reduces CLS
- picture + source
- Modern format fallback
- loading=lazy
- Defers off-screen images