Marcel SchreiberAutomation and agents for small businesses
Problem
Website and tech
Industry
Photographer
Year
2026
Project type
Own project

SEO and motion relaunch of a photographer's website

Layout shift above the hero: measurable in every run before, 0 in every run after, with the mouse moving.

The number: 21 of 21

Runs without a layout shift after the fix; before, every mouse move caused one

Starting point

On my photography website a viewfinder ring follows the mouse over the hero. I liked the effect, but it moved through the CSS properties left and top. On every mouse movement the browser recalculated the layout, and the page shifted in a measurable way. There were gaps on the search side too: footer, home page and galleries did not link to each other on purpose, and empty galleries sat in the sitemap. I wanted to fix both and have proof from a measurement, not from a feeling.

What was built

The ring now moves through transform instead of left and top, so the browser does not recalculate the layout. For search I added internal links between the footer, the home page and the real estate gallery, and took empty galleries out of the sitemap. The measurement runs as a script: production build on my machine, Chrome driven by Playwright, three seconds of mouse movement over the hero, the Layout Shift API, the median of three runs, before and after with the same script. A reviewer agent also measured a fresh build of the final state.

  • Next.js
  • CSS transform
  • Playwright
  • Chrome
  • Layout Shift API

Result

Layout shift with mouse movement over the hero was clearly above 0 in every measurement before: 0.196 in my run, 0.44 in an independent re-measurement with a different mouse path. After the change it is 0 in every run. The before value depends on the mouse path, so I only compare measurements made with the identical script. I do not quote an LCP figure, because the differences sit within noise on a local build. Whether the search changes bring clicks is open, since there is no data for that yet.

Proof

You get the measurement files for before and after, each with the median of three runs and the elements that shifted. Before and after screens of the hero at 1440 pixels wide come with them. The files contain only local addresses and class names, no visitor data. The measurement can be repeated with the script on a production build. I do not attach Lighthouse reports, because the score varies too much to prove anything. If you want to see the measuring script, send me a short note.

Hero of the site before and after the relaunch, desktop 1440 px.
Hero of the site before and after the relaunch, desktop 1440 px.

File: Measurement files before and after: median of three runs, with the elements that shifted.

Limits

I measured on a local production build, not on the live server and not with real visitors. Touch interaction on a phone is not measured. I do not quote Lighthouse scores: the mobile score swings widely within the same build, and the change does not affect it. Also, layout stability is not load speed, so I am not claiming the page loads faster. I have not looked at rankings, clicks or enquiries, because there is no data for that period.