Just published the first article of a series. Covers what WebGPU is, CPU vs GPU for performance, and when to use it (vs WebAssembly).
Next: image processing, ML inference, and real-time video, with real code and benchmarks.
👉 joanleon.dev/en/webgpu-br...
#WebPerformance #WebGPU #JavaScript
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.
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
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.
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
WebPerformance Report is no longer just a weekly report in your inbox
Well done, @webperfreport.bsky.social team
#WebPerf #Accessibility #Performance #Security #WebPerfReport
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)
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
IA en auditorĂas de Web Performance: mediciĂłn determinĂstica e informes accionables
perf.reviews/blog/ai-web-...
#WebPerf #Performance #PerfReviews #PerfAudit #AI
React SSR Framework Showdown: TanStack Start, React Router, and Next.js Under Load
blog.platformatic.dev/react-ssr-fr... by @nodeland.dev
#React #Performance
⚡ Time to First Byte (TTFB)
Breaks down server response time into its parts: DNS lookup, TCP connection, TLS handshake, and processing time. If you want to go deeper, DebugBear lets you test TTFB from multiple geographic locations.
🏞️ Largest Contentful Paint (LCP)
It doesn't just measure the time; it identifies exactly which element is causing the LCP: CSS selector, type (image, text, video), and size in pixels. Because knowing your LCP is 3.2s is useless if you don't know what to optimize.
Screenshot of the PerfReviews Insights dashboard analyzing joanleon.dev with the “LCP” (Largest Contentful Paint) metric selected. The LCP value is 0.88 seconds, marked Good. The interface identifies the LCP element as a text paragraph with selector .astro-j7pv25f6 and size 40,592 px². The sidebar shows other performance checks including TTFB, images, videos, page weight, and external scripts.
Screenshot of the PerfReviews Insights dashboard analyzing the website joanleon.dev on a mobile viewport (390×844, iPhone 14). The “TTFB” (Time to First Byte) metric is selected in the sidebar. The result shows a TTFB of 203 ms, labeled Good. A connection breakdown chart shows DNS lookup (15 ms, 4%), TCP connect (161 ms, 45%), TLS handshake (158 ms, 44%), and server request (25 ms, 7%). The page includes explanations of the TTFB metric and links to optimization resources.
🚀 PerfReviews Insights: two new metrics to audit your web performance
We've added two new analyses to the tool:
#WebPerf #Performance #PerfReviews #WebPerfInsights
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 👇
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.
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
Anyone been experimenting with this? The team are looking for feedback so we can decide on next steps.
Would love to hear feedback (good or bad!) on this issue:
github.com/WICG/nav-spe...
It's early and rough around the edges.
If you try it: I want to know what's missing, what's confusing, and whether you'd pay for a more complete version.
Feedback form is built in. Takes 2 min.
perf.reviews/insights
It runs real checks in a real browser:
đź–Ľ Images: formats, lazy loading, LCP candidate
🎬 Videos: poster, preload, autoplay issues
⚖️ Page weight: breakdown by resource type
📦 Third-party scripts: cost per host
Built on WebPerf Snippets, open source performance audits.
I built a free tool to analyze web performance: no login, no setup.
Paste a URL → get an instant report on images, videos, page weight and third-party scripts.
It's in beta. Try it 👇
#WebPerf #Performance #PerfInsights
Starting with Chrome 145, DevTools now lets you throttle specific requests instead of the whole page. It’s the ideal way to test how your app handles a single slow asset or API call → goo.gle/4aP1Tcc
"We worked with Joan for about a month, and his contribution was extremely valuable. He quickly analyzed our platform and identified numerous performance topics that needed attention, documenting and explaining each of them clearly. He also improved several aspects of our observability, helping us better understand what to monitor and why. Throughout the engagement, he shared his methodology transparently, which made it easy for the team to follow and learn from his approach. At the end of the mission, he delivered a comprehensive document outlining actionable improvements and future optimization opportunities we can explore. His work provided both immediate value and a clear roadmap for continued performance improvements."
They were kind enough to share the following testimonial about our collaboration:
Thank you for the trust and the great collaboration throughout the process.
I hope we’ll have the opportunity to work together again in the future to continue improving the product, the user experience, and Web Performance practices across the teams.
I’m very glad to hear that the work delivered provided value both in the short term and in defining a roadmap for further improvements. It’s especially rewarding when the engagement not only helps improve the product and user experience, but also contributes to sharing knowledge with the teams.
Today I’d like to thank Leboncoin for the opportunity to collaborate with their team over the past few weeks.
It was a pleasure to analyze their platform, work on improving observability, and share methodologies to identify and prioritize Web Performance optimization opportunities.
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
“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...
The JPEG XL Image Coding System
History, Features, Coding Tools, Design Rationale, and Future
arxiv.org/pdf/2506.05987
#Image #JpegXL
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
I've encountered many applications with poor INP due to long tasks that do not yield control to the browser
I've written a guide with measurable examples comparing setTimeout, queueMicrotask, scheduler.postTask. It includes snippets to audit your projects
joanleon.dev/en/yield-to-...
#WebPerf
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
