Joan León

@nucliweb

⚡️ Web Performance Artisan at @perf.reviews | Google Dev Expert in Web Tech | Cloudinary Ambassador | ❤️ Image Optimization | Girona

498 Siguiendo1869 Seguidores640 Publicaciones

Bluesky

¿Es tu perfil?Reclámalo y nucliweb.dirty.social es tuyo.Reclamar perfil

Joan León@nucliweb· 7d

A letter from @addyosmani.bsky.social arrived today, thanking me for my work on Agent Skills. I got in through web performance and stayed for the rest. Thinking about contributing to open source? Start small. Docs and honest reviews count. github.com/addyosmani/a...

A printed thank-you letter from Addy Osmani on a dark background, hand-signed and dated 2026, next to its opened envelope postmarked San Francisco. Four stickers lie beside it: "Coder", "Computer Club", a Cmd+Z one reading "Just Undo It", and a perfume bottle reading "#perfmatters".

Joan León@nucliweb· 8d

Isolated spikes off a stable ~2s baseline, different days, different countries. Not one user on a bad connection, and not bots, I checked. Which is the whole point of RUM: synthetic checks on a schedule would have missed every one.

SpeedCurve budget dashboard: status "Over", latest value 27.93s against a 0.15s budget, 18,520% over. The weekly chart shows a stable baseline around 2s with sharp isolated spikes above 20s on Jul 29, Jul 31, Aug 3 and Aug 4.

Joan León@nucliweb· 8d

The site is static, on Netlify. 27s to first byte means the request never resolved at the edge: cache miss to origin, cold start, or a failing PoP.

SpeedCurve size metrics: HTML 15 KB, inline styles 14 KB, inline JS 8 KB. Below, the sessions table lists a session at 7:06 AM from the United States on Chrome 149, with an average First Contentful Paint of 27.93s.

Joan León@nucliweb· 8d

Update: this isn't frontend. TTFB is 27.44s of a 27.93s FCP. 98% of the time is spent waiting for the first byte, and the HTML is 15 KB.

SpeedCurve time metrics: Backend (TTFB) 27.44s, Frontend 8.18s, Start Render 27.93s, First Contentful Paint 27.93s, Largest Contentful Paint 27.97s, Page Load 35.62s. First Input Delay and INP both 0 ms.

Joan León@nucliweb· 8d

@speedcurve.com alert, fired on its own: FCP (RUM) budget breached, metric at 4.72s. Flat and green for hours, then climbing. Nobody was watching a dashboard. Synthetic gives reproducibility. RUM gives the truth: real users, real devices, real networks.

SpeedCurve alert: the First Contentful Paint (RUM) budget exceeds its 0.15s threshold by 3047%, reaching 4.72s. The chart shows the metric flat and green until 20:00, then climbing and spiking to nearly 5s.

Joan León@nucliweb· 24d

An occupational habit: I open DevTools on every site I visit, hunting for things to improve. On skills.addy.ie I caught a 301 on every internal click, a wasted round trip. It was a trailing-slash mismatch. Wrote up the finding and the fix: joanleon.dev/en/trailing-... #WebPerf #Astro #Netlify

Screenshot of a desktop web browser displaying the agent-skills website on the left and Chrome DevTools’ Network tab on the right. The webpage heading reads “How agent-skills compares” with explanatory text describing how agent-skills relates to Superpowers and Matt Pocock’s skills, along with a “TL;DR” summary card. The DevTools Network panel shows document requests, including several 301 Moved Permanently redirects (such as skills, getting-started, lifecycle, teach, and compare) followed by corresponding 200 OK responses for URLs ending with trailing slashes. The browser address bar displays skills.addy.ie/compare/, and the Network panel is configured with Preserve log and Disable cache enabled and No throttling selected.

Joan León@nucliweb· Jun 7

Friend: Hey, Joan, can you give us a hand? Me: Sure, send me the URL DevTools: It takes nearly 3 seconds to load the WordPress plugins Me: 🫠

Joan León@nucliweb· Jun 6

Gracias @commit-conf.com por darme la oportunidad de compartir con la comunidad Estas son las slides de la charla slides.com/joanleon/pat... #CommitConf #WebPerf

Joan León@nucliweb· May 28

“Most teams fall into a reactive performance decay cycle: ship, wait for complaints, panic, patch, repeat. The Fast by Default model provides a repeatable alternative that keeps systems healthy.” Performance Engineering in Practice, by @denodell.bsky.social #WebPerf #Performance

Slide titled “1.6 Summary” from a presentation called “Performance Engineering in Practice.” The slide contains bullet points about software performance engineering. A highlighted bullet states that many teams fall into a reactive performance decay cycle: they ship software, wait for complaints, panic, patch issues, and repeat the cycle. It adds that the “Fast by Default” model offers a repeatable alternative that keeps systems healthy. The slide has a light gray background with dark blue and black text, and the page number “74” appears at the bottom center.

Joan León@nucliweb· May 28

Llevo tiempo viendo demos de multiagentes y casi todas sufren de lo mismo: un agente escribe y otro revisa... para acabar haciendo una todo-app No son malas demos, pero no hay un motivo técnico real para dividirlas en agentes. Así no aprendemos cuándo sí tiene sentido Hilo con una alternativa 👇

Diagrama del flujo de un servidor MCP llamado ‘image-optim-mcp’ para optimización de imágenes. A la izquierda aparece una imagen de paisaje que entra al servidor. En el centro se muestra la configuración del servidor (nombre, versión, protocolo y herramientas: analyze, encode, judge y batch). A la derecha se comparan formatos de salida y reducción de tamaño: mozJPEG (-62 %, calidad 92,1), WebP (-68 %, 94,3), AVIF (-72 %, 95,2) y JPEG XL (-75 %, 95,6). Un panel final resume métricas: calidad perceptual SSIMULACRA2 de 95,6/100, reducción de peso del 75 % y latencia 4 veces más rápida.

Joan León@nucliweb· May 17

This is why the Chrome DevTools MCP is a game-changer. The agent applies a fix, reloads ignoring cache, runs a Lighthouse audit, and checks the score to iterate on the next failure. Fully automated and deterministic. #AgenticDev #WebDev #AI

⏺ Ara rellanço el Lighthouse per veure l'impacte dels fixes:

⏺ chrome-devtools - navigate_page (MCP)(type: "url", url:
"http://localhost:4324/", ignoreCache: true)

⏺ chrome-devtools - lighthouse_audit (MCP)(device: "mobile", mode: "navigation")

⏺ Millora de 95 → 96. Queda 1 failure. Veig quin és:

Joan León@nucliweb· May 17

"You can’t know whether you have a problem if you aren’t monitoring it" as a T-shirt ☺️

Black t-shirt with the text: You can’t know whether you have a problem if you aren’t monitoring it

Joan León@nucliweb· May 16

I think I may have found a memory leak in LinkedIn A single browser tab was consuming 6 GB of RAM just from leaving the feed open for a while Possible causes: • client-side state leaks • excessive caching • unreleased media resources • runaway DOM growth Performance is a feature #WebPerf

Screenshot of a web browser open to the WebPerf Snippets CLI documentation page. A browser tab preview for LinkedIn is shown near the top-left, displaying a warning that says “High memory usage: 6.0 GB.” A large red arrow points to the warning, alongside an unamused face emoji, suggesting frustration about LinkedIn consuming excessive memory.

Joan León@nucliweb· May 6

El agente de IA no sabe debuggear rendimiento si tú no le das el contexto para hacerlo. No es que sea malo. Por defecto trabaja a ciegas: sin acceso al navegador, sin trazas reales. #WebPerf #Performance #AIAgents #ChromeDevTools #Frontend

Banner promocional de un workshop titulado “Web Performance Debugging with AI Agents + Chrome DevTools MCP”. La imagen muestra una interfaz futurista con gráficos de rendimiento web, líneas de tiempo y métricas como LCP, INP y CLS conectadas a bloques etiquetados “MCP”, “API” y “AI”. A la derecha aparecen fragmentos de código y elementos visuales de análisis técnico sobre un fondo oscuro con tonos azules y verdes.

Joan León@nucliweb· Apr 27

Toggle CSS classes in bulk, then reset the scroll: two lines that force the browser to block the main thread synchronously. I documented how to detect it in the Performance Panel and why one requestAnimationFrame is not enough to fix it. #WebPerf #CSS #DevTools #JavaScript

Screenshot of Chrome DevTools Performance panel analyzing a “Forced Synchronous Layout” demo running on localhost. The interface shows a timeline with CPU activity, animations, and style recalculations highlighted. A checkbox labeled “Enable CSS selector stats (slow)” is turned on in the top-right settings. A large red annotation circle and arrow emphasize the “Selector stats” section at the bottom, which lists CSS selectors, elapsed time, match counts, and performance impact. On the left side of the page, a scrollable list of text items (quotes from The Matrix) is visible, representing the app being profiled.

Joan León@nucliweb· Apr 21

Thanks to Codemotion for giving me the opportunity to continue sharing my knowledge on #WebPerf (aka improving the UX), and to do so in a workshop format where we use Chrome DevTools MCP to identify performance issues on a website with AI agents. #WebPerf #PerfTools #DevTools #CodemotionMadrid

Joan León stands at the front of a classroom giving a presentation to a small group of seated attendees. He gestures while speaking beside a large screen displaying slides about web performance. The audience, some using laptops, face him attentively in a modern, well-lit room with large windows.

Joan León@nucliweb· Apr 21

“Or brains are the only intelligence tools we'll have for our entire lives.” - @cassidoo.co #CodemotionMadrid

Joan León@nucliweb· Apr 18

Nos vemos el lunes en Codemotion Madrid, en un taller práctico donde utilizaremos agentes de IA para detectar problemas de rendimiento en nuestra web con la ayuda de Chrome DevTools MCP #WebPerf #Chrome #CoreWebVitals #Performance #CodemotionMadrid

Codemotion Madrid 20-21 Abril

Debugging Web Performance con Chrome DevTools MCP y Agentes de IA

Joan Leon

Joan León@nucliweb· Apr 12

Sometimes opportunities come along that push you out of your comfort zone. An international product, millions of visits, and impact at scale. Definitely an exciting challenge. #WebPerf #CoreWebVitals #PerfChallenge

Screenshot of a Core Web Vitals report for a webpage on mobile devices dated April 4, 2026. It shows “Loading Performance is poor and stable,” “Interactivity is good but regressing,” and “Visual Stability is poor and stable.” A line chart displays trends over time for three metrics: Largest Contentful Paint (LCP) in red remaining high (around 5.2 seconds), Interaction to Next Paint (INP) in green staying low (around 182 ms), and Cumulative Layout Shift (CLS) in red remaining high (around 0.79). A tooltip highlights data from late September to late October 2025. On the right, definitions explain that good thresholds are LCP under 2.5 seconds, INP under 200 ms, and CLS under 0.1.

Joan León@nucliweb· Apr 1

Software is evolving fast. My focus hasn’t changed: helping teams improve performance, UX, and conversion AI generates working code faster than ever… but not optimized for performance That’s where we add value: from “it works” to “it’s excellent” Reading @addyosmani.bsky.social’s new book

A copy of “Web Performance Engineering in the Age of AI” by Addy Osmani placed on a light wooden surface, showing the cover with a greyhound illustration and a clean, minimalist design.

An open book showing Chapter 3 titled “AI-Generated Code and the Performance Paradox,” with printed text discussing how AI-generated code can be functional but not always optimized for performance.

An open book showing Chapter 12 titled “Web Performance Case Studies and Success Stories,” with text describing real-world examples of performance optimization and business impact.

Joan León@nucliweb· Mar 27

Did you know webperf-snippets has these snippets to analyze loading performance? Here are some you might not know about: 🧵 #WebPerf #Performance #WebPertSnippets

Joan León@nucliweb· Mar 27

A measurement that varies with the model's interpretation is not a measurement. It's an estimate. I've written about separating deterministic measurement from AI analysis in web performance audits. #WebPerf #Performance #PerfReview #AI #DevTools

The complete audit workflow#
With Claude Code or Gemini, Chrome DevTools MCP, and the WebPerf SKILLs installed, the complete audit workflow goes from a series of scattered manual actions to a process the agent runs end to end:

1. Navigate to the URL (navigate_page)
2. Measure Core Web Vitals → run LCP.js, CLS.js, INP.js
3. If LCP > threshold → run LCP-Sub-Parts.js
4. If TTFB > threshold → run TTFB-Sub-Parts.js
5. Analyze resources → run Render-Blocking.js, Preload-Async-Conflicts.js
6. Collect all JSON results
7. Generate report with diagnosis, prioritization, and concrete solutions
8. Export in the required format (markdown, PDF, Slack)

Joan León@nucliweb· Mar 23

Find the bottleneck. Fix it. Hands on exercises to diagnose and fix the most common performance problems in React apps; from unnecessary re-renders to costly hydration slowreact.vercel.app #WebPerf #Performance #React #ReactPerf

Screenshot of a tutorial page titled “Slow Interactions” in a React performance guide. A sidebar on the left lists sections like “Getting Started,” “Unnecessary Re-renders,” and “Slow Interactions.” The main content explains that filtering a large list on every keystroke causes sluggish input because React processes input and list updates with the same priority. A highlighted note emphasizes that the input should respond immediately. Below, a “Hints” section suggests using useTransition and useDeferredValue to improve responsiveness.

Joan León@nucliweb· Mar 13

Chrome is bringing AI directly into the browser with the Summarizer API. In this post I show how to add an AI-generated summary to blog posts using the Chrome Summarizer API and models running locally in the browser. No external APIs. No token costs. #AI #WebAI #JavaScript #Chrome

Screenshot of a blog post on Joan León’s website titled “Adding an AI summary to blog posts with the Chrome Summarizer API.” The page shows a button labeled “AI Summary” and a highlighted summary box containing bullet points that explain how the Chrome Summarizer API works, including local summarization with Gemini Nano, browser requirements, streaming summaries, and implementation details. The site navigation and language selector are visible at the top.

Joan León@nucliweb· Mar 10

Ejemplo real optimizando imágenes: PNG → MozJPEG → WebP → AVIF La diferencia puede ser de varios megabytes a solo decenas de kB.

Tabla que compara el tamaño de varias imágenes en distintos formatos. La columna PNG (original) muestra archivos de entre 2.32 MB y 3.29 MB para varias fotos (IMG_3248.png, IMG_5511.png, IMG_5666.png, IMG_5673.png, IMG_5705.png). Al optimizarlas:
• MozJPEG: entre 172 kB y 283 kB
• WebP: entre 145 kB y 311 kB
• AVIF: entre 38 kB y 86.8 kB

También aparece un ejemplo pequeño (YouTube-banner.png) que pasa de 43.8 kB en PNG a 12.8 kB en MozJPEG, 8.53 kB en WebP y 2.95 kB en AVIF.
La tabla ilustra cómo cambiar de formato puede reducir el tamaño de las imágenes de varios megabytes a solo decenas de kilobytes.

Joan León@nucliweb· Mar 10

When a Skill activates, its SKILL.md loads into context. The webperf-loading was 24 KB, most of it unnecessary to decide which script to run I applied progressive disclosure and brought it down to 11 KB #WebPerf #Performance #AI #AIAgent #AIPerf

Table titled “Results” showing reductions in JavaScript bundle sizes for web performance features. Columns: Skill, Before, After, and Reduction.
• webperf-loading: 24,199 B → 11,149 B (−54%)
• webperf-core-web-vitals: 13,890 B → 10,266 B (−26%)
• webperf-interaction: 17,143 B → 12,443 B (−27%)
• webperf-media: 13,273 B → 12,017 B (−9%)
• webperf-resources: 11,700 B → 11,026 B (−6%)
• Total L2: 82,916 B → 59,612 B (−28%)

The table highlights overall bundle size reduction after optimization.

Joan León@nucliweb· Mar 8

WebPerf Snippets agent-first WebPerf Snippets SKILLs were written for humans: emojis, colours, tables. The agent had to parse all of that. I added structured JSON returns and a build with terser that removes the console code. 80 lines → ~300 characters. #WebPerf #AI #Performance

Stylized screenshot of a dark code editor window titled “WebPerf Snippets agent-first: structured returns and minimal tokens.” It contrasts two approaches:
• Before: an agent parsing a console string like “🟢 LCP: 1.24s (good)”.
• After: a structured JSON-like object containing performance data for the Largest Contentful Paint (LCP) metric, including fields such as script: "LCP", status: "ok", metric: "LCP", value: 1240, unit: "ms", rating: "good", thresholds for good and needs improvement, and details about the measured element (img.hero, hero.avif, sizePixels: 756000).

The graphic illustrates the shift from parsing human-readable console output to returning structured performance data for agents.

Joan León@nucliweb· Mar 6

Joan León@nucliweb· Mar 4

I've been using WebPerf Snippets in my audits for years. Scripts to measure LCP, INP, CLS, TTFB, Render Blocking... The next step: turning them into tools an AI agent can use autonomously. But there's a design decision that makes all the difference. 🧵 #WebPerf #WebPerformance #AI #DevTools #MCP

WebPerf Snippets and Agent SKILLs: deterministic audits with Chrome DevTools MCP

Claude Code report showing Usercentrics scripts causing performance issues by combining 'preload' and 'async'. It recommends removing preloads or using fetchpriority='low' to avoid competing with critical LCP resources.

Joan León@nucliweb· Mar 3

Taught Claude Code to prioritise loading the first image in a post 😉 #WebPerf