Joan León
LightNews LightNews
banner
nucliweb.net
Joan León
@nucliweb.net
1.7K followers 460 following 440 posts
⚡️ Web Performance Artisan at @perf.reviews | Google Dev Expert in Web Tech | Cloudinary Ambassador | ❤️ Image Optimization | Girona
Posts Replies Media Videos
nucliweb.net
I'm excited to share a fantastic YouTube channel dedicated to Web Performance

It's a project led by 2 major references in the Web Performance community, @guaca.bsky.social & @sia.codes

www.youtube.com/@Performance...

Subscribe to stay up-to-date & learn from the best in the community!

#WebPerf
PerformanceObserver
PerformanceObserver is a virtual meetup for the web performance community. Our community is spread out around the world, and not everyone can easily access in-person tech events. Thus, our mission wa...
www.youtube.com
November 11, 2025 at 9:15 AM
Reposted by Joan León
performanceobserver.dev
Episode 8 is next week on Nov 19! Come join us live for access to Q&A and general chat!

We have @aarontgrogg.bsky.social talking about reducing JS workload and @mattzeunert.com walking through synthetic testing with DebugBear! #webperf

All details and add-to-calendar at performanceobserver.dev
PerformanceObserver: A virtual web perf meetup
Join the PerformanceObserver virtual performance meetup to get all the latest web performance news and hang out with the community.
performanceobserver.dev
November 10, 2025 at 6:49 PM
nucliweb.net
📣 New in Web Performance!

We can now use the WebPerf Snippets for LCP & INP in Safari Technology Preview

This allows us to measure 2 of the most critical Core Web Vitals metrics directly within Apple's browser

Time to test!

webperf-snippets.nucliweb.net

#WebPerf #Safari #CoreWebVitals #LCP #INP
Screenshot showing the WebPerf Snippets website section for Interactions (INP). The browser console, highlighted in red, displays the detailed output of an interaction tracking snippet, listing the Input delay, Processing time, and Presentation delay for multiple mouse events, along with a "good" score validation. Screenshot showing the WebPerf Snippets website section for Largest Contentful Paint Sub-Parts (LCP). The browser console output is highlighted, showing the breakdown of the LCP metric (915 ms) into its four key components: Time to first byte, Resource load delay, Resource load time, and Element render delay, including the time in milliseconds and the percentage of the total LCP time for each sub-part. Screenshot showing the WebPerf Snippets website section for Largest Contentful Paint (LCP). The browser console output is highlighted, displaying the calculated LCP value (915 ms) and details of the Largest Contentful Paint element, including its URL, size, and load time.
November 10, 2025 at 8:25 AM
nucliweb.net
My gist “How Browsers Work” has been updated with a new post: “How modern browsers work” by @addyosmani.bsky.social

gist.github.com/nucliweb/c16...

#WebPerf #Browser #WebDevelopment
How Browsers Work
How Browsers Work. GitHub Gist: instantly share code, notes, and snippets.
gist.github.com
November 7, 2025 at 11:14 AM
nucliweb.net
📺 Developer Tooling Tips

Explore DevTools and boost your web debugging skills with these bite-size DevTools tips and tricks, by @developer.chrome.com

youtube.com/playlist?lis...

#WebPerf #Performance #DevTools #PerfTools #WebTools
Developer Tooling Tips - YouTube
Explore DevTools and boost your web debugging skills with these bite-size DevTools tips and tricks by Jecelyn Yeen! Questions? Tweet at @jecfish → https://tw...
youtube.com
November 6, 2025 at 1:31 PM
nucliweb.net
Debugging de INP: Del 'algo va lento' al 'esto es lo que lo rompe'

Ahora nos enfrentamos a la tarea más importante: entender qué es lo que está causando esos frames lentos y, en última instancia, rompiendo nuestro INP.

joanleon.dev/posts/loaf/d...

#WebPerf #INP #LoAF #Performance
Diagrama comparativo que muestra dos líneas de tiempo superpuestas. La primera línea, etiquetada como Evento, tiene una duración de 250 milisegundos y está representada con una barra discontinua naranja. Debajo, la segunda línea, etiquetada como LoAF, muestra una duración de 200 milisegundos, también con una barra discontinua naranja que se solapa parcialmente con la superior. Debajo de ambas líneas aparece una flecha apuntando hacia arriba acompañada del texto: “Se superponen → están relacionados”, indicando que los dos eventos se solapan en el tiempo y por tanto están vinculados.
November 6, 2025 at 1:07 PM
Reposted by Joan León
perfnow.nl
2025 conference photos are up

perfnow.nl/2025/pix/pho...

(though I need to consult a speculation rules expert at some point)
performance.now() 2025 photos
perfnow.nl
November 5, 2025 at 11:24 AM
nucliweb.net
I use several tools to debug and monitor web performance. One of them is @debugbear.com, which helps me track and alert on performance issues — like the one shown here.

If you care about performance, I recommend giving @debugbear.com a try.

#WebPerf #PerfTools #Performance #monitoring
Screenshot of an email alert from DebugBear titled “Change alert for [redacted]”. The email, addressed to Joan Leon, reports a performance issue with the message “Total Blocking Time: 150 ms → 2,010 ms,” highlighted in a red rectangle. The email includes links to “View Details,” “Unsubscribe from notifications for this project,” and “Configure alert criteria.”
November 6, 2025 at 10:08 AM
nucliweb.net
How to optimize SVG files: A complete guide for beginners

penpot.app/blog/how-to-... by @laurakalbag.bsky.social

#WebPerf #ImagePerf #SVG #Image
How to optimize SVG files: A complete guide for beginners
SVG files use mathematical formulas to create graphics, allowing infinite scaling without losing quality, and making them perfect for high-res displays and responsive design.
penpot.app
November 5, 2025 at 5:02 PM
Reposted by Joan León
debugbear.com
Chrome Canary now supports network throttling for individual request URLs!

Learn how to try out this new feature: www.debugbear.com/blog/chrome-...
How To Throttle Specific Requests In Chrome DevTools | DebugBear
Learn how to delay individual requests in Chrome DevTools. Debug performance issues or bugs that happen when specific resources are delayed.
www.debugbear.com
November 5, 2025 at 3:55 PM
nucliweb.net
Fundamentos de Long Animation Frames API

Descubre cómo Long Animation Frames API (LoAF) resuelve el mayor problema al debuggear INP: saber exactamente qué código causó una interacción lenta. Fundamentos, código práctico y conceptos clave

joanleon.dev/posts/loaf/f...

#WebPerf #INP #PerfTools #LoAF
Tabla titulada “Qué te da LoAF que otras herramientas no”. Compara cuatro herramientas —Event Timing, Long Tasks, DevTools y LoAF— según distintos tipos de información. Las filas y columnas muestran lo siguiente: • Fila 1 (Encabezados): • Información • Event Timing • Long Tasks • DevTools • LoAF • Fila 2: • Nombre de función • Event Timing: ❌ • Long Tasks: ❌ • DevTools: ✅ • LoAF: ✅ • Fila 3: • Archivo o URL del script • Event Timing: ❌ • Long Tasks: ⚠️ Limitado • DevTools: ✅ • LoAF: ✅ • Fila 4: • Tiempo de forced layout • Event Timing: ❌ • Long Tasks: ❌ • DevTools: ⚠️ Manual • LoAF: ✅ • Fila 5: • Disponible en producción • Event Timing: ✅ • Long Tasks: ❌ • DevTools: ❌ • LoAF: ✅ • Fila 6: • Attribution automática • Event Timing: ❌ • Long Tasks: ❌ • DevTools: ⚠️ Manual • LoAF: ✅ En resumen, la tabla destaca que LoAF ofrece todas las funcionalidades, mientras que las demás herramientas presentan limitaciones parciales o carecen de ciertas capacidades
November 5, 2025 at 10:50 AM
Reposted by Joan León
perf.reviews
We have new stickers 🥰
A collection of white rounded stickers displaying the PerfReviews logo, which features a black lightning bolt icon surrounded by green dots and a green curved line, with 'PerfReviews' text below. Five stickers are fanned out on a dark gray textured surface.
November 4, 2025 at 4:53 PM
nucliweb.net
New stickers for the WebPerf Snippets project

webperf-snippets.nucliweb.net

#WebPerf #WebPerfSnippets #PerfTools
A collection of white rounded rectangular stickers displaying 'WebPerf Snippets' text in a gradient from blue to teal. Seven stickers are fanned out in a cascading arrangement on a dark gray textured surface, with one sticker placed separately to the right.
November 4, 2025 at 5:12 PM
Reposted by Joan León
perfnow.nl
A little aftermovie to whet your appetite.

www.youtube.com/watch?v=ByOC...
This was performance.now() 2025
YouTube video by Web Conferences Amsterdam
www.youtube.com
November 4, 2025 at 11:51 AM
nucliweb.net
If you are interested and want to learn about Web Performance, I recommend subscribing to @henrihelvetica.bsky.social's channel, where you will find high-quality videos from leading figures in the Web Performance community

📺 www.youtube.com/@HenriHelvet...

#WebPerf #Performance #Learning #YouTube
Henri Helvetica
www.youtube.com
November 3, 2025 at 5:33 PM
Reposted by Joan León
tomayac.com
📢 New blog post! Running Node.js 🐢🚀 in a Hugging Face 🤗 Space:

blog.tomayac.com/2025/11/03/r...

I found out about Hugging Face Spaces and that it supports Docker, which allowed me to create an evergreen template for running Node.js in a Hugging Face Space.
Running Node.js in a Hugging Face Space
The personal blog of Thomas Steiner
blog.tomayac.com
November 3, 2025 at 5:34 AM
Reposted by Joan León
sergeyche.dev
Glad to announce that my team at @cloudflare.social released a 1.0.0 version of a cross-browser web performance testing agent that supports
Chrome, Firefox, Safari and Edge.

Thank you to @tkadlec.bsky.social for making it happen and writing most of the code so far!

github.com/cloudflare/t...
GitHub - cloudflare/telescope: Cross-browser web performance testing agent
Cross-browser web performance testing agent. Contribute to cloudflare/telescope development by creating an account on GitHub.
github.com
October 30, 2025 at 2:32 PM
Reposted by Joan León
rich-harris.dev
I shilled a javascript framework at a web perf conference and came out mostly unscathed, AMA
nucliweb.net Joan León @nucliweb.net · 10d
"0 kB of JavaScript is not a feature" - @rich-harris.dev

#perfnow #WebPerf
A speaker is presenting at the performance.now() 2025 conference in front of an audience. The slide behind them reads “0 kB of JavaScript is not a feature,” with the second line highlighted in red.
November 1, 2025 at 8:45 AM
nucliweb.net
"0 kB of JavaScript is not a feature" - @rich-harris.dev

#perfnow #WebPerf
A speaker is presenting at the performance.now() 2025 conference in front of an audience. The slide behind them reads “0 kB of JavaScript is not a feature,” with the second line highlighted in red.
October 31, 2025 at 4:58 PM
nucliweb.net
"SSR is about ~SEO~ performance" - @rich-harris.dev

#perfnow #WebPerf
A speaker is presenting at the performance.now() 2025 conference in front of a large audience. The slide projected behind them reads “SSR is about SEO performance,” with “SEO” crossed out and “performance” emphasized in red.
October 31, 2025 at 4:32 PM
nucliweb.net
Huge thanks to @andydavies.me for mentioning the LoAF Helpers WebPerf Snippet at @perfnow.nl!

Honored to be part of the amazing Web Performance community 🫶

🔗 webperf-snippets.nucliweb.net/Interaction/...

#WebPerf #PerfNow #Performance #LoAF #INP #CoreWebVitals
A speaker stands on stage at the Performance.now() 2025 conference, presenting a slide titled “LoAF Helpers: Advanced Debugging in DevTools.” The slide displays details about WebPerf Snippets and a highlighted URL link. The audience is seated in front of the stage, watching the presentation.
October 31, 2025 at 10:21 AM
Reposted by Joan León
iamakulov.com
Neat lil learning from today’s @perfnow.nl (via Umar Hansa):

You can now throttle individual requests in Chrome!

Neat for experimenting with stuff like
- lazy-loading: does the UI look okay if this chunk takes MUCH longer to arrive
- resilience: what happens if this specific CDN is extremely slow
October 30, 2025 at 5:29 PM
Reposted by Joan León
stoyan.me
Fellow #perfnow fellows, a reminder that PerfPlanet calendar is coming this December for another edition. And it needs YOU. Please ask if you have any contribution ideas or concerns calendar.perfplanet.com/contribute/
Contribute
Passionate about a topic? Working on a new tool? Have a technique you want to teach? Research you've done? Tell the web performance community! Send your articles to [email protected]. Please include: ...
calendar.perfplanet.com
October 30, 2025 at 4:59 PM
nucliweb.net
Optimize images for sustainability

"Ensure images, if required, are optimized, correctly formatted, and sized, with lazy loading as appropriate, and are managed effectively." - via @inesakrap.bsky.social's talk at @perfnow.nl

w3c.github.io/sustainablew...

#PerfNow #WebPerf #ImagePerf
Web Sustainability Guidelines (WSG)
w3c.github.io
October 30, 2025 at 2:18 PM
nucliweb.net
Awesome talk @michael-hladky.bsky.social at @perfnow.nl 👏

I 🫶 seeing people talk about optimizing #webperf with CSS

Btw, regarding content-visibility, in this PR you can find a video explaining the issue where the browser frees nodes outside the viewport from memory

github.com/nucliweb/rea...
Add content-visibility to NoteButton component by nucliweb · Pull Request #2 · nucliweb/react-workshop-fwdays-mar24
Add content-visibility to the NoteButton component Add content-visibility CSS property to improve the rendering layout Layout Before After Layers Before After Video Layers-Vi...
github.com
October 30, 2025 at 12:15 PM