Search Engines & Performance
04 / Performance
Key question
How fast is fast enough?
Every second of loading time costs attention. Slow pages are abandoned before they can even be seen, especially on mobile devices on the go. Performance is therefore a design task: images, fonts and effects all carry weight.
Learning objective: You will be able to read and interpret Core Web Vitals, set a performance budget, and avoid the most common bottlenecks in design.
Every second counts.
4.1 / Core Web Vitals
Three values for the experience.
Google measures user experience using three key metrics, the Core Web Vitals. They also influence rankings.
01
LCP
Largest Contentful Paint: When is the largest element visible? Good up to 2.5 seconds.
02
INP
Interaction to Next Paint: How quickly does the page respond to clicks? Good up to 200 milliseconds.
03
CLS
Cumulative Layout Shift: How much does the layout shift while loading? Good up to 0.1.
Measurements are taken from real visitors. PageSpeed Insights shows both: lab data for troubleshooting and field data from real-world use.
Images are the biggest item.
4.2 / Performance budget
Plan weight like a budget.
A performance budget defines how heavy a page is allowed to be, for example under 1 MB for the homepage and an LCP of under 2.5 seconds. Every new element must fit within the budget: a video in the header alone can weigh more than the rest of the page combined.
The biggest culprits are almost always images, followed by JavaScript and fonts. If you plan early, you won't have to painstakingly trim the fat later.
Plan weight like a budget.
4.3 / Designing for speed
The most common brakes.
Images appropriately sized and in WebP or AVIF format, lazy-loaded below the fold. A maximum of two font families, as WOFF2 and using font-display: swap. Animations used sparingly and with transform and opacity rather than layout properties.
Fixed aspect ratios for images, videos, and embeds help prevent jumping layouts. Third-party scripts such as chat windows, maps, or trackers come at a high cost: check each one to see if it's worth the price.
Fixed dimensions to prevent layout shifts.
Exercise
A fast home page
Task: Optimise the homepage of the joinery business "Schreinerei Holzwerk" or your own website.
STEP 1
Measure the homepage with PageSpeed Insights on mobile and note down the LCP, INP, and CLS.
STEP 2
Set a performance budget and enter the actual values into the tool.
STEP 3
Implement three measures: optimise images, reduce fonts, remove or defer a third-party script.
STEP 4
Measure again and compare.
Evaluation: Which measure delivered the best results, and how much did it cost?