Joan León

@nucliweb.net

1850 Followers 495 Following

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

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.
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.
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.
⏺ 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:
Black t-shirt with the text: You can’t know whether you have a problem if you aren’t monitoring it
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.
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.
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 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.
Codemotion Madrid 20-21 Abril Debugging Web Performance con Chrome DevTools MCP y Agentes de IA Joan Leon
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.
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.
WebPerf Snippets sticker
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)
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.
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.
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.
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.
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.
WebPerf Snippets and Agent SKILLs: deterministic audits with Chrome DevTools MCP
Joan Leon delivering a Web Performance training session to a group of professionals, pointing at a large screen displaying web development tools while attendees listen seated in a training room.
Screenshot of a webpage section titled “Priority escalation example” explaining the impact of preloading async scripts. A comparison shows that without preload, CSS, fonts, and LCP images have medium/high priority while async scripts have low priority. With preload applied to an async script, all resources—including the preloaded async script—compete at medium/high priority, marked with warning icons and a red X. A highlighted note states that scripts marked async or defer are not critical for initial render, and preloading them elevates their priority unnecessarily. Below, a “Snippet” section displays JavaScript code that checks for <link rel="preload" as="script"> elements and logs a message if none are found.
Chrome DevTools Performance panel showing a recorded page load for a Zara product listing page. The timeline highlights long scripting and main-thread activity, with an LCP of 8.28s and CLS of 0.08. Red annotations emphasize delayed document request latency, heavy JavaScript evaluation tasks, and extended main-thread blocking before LCP. The Insights panel on the left lists optimization opportunities like cache lifetimes and render-blocking requests, while the summary at the bottom shows scripting dominating total load time (~15.8s).
Four books about WebAssembly and Rust laid out in a 2×2 grid on a gray fabric surface. The covers include titles such as Accelerating the DOM with WebAssembly, WebAssembly Unleashed with Rust & Go, Rust WebAssembly, and Rust for WebAssembly, featuring modern, tech-themed designs focused on high-performance web development.
Screenshot of a macOS file information window. Red boxes highlight the file size (274.5 MB) and the video metadata, which includes a resolution of 3840x2160, HEVC codecs, and a duration of 8 seconds.
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.
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.
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."
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.
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.
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.
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.
Chrome DevTools Console showing lazy loading audit results: 46 images without lazy loading detected, totaling 4.34 MB, with a list displaying the first 5 images showing their resolution (900x600) and individual file sizes ranging from 14.63 KB to 104.76 KB.
Stack of holographic stickers with 'WebPerf Snippets' text in gradient colors ranging from blue to turquoise to yellow-green against a black background, arranged on a white wooden surface
A browser developer tools screenshot showing a network request waterfall. A selected GET request to a webpage displays its details. On the right side, the response panel highlights two values: “Transmitted Size 1.72 MB” and “Full Size 18.2 MB,” indicating compressed vs. uncompressed file size. The request has status 200, content encoded with Brotli (br), and took about 1.96 seconds to load.
Una mà sosté una acreditació de ponent d’un esdeveniment DevFest davant d’un ordinador portàtil obert. A la pantalla del portàtil es mostra una diapositiva de presentació sobre Chrome DevTools MCP i agents d’intel·ligència artificial per al rendiment web, amb la imatge d’un xip electrònic marcat amb les lletres ‘AI’.
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.
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.
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.”
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
A humorous sticker instruction sheet on a light blue background with four sections. Top left shows 'Reaction when opening sticker pack' with YES (excited person with hands together) and NO (person with arms crossed). Top right shows 'Handling of stickers' with YES (person carefully peeling sticker) and NO (person taking selfie). Bottom left shows 'Placement of stickers' with YES (person without hard hat holding sticker folder) and NO (person wearing hard hat on construction site). Bottom right shows 'Applying stickers' with YES (sticker on parking sign post) and NO (sticker on speed limit sign). Text at bottom reads 'KEEP THIS - DO NOT EAT'.
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.
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.
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.
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.