@tunetheweb@webperf.social
@tunetheweb@webperf.social avatar

tunetheweb

@tunetheweb@webperf.social

Web Performance Developer Advocate for Google Chrome helping to make the web go faster! All opinions my own.

This profile is from a federated server and may be incomplete. Browse more on the original instance.

tunetheweb, to random
@tunetheweb@webperf.social avatar

Have you heard about the Speculation Rules API but not found time to implement it on your website yet?

Well, we published a codelab for Google I/O to walk you through it on a demo site so you can see how easy it is to implement:
https://codelabs.developers.google.com/speculation-rules

Try it out!

tunetheweb, to random
@tunetheweb@webperf.social avatar

Lots of advice on debugging INP in @malchata ’s Google I/O video.

Delves deep into useful attribution data available in version 4 of the web-vitals library released this week!

https://io.google/2024/explore/ba446093-0036-410b-ba1e-f9016ec21899/

tunetheweb, (edited ) to random
@tunetheweb@webperf.social avatar

My Google I/O talk "From fast loading to instant loading" about the Speculation Rules API is now live!

https://www.youtube.com/watch?v=bSua9vMdrNM

Hit me up if you have any questions

2 years ago—before I joined Google—some work I did was highlighted at I/O 2022. Then I was lucky enough to get my dream job at Google and prerecorded a talk for I/O 2023. And now I've got to talk live. I guess the only place to go from here is doing Sundar's keynote next year 😜

tunetheweb,
@tunetheweb@webperf.social avatar

@midzer as one person said to me this week: “The API was cool and all, but document rules with eagerness makes this a game changer.”

tunetheweb, to random
@tunetheweb@webperf.social avatar

There's a few nice #webperf improvements in Chrome 125 DevTools in case you missed them:
https://developer.chrome.com/blog/new-in-devtools-125

  • 103 Early Hints information in Network panel 🛜
  • CSS Selector Stats cost 💰
  • Hide or change order of Perf Panel tracks ↕

Let us know what you think!

tunetheweb, to random
@tunetheweb@webperf.social avatar

🇮🇪 DUB - ✈️ - SFO🇺🇸
Google I/O here I come!

If you’re there and wanna nerd out about then find me and say hi!

I’ll be talking about Instant Loading through the Speculation Rules API on Wednesday (video released for general viewing on Thursday).

https://io.google/2024/

tunetheweb, to random
@tunetheweb@webperf.social avatar

We’ve just published a v4 release candidate of web-vitals.js:

https://www.npmjs.com/package/web-vitals/v/4.0.0-rc.0

We’re not planning any further changes so if no issues or bugs are reported then we plan to release v4.0.0 in the next week or so.

This release contains:

  • INP breakdowns (input delay, processing duration, presentation delay) to point you in the direction of the cause.
  • INP Long Animation Frame (LoAF) entry/entries for further help debugging INP with script and timing info of things affecting INP.
tunetheweb,
@tunetheweb@webperf.social avatar

It also contains a number of breaking changes (hence the major version bump), primarily to the INP attribution model, so if not using that yet then should be fine. You can read about all the breaking changes in this handy upgrade doc: https://github.com/GoogleChrome/web-vitals/blob/v4/docs/upgrading-to-v4.md

‪Do drop any feedback (Ship it! Small bug! Major bug) as an issue in the GutHub repo or by replying to this thread.‬

tunetheweb,
@tunetheweb@webperf.social avatar

As a pre-Google I/O warm up we've just released web-vitals v4! 🎉

See the above thread for all the improvements, and things you need to know to upgrade.

And, later this week, check out @malchata 's talk for Google I/O where he'll be explaining how to use these new features to improve INP:
https://io.google/2024/explore/ba446093-0036-410b-ba1e-f9016ec21899/

#webperf

Schepp, to random German
@Schepp@mastodon.social avatar

@tunetheweb Hey Barry, if I could which for an article topic on web.dev, it would be how the Speculation Rules API and Service Workers relate to one another and why the former one won't work if there is the latter one present. I couldn't find anything documented yet.

tunetheweb,
@tunetheweb@webperf.social avatar

@Schepp It does work for prerender but not for prefetch. We're working on it!

I should add something to the docs in the meantime.

tunetheweb, to random
@tunetheweb@webperf.social avatar

Feeling intimidated by the DevTools Performance Panel and INP?

This is a fantastic video from my colleague Brendan Kenny with step by step instructions on dig into responsiveness issues. Guaranteed you'll learn a lot about how to debug these - I did!

https://www.youtube.com/watch?v=cmtfM4emG5k

tomayac, to random
@tomayac@toot.cafe avatar

First picture:

  • Kilometers: 00.000
    -Time: 00:00:00
  • Marathons ran: 0

Second picture:

  • Kilometers: 42.195
  • Time: 04:09:48
  • Marathons ran: 1

Super proud of being a #Finisher of the 19th Marathon of Empúries that I ran in pouring rain: https://esportslescala.cat/marato-dempuries/.

tunetheweb,
@tunetheweb@webperf.social avatar

@tomayac Congrats. Now stop. That’ll do. No need to do anymore.

bkardell, to random
@bkardell@toot.cafe avatar

in 2024 <g:plusone>, which I guess has been pointless since when Google shut down Plus in April 2019, still appears on more sites in the HTTP Archive March crawl than the native <var> element. I wonder if they still try to load the code and draw the buttons and so on. / @tunetheweb ?

https://rainy-periwinkle.glitch.me/permalink/1adde4c95ff246b4b717335a226c00c8475860027b9d51feac6fadc48b756807.html

tunetheweb,
@tunetheweb@webperf.social avatar

@bkardell

Dear Mr Kardell, in regards to your recent request in reference to XKCD 356, I can tell you approximately 70,000 websites (0.5% of the web) still load plusone.js and 126,000 - 153,000 websites still load platform.js (0.8% - 1.2% of the web). If I can be of further assistance then please do not hesitate to call our tollfree number to be placed on hold. 😁

https://docs.google.com/spreadsheets/d/13TGwq3sZUPBroqE09OXKlQWPtraNHw73jJS_sC4OS48/edit?usp=sharing

tunetheweb,
@tunetheweb@webperf.social avatar

@Meyerweb @bkardell XKCD 386 is my creed. One day I'll convince them all... one day!

bramus, to random
@bramus@front-end.social avatar

Well, he didn't actually say this, but I'm sure he would have. 😉

(Yes, that's you @tunetheweb)

tunetheweb,
@tunetheweb@webperf.social avatar

@nhoizey @bramus Continually! Like a broken record.

Though, as I replied elsewhere be aware that when your manager says this to you, they may not (just) be talking about you making your website faster... 😉

brucelawson, to random
@brucelawson@vivaldi.net avatar

Enjoy these two concentric circles

tunetheweb,
@tunetheweb@webperf.social avatar

@brucelawson what are you doing to my mind!!!!

tunetheweb,
@tunetheweb@webperf.social avatar

@brucelawson It’s LCP not LSD. It’s TTFB not TRIP. It’s TCP not PCP. Ok I’ll stop now…

dwsmart, to random
@dwsmart@seocommunity.social avatar

CrUX has added navigation types to the data (https://developer.chrome.com/blog/crux-navigation-types#crux-history-api) so I've added them to my free cwv history tool here: https://tamethebots.com/tools/cwv-history

tunetheweb,
@tunetheweb@webperf.social avatar

@dwsmart Now you're just showing off @dwsmart ! I only told you all about this 45 mins prior to this post!!!!

tunetheweb,
@tunetheweb@webperf.social avatar

@nhoizey @dwsmart Oh no tell me a URL!

tunetheweb,
@tunetheweb@webperf.social avatar

@nhoizey Ah will leave @dwsmart figure that out then! Let us know if it’s the data that’s suspect. Might be slight rounding issues but other than that it “should” be good.

tunetheweb, to random
@tunetheweb@webperf.social avatar

INP tip!

Recently we discovered that Chrome does a recalc style if you insert an empty iframe, and then update the src.

This can be expensive for some complex sites and so impacts your INP.

Simply setting the src BEFORE adding it to the iframe avoids this.

tunetheweb,
@tunetheweb@webperf.social avatar

Marketing tags make use of 1px iframes like this a lot. And we discovered that GTM was doing this anti-pattern. So
@gilbertococchi and Houssein Djirdeh worked with the GTM team to flip that around. We've just launched it to 100% and can see huge improvements on real sites.

tunetheweb,
@tunetheweb@webperf.social avatar

In the mean time,
@nomster is working on improving Chrome to handle this better for these trivial cases. But if you can make this simple switch before that lands, then you should go ahead and do this.

More details: https://issues.chromium.org/issues/324572951

tunetheweb,
@tunetheweb@webperf.social avatar

"It takes a village to raise a child" and it's similar with INP issues.

This metric is not a "stick to beat up websites with", as I sometimes hear, but an alert to something that could be improved.

Site owners, third-parties, and browser engineers all have a part to play to improve the web here. And yes that definitely includes Google too as a big player in all three of those categories!

tunetheweb,
@tunetheweb@webperf.social avatar

And that's why I'm excited about what this metric will do to help surface issues, and let us all work on fixing them. Some issues will be site-specific and some, like this, might be places where we can impact many, many sites with a few small changes.

I'm really, really looking forward to pass rates improving for INP over the next few years—as they have done for other CWVs when we put our minds to them! And we all make the web a more pleasurable, less frustrating experience by doing that.

tunetheweb, (edited )
@tunetheweb@webperf.social avatar

@tomayac Ha ha! I just grabbed the first StackOverflow answer to "stackoverflow add iframe javascript" to save myself actually typing all this out (or cleaning up the real example that led to this change).

I guess I should have looked closer!

https://stackoverflow.com/questions/70996793/how-can-i-embed-an-iframe-correctly-with-javascript

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • JUstTest
  • magazineikmin
  • Durango
  • Youngstown
  • ngwrru68w68
  • slotface
  • ethstaker
  • everett
  • khanakhh
  • kavyap
  • DreamBathrooms
  • thenastyranch
  • cisconetworking
  • rosin
  • anitta
  • cubers
  • GTA5RPClips
  • mdbf
  • tacticalgear
  • osvaldo12
  • InstantRegret
  • provamag3
  • normalnudes
  • tester
  • Leos
  • modclub
  • megavids
  • lostlight
  • All magazines
    •