4 days ago
2
1
1
0
Posts by Joan León
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
4 days ago
4
1
0
0
WebPerformance Report performance email preview highlighting optimization scores, Perf Links, and Core Web Vitals metrics on a colorful gradient background.
⚡Featured posts this week:
✨ Android Sets New Record for Mobile Web Perf: Eric Seckler
✨ AI in Web Performance Audits: @nucliweb.net
✨ AI Won't Save Your Development Process: @steve8708.bsky.social
✨ Safari 26.4 is here!: @jensimmons.bsky.social
🙏 Special thanks to the authors!
#webperf
1 week ago
1
1
1
0
How do you measure rendering performance for entire DOM subtrees without slowing down the browser? ⏱️
✍ In my new blog post, I dive into the technical details of how I implemented the new Container Timing #webperf API in #Blink / #Chromium.
blogs.igalia.com/dape/2026/03...
1 week ago
28
8
1
1
WebPerformance Report is no longer just a weekly report in your inbox
Well done, @webperfreport.bsky.social team
#WebPerf #Accessibility #Performance #Security #WebPerfReport
1 week ago
3
1
1
0
All snippets are available at:
webperf-snippets.nucliweb.net
Also available as Agent Skills for Claude Code, Cursor, and other AI agents; for automated performance auditing.
npx -y skills add nucliweb/webperf-snippets
1 week ago
3
0
0
0
Content Visibility
content-visibility: auto lets the browser skip layout and paint for offscreen content.
This snippet detects which elements use it and analyzes their real impact on loading performance.
webperf-snippets.nucliweb.net/Loading/Cont...
1 week ago
0
0
1
0
Advertisement
Get your <head> in order
The order of elements in the <head> affects perceived performance. The browser processes them sequentially.
This snippet analyzes whether your <head> follows the recommended order to maximize loading speed.
webperf-snippets.nucliweb.net/Loading/Get-...
1 week ago
0
0
1
0
Fonts Preloaded, Loaded & Used Above The Fold
Compares the fonts you preload, the ones the browser actually loads, and the ones used above the fold.
Spot wasted resources and optimization opportunities at a glance.
webperf-snippets.nucliweb.net/Loading/Font...
1 week ago
0
0
1
0
Find Above The Fold Lazy Loaded Images
Using loading="lazy" on above-the-fold images is a common anti-pattern that hurts LCP.
This snippet detects exactly which images are misconfigured and identifies the LCP candidate.
webperf-snippets.nucliweb.net/Loading/Find...
1 week ago
0
0
1
0
Find render-blocking resources
Identifies resources that block the browser from showing any content, directly impacting FCP and LCP.
webperf-snippets.nucliweb.net/Loading/Find...
1 week ago
0
0
1
0
Scripts Loading
Analyzes all scripts on the page: which ones block rendering, which use async/defer, and which are third-party.
The first step to audit script impact on the Critical Rendering Path.
webperf-snippets.nucliweb.net/Loading/Scri...
1 week ago
0
0
1
0
WebPerf Snippets sticker
Did you know webperf-snippets has these snippets to analyze loading performance?
Here are some you might not know about: 🧵
#WebPerf #Performance #WebPertSnippets
1 week ago
1
0
1
0
Totally agree
1 week ago
0
0
0
0
Advertisement
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
1 week ago
9
1
6
0
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.
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
1 week ago
2
0
0
0
IA en auditorías de Web Performance: medición determinística e informes accionables
perf.reviews/blog/ai-web-...
#WebPerf #Performance #PerfReviews #PerfAudit #AI
1 week ago
2
1
0
0
🤯 TIL: "!important" in #CSS can have whitespace after the exclamation point! And not just that, but entire comments as well.
It makes sense. You should have to explain why you're using !important, and what better place than the middle of the declaration?
Demo 👉 codepen.io/editor/SirPe...
#webdev
1 week ago
32
9
2
1
React SSR Framework Showdown: TanStack Start, React Router, and Next.js Under Load
blog.platformatic.dev/react-ssr-fr... by @nodeland.dev
#React #Performance
2 weeks ago
1
1
0
0
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
3 weeks ago
3
1
1
0
Advertisement
Hi Raúl!
There’s no mobile support yet, but I hope it won’t be long before we have it.
See you at @commit-conf.com ☺️
3 weeks ago
1
0
1
0
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
3 weeks ago
5
2
2
0
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
3 weeks ago
2
1
1
0
The Chrome DevTools MCP 0.20.0 has a new feature: experimental chrome-devtools CLI 🤩
github.com/ChromeDevToo...
#WebPerf #DevTools #CLI #MCP #AI
3 weeks ago
2
1
0
0
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...
3 weeks ago
0
0
0
0
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
3 weeks ago
1
0
1
0