Audit · Who What Wear

Who What Wear: CLS from 0.23 to 0.05, LCP from 2.5s to 1.4s

Their team had worked on LCP and layout shifts for months. The big one was a product gallery that only existed once the script had run.

0.05CLS, was 0.23
1.4sLCP, was 2.5s
2sessions of about two hours
ClientWho What Wear, fashion articles and shopping
ServiceAudit, a short one
Who built itTheir developers
The client

Who What Wear, fashion articles with ads

My wife has shown me a lot of things on Who What Wear. Their product gallery was the first one I had an opinion about.

The RUM data already showed which pages shifted. They asked me for a short audit to find out why.

Who What Wear homepage
What we found, what we did

A product gallery built entirely in JavaScript, and smaller shifts around it

The gallery was the big one. Also on the list: a slider, an LCP image with loading="lazy", third-party scripts, a sticky element and infinite scroll. Their developers took the list from there.

What was wrong
What we did
LCPCLS
The HTML had no images for the gallery. They arrived when the script ran, so the LCP waited for JavaScript and the gallery pushed the text under it down.
The images are in the HTML, so the browser paints the first one before any JavaScript runs. The script adds the scroller and the zoom afterwards, and nobody misses those in the first second.
CLS
The fallback font took up different space than the web font, so the text reflowed when the web font arrived.
The fallback font was matched in size to the web font, so the text no longer reflows.
CLS
Modules that loaded asynchronously pushed the content around them.
Each got a placeholder at its final size.
The product gallery before and after: built by the script, the image waits and the text below moves. In the HTML, the image paints at once and stays put
A week later

Their field data showed the new LCP and CLS within a week.

"Arjen, your recommendations make a lot of sense! I am glad we asked you!"

K Klein, VP Product Management, Who What Wear

What we learned

Months of fixes, and one component that held them back

Their team had fixed a lot in those months. The biggest cause left was one component: a gallery that waited for JavaScript.

The ads can stay

They kept their ads and their ad revenue, and passed Core Web Vitals. What changed was how and when the ads and modules loaded.

Arjen Karel

CLS still over 0.1 after all the fixes?

Fixed price, one week. I find the cause in your field data and put the fixes in order for your developers. €1,500.

See how the audit works

More results on my clients page.

Who What Wear: CLS 0.23 to 0.05, LCP 2.5s to 1.4s Core Web Vitals Who What Wear: CLS 0.23 to 0.05, LCP 2.5s to 1.4s