The salon site's particular problem
A salon's website is its portfolio. The work has to be visible, in quantity, in colour, on a phone. And that is exactly why salon sites are the slowest category we audit: a home page carrying forty uncompressed phone photos in a slider, a gallery page with two hundred more, each several megabytes, all loading at once. Six seconds on mobile data, and the Book button arrives after the visitor has gone.
The gallery does not have to be slow. It has to be built as a gallery rather than as a folder of uploads.
Rule 1: size for the slot, not the camera
A phone photo is 4000 pixels wide and several megabytes. A gallery tile on a phone is 400 pixels wide. Serving the original to the tile downloads ten times the pixels needed. Every image needs a set of sizes (400, 800, 1200, 1600 pixels) and a srcset so the browser picks the smallest that fills the slot on that screen. WordPress generates sizes on upload; Next.js's Image does it on demand; both need honest sizes attributes describing the layout. In a three-column grid that stacks on phones: (max-width: 640px) 50vw, 33vw.
Rule 2: modern formats, sensible quality
WebP or AVIF at quality 75 to 80 is a third to a half the size of the JPEG at the same visible quality, and hair colour survives it fine. Configure the platform to serve them automatically. Cap uploads at 2000 pixels on the long edge; nothing on a website needs more.
Rule 3: lazy-load everything below the fold, and nothing above it
Every gallery image the visitor has to scroll to gets loading="lazy", so it downloads as it approaches the viewport. The one or two images in the first screen (the hero, the first row) do not; they load eagerly with fetchpriority="high" on the hero. A gallery of two hundred images then costs the initial load exactly two images.
Rule 4: no slider on the home page
Sliders load all their slides, show one, and are ignored by most visitors. A single strong hero image, sized and prioritised, followed by a small static grid of four to six recent pieces with a "See more work" link, loads in a fraction of the time and shows the work better. If a moving element is wanted, a short muted video loop under a megabyte is cheaper than a slider of eight photos, and still worse than a good still.
Rule 5: fixed dimensions so nothing jumps
Every image has width and height or a CSS aspect-ratio, so the browser reserves its space before it loads and the page does not shift as tiles arrive. For a gallery of mixed portrait and landscape shots, crop tiles to a consistent ratio (square or 4:5) and show the full image on tap. Layout shift is a Core Web Vitals failure and galleries are its main source on salon sites.
Rule 6: organise by service and stylist
A gallery of two hundred undifferentiated images is a scroll nobody finishes. Each image carries a service and a stylist as fields. The gallery page filters by both; each service page shows its own work; each stylist profile shows theirs. The visitor sees twelve relevant pieces rather than two hundred random ones, and each tapped image can show "Balayage by Sam, from £X" with a Book button pre-selecting both. The gallery becomes a menu.
Filtering by service also means the "balayage [town]" search lands on a page full of balayage, which ranks better than a page of everything.
Rule 7: paginate or load more
Even lazy-loaded, two hundred image elements is a lot of DOM. Show twenty-four, with a "Load more" button or automatic loading as the visitor scrolls. The page stays light and the visitor who wants to see everything can.
Rule 8: the upload rule
The gallery decays because new uploads bypass the rules. Two safeguards: the platform enforces the size cap and format conversion on upload so nothing the stylist adds can be huge; and a monthly glance at page weight in the maintenance report catches anything that slipped. A stylist uploading from their phone should be able to add work without knowing any of this, and the site should make it safe by default.
Rule 9: consent
Every client in a gallery image has agreed, in writing, ideally in the booking platform's consent field or a one-line form. Note it on the image record. A gallery full of unconsented faces is a complaint waiting to happen.
Instagram feeds
Embedding a live Instagram feed is the slowest single element on many salon sites: a third-party script, unsized images and a layout shift, for content that is already on Instagram. Better: a server-side fetch of your latest nine posts, cached hourly, rendered as your own sized, lazy-loaded tiles linking to Instagram. Same content, no script, no shift.
What it achieves
A salon site built this way shows more work than the slow version, faster: the hero in under a second, the first row immediately, the rest as the visitor scrolls, filtered to what they came for, each piece bookable. It passes Core Web Vitals on mobile with a gallery of hundreds. That is the version where the photos help fill chairs instead of emptying the page.
Where this sits
The gallery built this way, with service and stylist fields, sizing and lazy loading enforced on upload, and a server-rendered Instagram grid, is part of every salon website we build, and rebuilding a slow gallery is the most common speed fix in a salon diagnosis. The work deserves to be seen; the page has to arrive first.