Static HTML is fast until photography, fonts, and leftover demo scripts arrive. Treat LCP, CLS, and INP as a budget: one hero, sized images, few fonts, and JavaScript that only serves the archive. This is a working note from the VicanTheme journal, written for developers shipping image-led brochure sites from a bought pack. The catalog we keep returning to is HTML templates, because files you can host beat a locked builder when the brand has to last.
If you already know the industry, skip ahead to the recommended demo — Lumen — and use the headings as a checklist rather than a speech.
LCP is usually the photograph you insisted on
On a Lumen site the largest paint is the opening still, not the CSS. Give that image a width and height, a sensible srcset, and a compressed file that looks like grain, not soup. Do not lazy-load the hero. Do not hide it behind a slider that downloads four other heroes.
Self-host the display face you use. A theme that @imports a full Google family for a demo will stall the first paint. Subset, use font-display swap or optional with a fallback that matches metrics, and stop at two families. Preload only the hero and the one face that appears in the first heading. Preloading seven assets is how you fight yourself.
CLS from images, fonts, and late chrome
When you replace demo photographs, you change aspect ratios. If the pack reserved a landscape slot and you drop a portrait, the caption will jump. Set aspect-ratio or keep the author’s frames and crop in the asset. Galleries that inject height after JavaScript runs will shift the page; size the thumbs in HTML. Cookie bars and late webfonts are the other usual suspects.
Carousels are CLS machines. A photography studio rarely needs one. Lumen’s archive should be a sequence you scroll, not a slider that paints the next frame into a different height. If the author shipped a carousel on the homepage, consider a static crop for launch and keep motion on inner pages where it is optional.
INP and the script budget of a brochure
Two files plus a form library is a budget. A cursor follower, three carousels, and a smooth-scroll polyfill are a vanity tax on every tap. INP cares about the delay after click. Heavy listeners on scroll will make a simple menu feel drunk. Keep theme behaviour in the author’s file. Put your analytics with defer.
Filters on an archive should stay a few dozen lines of vanilla JavaScript. If a contractor wants React to tag forty stills, they are building a product you did not ask for. Reel’s slate page can live as HTML. Video should not autoplay with sound; a poster is kinder to INP and to the visitor. Measure interaction on the enquiry button and the nav. Those are the taps that matter.
A launch checklist that survives real photography
Compile CSS, remove unused demo pages from the nav, compress images to the sizes you display, and run Lighthouse on production URLs with cache warm and cold. Lab scores on localhost lie. Field data in Search Console is the adult metric. A heavy still can miss LCP and remain the right picture; then budget bytes elsewhere. That is the honest trade on Lumen.
Cache HTML short enough to update a caption, cache images long, and fingerprint CSS when you recast tokens. Static hosts make this easy. The theme will not set Cache-Control for you. After launch, watch whether a seasonal recast reintroduces a four-megabyte hero. Performance is not a one-time audit. It is the habit of not adding a second slider because a campaign felt quiet. Quiet is the point of the pack.
Do this in order
- Open the live demo on a phone.
- Replace photographs before you restyle the CSS.
- Connect the real enquiry or booking tool last.
Questions people actually ask
Should we lazy-load every image?
Lazy-load below the fold. The hero and anything in the first viewport should load eagerly with dimensions set, or LCP and CLS both suffer.
Is a 100 Lighthouse score required?
No. A photography site will spend bytes on pictures. Stay honest about LCP, avoid layout jumps, and keep JavaScript small enough that taps feel immediate.
Keep reading: Photography studio website design: layout that does the job and Best HTML template for photography studio sites in 2026. Or browse Development in the journal.
