📌 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
Practical guide to the <img> element: from the basics to LCP
joanleon.dev/en/guia-prac...
#WebPerf #ImagePerf #Performance #LCP #CoreWebVitals
Guía práctica del elemento <img>: de lo básico a LCP
joanleon.dev/posts/guia-p...
#WebPerf #ImagePerf #Performance #LCP #CoreWebVitals
All runnable directly in the browser console.
webperf-snippets.nucliweb.net
📝 Leave a comment if you would like to see any of them in action.
#WebPerf #WebPerformance #ChromeDevTools #CoreWebVitals #JavaScript #WebDev
☑ Media (new category)
- Image Element Audit: audits all <img> elements against image performance best practices — LCP candidate detection, fetchpriority and loading attribute misuse, missing width/height (CLS risk), modern format coverage (WebP/AVIF/JXL), and preload link validation
☑ Core Web Vitals
- LCP Trails: new snippet for LCP tracing
- JavaScript Execution Time Breakdown: breaks down JS execution time per script
☑ Interaction
- Scroll Performance Analysis: detects scroll jank sources: non-passive event listeners, frame drops via rAF timing, and a CSS scroll-related properties audit
- Priority Hints Audit: audits the use of fetchpriority on critical resources
☑ Interaction
- Input Latency Breakdown: aggregates INP sub-parts (input delay, processing, presentation) by event type using P75 values, to identify which phase is the systematic bottleneck
☑ Loading
- Critical CSS Detection: audits render-blocking stylesheets, inline CSS budget, applies the 14 KB TCP Slow Start rule
- Network Bandwidth & Connection Quality: uses the Network Information API to expose connection type, downlink, RTT, Save-Data status with adaptive serving recommendations
☑ Loading
- FCP Breakdown: breaks down First Contentful Paint into three phases: TTFB, render-blocking resource load, and render delay
- Service Worker Analysis: analyzes lifecycle, cache hit ratio, startup overhead, and navigation preload status
I've been updating WebPerf Snippets for Chrome DevTools, and this weekend brought 10 new tools for diagnosing web performance directly from the console.
New snippets in webperf-snippets: 🧵
#WebPerf #WebPerformance #ChromeDevTools #CoreWebVitals #JavaScript #WebDev
