Archives

WebGPU permite aplicar efectos y transformaciones a vídeo en tiempo real en el browser. Implementación práctica con benchmarks y limitaciones reales.

Cómo usar WebGPU como backend de TensorFlow.js para ejecutar modelos de ML en el browser con rendimiento real. Benchmarks y casos prácticos.

El paquete chrome-devtools-mcp incluye una CLI experimental que permite controlar Chrome directamente desde la terminal: navegar, interactuar, auditar rendimiento, analizar red y memoria, todo sin salir de la shell.

Cómo usar WebGPU para aplicar filtros y transformaciones a imágenes en el browser. Benchmarks reales comparando con Canvas 2D.

WebGPU expone la GPU directamente al browser y abre nuevas posibilidades para el procesamiento intensivo: imágenes, vídeo, ML y mucho más.

Cómo combinar scripts determinísticos y agentes de IA para ir de la recopilación de métricas a un informe accionable, y sentar las bases del test de regresión continuo en rendimiento.

Workshop práctico de diagnóstico de rendimiento con Gemini CLI conectada al navegador vía Chrome DevTools MCP: desde identificar un Long Task en código minificado hasta dejar que el agente cree la rama y prepare la PR con la solución.

Cómo implementar un botón de resumen IA en un blog Astro usando la Chrome Summarizer API nativa del navegador, sin servidores ni APIs externas.

Cómo aplicar el sistema de progressive disclosure de Anthropic (L1/L2/L3) para reducir el contexto cargado por las Skills de WebPerf Snippets y liberar espacio en la ventana de contexto del agente.

Los scripts de WebPerf Snippets devuelven ahora JSON estructurado directamente desde evaluate_script() y se minifican en el build eliminando el código muerto, reduciendo el footprint de tokens de forma significativa.

Los WebPerf Snippets se convierten en Agent SKILLs con scripts como herramientas determinísticas para agentes de IA, ejecutables directamente en el navegador via Chrome DevTools MCP.

WebPerf Snippets expone sus herramientas de medición de rendimiento vía WebMCP, el nuevo protocolo que permite a los asistentes de IA interactuar con el navegador de forma nativa.

WebAssembly es un estándar del W3C desde 2019, pero muchos desarrolladores aún lo desconocen. Qué es realmente, cómo funciona y por qué deberíais conocerlo.

Inline, sprite con <use>, <object>, <img>... cada forma de cargar un SVG tiene implicaciones distintas en rendimiento, caché y renderizado. Un análisis práctico para elegir bien.

El elemento <img> tiene atributos que marcan una diferencia real en rendimiento: loading, decoding, fetchpriority, srcset y sizes. Una guía práctica para usarlos bien.

Guía práctica sobre cómo usar setTimeout, queueMicrotask y scheduler.postTask para dividir tareas largas y optimizar INP. Comparativa con ejemplos medibles.

Los scripts de gestión del consentimiento (CMP) compiten con recursos críticos si no se priorizan bien. Una estrategia server-side para optimizar su carga según el tipo de visita.

Una guía paso a paso de cómo utilizo Google Chrome DevTools para detectar problemas de Web Performance en una web, y validar algunas hipótesis para solventarlos.

La propiedad CSS content-visibility mejora el rendimiento de renderizado. Caso práctico con métricas y snippets para detectar oportunidades.

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.

Descubre cómo LoAF va más allá de INP. Aprende a detectar scripts que bloquean el LCP y a distinguir entre JavaScript pesado y layout thrashing para aplicar la optimización correcta.

Aprende a depurar el INP (Interaction to Next Paint) de forma efectiva. En este artículo vemos cómo correlacionar Event Timing con la API de Long Animation Frames (LoAF) para identificar los scripts culpables de las interacciones lentas, cómo optimizar la recolección de datos y cómo analizar la información para priorizar las tareas de optimización.

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.

Referencia rápida de términos, acrónimos y conceptos relacionados con LoAF y web performance.

Un repaso a las charlas que he hecho durante el 2023

El número de una métrica no es más que un número, hasta que sabes cómo interpretarlo.

En Chrome 97 aparece una nueva herramienta en las DevTools para poder medir la performance en la experiencia de navegación e interación de las visitas a nuestra web

Los frameworks CSS basados en "Utility-First" están cogiendo mucha tracción, y en especial Tailwind CSS, ¿es una buena opción?

Déjame que te explique el motivo de porqué prefiero PostCSS para escribir CSS.

Con más de 24 años, CSS sigue siendo un lenguaje despreciado.

Implementa el nuevo formato de imágenes AVIF en los `background-image` de tu CSS con este plugin PostCSS.

Implementa el nuevo formato de imágenes AVIF en los `background-image` de tu CSS.

Recopilación de libros CSS que te podrán ayudar a mejorar tus conocimientos en el arte de dar estilos a tus proyectos.

Hay muchas metodologías y lenguajes para aprender a programar, por eso, lo primero que se encuentra una persona que quiere aprender a programar, es frente a la elección de un lenguaje o plataforma de desarrollo.

En este artículo quiero compartir mi opinión del libro 'Diseño Ágil con TDD', del cual he podido aprender las bases del TDD.

Os quiero recomendar el libro Clean JavaScript, de Miguel A. Gómoez, donde nos enseña a aplicar buenas prácticas, escribir código robusto y fácil de mantener. Con el objetivo de conseguir desarrollar buen software con JavaScript.

Con las animaciones CSS tenemos mucho más control, que con las transiciones, para crear animaciones gracias a los @keyframes.

Las Transiciones CSS permiten que los cambios de valor de una propiedad CSS se realicen progresivamente durante un período de tiempo especificado.

Hace mucho tiempo que tenemos animación en la web, echemos un vistazo a las diferentes maneras de hacer animación web.

AVIF es un formato de imágenes de nueva generación que reduce hasta un ~50% el peso de las imágenes JPEG.

Traducción al castellano del gran artículo original "JPG endlich verstehen" de Christoph Erdmann.

El Pixel Art es una técnica de diseño que se sigue utilizando como recurso en muchos video juegos. Con CSS podemos utilizar esta técnica de una manera muy sencilla.

Para mucha gente CSS es cosa de magos, incluso habrá quien crea que es brujería, pero eso es por que no conocen los hechizos necesarios para tener un auténtico control sobre el CSS.

Poco hay que decir de la importancia de la animación en webs y aplicaciones, los diseñadores y desarrolladores están concienciados de ello, simplemente con abrir el navegador o aplicaciones y podremos apreciarlo. Pero veamos qué se esconde bajo la definición Motion Craftsmanship.

Como profesionales del desarrollo web, nos preocupamos de escoger el mejor framework, la librería más actual, aplicar buenas prácticas en Javascript y CSS, ser cuidadosos de la semántica en el HTML para mejorar el SEO, estamos mejorando la accesibilidad de nuestro contenido, empaquetamos y dividimos los archivos para optimizar la carga, pero ¿qué pasa con las imágenes?