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

Análisis de Media Queries en CSS para Optimizar el Rendimiento | Joan León Descubre cómo analizar las media queries del CSS para detectar y optimizar estilos no utilizados en mobile, mejorando el rendimiento de tu web con un simple snippet de JavaScript.

Análisis de Media Queries en CSS para Optimizar el Rendimiento

joanleon.dev/posts/analis...

🇬🇧 version in thread

#WebPerf #CSS #WebPerfSnippets #PerfTools #DevTools

A browser window showing the Renfe website on the left with a mobile-style layout, including a menu button, the Renfe logo, travel selection fields, and a Black Friday banner. On the right, Chrome DevTools is open to the Console tab, displaying a CSS Media Queries Analysis report. The report lists totals for media queries, classes, and properties, highlights estimated mobile CSS savings of 284.83 KB, and breaks down inline and external CSS statistics.

📣 New WebPerf Snippet

Analyze all @media rules in CSS to identify classes and properties targeting viewports bigger than a specified breakpoint. Results are grouped by inline CSS and external files, with byte size estimates for potential mobile savings.

#WebPerfSnippets #WebPerf

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 Obs.js reads device and network signals and allows you to build adaptive user experiences.

Obs.js: context-aware web performance for everyone

csswizardry.com/Obs.js/demo/ by @csswizardry.com

#WebPerf #PerfTools #Performance #WebPerfSnippets

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

LoAF Helpers: Advanced Debugging in DevTools – Nextra A curated list of snippets to get Web Performance metrics to use in the browser console or as snippets on Chrome DevTools by Joan León

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