Many visitors browse on mobile networks where speed varies and data is paid for by the megabyte. A heavy website is not just slow for them; it costs them money. Designing for these conditions makes a site better for everyone.
Measure what visitors actually experience
Test on a mid-range phone with a throttled connection, not a fast office network. Browser developer tools can simulate slower networks, and tools such as Lighthouse and PageSpeed Insights report the key loading measures.
Images: the biggest win
Images usually account for most of a page’s weight.
- Use modern formats such as WebP or AVIF.
- Serve several sizes with
srcsetso phones download smaller files. - Compress carefully; most photos look identical at much lower file sizes.
- Lazy-load images below the first screen.
- Always set width and height to prevent the layout jumping as images arrive.
Ship less JavaScript
Scripts must be downloaded, parsed and executed, which is slow on modest devices. Ask whether each script is necessary. Many interactive effects can be achieved with HTML and CSS alone. Static or server-rendered pages often outperform heavy client-side applications for content websites.
Fonts
Limit the number of font families and weights. Self-host fonts, preload the most important one, and use font-display: swap so text appears immediately.
Caching and delivery
- Serve files through a content delivery network close to your visitors.
- Give fingerprinted assets long cache lifetimes so repeat visits load almost instantly.
- Enable compression on the server.
Respect the visitor’s data
Avoid auto-playing video, large background animations and unnecessary third-party trackers. If a large download is genuinely useful, such as a brochure, show its size before the visitor commits.
Design for interruptions
Connections drop. Keep forms short, preserve what a visitor has typed if possible, and show clear messages when something fails rather than leaving a blank screen.
A practical budget
Set a performance budget for each page, for example a maximum total size and a target loading time, and check it before every release. Budgets turn performance from an afterthought into a shared standard.
Fast, light websites are not a compromise on quality. They are a sign that the site was built with its real visitors in mind.
