The @HTTPArchive website was passing the Core Web Vitals assessment in PSI, but there was a problem

p75 INP was 232ms, missing the good threshold by a bit

With INP only weeks away from becoming a CWV, this was a big liability and the site would soon start failing the assessment



So I looked at the site's performance in the Core Web Vitals report of Search Console

Search Console corroborated what PSI was telling me: the site has an INP issue

But there was another clue: the home page, which was the only one that had URL-level data, was fast (110ms)

🔥 INP resource megathread 🔥

Here's a list of resources to help you on your journey to optimize #INP and get ready for it to become a #CWV next month

https://twitter.com/ChromiumDev/status/1752748675598565604

The first place to go with general questions about INP should be the official docs at

Here you'll find answers to basic questions about the metric as well as links to other helpful resourcesweb.dev/inp

📝 New post with @felixarntz: The performance effects of too much lazy-loading

The bottom line is that lazy-loading LCP images can make them slower. Don't do it!

Learn more about our analysis 👇
web.dev/lcp-lazy-loadi… @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!

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.

Core Web Vitals tip: CLS can come from unexpected places, like headers that become fixed or sticky positioned to the top of the page on scroll.

By removing the header from the layout flow and sticking it to the top of the page, all of the subsequent contents shift up.

(1/4)

https://twitter.com/g33konaut/status/1311709596847927296

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)

Resharing two #a11y episodes I did for the State of the Web series on today's 30th anniversary of the Americans With Disabilities Act.

In January 2019 I spoke with Nektarios Paisios from the Chrome Accessibility team about making the web more accessible.
…theweb.googledevelopers.libsynpro.com/accessibility-… And in January 2020 I revisited the topic with Marcy Sutton, Head of Learning at Gatsby.

I *highly* recommend giving both of these a listen to learn about the state of accessibility from two different perspectives.

…theweb.googledevelopers.libsynpro.com/video-with-dou…

Here's an LCP of 14 hours.

This is why you don't use averages when analyzing web performance distributions! One way this can happen is if you open a new tab but don't immediately switch to it. LCP's clock will be ticking while the tab is invisible.

When that happens the Web Vitals extension will helpfully annotate LCP.

I could start a food blog about all the pancakes I eat around the world.

Amsterdam edition San Francisco

#perfnow @anniesullie giving a fascinating talk on good metrics and how to use them

Shout out to @ChromeUXReport #perfnow Q: how would you evaluate Cumulative Layout Shift as a metric? How might we improve layout stability metrics?

#perfnow per @simonhearne and @HTTPArchive the median website is comprised of 37% third party requests

Based on Almanac queries almanac.httparchive.org/en/2019/third-… Stats on SRI

almanac.httparchive.org/en/2019/securi…

#perfnow @shortdiv masterfully and seamlessly transitions from fast food condiments to predictive fetching. And now I'm hungry. For knowledge. And fries. Also, we've got an Almanac chapter for that.

The state of Resource Hints by @katiehempenius

almanac.httparchive.org/en/2019/resour…

Next at #perfnow, @patmeenan professes his contempt for web fonts, and something something HTTP/2 😁 How to test for H2 prioritization issues with @usingwpt

.@csswizardry is asking the right questions at #perfnow "collect data and when you think you have enough, get more"

#perfnow

Building on the basics with @patrickhamann at #perfnow

It's about to get real. Wasm incoming. Flash/Flex/applets were "flings" of the web

Here's @tameverts keeping the caffeinated energy going after break at #perfnow Tammy coauthored the Page Weight chapter of the Web Almanac

almanac.httparchive.org/en/2019/page-w…

The snappily dressed @HenriHelvetica kicks us off at #perfnow Sticker game is strong

👀 @HTTPArchive sticker (see me if you want one)

The #WebAlmanac is almost ready to launch and I'm really REALLY excited. 75+ people from the web community volunteered their time to produce a report containing **20 chapters** about the state of the web. So grateful for all of the contributors and I can't wait to share our work! By the way, how great are these illustrations?! Many thanks to @DataToViz for drawing all 20 chapters. I absolutely love how these came out.

Can you guess which chapters they correspond to?

How mad at your CSS do you have to be to add 274 zeroes to your z-index? Source: @HTTPArchive July 2019
github.com/HTTPArchive/al…

I need some help with the art direction of Web Almanac. (Reminder that its mission is to report on the state of the web.) What do you think the tone of the website and its design should be? @ralphsdiorama isn't this kind of thing your jam? got any advice?

I've been a big fan of @stoyanstefanov and @perfplanet's calendar.perfplanet.com, which has been bringing the web performance community together for 10 years (!!) to write about the state of the art.

That has been the inspiration behind @HTTPArchive's Web Almanac project. (1/3)

https://twitter.com/HTTPArchive/status/1127980434804092928

Imagine having an annual report written by trusted web experts that covers not only the state of web performance, but the quantifiable state of everything else from the way developers write web applications to the way they deliver it to users to the way users experience it. (2/3)

Nobody asked but here's the recipe for my traditional Sunday pasta sauce. First and foremost, pour a glass of red wine. This assists with the culinary process in many ways.

Today we're having a Costco brand Bordeaux.