Mobile site speed: what actually improved the experience
Images first, always
Images were 80% of our page weight. Converting them to modern formats, serving the size actually displayed, and adding width and height attributes to stop layout shift produced the single biggest gain — before touching any code.
Defer everything that is not needed to render
Analytics, ad scripts and chat widgets do not need to block the first paint. Loading them after hydration cut our largest-contentful-paint time noticeably, with zero feature loss.
Fonts: self-host and limit variants
Two weights of one family is enough. Self-hosting removes a third-party round trip and font-display: swap means text is readable while the font arrives.
Load order matters more than total size
A small file that blocks rendering hurts more than a large file loaded late. Ask of every resource: is this needed for the first screen? If not, delay it.
Measure on a real phone
Lab scores are useful but reality is a mid-range Android on a weak connection. Test there, and fix what feels slow, not only what scores badly.
A step-by-step speed plan
- Measure first: run PageSpeed Insights and note LCP, CLS and INP for your most important page.
- Convert images to WebP and serve a small phone version (about 640px wide).
- Set width and height on every image to stop layout shift.
- Load the first image early and lazy-load the rest.
- Defer non-essential scripts: analytics and ads after the content appears.
- Limit fonts to one self-hosted family with two or three weights.
- Measure again and compare with your baseline.
An example from our own site
Article images weighed about 3 MB combined. After converting to WebP and adding 640px phone versions, the total dropped to about 0.55 MB and the first image appeared immediately. We changed neither the design nor the framework — only how images are served and the load order.
Comparison table: impact vs effort
| Improvement | Effort | Expected mobile impact |
|---|---|---|
| Compress images / WebP | Low | Very high |
| Phone-sized image versions | Low | High |
| Defer third-party scripts | Medium | High |
| Fewer font weights | Low | Medium |
| Rebuild on a new framework | Very high | Not guaranteed |
Afterwards, run the page through the SEO audit to confirm titles and images are still intact.
What I would do first on any site
Compress images, set explicit dimensions, defer third-party scripts, cut unused CSS. Four steps, no rewrite, and most of the improvement you can get.
Comments(0)
…