tunetheweb, 2 hours ago to random

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

speedcurve, 3 days ago to UX

May product updates!

🟦 RUM INP attribution & subparts, including dimension filters (e.g. browser, connection type)
🟦 RUM update: lux.js v314
🟦 New synthetic test scripts
🟦 Upgraded test browsers for Industry Benchmarks

Details: https://lnkd.in/gjQMzRM9

#webperf #corewebvitals #inp #ux #pagespeed #sitespeed

tunetheweb, 3 days ago to random

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, 3 days ago (edited 3 days ago) to random

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, 4 days ago to random

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!

tdp_org, 5 days ago to webdev

My pals in BBC World Service have been doing some awesome work on "lite" versions of their news articles (other page types to follow).
They essentially skip the Server-Side React hydration which means you end up with a simpler HTML+CSS page, no JS.
Page sizes drop significantly:

• Transferred: ~600KB -> 30KB
• Total: 1.65MB -> 135KB
  Just append .lite on a URL e.g. https://www.bbc.com/mundo/articles/crgyyvdz1dro.lite
  There's no on/off UX at the moment but they're working on that too.
  #WebDev #WebPerf #WebPerformance #BBC

Screenshot of a BBC World Service Mundo "lite" page with Dev Tools open showing bytes transferred and total as stated

nucliweb, 7 days ago to javascript

I love how @lydiahallie explains and simplifies how Event Loop, Web APIs, (Micro)task Queue, works in her video series "JavaScript Visualized"

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

#WebPerf #INP #JavaScript #JS

tunetheweb, 9 days ago to random

🇮🇪 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/

nhoizey, 9 days ago to random French

“SpeedCurve | NEW: RUM attribution and subparts for Interaction to Next Paint!” by @cliff

🔗 https://www.speedcurve.com/blog/rum-attribution-subparts-interaction-to-next-paint/

> In addition to advanced settings, navigation types, and page attributes, we've just released more diagnostic detail for the latest flavor in Core Web Vitals: Interaction to Next Paint (INP).

This looks great, will use it ASAP for client sites!

#SpeedCurve #WebPerf #INP #RUM

⚓️ https://nicolas-hoizey.com/links/2024/05/02/speedcurve-new-rum-attribution-and-subparts-for-interaction-to-next-paint/

calibre, 10 days ago to random

⚡ There are several common reasons why your Cumulative Layout Shift might not be fast:

🔹 Images, ads, iframes and embeds without specified dimensions
🔹 Unoptimised webfont delivery and display
🔹 Inefficient CSS animations
🔹 Late-injected JavaScript content

#webperf #perfmatters

https://calibreapp.com/blog/cumulative-layout-shift

pawelgrzybek, 11 days ago to random

You really should start using modern image formats on your website. Just look at this example of a picture from one of my recent articles.

.jpg - 177kb
.webp - 28kb
.avif - 13kb

If you look at them side by side you can't tell the difference!

#performance #webperf

sia, 12 days ago to 11ty

Really excited for my clickbaity talk tomorrow at...

The 11ty International Symposium on Making Websites Real Good (best conf name ever)

You're probably doing web performance wrong*

https://conf.11ty.dev/
#11ty #webperf

• It’s not actually wrong, you’re probably just making your job harder and getting frustrated from trying everything with no impact.

tunetheweb, 16 days ago to random

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.

tammy, 17 days ago (edited 17 days ago) to accessibility

There's more to web performance than page speed. A performant, usable site needs to be:

⏱️ Fast
✋ Accessible

So happy to see my Complete Guide to Performance Budgets included in the latest issue of A11y Weekly, alongside some fantastic other resources!

https://a11yweekly.com/issue/394/

#a11y #webperf #ux #sitespeed #pagespeed #webperformance

nhoizey, 17 days ago to random French

“SpeedCurve | NEW: RUM attribution and subparts for Interaction to Next Paint!” by @cliff

🔗 https://www.speedcurve.com/blog/rum-attribution-subparts-interaction-to-next-paint/

> In addition to advanced settings, navigation types, and page attributes, we've just released more diagnostic detail for the latest flavor in Core Web Vitals: Interaction to Next Paint (INP).

This looks great, will use it ASAP for client sites!

#SpeedCurve #WebPerf #INP #RUM

⚓️ https://nicolas-hoizey.com/links/2024/05/02/speedcurve-new-rum-attribution-and-subparts-for-interaction-to-next-paint/

mherchel, 18 days ago to drupal

I wrote a blog post on eliminating jank in #Drupal's admin UI. Check it out at https://herchel.com/articles/polishing-drupals-admin-ui #webperf

speedcurve, 18 days ago to random

NEW: Our latest release includes RUM attribution and subparts for INP! @cliff explains:

🟡 Element attribution
🟢 Where time is spent within INP, leveraging subparts
🔴 How to use this information to fix INP issues

https://www.speedcurve.com/blog/rum-attribution-subparts-interaction-to-next-paint/

#corewebvitals #INP #webperf #webperformance #sitespeed #pagespeed

tammy, 19 days ago to UX

What you can learn about the world's leading websites on @speedcurve's interactive Page Speed Benchmarks dashboard:

💡 Current & historic #webperf of top retail/media/travel sites in the US, EU, UK & Japan

💡 Filter by metric (including Core Web Vitals like LCP & CLS)

💡 Filter by fast desktop vs slow mobile

💡 Drill down for Lighthouse audits, waterfall charts & more!

https://app.speedcurve.com/benchmarks/europe/media/slow/largest-contentful-paint/

#corewebvitals #ux #pagespeed #sitespeed

ryantownsend, 20 days ago to webdev

Looks like we're close to getting @starting-style in Firefox Nightly: https://bugzilla.mozilla.org/show_bug.cgi?id=1834876

If you're building animated dialogs/menus, you should be building them with this and transition-behavior: allow-discreet, workarounds/hacks should only be used where absolutely necessary as they will rapidly become deadweight.

Accept where we are today, but build with the near future in mind.

#webplatform #webperf #webdev

orangeacme, 20 days ago to random

There's a large overlap between the sustainable web and web performance, so I wrote "5 tips for creating speedier, more sustainable websites with Fastly": https://www.fastly.com/blog/5-tips-for-creating-speedier-more-sustainable-websites-with-fastly
#webPerf #sustyweb

TimVereecke, 21 days ago to random

My latest article looks at the performance best practices for all three parties in the Revive Adserver ecosystem: the ad server, the publisher and the advertiser. #webperf https://www.revive-adserver.com/blog/display-banners-fast-a-technical-paper/

tammy, 25 days ago to UX

PERFORMANCE HERO • per-FAWR-muhns HEER-oh • noun • A person who has made a huge contribution to the #webperf and #ux community, without whom the web would be a sadder, slower place.

Celebrating our inaugural @speedcurve Performance Hero, @paulcalvano!

https://www.speedcurve.com/blog/web-performance-hero-paul-calvano/

#sitespeed #pagespeed #webperformance

nhoizey, 25 days ago to photography French

Should I please Lighthouse with modern image formats, or my visitors with progressive rendering of large images in my photography site? 🤔

Of course, this would be much easier with genaralized JPEG XL support, both modern and allowing progressive… 🤷‍♂️

#image #JPEGXL #Lighthouse #photography #WebPerf

⚓️ https://nicolas-hoizey.com/notes/2024/04/24/1/

tammy, 26 days ago to UX

I'm brainstorming topics for a brand-new #webperf / #ux conference talk. Tell me, folks... what burning questions/problems would you love to get answers for?

Bonus points for suggestions that are not about INP. 😉

krinkle, 27 days ago to random

@zachleat

I wonder if there's a better way to show page weight on leaderboards.

One thing could be to sync their Y-axis so that they're lines on the same base chart (instead of relative to own history only).

Another might be to then invert that axis with bottom the current largest and top the current-smallest. Or... maybe a singlestat number with current size of each and some kind of shared color range (no line/history until click).

Thoughts?

https://www.speedlify.dev/test-runners/

#speedlify #webperf