Journal: A web font strategy
How I’m prioritising performance when it comes to typography on The Session.
🔗https://adactio.com/journal/22450
11.03.2026 14:17
👍 4
🔁 3
💬 0
📌 0
Journal: A web font strategy
How I’m prioritising performance when it comes to typography on The Session.
🔗https://adactio.com/journal/22450
![A JSON file representing a source map. The code contains:
{
"version": 3, // Always the integer 3
"file": "out.js", // Optional: name of the generated file
"sourceRoot": "", // Optional: prefix prepended to each entry in "sources"
"sources": ["foo.js", "bar.js"], // Required: list of original source URLs/paths (or null)
"sourcesContent": [null, null], // Optional: inlined source text, aligned with "sources"
"names": ["src", "maps"], // Optional: symbol names referenced by "mappings"
"mappings": "A,AAAB;;ABCDE", // Required: encoded mapping data (base64-VLQ deltas)
"ignoreList": [0] // Optional: indexes into "sources" considered "third-party"
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:ny4wl2lgdvgej5rzaxk45ccn/bafkreiftsj6be2ea7h64mk4nenpkybnly5vte6na3le6xb4jpxgarok62m)
A JSON file representing a source map. The code contains: { "version": 3, // Always the integer 3 "file": "out.js", // Optional: name of the generated file "sourceRoot": "", // Optional: prefix prepended to each entry in "sources" "sources": ["foo.js", "bar.js"], // Required: list of original source URLs/paths (or null) "sourcesContent": [null, null], // Optional: inlined source text, aligned with "sources" "names": ["src", "maps"], // Optional: symbol names referenced by "mappings" "mappings": "A,AAAB;;ABCDE", // Required: encoded mapping data (base64-VLQ deltas) "ignoreList": [0] // Optional: indexes into "sources" considered "third-party" }
Source maps are a vital part of modern web development, but the lack of a standard made it impossible for us to add new features or improve the debugging experience.
This is the story of how we standardized source maps and how we continue to ship features through standards 📜
🧵
Suite des travaux de l'analyse environnementale (Analyse de Cycle de Vie) des #GPU pour l'#IA auxquels #hubblo participe, le rapport complet de l'étude via AltImpact est sorti : librairie.ademe.fr/3426-economi... 1/3
Good blog post from Carlos (a colleague) about a new proposed addition to Compression Dictionaries allowing short-lived HTML pages to continue to be used as compression dictionaries for longer:
dev.to/carlosmateom...
#webperf
Pourquoi et comment réduire l'INP ? Use case sur l'équivalent italien de Le Bon Coin :
dev.to/subito/how-w...
* -100ms d'INP = +5% d'engagement
* méthode empirique à base de tests A/B pour trouver les coupables
* GTM bien sûr, mais aussi tiktok et facebook
* React compiler fait ses preuves en prod
lazyload d'embed, même immédiatement visible : l'astuce sans JS avec <details>
frontendmasters.com/blog/perform...
How do you measure when a component is “ready”? ⏱️
LCP is too global; Element Timing is too specific.
🛠️ I’ve been working with Bloomberg on a new #webperf API: Container Timing. Think of it as “LCP for a web component”, providing aggregated paint timing for a subtree.
Sortir de la SPA = meilleurs perfs, par @lequipe-actu.bsky.social : medium.com/lequipe-tech...
Française, gratuite, open source, la nouvelle application qui mesure l'empreinte carbone de l'IA est lancée www.clubic.com/actualite-59... #trackCarbon
très juste, mais ce qu'a voulu tester l'auteur, c'est une question qu'on a tous : le PNG est en quelque sorte inerte une fois rendu, mais un SVG, ça reste un truc vivant dans le DOM, qui l'a alourdit, et qui donc peut gêner l'interprétation au moment où JS en a besoin
une image, c'est des pixels déjà tout fait, le temps de décodage est minime pour des dimensions d'affichage classiques.
Un SVG, c'est d'abord du code à interpréter, quelques calculs à faire. Ça pourrait, en théorie, prendre plus de temps processeur pendant que tu cliques sur la page
Un SVG complexe alourdit il la page ? Comparaison avec le PNG
En résumé :
- jusqu'à 2 Mo de code, le SVG est plus léger que sa conversion en PNG.
- l'INP avec un SVG dans la page est équivalent au PNG, jusqu'à 400 Ko de code SVG.
Screenshot of a performance trace in Chrome DevTools with a few additional "Nav*" and "LCP*" markers. Hovering over the "LCP*" shows this is a "Soft LCP" and in the Summary panel when you click on it you see "Soft Largest Contentful Paint" and a "Learn more about Soft Largest Contentful Paint" link.
From Chrome 145 (on general release next week!), DevTools we will start to show so called "soft" navigations and "Soft LCP" in the Performance Panel traces.
These are for SPAs which don't do a full page load, but instead "fake it" by updating the current page and pushing a new history entry.
1/5 🧵
Un an de recherche
352 datacenters en activité, 65 projets identifiés
des centaines de vues satellite analysées
8,16 TWh de consommation en 2024, hors salles IT dans les batiments tertiaires
(also available in english)
Étude sur ce que voient les crawlers des chatbots IA, notamment des infos sur le temps max d'attente et l'interprétation de JS, mais aussi des frames ou du shadow DOM
think.resoneo.com/sentinel/geo...
Morale habituelle : être performant, HTML est la base + des surprises
The Performance Inequality Gap, 2026 - Infrequently Noted
🔖 https://infrequently.org/2025/11/performance-inequality-gap-2026/
🔗 https://ellyloel.com/the-performance-inequality-gap-2026-infrequently-noted/
#Bookmarks #Performance #Web
Web Performance Calendar'25 day 1 with @mb21.bsky.social on HTTP streaming in the world of HTTP2/3 and Node. Mauro shows us how to start rendering earlier, turning a slow (full) page load into a progressive experience using db.stream() in JavaScript
calendar.perfplanet.com/2025/improve...
Quel avenir pour l’esthétique web éco-conçue ?, par Esther Jacquet via @paris-web.fr
#24JoursDeWeb
www.24joursdeweb.fr/2025/quel-av...
#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
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...
> 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...
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 🤯
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...
📧 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)
