Archives

How to combine deterministic scripts and AI agents to go from metrics collection to an actionable report, and lay the foundations for continuous regression testing in performance.

A hands-on workshop for performance debugging with Gemini CLI connected to the browser via Chrome DevTools MCP: from identifying a Long Task in minified code to having the agent create the branch and open the PR.

How to add an AI summary button to an Astro blog using the browser's native Chrome Summarizer API, without servers or external APIs.

Applying Anthropic's progressive disclosure system (L1/L2/L3) to reduce the context loaded by WebPerf Snippets Skills and free space in the agent's context window.

WebPerf Snippets scripts now return structured JSON directly from evaluate_script() and are minified at build time with dead code elimination, significantly reducing token footprint.

WebPerf Snippets become Agent SKILLs with scripts as deterministic tools for AI agents, executable directly in the browser via Chrome DevTools MCP.

WebPerf Snippets exposes its performance measurement tools via WebMCP, the new protocol that lets AI assistants interact with the browser natively.

WebAssembly has been a W3C standard since 2019, but many developers still don't know about it. What it really is, how it works, and why you should know about it.

Inline, sprite with <use>, <object>, <img>... each way of loading an SVG has different implications for performance, caching and rendering. A practical analysis to help you choose well.

The <img> element has attributes that make a real difference in performance: loading, decoding, fetchpriority, srcset and sizes. A practical guide to using them well.

A practical guide on how to use setTimeout, queueMicrotask and scheduler.postTask to break up long tasks and optimize INP. Comparison with measurable examples.

Consent management scripts (CMP) compete with critical resources if not prioritized correctly. A server-side strategy to optimize loading based on visit type.

This article is available in English on the original source at PerfPlanet Performance Calendar 2025.

The CSS property content-visibility improves rendering performance. Practical case with metrics and snippets to detect opportunities.

Learn how to analyze CSS media queries to detect and optimize unused styles on mobile, improving your website's performance with a simple JavaScript snippet.

A review of the talks I gave during 2023

A metric number is just a number, until you know how to interpret it.

In Chrome 97 a new tool appears in DevTools to measure performance in the navigation and interaction experience of visitors to our website

Utility-First CSS frameworks are gaining a lot of traction, especially Tailwind CSS. Is it a good option?

Let me explain why I prefer PostCSS for writing CSS.

At over 24 years old, CSS continues to be a despised language.

Implement the new AVIF image format in your CSS `background-image`.

A compilation of CSS books that can help you improve your knowledge in the art of styling your projects.

There are many methodologies and languages for learning to program, which is why the first thing a person who wants to learn to program faces is choosing a language or development platform.

In this article I want to share my opinion of the book 'Agile Design with TDD', from which I've been able to learn the foundations of TDD.

I want to recommend the book Clean JavaScript, by Miguel A. Gómez, where he teaches us to apply good practices, write robust and easy-to-maintain code. With the aim of developing good software with JavaScript.

With CSS animations we have much more control than with transitions to create animations thanks to @keyframes.

CSS Transitions allow property value changes to occur progressively over a specified period of time.

AVIF is a next-generation image format that reduces JPEG images by up to ~50%.

We've had animation on the web for a long time, let's take a look at the different ways to do web animation.

This article is available in English on the original source by Christoph Erdmann.

Pixel Art is a design technique that continues to be used as a resource in many video games. With CSS we can use this technique in a very simple way.

For many people CSS is a magician's thing, some might even believe it's witchcraft, but that's because they don't know the necessary spells to have real control over CSS.

Little needs to be said about the importance of animation in websites and applications, designers and developers are aware of it, just by opening the browser or applications we can appreciate it. But let's see what's hidden under the definition of Motion Craftsmanship.

As web development professionals, we worry about choosing the best framework, the most current library, applying best practices in JavaScript and CSS, being careful with HTML semantics to improve SEO, improving our content's accessibility, bundling and splitting files to optimize loading, but what about images?