@csswizardry weaving a great story about the social explanations of performance issues
Unless we dig deep into our analytics, anomalies are unexplained blips. But with some curiosity there could be a big opportunity to unlock an entirely new market.
#perfnow Q: how much should we read into the correlation of pushing a fix/improvement on perf vs A/B testing prior to releasing? My concern is that we could never rule out unknown variables without controlled A/B.
Sometimes the biggest gains can be in the long tail.
Important to keep an eye on the 90th percentile.
#perfnow Q: when running competitive analyses, are you looking at synthetic/lab data? How do you know of your tests are representative of the competitors' real user experiences? (CrUX maybe?)
• • •
Missing some Tweet in this thread? You can try to
force a refresh
@felixarntz Specifically looking at img[loading=lazy], adoption is at 17% of websites, up from 1% this time last year.
Of those 17% of websites, 84% are @WordPress websites!
@felixarntz@WordPress When we look at how real users' LCP experiences compare on WordPress sites with and without loading=lazy, we see something peculiar:
LCP seems to be slower when lazy-loading is used 🤔
Here's a head-scratcher for you: why is example.com failing the Core Web Vitals assessment despite getting perfect lab scores? It's just a KB of text!
This is a good teachable moment in reading web perf tools.
Lab tests are run from a single location at a point in time. Lighthouse in PSI emulates a relatively low-end phone and the site performs very well, getting a lab performance score of 100 and 0.8 second LCP.
So far so good.
Field data is a distribution of real-user experiences aggregated over time.
Good lab tests today may not be simulating poor real-user experiences from a couple of weeks ago. So the field data may be dragged down until the poor experiences are "flushed" out of the 28-day window.
And when scrolling back to the top of the page, the header is added back into the layout flow, causing YET ANOTHER layout shift.
This kind of CLS is unbounded, meaning users can incur many layout shifts depending on their scrolling behavior, and it can be hard to debug.
(2/4)
The solution for this and most other layout stability issues is to reserve space for the header when it becomes pinned, for example with a placeholder element or margin-top on the next content.