Performance & Core Web Vitals

Website performance affects far more than loading speed. A slow or unstable site can make pages harder to use, frustrate visitors and reduce the effectiveness of otherwise well-designed content and interfaces.

This section covers the technical factors that influence web performance, from Core Web Vitals and image optimisation to caching, content delivery networks, fonts and JavaScript. The focus is on diagnosing real bottlenecks, understanding the available measurements and applying improvements that remain practical to maintain.

Core Web Vitals

Core Web Vitals provide a useful framework for measuring important aspects of the experience people have when loading and interacting with a web page. Understanding the individual metrics is only part of the task; it is equally important to know where the data comes from and how to identify the underlying cause of a poor result.

This section examines LCP, INP and CLS, along with the differences between laboratory testing and real-user field data. It focuses on practical diagnosis rather than simply chasing higher scores in testing tools.

Core Web Vitals: What Changed and What Matters

LCP Optimisation: Finding and Fixing the Largest Content Element

INP: How to Debug Interaction Delays

CLS: Finding and Fixing Unexpected Layout Shifts

Field Data vs Lab Data: Understanding CrUX and Lighthouse

Images & Media

Images and video often account for a substantial part of the data transferred by a web page. Used without appropriate optimisation, they can delay rendering, increase bandwidth requirements and contribute directly to poor performance metrics.

This section covers modern image formats, responsive delivery, lazy loading, video embeds and image CDNs. The aim is to reduce unnecessary payloads while preserving image quality and ensuring that media is delivered appropriately for different devices and screen sizes.

Modern Image Formats: AVIF, WebP and Fallbacks

Responsive Images: A Practical Guide to srcset

Lazy Loading Done Right

Video Embeds Without the Performance Penalty

Image CDNs: Comparing Automated Optimisation Options

Caching & CDNs

Caching can dramatically reduce the amount of work required to serve a page, but modern websites often use several caching layers at the same time. Understanding which layer is responsible for a response is essential when content becomes stale or expected cache hits fail to occur.

This section explains browser, page, object and CDN caching, along with cache invalidation, debugging and edge computing. It also looks at how to decide whether a smaller website actually needs a CDN and what benefits one can realistically provide.

Caching Layers Explained: Browser, Page, Object and CDN

How to Choose a CDN for a Small Website

Cache Invalidation Strategies That Avoid Unwanted Side Effects

Edge Functions: Running Code Closer to the User

How to Debug Cache Misses

Fonts & Code

Performance problems are not always caused by large images or slow servers. Fonts, stylesheets, JavaScript and third-party scripts can all delay rendering or add work to the browser long after the initial HTML has arrived.

This section looks at practical ways to reduce those costs. It covers web-font loading, critical CSS, third-party script audits, JavaScript optimisation and performance budgets that help prevent a site from gradually becoming slower as new features are added.

Web Font Loading: Improving Speed Without the Flash of Unstyled Text

Critical CSS: Improving Above-the-Fold Rendering

Third-Party Scripts: Auditing Tag and Script Bloat

Reducing JavaScript: Deferring, Splitting and Removing Code

Performance Budgets: How to Set and Enforce Practical Limits