Painters and decorators: your before-and-after slider is two images

Decorating sells on evidence. A hallway before and the same hallway after, at the same angle, in the same light. Nothing else on the page works as hard, which is why most sites in the trade end up with six or eight of them on one scroll.

Six sliders is twelve photographs. If each is a 2.5 MB export from a phone, that is 30 MB on a page a customer opens on 4G in a car park, and the honest result is that most of them leave before the second row appears.

The good news is that this is a payload and layout problem rather than a server problem, which means it is entirely within your control and the numbers move quickly once you start.

Cumulative Layout Shift measures how much content jumps around while the page loads. The good threshold is 0.1 or below. Slider plugins are a common cause because they build their markup in JavaScript, so the browser reserves no space and the rest of the page moves down as each comparison block appears.

In DevTools, open Performance, tick Screenshots, record a reload on Slow 4G and scrub the filmstrip. You will see the jump. The fix is to give every image an explicit width and height attribute, or an aspect ratio in CSS on the slider container, so the space is reserved before the file arrives.

Desktop testing flatters a photo-heavy site because the connection is fast and the screen is large. Put the site on your own phone, on mobile data rather than the office wireless, and scroll the portfolio. If you find yourself waiting, so does everyone else.

Then go back to the field data in PageSpeed Insights and check the same page a month later. That report is a rolling 28-day sample of real Chrome visits at the 75th percentile, so it tells you what a quarter of your worst-served visitors experienced. It is slower to respond than a lab run and considerably more honest.