Website Performance & Optimisation
Learn how to measure, investigate, prioritise, improve, and re-measure real website performance before moving into SEO fundamentals.
How to use this section
This section sits after the completed Modern CSS material and before Technical SEO. You will learn how browsers load pages, how to use DevTools and Lighthouse, how to optimise images, CSS, fonts, JavaScript and delivery, and how to turn performance work into a repeatable improvement cycle.
Lessons in this section
Understanding Website Performance
Learn what website performance means, why it is measured from the visitor perspective, and how LCP, INP, and CLS describe real page experience.
Start tutorial →How Browsers Load and Render Websites
Follow the browser from URL request to DOM, CSSOM, render tree, layout, paint, composite, and interactive page.
Start tutorial →Measuring Website Performance
Use Lighthouse and Chrome DevTools Network to establish a repeatable performance baseline before optimising.
Start tutorial →Optimising Images and Media
Choose formats, resize assets, compare compression, use responsive images, reserve dimensions, and lazy-load suitable media.
Start tutorial →CSS and Web Font Performance
Investigate CSS and font delivery cost using Network and Coverage while preserving maintainable styling decisions.
Start tutorial →JavaScript and Resource Loading
Understand how JavaScript affects download, parsing, execution, responsiveness, third-party loading, and production builds.
Start tutorial →Caching, Compression and Content Delivery
Inspect browser caching, compression, response headers, hosting, and CDN delivery as part of the whole performance system.
Start tutorial →Performance Budgets and Continuous Improvement
Turn optimisation into a repeatable process with budgets, prioritisation, before-and-after measurement, and documented decisions.
Start tutorial →