ALT Banner promocional de un workshop titulado “Web Performance Debugging with AI Agents Chrome DevTools MCP”. La imagen muestra una interfaz futurista con gráficos de rendimiento web, líneas de tiempo y métricas como LCP, INP y CLS conectadas a bloques etiquetados “MCP”, “API” y “AI”. A la derecha aparecen fragmentos de código y elementos visuales de análisis técnico sobre un fondo oscuro con tonos azules y verdes.
ALT Joan León stands at the front of a classroom giving a presentation to a small group of seated attendees. He gestures while speaking beside a large screen displaying slides about web performance. The audience, some using laptops, face him attentively in a modern, well-lit room with large windows.
ALT 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.
ALT 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?”
ALT 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.
ALT 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.
ALT 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).