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.

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.