.webp)
Most of the speed problems we encounter are not architectural. They are a handful of oversized images, a few blocking scripts and an unconfigured cache — all fixable in an afternoon, often without touching the design or the build process.
Here are nine changes, ordered roughly by how much improvement each one typically delivers per hour of work.
Resize the images you actually serve
Serving a 3000px photograph into a 600px slot wastes most of the download. Resizing at upload, rather than relying on the browser to scale, is usually the single largest win available.
- Match image width to its largest display size, not to the source file
- Convert to modern formats with substantially better compression
- Lazy-load every image below the fold, never the one above it
Defer what is not needed yet
Scripts for chat widgets, analytics and marketing tags all compete with your content for the first paint. Deferring them until after the page renders frequently produces a visible improvement on real mobile connections.
- Add defer or async to every script that is not required for first paint
- Delete tags whose reports nobody has opened in six months
- Load third-party embeds only when they are scrolled near
Turn on caching properly
Without sensible cache headers, returning visitors download the entire site again on every visit. A long cache lifetime on static assets removes most of that cost with a single configuration change.
- Serve fingerprinted assets with a cache lifetime of a year or more
- Use a CDN so assets are served close to the visitor
- Enable full-page caching for pages that are not personalised
Stop shipping unused CSS and JavaScript
Most sites carry frameworks, plugins and component libraries that no longer render anything. Removing them shrinks every download and reduces the work the browser has to do on every page.
- Audit the bundle and delete dependencies with no imports
- Purge CSS rules that match nothing in the rendered page
- Split bundles so a single page does not load the whole application
Use web fonts without blocking
Font files render-block text and cause a visible flash of fallback type. Preloading the one or two files you need, with a sensible fallback stack, removes the delay without changing the design.
- Subset fonts to the character ranges actually used
- Preload only the primary weight
- Set font-display to swap and declare a close fallback
Verify the result on real devices
A score from a desktop lab on a fast connection flatters most sites. Field data from real visits is the only measurement that predicts what your customers experience.
- Track field data rather than relying solely on a lab score
- Test on a mid-range Android device, which is the realistic worst case
- Re-measure after each change so you know what actually helped
What to take away
- Oversized images are almost always the largest single cause of slow pages
- Deferring third-party scripts is a same-day change with a visible effect
- Caching and a CDN are configuration changes, not development projects
- Measure with field data from real visitors, not a desktop lab score
Let's build something that moves your business forward
Tell us what you're trying to achieve. We'll help you pick the right team, tools and timeline.