Your site is slow because of images. Here is the fix.
Most slow sites are not slow because of code. They are slow because a 2 MB photograph is being squeezed into a 400-pixel box.
When a site feels slow on a phone, the instinct is to blame the framework. It is almost never the framework. Open any page you suspect, look at what it downloaded, and sort by size. It will be images, and usually one video.
The oversizing problem
A photograph exported at 1600 pixels wide, displayed in a card 380 pixels wide, wastes about 94% of what it downloaded. The visitor pays for every one of those pixels in data and in waiting, and sees none of them. On a good connection you will never notice. On a shared mobile bundle, that is the whole experience.
The fix is to ship several sizes and let the browser choose. That is what the srcset and sizes attributes are for, and they have worked everywhere for years. The only real work is being honest in the sizes attribute about how wide the image actually renders at each breakpoint — get that wrong and the browser confidently picks the wrong file.
The format problem
JPEG is thirty years old. AVIF typically lands the same photograph at a fifth of the size, WebP at about a third, and both are supported by effectively every browser in use. A picture element with AVIF first, WebP second and JPEG last costs a few extra lines and means nobody is served a format they cannot read.
Combine correct sizing with a modern format and an 80% reduction is routine, with no visible difference.
The video problem
Background video is the worst offender, because it usually starts downloading before the visitor has asked for anything. Setting preload to none does not help if the clip also autoplays — playing it is a request to download it.
If you want ambient motion, serve a separate, deliberately small version of the clip for that job: lower resolution, no audio track, tighter bitrate. Keep the full-quality file for when someone actually presses play. Then delay starting the loop until the page has finished its real work, and skip it entirely when the browser reports a slow or metered connection. Decoration should never be the first thing to arrive.
How to check
- Open the network panel, reload, and sort by transfer size. The top three entries are your problem.
- Compare each image’s natural width to the box it renders in. Anything over about 2x on a standard display is waste.
- Throttle to a slow connection and reload. What appears first tells you what your priorities actually are, whatever you intended.