@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

What is TTFB? What is it not?

It may surprise you that those questions are a bit more tricky to answer than you might assume.

We've added a section to our docs to explain a bit more:
https://web.dev/articles/ttfb#other-definitions

tunetheweb, to random
@tunetheweb@webperf.social avatar

The Web Vitals Extension v1.5.1 has been released with new INP debug data in the console logging.

With this you can see where your INP time is being spent—is it your event handler's JavaScript? Or was it input delay before that so optimising this interaction's JavaScript isn't going to help? Or presentation delay after that?

And for where it isn't directly related to the interactions's JavaScript we now include Long Animation Frame (LoAF) script data to see what else was running at the time!

tunetheweb,
@tunetheweb@webperf.social avatar

Add it to your INP debugging toolkit if not already using it: https://chromewebstore.google.com/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma

More details on this Core Web Vitals debugging data here:
https://web.dev/articles/debug-cwvs-with-web-vitals-extension

tunetheweb, to random
@tunetheweb@webperf.social avatar

Heard about the Speculation Rules API? You can use it to prerender future navigations for instant future navigations.

Well, did you know that Chrome prerenders pages from the address bar and the bookmarks bar? So your site might already be using this prerendering technology.

Use the "Navigation Type Distribution" tab of the CrUX Dashboard to check your site to see if, and how often, that happens:

https://developer.chrome.com/docs/crux/dashboard

matuzo, to random
@matuzo@front-end.social avatar
  1. Download font from Google Fonts. Original size: 154KB
  2. Subset font. New size: 21KB
  3. Convert to woff2: New size: 10KB

With 3 styles, optimizing fonts saves me ~420KB 🫠

tunetheweb,
@tunetheweb@webperf.social avatar

@matuzo My preferred process:

  1. Use Google Fonts with their CSS
  2. Copy their CSS locally (includes subsetting automatically!)
  3. Download the fonts locally too and update CSS to use them.

Bonus points if you do it from a Mac so lose the font hints.

Google fonts does a LOT to optimise fonts so take their learnings rather than settle for the poor download options from their site.

https://www.tunetheweb.com/blog/should-you-self-host-google-fonts/

tunetheweb, to random
@tunetheweb@webperf.social avatar

Great case study! Shows the impact INP can have beyond just browsing the web:

https://web.dev/case-studies/hotstar-inp

And not the first time I’ve heard of CWVs being used to improve experiences on embedded apps using Chromium.

#wbeperf

adactio, to random
@adactio@mastodon.social avatar

Journal: Speculation rules and fears

Browser are user agents, not developer agents.

🔗https://adactio.com/journal/21149

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

@adactio FYI, speculation rules DOES honour save-data (though sadly usage of that is low) and also the Settings->Performance->Preloading settings.

There are also various other checks we've use:
https://www.youtube.com/watch?v=bSua9vMdrNM&t=1317s

We think that the user-agent being in control of this API is in fact BETTER than doing similar functionality with <link rel>, fetch, serviceworkers or similar.

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!

#webperf

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!

#googleio #webperf

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 😜

#webperf

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 #webperf 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

@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.

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