🚀 New WebPerf Snippet published!
Detects potential performance issues with `rel="prefetch"` resource hints by analyzing quantity, size, type, and appropriateness of prefetched resources.
webperf-snippets.nucliweb.net/Loading/Pref...
#WebPerf #WebPerfSnippet #PerfTools
Integrate CrUX data into performance trace summaries in Chrome DevTools MCP v0.17.0 👏
github.com/ChromeDevToo...
#WebPerf #PerfTools #DevTools
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).
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
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
Updated de Content-Visibility snippet for Chrome DevTools
- Detects existing content-visibility usage
- Finds offscreen optimization opportunities
- CLS warnings for missing contain-intrinsic-size
- Configurable thresholds
webperf-snippets.nucliweb.net/Loading/Cont...
#WebPerf #PerfTools
Análisis de Media Queries en CSS para Optimizar el Rendimiento
joanleon.dev/posts/analis...
🇬🇧 version in thread
#WebPerf #CSS #WebPerfSnippets #PerfTools #DevTools
📣 Updated my Resource Hints snippet for @chromedevtools.bsky.social
Now detects common mistakes like:
❌ <link rel="preconnect dns-prefetch">
❌ Non-standard rel values Perfect for auditing preload, prefetch, preconnect, etc
webperf-snippets.nucliweb.net/Loading/Reso...
#WebPerf #PerfTools
A screenshot of a performance review interface titled “Perf Reviews” with the question “Which LCP phase was most problematic?” An AI assistant response shows analysis results indicating that the “Time to first byte (TTFB)” phase contributed 4,311 ms (92.8%) of the total 4,648 ms Largest Contentful Paint time, while “Element render delay” contributed 337 ms (7.2%). Below the response are action buttons such as “How can I reduce the time to first byte (TTFB)?” and “What caused the LCP element to render slowly?”
With @chromedevtools.bsky.social, we can streamline Web Performance Debugging with the help of the AI assistant
#WebPerf #PerfTools #PerfDebugging
Dr. @guaca.bsky.social explains the diagnosis with @debugbear.com of our symptoms at DevFest Barcelona 2025
#DevFestBCN2025 #WebPerf #PerfTools #DevFest
Chrome DevTools Console showing lazy loading audit results: 46 images without lazy loading detected, totaling 4.34 MB, with a list displaying the first 5 images showing their resolution (900x600) and individual file sizes ranging from 14.63 KB to 104.76 KB.
I've updated the WebPerf Snippet "Find non Lazy Loaded Images outside of the viewport" to list images without loading="lazy". Now it shows:
- Total number of images
- Total file size
- Individual details: URL, resolution & file size
#WebPerf #WebPerfSnippets #PerfTools
Obs.js: context-aware web performance for everyone
csswizardry.com/Obs.js/demo/ by @csswizardry.com
#WebPerf #PerfTools #Performance #WebPerfSnippets
AI assistance for performance
developer.chrome.com/docs/devtool... by @matthiasrohmer.bsky.social
#WebPerf #Performance #PerfTools #AI #PerfAI
📺 Developer Tooling Tips
Explore DevTools and boost your web debugging skills with these bite-size DevTools tips and tricks, by @developer.chrome.com
youtube.com/playlist?lis...
#WebPerf #Performance #DevTools #PerfTools #WebTools
![Screenshot of an email alert from DebugBear titled “Change alert for [redacted]”. The email, addressed to Joan Leon, reports a performance issue with the message “Total Blocking Time: 150 ms → 2,010 ms,” highlighted in a red rectangle. The email includes links to “View Details,” “Unsubscribe from notifications for this project,” and “Configure alert criteria.”](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:ewtrkmesp4d5dlzbtdwckvhg/bafkreidram3q67wxk43csakmzaikbkiuf5uuptpefozfvyiaggacn4sbpa)
Screenshot of an email alert from DebugBear titled “Change alert for [redacted]”. The email, addressed to Joan Leon, reports a performance issue with the message “Total Blocking Time: 150 ms → 2,010 ms,” highlighted in a red rectangle. The email includes links to “View Details,” “Unsubscribe from notifications for this project,” and “Configure alert criteria.”
I use several tools to debug and monitor web performance. One of them is @debugbear.com, which helps me track and alert on performance issues — like the one shown here.
If you care about performance, I recommend giving @debugbear.com a try.
#WebPerf #PerfTools #Performance #monitoring
Tabla titulada “Qué te da LoAF que otras herramientas no”. Compara cuatro herramientas —Event Timing, Long Tasks, DevTools y LoAF— según distintos tipos de información. Las filas y columnas muestran lo siguiente: • Fila 1 (Encabezados): • Información • Event Timing • Long Tasks • DevTools • LoAF • Fila 2: • Nombre de función • Event Timing: ❌ • Long Tasks: ❌ • DevTools: ✅ • LoAF: ✅ • Fila 3: • Archivo o URL del script • Event Timing: ❌ • Long Tasks: ⚠️ Limitado • DevTools: ✅ • LoAF: ✅ • Fila 4: • Tiempo de forced layout • Event Timing: ❌ • Long Tasks: ❌ • DevTools: ⚠️ Manual • LoAF: ✅ • Fila 5: • Disponible en producción • Event Timing: ✅ • Long Tasks: ❌ • DevTools: ❌ • LoAF: ✅ • Fila 6: • Attribution automática • Event Timing: ❌ • Long Tasks: ❌ • DevTools: ⚠️ Manual • LoAF: ✅ En resumen, la tabla destaca que LoAF ofrece todas las funcionalidades, mientras que las demás herramientas presentan limitaciones parciales o carecen de ciertas capacidades
Fundamentos de Long Animation Frames API
Descubre cómo Long Animation Frames API (LoAF) resuelve el mayor problema al debuggear INP: saber exactamente qué código causó una interacción lenta. Fundamentos, código práctico y conceptos clave
joanleon.dev/posts/loaf/f...
#WebPerf #INP #PerfTools #LoAF
A collection of white rounded rectangular stickers displaying 'WebPerf Snippets' text in a gradient from blue to teal. Seven stickers are fanned out in a cascading arrangement on a dark gray textured surface, with one sticker placed separately to the right.
New stickers for the WebPerf Snippets project
webperf-snippets.nucliweb.net
#WebPerf #WebPerfSnippets #PerfTools
New percentiles() method in WebPerf Snippets LoAF Helpers!
Get P50, P75, P95, P99 stats for Long Animation Frames - perfect for RUM reporting without sending all frame data
webperf-snippets.nucliweb.net/Interaction/...
#WebPerf #WebPerfSnippets #PerfTools #INP #LoAF #JavaScript
📣 New WebPerf Snippet
LoAF Helpers: Advanced Debugging in DevTools
webperf-snippets.nucliweb.net/Interaction/...
#WebPerf #PerfTools #Performance #LoAF #INP
Screenshot of Chrome DevTools showing a JavaScript snippet named “LoAF Helpers” in the Sources panel. The snippet provides debugging helpers for the Long Animation Frames API with usage instructions and function examples. On the right, the Console panel displays logs indicating “LoAF Helpers Loaded” and a summary report from loafHelpers.summary() showing metrics such as total frames (2), total blocking time (422.10ms), average duration (211.05ms), and frame severity levels (critical, high, medium, low).
Cooking up a new #WebPerf snippet using the Long Animation Frame (LoAF) API
Great for debugging jank and improving smoothness!
Stay tuned 👀
#Performance #PerfTools #CoreWebVitals #INP #LoAF
Screenshot of the DebugBear performance monitoring dashboard showing Interaction to Next Paint (INP) metrics filtered for Firefox on desktop. The main metric shows an INP value of 336 milliseconds, categorized as “Needs Improvement.” A tooltip on a trend chart indicates that on October 15, 2025, the INP rating was “Needs Improvement” with one view and 50% of interactions affected. A world map highlights data from a region in Europe.
Collecting the first INP data from Firefox 144 🤩
#WebPerf #INP #CoreWebVitals #Performance #Firefox #PerfTools
GitHub Actions bot comment showing that images were automatically compressed by Calibre’s image-actions. The comment reports a 47.1% reduction in image size, saving 104.46 KB. A table displays one example file (‘Screen Shot 2020-09-17 at 3.29.33 pm.png’) reduced from 221.87 KB to 117.41 KB. It notes that 348 images did not require optimisation, and includes a ‘View diff’ link for visual comparison.
#WebPerfTip
If you need a GitHub Action to automatically compresses JPEGs, PNGs and WebPs in pull requests, IMHO this is the best option
#WebPerf #ImagePerf #PerfTools #Image
Do you have a website with international visitors?
Check the Time to First Byte (TTFB) from different locations, and create a plan to improve it if your visitors are having a bad experience.
Start testing today, links in the first comment.
#WebPerf #PerfTools #Performance #TTFB
Record and analyze a performance trace #DevToolsTips
www.youtube.com/watch?v=7A70...
#WebPerf #PerfTools
Compare how your website looks with and without JavaScript screenshot
Compare how your website looks with and without JavaScript
www.debugbear.com/test/noscript/ by @debugbear.com
#WebPerf #PerfTools #PerfDebugging
Chrome DevTools Screenshot, in the Performance tap and with the CPU throttling selector opened. And red square highlights the new options to calibrate or computer to emulate Low-tier and Mid-tier mobile.
Chrome DevTools Screenshot, in the CPU throttling presets settings page to calibrate our computer to emulate Low-tier and Mid-tier mobile.
🤩 New in Google Chrome Version 135 (Canary)
Now, we can calibrate our computer to emulate low-tier and mid-tier mobile phones in CPU throttling
This great feature helps us improve the web performance by emulating more accurately
Thank you, DevTools Team
#WebPerf #PerfTools #DevTools #Performance
DebugBear tool screenshot with 10 image resources with fetchpriority="high"
Avoid marking too many requests as high priority - "If all resources are a priority, none is a priority"
Selectively use the fetchpriority="high" attribute to prioritize only the most important resources, for example, the LCP image.
#WebPerf #Performance #PerfTools #PerfTips
Debug network requests, source files, and performance traces with Gemini
developer.chrome.com/blog/new-in-...
#WebPerf #Performane #PerfTools #AI
Don't miss this great talk by @danielroe.dev, a reference in the Open Source Community
Unpacking Bundling at @perfnow.bsky.social
www.youtube.com/watch?v=Hxen...
#WebPerf #PerfTools #Performance #perfnow
speedscope
🔬 A fast, interactive web-based viewer for performance profiles.
github.com/jlfwong/spee...
#WebPerf #PerfTools #Performance
