0%

Improving Page Performance

Advanced 10 min read Lesson 16 of 31

Once you can measure speed, here are the highest-impact ways to improve it.

Images and media

  • Use modern formats (WebP/AVIF) and compress images.
  • Add width and height to prevent layout shift.
  • Lazy-load below-the-fold images.

Code and delivery

  • Minify and split CSS/JS; ship less JavaScript.
  • Use a CDN and enable caching and compression (gzip/Brotli).
  • Inline critical CSS and defer the rest.
  • Use font-display: swap and preload key assets.

Pro tips

  • The fastest resource is the one you never load — remove unused code.
  • A CDN dramatically cuts load time for distant users.
  • Static site generators (like this one) are fast by default.

Common mistakes

  • Huge unoptimised hero images.
  • Loading heavy JavaScript frameworks for simple pages.
  • No caching or compression on the server.
Summary

Improve performance by optimising images, shipping less JavaScript, using a CDN with caching and compression, and inlining critical CSS. Less is faster.

Quick quiz

1. Which image format is best for web performance?
2. What does a CDN help with?