Who What Wear: CLS from 0.30 to 0, LCP from 2.5s to 1.5s
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.
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.
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.
The ads shifted the page too. In their old stylesheet only the header ad had a minimum height, so the other slots had no height until an ad filled them, and the text under them jumped. Their developers gave the slots their size before the ad loads: 480 pixels for the first ad in an article on a phone, 100 for the header. Those builds went live in April 2021.
.placement--header{min-height:180px}.placement--navbar{background-color:transparent;display:inline-block}#placement-incontent-1.placement--incontent-mobilerectangle{height:480px}.layout--phone .container--page-section .ad-mount[data-id=header],.layout--phone .container--page-section .placement--header{height:100px}.placement--navbar{background-color:transparent;display:inline-block;height:40px;width:200px}You can follow the fixes in CrUX. The layout shifts went first: CLS on mobile was 0.30 through 2020, came down in February and March 2021, and the April builds with the ad slots took it to 0, where it has stayed. The gallery took longer, because rebuilding a component takes more than giving a slot its height. When the new gallery went live in September 2021, LCP on mobile, which had sat at 2.4 to 2.5 seconds all year, dropped to 1.7 that month, and it was down to 1.5 by early 2022.
Their own RUM showed each change within days of going live, long before CrUX caught up.
"Arjen, your recommendations make a lot of sense! I am glad we asked you!"
K Klein, VP Product Management, Who What Wear
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.
CLS still over 0.1 after all the fixes?
One week. I find the cause in your field data and put the fixes in order for your developers.
More results on my clients page.
