Optimizar imágenes no es solo “comprimir más”.
Va de entender formatos, responsive images, estrategias de carga y su impacto en Core Web Vitals.
Justo esto es lo que cubro en este workshop ↓
www.nucliweb.net/workshops/im...
Y casi siempre los problemas vienen de lo mismo:
• imágenes más grandes de lo necesario
• usar PNG/JPEG cuando WebP o AVIF serían mejores
• no usar srcset ni sizes
• lazy-loading mal aplicado
• GIFs enormes que deberían ser vídeo
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.
Ejemplo real optimizando imágenes:
PNG → MozJPEG → WebP → AVIF
La diferencia puede ser de varios megabytes a solo decenas de kB.
Muchas webs siguen sirviendo imágenes PNG de 2–3 MB.
Pero esas mismas imágenes pueden pesar menos de 50 kB.
La optimización de imágenes sigue siendo uno de los mayores problemas de rendimiento en la web.
Hilo 👇
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.
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
Improve Your Website's Performance
perf.reviews/en
#WebPerf #Performance
⚡Featured posts this week from Perf Links by WebPerformance Report:
⚡Featured posts this week:
✨ WebPerf Snippets and Agent SKILLs: @nucliweb.net
✨ The UX Speed Museum: @sergeyche.dev
✨ The GEO Playbook: @kylerisley.bsky.social
✨ What Are Agent Skills?: @debbie.codes
🙏 Special thanks to the authors!
#webperf
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 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
📌 In this brief clip, @sneyers.info underscores the surging industry support for JPEG XL, tracking the momentum that ultimately led to its growing adoption across major browsers. 🎬 ✨ SPDY STREAM 024 ✨, in viewports soon.
The JPEG XL Image Coding System
History, Features, Coding Tools, Design Rationale, and Future
arxiv.org/pdf/2506.05987
#Image #JpegXL
Open UI has been working on speccing out the focusgroup attribute: a declarative way to support roving focus & add keyboard nav to composite widgets like toolbars/menus
We'd love your feedback!
Learn more & see open questions: developer.chrome.com/blog/focusgr...
H/t to Edge folks for prototyping
In the article:
• Architecture of the 6 SKILLs (CWV, Loading, Interaction, Media...)
• Workflows with decision trees: if TTFB > 600ms → run Sub-Parts.js
• Install: npx skills add nucliweb/webperf-snippets
joanleon.dev/en/webperf-s...
#WebPerf #WebPerformance #AI #DevTools #MCP
Result: with a single-line prompt I detected 7 scripts from the Usercentrics consent banner with the Preload + Async anti-pattern on a Cocunat product page.
Detailed diagnosis and fix options. Autonomously.
What I've applied: scripts are .js files inside the SKILL.
The agent reads and executes them via Chrome DevTools MCP.
Same code every time. Deterministic.
The easy option: JavaScript inline in the SKILL markdown.
The problem: thousands of tokens on every invocation, even if only one script is needed. And nothing guarantees the LLM runs the code exactly as written.
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.
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
Twang
editor.p5js.org/isohedral/fu...
For the image that ends up being the LCP element, none, that’s why I delete it.
But it seems that we have disclosed a lot about loading=lazy and decoding=async for images outside the viewport, and the models are what they suggest by default 🫠
And the height attribute too, to avoid to impact to the CLS 😉
This would be a great addition to every CMS, as a page is published/updated, right before it is cached! 🥰
Taught Claude Code to prioritise loading the first image in a post 😉
#WebPerf
Ever wanted a comprehensive guide to DevTools and debugging front ends? Check out this ebook that Lala Hakobyan just launched:
github.com/lala-hakobya...
I’m impressed!!
“Practical guide to the img element: from the basics to LCP” title, author’s name Joan León, code snippets, table of contents, and hashtags: images, webperf, core-web-vitals, html.
Practical guide to the <img> element: from basics to LCP. @nucliweb.net shows how srcset, sizes, modern formats AVIF and WebP via <picture>, fetchpriority, preload for the LCP image, and CDNs can improve Core Web Vitals. #performance #html
joanleon.dev/en/guia-prac...
Interested in the @httparchive.org and not sure where to start? During the @performanceobserver.dev meetup tomorrow (12:30pm ET), I'm going to be providing an overview of the HTTP Archive and demonstrate how to start querying it! performanceobserver.dev/events/episo...
New Blog post by me! Pre-compressing HTML to Brotli 11 using the #11ty build pipeline and serving via Cloudflare pages & a Cloudflare Worker #eleventy #webperf #perfmatters #cloudflare
nooshu.com/blog/2026/02...
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.
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
