Web Performance & Optimization — HTML & CSS Course

What you'll learn

A beautiful site that loads slowly loses visitors. Performance is a feature — it affects user experience, conversions, and search ranking. The good news: a handful of HTML/CSS-level habits deliver most of the wins, and you've already learned several of them.

By the end you'll be able to:

Explain the Core Web Vitals
Optimise images — usually the biggest win
Reduce and prioritise CSS
Load web fonts without layout shift

Why performance matters

Studies consistently show visitors abandon sites that take more than a few seconds to load, and Google uses speed as a ranking signal. It measures the experience with three Core Web Vitals:

Metric	Measures	Good
`LCP`	Largest Contentful Paint — when the main content appears	≤ 2.5s
`CLS`	Cumulative Layout Shift — how much the page jumps around	≤ 0.1
`INP`	Interaction to Next Paint — responsiveness to input	≤ 200ms

Images — the biggest win

Images are usually the heaviest part of a page, so this is where optimisation pays off most. Everything you learned in Module 5 applies here as performance technique:

Use modern formats — WebP (or AVIF) is far smaller than JPEG/PNG.
Serve the right size — don't send a 4000px image to a 400px slot; use srcset.
Compress — run images through a compressor before shipping.
Lazy-load off-screen images with loading="lazy".
Set width and height so the browser reserves space — this directly prevents CLS.

Optimising CSS

CSS is render-blocking — the browser won't paint the page until it has your stylesheet — so keep it lean. Minify it for production (strip whitespace and comments), remove unused rules, and consider critical CSS (inlining the small amount needed for the first screen so it renders instantly while the rest loads). Link your main stylesheet in the <head> so it downloads early.

Note

You don't minify by hand — build tools do it automatically. The concept to remember is that smaller, fewer, earlier wins: fewer bytes of CSS, fewer separate files, and the critical styles delivered as early as possible.

Web fonts without layout shift

Custom fonts are lovely but risky for performance — a slow font can leave text invisible or cause a jarring reflow when it swaps in. The fix is font-display: swap, which shows a fallback font immediately and swaps to the custom one once it loads, plus preloading and using compact woff2 files:

fonts.css

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-display: swap;   /* show fallback text immediately, swap when ready */
}

Tip

The fastest font is no download at all. A system font stack like system-ui, sans-serif uses the device's built-in fonts — zero bytes, zero layout shift, and it looks native on every platform. Reach for a custom font only when the brand truly needs it.

Recap & quick check

Key takeaways

Performance affects UX, conversions, and SEO; Google measures LCP, CLS, and INP.
Images are usually the biggest win: modern formats, right sizes, compression, lazy loading, and set dimensions.
Setting image width/height prevents layout shift (CLS).
CSS is render-blocking — minify it, remove unused rules, and consider critical CSS.
Load fonts with font-display: swap and woff2; a system font stack is the fastest of all.

Quick check

1. What are usually the heaviest resources on a page?

2. Which HTML habit directly reduces layout shift (CLS)?

3. Why does CSS need to be lean and load early?

4. What does font-display: swap do?

5. What's the fastest possible font choice?

Fast and accessible — you're building like a pro. Next, the tools that make daily development smooth: DevTools, debugging, and deployment.