Jean-Pierre Vincent - #webperf & #greenit 🚀♻️🌱

#JavaScript: When it comes to breaking up long tasks, the scheduler API seems quite convenient:

await scheduler.yield();

Alas, not supported by Safari yet: caniuse.com/mdn-api_sche...

Thankfully, providing your own fallback implementation is easy: web.dev/articles/opt...

I co-wrote a post on the Etsy engineering blog about implementing Speculation Rules API (SRA) to prefetch product listing pages from search results. And many thanks to @tunetheweb.com and @cdaveross.bsky.social for the help and support!
www.etsy.com/codeascraft/...

Screenshot of Vercel cancellation screen with feedback mentioning Guillermo's support of a genocidal war criminal

Hits like crack

La 7e limite planétaire est officiellement dépassée : l'acidification des océans C'est officiel, nous avons dépassé la 7e limite planétaire, celle de l'acidification des océans. C'était attendu par le

C’est officiel, nous avons dépassé la 7e limite planétaire, celle de l’acidification des océans.

Vous ne lirez rien de plus important aujourd'hui. A partager massivement !
bonpote.com/la-7e-limite...

Why do browsers throttle JavaScript timers? Even if you’ve been doing JavaScript for a while, you might be surprised to learn that setTimeout(0) is not really setTimeout(0). Instead, it could run 4 milliseconds later: Nearly a decade a…

🤔 Why do browsers throttle JavaScript timers?

Frontend’s Lost Decade and the Performance Inequality Gap by Alex Russell Alex Russell's journey from engineering to product management, the focus on improving web experiences, and optimizing software for end-user success. Considerations include device performance, web dive...

> Peak CPU performance was probably hit in 2017.

With that perspective, you start... (ahem)... "rethinking best practices".

@infrequently.org's @jsnation.gitnation.org talk is pretty worthwhile and digs into the CPU limitations of the main thread.

gitnation.com/contents/pro...

Masonry, Item Flow, and… GULP? Masonry layout is a difficult thing to do with CSS at present. Item Flow could make it easy.

New blog post about #CSS masonry layout, the (fairly) new Item Flow proposal, maybe subsuming multicol, and a light tingling from my Web-Sense. That last part isn’t NSFW, I promise. (Sorry, @brucel.bsky.social.) meyerweb.com/eric/thought...

Photo of the VueConf US 2025 stage during Daniel Roe's talk on the State of Nuxt 2025 where he announces fontless - a Vite plugin to apply "Magical plug-and-play font optimization for modern web applications"

During the keynote of @vueconf.us, @danielroe.dev releases `fontless` - a @vite.dev plugin to apply "magical plug-and-play font optimization".
Created in collab with the @qwik.dev team

This is basically the @nuxt.com fonts module, but for all Vite-based apps 🤯

SpeedCurve | The Definitive Guide to Long Animation Frames (LoAF) LoAF lets you identify problem scripts, quantify the impact of third-party scripts, and improve the user experience. Here's everything you need to know to get started.

Finally, a LoAF explainer I understand!

The LoAF API is a leap forward for RUM. It lets us find and fix the third parties and other JS that hurts #pagespeed and #UX. The catch? It's tricky to understand. But no longer, thanks to this piece by @andydavies.me!

www.speedcurve.com/blog/guide-l...

Encore une étude sur l'email : dépasser les sujets d'optimisation technique avec une approche attributionnel & conséquentielDavid Ekchajzer, Eric Fourboul, A... Encore une étude sur l'email dépasser les sujets d'optimisation technique

📧 Impact environnemental de l'email : dépasser les sujets d'optimisation technique.

Pour le service mail d'Iroco, David Ekchajzer, Bruno Thomas et Adeline Agut, ont réalisé une analyse des gains environnementaux potentiels de plusieurs leviers d'éco-conception.

www.youtube.com/watch?v=RNxz...

Quelques infos sur le comportement des français vis-à-vis de leur téléphone dont l'obsolescence est visiblement programmée
limitesnumeriques.fr/travaux-prod...

Hi
Do you have an idea why a recent chrome on Android refuses to work ?
I was so interested to know what's going on Android (my current conclusion is that Roboto is the only reliably installed font)

La dernière étude GreenIT sur l'impact global du numérique est sortie : greenit.eco/wp-content/u....

Un petit chiffre : le numérique pour un individu connecté c'est déjà 40% de son budget GES dit "soutenable" (on se limite à 1,5° d'augmentation de la T° globale). Après il faut qu'il mange …

Tip to prevent videos from impacting page load:

- Set a low-quality poster image with the `poster` attribute
- Set `preload="none"` (only works if there's a poster)

The latter tells the browser to avoid downloading the video file until the user requests playback.

Nouvelle étude Green IT 2025 Monde sur les impacts du numérique | Planet Tech Care L'association Green IT publie le 4 février sa toute dernière mise à jour des impacts environnementaux du numérique au niveau monde : IA, objets connectés, TV, smartphones, ... Venez découvrir dès l...

C'est un événement qui n'arrive que deux fois par décennie : une nouvelle étude de l'Association Green IT sur l'impact du numérique mondial !

Rejoignez nous le mardi 4 février à 17h.

Pour vous inscrire, c’est par ici : t.ly/ptcagtw25

prices for the fastest iOS and Android devices, as well as volume segment SKUs from big vendors. The global ASP finally broke $350 this year, hitting a high of $365 (new, unlocked, worldwide). One way to think of this is *five* $200 Androids sold for every iOS device (it's not literally that, but that's broadly on-track as to what has happened over the past decade).

The software might be a steaming pile, but Apple's CPUs are pretty fast. On the hardware side, you get a lot of what you pay for in iOS-land. The same couldn't be said of Androids until this year, when Qualcomm and MediaTek finally got the led out on cache sizings.

Maybe she's born with it? Maybe it's....huge amounts of die size dedicated to caches? Why yes. It is. iPhones are fast because Apple charges an arm and a leg, but is willing to spend on die size and early access to smaller process nodes in return. It's a goddamned scandal that Android ecosystem SoC vendors have been so far behind on this, but now we can see that the reason Androids have been so slow has been exactly what I've been banging on about: cores don't get you speed, keeping cores *fed* gets you speed. And that's what cache does.

Frontend has been lost in delusions about the relative costs of client-side resources. But the facts are stubborn: smartphone ASPs only broke $350 worldwide for the first time in 2024. That's lower than any i-Device sells for.

The "I" in iPhone stands for "inequality".

Le Média GreenTech Forum | #37 Datacenters, Cloud : comment mieux évaluer leur empreinte environnementale ? Quel empreinte environnementale pour le Cloud ? Nombreuses sont les organisations à se poser la question et à rester bien souvent sans réponse. Une situation peu confortable alors que les exigences…

🏭 Datacenters, Cloud : comment mieux évaluer leur empreinte environnementale ? Quelles perspectives ? Quelles normes et réglementations ?

https://buff.ly/3WnoDcV

Merci à Rémy Marrone pour cette interview.

High-Performance Web Fonts Tools and resources on how to use web fonts without sacrificing page loading speeds

www.highperformancewebfonts.com/read/testing... is the first article on the newly "designed" HPWS resource

Async css · Issue #3983 · whatwg/html Allow css files to be marked as async meaning that they will not block rendering. The syntax could be a new attribute on the link element or a new value for "rel" attribute (that already have link ...

It's long past time we had a standard way to load CSS asynchronously. link[async] should work just like the tried and true print-media hack, but without the major downside of javascript reliance for applying CSS.

Join me with a plus one here? github.com/whatwg/html/...

out of this view : "generic iPhones" and "Unknow Androids", representing 30% of the population.
Anyway in France ~80% of people buy Android. Most of them buy it at around 200€.

Graph showing distribution of users of a site in percentage, relative to how powerful the mobile device is, as measured by the geekbench score. The site is a non-luxury e-commerce website in France. It shows that median population is around 750 (a third of a MBP M1) while the centile 75 (useful for google ranking) is around 300 (5 to 10 times less than a MBP M3)

Seeing some replies to your post that still doubt, let me share a view of how distributed computing power is, for non-luxury e-commerce website in France (I swear we're a rich country).

Centile 75 of android users (useful for google ranking) is between 250 and 500 : 5 to 10 times less than a MBP M3

Made this loader codepen.io/thebabydino/... half a decade ago. Then it only worked in Chromium browsers with the Experimental Web Platform features flag enabled.

As of 2024, it works cross-browser, no flags needed. Since someone hearting it reminded me of its existence, updated support info.

#CSS

Breaking Up with Long Tasks or: how I learned to group loops and wield the yield Everything, On the Main Thread, All at Once Arrays are in every web developer's toolbox, and there are a dozen ways to iterate over them. Choose wrong, though, and all of that processing time will hap...

My Perf Calendar post made it just in time before the end of the year 😅

I wonked out on yielding strategies in loops, optimizing for more than just INP

calendar.perfplanet.com/2024/breakin...

Improving INP and FID with production profiling On March 12 Google began promoting INP (Interaction to Next Paint) into a Core Web Vital metric in an effort to push performance beyond page loads. This means y...

Nice use of the JS Self-Profiling API by @sentry.io to debug INP issues

The fix was super satisfying too: replacing a slow JS library with pure CSS

Anyone else have success with it?

blog.sentry.io/improving-in...

Debugging common causes for slow loading in Shopify Liquid storefronts | sia.codes A smarter way to break down loading speed problems, identify causes, and implement optimizations

I'm gradually cross-posting my work writing to my own site with canonical links to the original work post. I want to preserve them in case the original sites go down.

Here's the first one...

Struggling with loading speed on #Shopify sites? I've got you covered! #webperf

sia.codes/posts/debugg...

Release v12.2.3 · GoogleChrome/lighthouse Full Changelog This release is only for PageSpeed Insights and we expect it to ship within 2 weeks. Notable Changes The CPU throttling factor for PageSpeed Insights has been adjusted (#16256) to ac...

Some of you complain that PageSpeed Insights is a bit unrealistically show for the Lighthouse test.

The PSI servers are a bit underpowered so we're changing the throttling, which should make the Performance score go up when this rolls out in the next few weeks.

github.com/GoogleChrome...

🧵 1/5

How To Improve INP: React⚛️ All-in-one guide for improving Interaction-to-Next-Paint (INP) Core Web Vital in React applications. Introduces the useAfterPaintEffect hook.

Did you know that jQuery outperforms React, what? 😳

Sounds like clickbait, but is reality. The HTTP Archive shows 82% of sites that use jQuery have good INP on mobile📱, while only 67% do when they use React⚛️.

Not just sites, also libraries. Let's fix that👇#webperf
kurtextrem.de/posts/improv...

The Evolution of Instant Web: What It Means for Performance Tooling For years, traditional optimization techniques like caching and resource compression have been the go-to solutions for speeding up websites. They’ve been effective at reducing load times and easing se...

Web Performance Calendar day 6 with Ana Boneva on instant pages and speculation rules and how we got here

calendar.perfplanet.com/2024/the-evo...

YouTube video by We Love Speed Beyond the basics, pushing the limits of webperf — Tim Vereecke

My #wls2024 talk is available!

I delved into advanced tuning techniques to make a modern website lightning fast.

Using lots of charts and data, I showed how they helped make scalemates the fastest (and largest) modeling website in the world.

www.youtube.com/watch?v=rjUr...

#webperf

YouTube video by We Love Speed How browsers REALLY load Web pages — Robin Marx

My talk from this year's We Love Speed is on YouTube! 👇

In "Tight Mode: how browsers REALLY load web pages", I take a very deep/very nerdy dive into why browsers sometimes intentionally delay loading resources, why they all do it differently, and why they should *stop clowning around* 🤡

#webperf