Share this page!

Enter URL or ID to Unroll

You can paste full URL like: https://x.com/threadreaderapp/status/1644127596119195649
or just the ID like: 1644127596119195649

How to get URL link on X (Twitter) App

  1. On the Twitter thread, click on or icon on the bottom
  2. Click again on or Share Via icon
  3. Click on Copy Link to Tweet
  4. Paste it above and click "Unroll Thread"!
  5. More info at Twitter Help
Rick Viscomi Profile picture
@rick_viscomi
Nov 8, 2019 • 4 tweets • 4 min read • Read on X
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! An illustration of a web pa...
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? ImageImageImageImage
A few more teaser illustrations... ImageImageImageImage
I mean COME ON ImageImageImageImage

• • •

Missing some Tweet in this thread? You can try to force a refresh
　

Keep Current with Rick Viscomi

Rick Viscomi Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @rick_viscomi

Rick Viscomi Profile picture
Feb 6
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

PSI screenshot, passing the CWV assessment
Warning icon saying that the assessment is liable to change when INP replaces FID in March
p75 INP 232ms, 72% of experiences are good, missing the threshold
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) Screenshot of Search Console reporting 14 URLs with INP issues, group INP of 232ms, and home page INP of 110ms
The next few sample URLs that didn't have sufficient data were the report pages, like this one:



These are more complex, interactive pages, so if there are INP issues on the site, this would be where it's coming fromhttparchive.org/reports/state-…
Read 22 tweets
Rick Viscomi Profile picture
Feb 5
🔥 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
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
💡 Tip: Check out to explore the collection of INP resources at a glance

- what it measures
- how to measure it (lab and field)
- how to optimize it (JS and rendering)
- successful case studies web.dev/explore/how-to…
Image
Read 35 tweets
Rick Viscomi Profile picture
Jul 15, 2021
📝 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! Pie chart showing WordPress...Timeseries chart of lazy-lo...
@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 🤔 Box and whisker chart showi...
Read 10 tweets
Rick Viscomi Profile picture
Jun 17, 2021
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. PageSpeed Insights results for example.com, 100 Lighthouse s
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.
Read 10 tweets
Rick Viscomi Profile picture
Oct 2, 2020
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)
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.

Check out web.dev/optimize-cls for more tips.

(3/4)
Read 4 tweets
Rick Viscomi Profile picture
Jul 26, 2020
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…
Alternatively, here are links to the YouTube videos of each episode, which include captions.

Nektarios:
Marcy:
Read 4 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

Send Email!

:(