iiinova — where your digital self keeps evolving

Joan León @nucliweb.net · 20/09/2026

The case against JPEG XL Investigating JPEG XL's place as a Web image codec, by @giannirosato.com, via @webperfreport.bsky.social giannirosato.com/blog/post/ca... #JPEGXL #JXL #ImagePerf #WebPerf

A dark-themed line chart titled “SSIMULACRA2,” showing BD-Rate (%) versus encoding speed in milliseconds for several image codecs. Colored lines compare codecs including AOM, JPEG XL, aperture-alpha, Iris-WebP, libjxl, SVT-AV1, and libwebp, with labeled data points. Most curves show higher BD-Rate at slower speeds, while some reach negative BD-Rate at faster speeds.

032

Joan León @nucliweb.net · 07/09/2026

P75 is green: LCP 1.58s, INP 176ms, CLS 0.01. P90: LCP 2.68s, INP 352ms, CLS 0.17. 15% of visits get a noticeably worse experience. Product Performance doesn't end once you pass CrUX: if P75 is good, work on P90. #WebPerf #CoreWebVitals #RUM #ProductPerformance

DebugBear RUM dashboard showing Core Web Vitals at the P75 percentile: Largest Contentful Paint 1.58s, Interaction to Next Paint 176ms, and Cumulative Layout Shift 0.01, all flagged green on the score bar.

DebugBear RUM dashboard showing Core Web Vitals at the P90 percentile: Largest Contentful Paint 2.68s, Interaction to Next Paint 352ms, and Cumulative Layout Shift 0.17, all flagged orange or red on the score bar.

073

Joan León @nucliweb.net · 16/08/2026

I love the optimization: web, rendering, images, video, and now tokens. @lydiahallie.com published a great guide to Maximizing the value of your Claude Code sessions claude.com/blog/maximiz... #AIOptimization #AI #Claude

A dark-themed presentation slide titled "TL;DR" displaying tips for optimizing Claude API usage and token efficiency. The slide is divided into two columns:

Left column discusses:
- Using `/clear` command between tasks to prevent context carryover and reduce token usage
- Setting model and effort level before starting a session to avoid breaking the prompt cache mid-conversation
- Mentioning files with @ notation instead of naming them, to attach files directly and save API calls

Right column covers:
- Adding quiet flags to commands or running them in a subagenr to manage noisy output while keeping results in the conversation
- Running `/context` once per session to review loaded content (CLAUDE.md and MCP tool definitions) and remove unnecessary items
- Running `/compact` before breaks, since prompt cache expires after an hour and summarizing conversations is cheaper while the cache is active

070

Joan León @nucliweb.net · 05/08/2026

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".

000

Joan León @nucliweb.net · 04/08/2026

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.

000

Joan León @nucliweb.net · 04/08/2026

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.

100

Joan León @nucliweb.net · 04/08/2026

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.

100

Joan León @nucliweb.net · 03/08/2026

@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.

110

Joan León @nucliweb.net · 19/07/2026

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.

261

Joan León @nucliweb.net · 07/06/2026

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: 🫠

1151

Joan León @nucliweb.net · 06/06/2026

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

050

Joan León @nucliweb.net · 28/05/2026

“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.

361

Joan León @nucliweb.net · 28/05/2026

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.

121

Joan León @nucliweb.net · 17/05/2026

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:

160

Joan León @nucliweb.net · 17/05/2026

"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

010

Joan León @nucliweb.net · 16/05/2026

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.

381

Joan León @nucliweb.net · 06/05/2026

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.

223

Joan León @nucliweb.net · 27/04/2026

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.

161

Joan León @nucliweb.net · 21/04/2026

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.

271

Joan León @nucliweb.net · 21/04/2026

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

1272

Joan León @nucliweb.net · 18/04/2026

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

110

Joan León @nucliweb.net · 12/04/2026

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.

041

Joan León @nucliweb.net · 01/04/2026

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.

0113

Joan León @nucliweb.net · 27/03/2026

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

110

Joan León @nucliweb.net · 27/03/2026

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)

6101

Joan León @nucliweb.net · 23/03/2026

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.

020

Joan León @nucliweb.net · 13/03/2026

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.

252

Joan León @nucliweb.net · 10/03/2026

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.

100

Joan León @nucliweb.net · 10/03/2026

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.

111

Joan León @nucliweb.net · 08/03/2026

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.

131

Joan León @nucliweb.net · 04/03/2026

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.

194

Joan León @nucliweb.net · 03/03/2026

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

141

Joan León @nucliweb.net · 23/02/2026

Last week I delivered a Web Performance training for part of the Basetis technical team: 2 days of theory and hands-on practice with real cases. We covered Core Web Vitals, RUM & Lab monitoring, Chrome DevTools, Lighthouse CI, Playwright and more... at the iconic La Pedrera. #WebPerf #Training

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.

Detail of La Pedrera’s façade featuring its distinctive wrought iron balconies and wavy stone shapes, seen from street level and from a balcony overlooking the avenue.

061

Joan León @nucliweb.net · 11/02/2026

🚀 New WebPerf Snippet published! Detects preload resource hints for scripts that use async or defer attributes. This is an anti-pattern that wastes bandwidth & can hurt performance by artificially elevating the priority of resources that should load at lower priority #WebPerf #WebPerfSnippet

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.

161

Joan León @nucliweb.net · 02/02/2026

Excited to share my latest contribution to the Web Performance Calendar 2025! In this post, I dive into using Chrome DevTools for debugging web performance, with tips to help you speed up your sites and improve user experience. #WebPerf #Performance #DevTools #PerfTools

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).

141

Joan León @nucliweb.net · 19/01/2026

🦀 I'm a member of Rust Girona ☺️ #Rust

010

Joan León @nucliweb.net · 08/01/2026

I’ve decided to invest time in learning WebAssembly with the aim of improving the performance of some products I know that WebAssembly isn’t a silver bullet that solves everything, but there are use cases where it can significantly improve a product’s UX #WebPerf #WebAssembly #Performance

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.

181

Joan León @nucliweb.net · 01/01/2026

I’m starting the year by migrating the webperf-snippets.nucliweb.net project to the latest versions. I’m also improving the documentation and scripts, with better console output. Keep an eye out for upcoming updates #WebPerf #WebPerfSnippets #PerfTools #Performance #DevTools

070

Joan León @nucliweb.net · 30/12/2025

Marketing: Hello, Joan! Can we add a short video as a background in the hero component? Me: 🫠 #WebPerf #Performance #TrueStories

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.

151

Joan León @nucliweb.net · 19/12/2025

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.

170

Joan León @nucliweb.net · 16/12/2025

OMG, 3 SVG larger than 3MB 🙈

010

Joan León @nucliweb.net · 16/12/2025

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.

1122

Joan León @nucliweb.net · 10/12/2025

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

131

Joan León @nucliweb.net · 05/12/2025

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."

151

Joan León @nucliweb.net · 02/12/2025

- Use a <picture> 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.

2174

Joan León @nucliweb.net · 30/11/2025

📣 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

162

Joan León @nucliweb.net · 29/11/2025

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.

030