Joan León
LightNews LightNews
banner
nucliweb.net
Joan León
@nucliweb.net
1.7K followers 470 following 490 posts
⚡️ Web Performance Artisan at @perf.reviews | Google Dev Expert in Web Tech | Cloudinary Ambassador | ❤️ Image Optimization | Girona
Posts Replies Media Videos
nucliweb.net
How to load CSS (fast)

calendar.perfplanet.com/2025/how-to-... by @yoavweiss

#WebPerf #CSSPerf #Performance #CSS
How to load CSS (fast)
Loading styles on the web is something that looks trivial at first. You just add a <link rel=stylesheet> to your page (or <style> for inline styles) and you're done. But if you wanted to load CSS fas...
calendar.perfplanet.com
December 22, 2025 at 9:01 AM
Reposted by Joan León
stoyan.me
Web Performance Calendar day 21 with Conor McCarthy and lessons learned from web perf client site reviews

calendar.perfplanet.com/2025/insight...
Insights from 100 site speed reviews in 2025
Over the course of 2025, I have completed 100 site speed reviews at DebugBear. This is a free service we offer to trial accounts looking for a brief assessment of their current web performance. Reque...
calendar.perfplanet.com
December 21, 2025 at 11:27 AM
nucliweb.net
Why Your Server Is Paying for Your CSS Choices

dp-lewis.medium.com/why-your-ser...

#CSS #WebPerf #ServerPerf
Why Your Server Is Paying for Your CSS Choices
Server-side rendering makes some previously invisible costs very visible. This post explores how styling can end up on the server’s hot…
dp-lewis.medium.com
December 21, 2025 at 9:56 AM
Reposted by Joan León
jensimmons.bsky.social
Check out all the revised demos of Grid Lanes in Safari Technology Preview 234!

webkit.org/demos/grid3/
CSS Grid Lanes is now in Safari Technology Preview 234.
December 20, 2025 at 1:31 AM
nucliweb.net
Updated de Content-Visibility snippet for Chrome DevTools

- Detects existing content-visibility usage
- Finds offscreen optimization opportunities
- CLS warnings for missing contain-intrinsic-size
- Configurable thresholds

webperf-snippets.nucliweb.net/Loading/Cont...

#WebPerf #PerfTools
Content Visibility – Nextra
A curated list of snippets to get Web Performance metrics to use in the browser console or as snippets on Chrome DevTools by Joan León
webperf-snippets.nucliweb.net
December 20, 2025 at 12:41 AM
nucliweb.net
About to start a new Web Performance consulting project & I’m really looking forward to it

I’m sure I’ll enjoy working on this, and the impact on the client’s conversions should be very noticeable 📈

Performance is where UX and business truly meet

#WebPerf #WebPerformance #CoreWebVitals #UX
Screenshot of Google Search Console Core Web Vitals report for a URL on mobile (as of Dec 12, 2025). Overall status shows Loading Performance: poor, Interactivity: poor, and Visual Stability: needs improvement, all stable. A timeline chart displays red trends for LCP and INP and a yellow trend for CLS. Tooltip indicates data from Nov 15–Dec 12, 2025: 75% of phone Chrome page loads have LCP 9,035 ms, INP 1,031 ms, and CLS 0.11. Buttons labeled “Explore Loading Performance” and “Explore Visual Stability” appear on the right.
December 19, 2025 at 4:50 PM
Reposted by Joan León
stoyan.me
Web Performance Calendar day 19 with Alex Podelko on how performance engineering has evolved with computing: from mainframes to distributed systems, web/mobile, cloud, AI. Knowing your history may help reduce wheel-reinvention and encourage skills reuse

calendar.perfplanet.com/2025/a-short...
A Short History of Performance Engineering
A long time ago, in 2014, I did the “A Short History of Performance Engineering” Ignite talk at the Velocity conference (slides and video). A lot of new developments have happened since 2014, so here ...
calendar.perfplanet.com
December 19, 2025 at 8:34 AM
Reposted by Joan León
debugbear.com
Lazy loading out-of-viewport images can make the main content on your website load faster.

⬇️ Learn how in this video.

www.youtube.com/watch?v=CPJf...
How to defer offscreen images
Learn how to make your website load faster by lazy loading out-of-viewport images. 00:00 Page speed impact of offscreen images 01:18 Lazy load offscreen images in DebugBear 01:37 Result of the…
www.youtube.com
December 16, 2025 at 1:12 PM
nucliweb.net
Major update to the CSS Media Queries Analysis Snippet with a Performance Impact Analyzer

It calculates the REAL cost of desktop-only CSS on mobile:

📉 Core Web Vitals Impact
💰 Estimated Conversion Lift

e.g.: Fixing 30KB of unused CSS 180ms faster load and up to 1.8% conversion boost
Chrome DevTools showing a JavaScript snippet named ‘CSS Media Queries Analysis’ alongside the Console output. The console summarizes media query usage for min-width > 768px, reporting 336 media rules, 1,146 classes, and 2,595 properties. It highlights potential mobile savings of 170.34 KB of CSS, mostly from external files, with sections for inline CSS, external CSS files, and performance impact analysis. Chrome DevTools Console displaying the ‘Potential Savings’ and ‘Memory Impact’ sections of a CSS Media Queries Analysis. The output estimates savings for a median mobile device, including eliminating 534 ms of render-blocking time, reducing INP by ~9 ms per interaction, and saving 170.34 KB of bandwidth. It also shows estimated CSSOM memory overhead (~336 KB) and total unnecessary memory allocation (~506 KB), with notes about impact on low-end devices. Chrome DevTools Console showing a detailed ‘Performance Impact Analysis’ for unnecessary CSS. The panel breaks down render-blocking time, CSS parsing, CSSOM construction, and total blocking time across high-end and mid-range mobile devices. It lists impacts on Core Web Vitals such as FCP, LCP, INP, and TBT, with millisecond-level timing estimates.
December 16, 2025 at 9:07 AM
nucliweb.net
I really love the page transition on PerfPlanet’s Calendar 🤩
Smooth details like this make a big difference in web performance and UX.

#WebPerf #PerfPlanet #UX
December 10, 2025 at 12:10 PM
Reposted by Joan León
webperfreport.bsky.social
⚡Featured posts this week:
✨ Timeline of web features and browser support: @rviscomi.dev
✨ Fast by Default: @denodell.bsky.social
✨ Analyzing CSS Media Queries to Optimize Perf: @nucliweb.net
✨ What was new in web perf in 2025: @mattzeunert.com
🙏 Special thanks to the authors!
#webperf
December 7, 2025 at 11:01 AM
Reposted by Joan León
webperfreport.bsky.social
🤩We just opened the Public Preview of our Reporting as a Service (RaaS) platform before the general release.
Users from different countries are already accessing their personal Boards.
Explore the platform by getting your own report: 👉 webperformancereport.com
#webperf
December 6, 2025 at 1:41 PM
Reposted by Joan León
sneyers.info
Half a year ago, I published a pretty long paper about JPEG XL: arxiv.org/abs/2506.05987

I am happy to see that section 11.1 is already outdated!
December 6, 2025 at 8:07 AM
nucliweb.net
Chrome DevTools' ~4 GB prompt is your Local LLM onboarding

It's the required download for Zero-Exfiltration AI (client-side inference)

Benefits: Maximum Privacy (data stays on device) + Low-Latency Debugging

Download the weights to use the future of DevTools

#DevTools #LLM #OnDeviceAI #Debugging
Screenshot of Chrome DevTools showing a pop-up dialog box titled "Get help understanding this warning." The text below explains: "You can get quick answers from Chrome's Built-in AI, without any data leaving your device. To use Chrome's Built-in AI here and elsewhere, download the AI model (~4 GB)." There is a blue button that says "Download model" and a checkbox for "Don't show."
December 5, 2025 at 11:18 PM
nucliweb.net
chrome-devtools-mcp v0.11.0

🎉 Features
- emulation: add geolocation emulation tool
- integrate DevTools issues into the console tools
- support --user-data-dir

github.com/ChromeDevToo...

#DevTools #mcp #ai #Chrome
Release chrome-devtools-mcp: v0.11.0 · ChromeDevTools/chrome-devtools-mcp
0.11.0 (2025-12-03) 🎉 Features emulation: add geolocation emulation tool (#634) (3991e4c) integrate DevTools issues into the console tools (#636) (d892145) support --user-data-dir (#622) (fcaf553)...
github.com
December 3, 2025 at 10:56 PM
Reposted by Joan León
mattzeunert.com
Added a new request stats view to the DebugBear page speed test result!

Try it for free here www.debugbear.com/test/website...
December 3, 2025 at 10:10 AM
Reposted by Joan León
tunetheweb.com
I wrote a little thing for the HTML Hell advent calendar from @matuzo.at — but on a good improvement to HTML rather than a hellish thing 🙂

Improvements to the Speculation Rules API, which allows you to (now more easily) prefetch and prerender HTML pages:

htmhell.dev/adventcalend...
Speculation rules improvements - HTMHell
A collection of bad practices in HTML, copied from real websites.
htmhell.dev
December 3, 2025 at 7:39 AM
nucliweb.net
- Use a tag for semantic HTML
- Sure, I’ll do it

#SendMeCoffee 🫠
Screenshot of Chrome DevTools showing an HTML <section> element with the class “about-gallery-1,” containing a <span> and an empty <picture> tag. A red box highlights this section in the Elements panel. An arrow points to the Styles panel on the right, where CSS rules for .webp .about-gallery-1 picture and .about-gallery-1 picture are displayed, including a background-image property and layout styles.
December 2, 2025 at 6:11 PM
nucliweb.net
Análisis de Media Queries en CSS para Optimizar el Rendimiento

joanleon.dev/posts/analis...

🇬🇧 version in thread

#WebPerf #CSS #WebPerfSnippets #PerfTools #DevTools
Análisis de Media Queries en CSS para Optimizar el Rendimiento | Joan León
Descubre cómo analizar las media queries del CSS para detectar y optimizar estilos no utilizados en mobile, mejorando el rendimiento de tu web con un simple snippet de JavaScript.
joanleon.dev
December 2, 2025 at 5:08 PM
Reposted by Joan León
bram.us
New in Chrome DevTools in Chrome 144: we now show the Adopted Style Sheets in the Elements tree.
DevTools screenshot showing Adopted Style Sheets in the tree. Screenshot taken of a standard Shoelace component.
December 1, 2025 at 2:12 PM
Reposted by Joan León
stoyan.me
December is here (in a few hours in my timezone), which means the Web Performance "Advent" Calendar is back for its... 17th Edition! One article a day in the month of December.

Be a part of it and contribute an article: 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 ssttoo@ymail.com. Please include: ...
calendar.perfplanet.com
December 1, 2025 at 4:06 AM
nucliweb.net
📣 New WebPerf Snippet

Analyze all @media rules in CSS to identify classes and properties targeting viewports bigger than a specified breakpoint. Results are grouped by inline CSS and external files, with byte size estimates for potential mobile savings.

#WebPerfSnippets #WebPerf
A browser window showing the Renfe website on the left with a mobile-style layout, including a menu button, the Renfe logo, travel selection fields, and a Black Friday banner. On the right, Chrome DevTools is open to the Console tab, displaying a CSS Media Queries Analysis report. The report lists totals for media queries, classes, and properties, highlights estimated mobile CSS savings of 284.83 KB, and breaks down inline and external CSS statistics.
November 30, 2025 at 7:33 PM
nucliweb.net
Avui toca aprendre accessibilitat a @a11yconf.bsky.social , i amb el luxe de poder fer-ho a Girona ☺️

Hoy toca aprender accesibilidad en @a11yconf.bsky.social, y con el lujo de poder hacerlo en Girona ☺️

#a11yConf #a11yConf2025 #a11y #accesibilidad #accessibilitat #accessibility
Una persona sosté l’acreditació d’una conferència d’accessibilitat (‘a11y conf’). La targeta mostra el disseny de l’esdeveniment, un codi QR i text amb el càrrec i l’empresa de la persona assistent. Al fons es veu un cartell gran amb el logotip de la conferència. Una persona sostiene una acreditación de una conferencia de accesibilidad (‘a11y conf’). La tarjeta muestra el diseño del evento, un código QR y texto con el cargo y la empresa de la persona asistente. Al fondo se ve un cartel grande con el logotipo de la conferencia.
November 29, 2025 at 8:44 AM
nucliweb.net
As @developer.chrome.com DevTools user, I’ve earned my sticker badge 😎

#DevTools
A set of round Chrome DevTools–themed stickers with a blue browser-window design placed on top of a brown padded mailer that has the Sticker Mule logo and tagline printed on it.
November 28, 2025 at 11:20 AM
nucliweb.net
📣 Updated my Resource Hints snippet for @chromedevtools.bsky.social

Now detects common mistakes like:

❌
❌ Non-standard rel values Perfect for auditing preload, prefetch, preconnect, etc

webperf-snippets.nucliweb.net/Loading/Reso...

#WebPerf #PerfTools
Resource hints – Nextra
A curated list of snippets to get Web Performance metrics to use in the browser console or as snippets on Chrome DevTools by Joan León
webperf-snippets.nucliweb.net
November 25, 2025 at 11:38 PM