Project: High-performance page
Overview of the 5-lesson project: a CLS- and LCP-focused page.
Project: Fast News page
In this 5-lesson project you'll build Fast News, a fast-loading news page. Each lesson adds one piece, and by the final lesson you'll have a complete high-performance page.
You'll use these techniques:
- Document skeleton (DOCTYPE, html, head, body)
- Critical resource order with
preload,preconnect,dns-prefetch - Optimized images via
srcset,sizes,loading,decoding,width/height - Progressive enhancement with
templateandnoscript - Modern image formats with
pictureandsource
Ready? Let's start.
Project roadmap
Each lesson adds one piece, and the next lesson's starting code contains the previous lesson's solution. The page grows step by step.
- Skeleton: Set up the document, fill head with core meta tags.
- Critical resource order: Connect early with
preload,preconnect,dns-prefetch. - Image optimization: Add
srcset,sizes,loading,decoding,width/height. - Template and noscript: Set up progressive enhancement with
templateandnoscript. - Project final: Add
picture/source, document with comments, finish the page.
You can't skip a lesson; the starting code chain is cumulative.
What's on the target page?
The target page is a news home page. The head holds charset, viewport, title and critical resource links. The body carries the masthead, the main story image, related stories and a featured story section.
Performance goals: LCP (Largest Contentful Paint) is improved by preloading the main image; CLS (Cumulative Layout Shift) is reduced by giving images width/height; off-screen images are deferred with loading="lazy".
Even without JavaScript, noscript informs the visitor.
Exercise Start with an empty document skeleton
To start the project, write an empty HTML document skeleton. It should contain <!DOCTYPE html>, <html> (lang="en"), <head> (charset=utf-8, viewport, title) and an empty <body>. Title content: Fast News - Home.
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>
</head>
<body>
</body>
</html>Test yourself
-
In this project, what does lesson 2's starting code usually contain?
- Lesson 1's solution and a short comment for lesson 2's new piece
- A completely empty page
- Only the DOCTYPE line
- Only the new piece added in lesson 2
Show answer
Lesson 1's solution and a short comment for lesson 2's new piece — Correct. The starting code carries the previous solution, so the page grows step by step.
-
Match each lesson to the piece it adds
- Skeleton
- DOCTYPE, html, head, body
- Critical resource order
- preload, preconnect
- Image optimization
- srcset, sizes, loading
- Template and noscript
- template, noscript