WebPerf Snippets + WebMCP: métricas web que entiende la IA

Published:

Captura de pantalla de una ventana del navegador Google Chrome con pantalla dividida y barra de navegación en la parte superior, fondo blanco con líneas grises claras. En el lado izquierdo hay un texto introductorio que dice 'WebPerf Snippets' con información sobre las mediciones y ejemplos visuales de datos de un sitio web en diferentes dispositivos como tableta u ordenador, mostrando datos en un gráfico lateral con una captura de pantalla más pequeña debajo. En la parte superior derecha hay una lista que dice 'WebMCP Tools' con varias columnas: una para las descripciones del código de snippet, como identificar un snippet o buscar por categoría; la siguiente es el 'input schema', identificando el origen como objetos, listas, cadenas de texto o propiedades; y la última detalla nombres específicos como 'get snippet'. En la parte inferior derecha hay tres listas más. Una dice 'Interact with the Page' con un campo de texto vacío 'User Prompt' y opciones como 'Send', 'Reset', 'Set Gemini API Key' y 'Copy trace'. Debajo hay otro campo 'get snippet' como herramienta, un cuadro de texto editable para identificar un snippet y un botón para ejecutar la herramienta. En la esquina inferior derecha del navegador hay una pequeña burbuja de notificación roja.

Llevamos años construyendo herramientas para medir el rendimiento web: scripts de consola, extensiones de navegador, paneles de DevTools. Todas tienen algo en común: las maneja una persona. Alguien que sabe qué medir, cuándo ejecutarlo y cómo interpretar el resultado.

Con WebMCP eso empieza a cambiar. Y en WebPerf Snippets hemos dado el primer paso: exponer las herramientas de medición de rendimiento de forma que cualquier asistente de IA pueda descubrirlas, entenderlas y ejecutarlas directamente en el navegador.

¿Qué es MCP y qué tiene que ver con el navegador?

Model Context Protocol (MCP) es un estándar abierto que define cómo los modelos de lenguaje pueden interactuar con herramientas externas. En lugar de que una IA improvise acciones, MCP proporciona un contrato claro: estas son las herramientas disponibles, esto es lo que hacen, así se usan.

MCP funciona ya en muchos contextos: servidores, editores de código, aplicaciones de escritorio. Pero el navegador es un entorno diferente. El código se ejecuta en un sandbox, no hay acceso directo al sistema de archivos, y la interacción ocurre en el contexto de una página web concreta.

WebMCP es la propuesta del W3C para resolver exactamente eso: un protocolo nativo para que los sitios web expongan herramientas estructuradas que los agentes de IA puedan usar de forma fiable. La API se integra directamente en el navegador a través de navigator.modelContext.

La diferencia respecto a que una IA “navegue” y manipule el DOM directamente es significativa: en lugar de que el agente interprete la interfaz visual y simule clics, el sitio le dice explícitamente qué puede hacer y cómo. Más velocidad, más precisión, menos errores de interpretación.

Las tres herramientas que expone WebPerf Snippets

La integración registra tres herramientas vía navigator.modelContext:

list_snippets

Devuelve todos los snippets disponibles con sus metadatos: identificador, categoría, título, descripción y URL. Sin código. Es el punto de entrada para que un agente descubra qué herramientas de medición existen.

// Un agente puede preguntar: "¿qué snippets hay disponibles?"
// list_snippets devuelve algo así:
[
  {
    id: "LCP",
    category: "CoreWebVitals",
    title: "Largest Contentful Paint",
    description:
      "Measures the render time of the largest image or text block visible in the viewport",
    url: "https://webperf-snippets.nucliweb.net/...",
  },
  // ... los 31 snippets disponibles
];

get_snippet

Devuelve el código JavaScript completo de un snippet por su ID. Cuando un agente quiere ejecutar una medición concreta, esta herramienta le da el código listo para usar.

// "Dame el código para medir el LCP"
get_snippet({ id: "LCP" });
// → devuelve el JavaScript completo del snippet

search_snippets

Filtra snippets por categoría y/o palabra clave. Útil cuando un agente no sabe exactamente qué ID buscar pero conoce el área de interés.

// "Muéstrame todo lo relacionado con Core Web Vitals"
search_snippets({ category: "CoreWebVitals" });

// "Busca snippets sobre imágenes"
search_snippets({ keyword: "image" });

Con estas tres herramientas, el flujo completo queda cubierto: descubrir qué existe, buscar lo relevante y obtener el código para ejecutarlo.

Cómo probarlo (hoy)

WebMCP está en fase de prototipado. Para probarlo necesitas:

  1. Chrome 146+ Canary con las flags de WebMCP activadas
  2. Verificar que navigator.modelContext está disponible en consola
  3. Acceder a webperf-snippets.nucliweb.net y llamar a las herramientas desde un agente compatible

Podéis consultar el Early Preview Program de Chrome y el repositorio webmcp-tools de Google Chrome Labs para seguir la evolución de la implementación.

Zero cost para el resto de navegadores

Uno de los requisitos que me pareció importante cumplir desde el principio: que añadir soporte WebMCP no impactara en la carga de la página para quienes usen navegadores sin soporte.

La solución es sencilla: el registro de snippets se carga como un import dinámico que solo se ejecuta si navigator.modelContext existe. En un navegador estándar, ese chunk nunca se descarga.

if (navigator.modelContext) {
  const { snippets } = await import("./snippets-registry.js");
  // register tools...
}

Cero coste de red, cero parsing adicional, cero impacto en rendimiento para la mayoría de visitantes.

Lo que significa para el debugging asistido por IA

En mis auditorías de rendimiento, uno de los pasos más repetitivos es ejecutar el mismo conjunto de scripts para obtener métricas: LCP, INP, CLS, tiempos de carga de recursos, análisis de fuentes. Con WebMCP, ese conjunto de scripts puede convertirse en un flujo automatizado que un agente de IA ejecuta, interpreta y sobre el que da recomendaciones.

No se trata de reemplazar el criterio de quien analiza el rendimiento. Se trata de eliminar la fricción: pasar de “necesito copiar este script, pegarlo en consola, interpretar el output” a “analiza el LCP de esta página y dime si hay oportunidades de mejora”.

Una aclaración importante: WebMCP expone el código, no lo ejecuta

Aquí conviene ser preciso. Si queréis analizar el LCP de web.dev usando WebPerf Snippets + WebMCP, las herramientas registradas en webperf-snippets.nucliweb.net os dan el código del snippet, pero no lo ejecutan en otra página automáticamente.

Para que el flujo completo funcione, el agente de IA necesita capacidad de control de navegador. El proceso real sería:

  1. El agente visita webperf-snippets.nucliweb.net → llama a get_snippet({ id: "LCP" }) → obtiene el JavaScript
  2. El agente navega a web.dev → inyecta y ejecuta ese código en su contexto
  3. El agente lee el resultado y da recomendaciones

Sin esa capacidad de automatización de navegador (vía CDP, Puppeteer, o un agente con control de browser), WebMCP en WebPerf Snippets actúa como un repositorio estructurado y descubrible: el agente sabe qué herramientas existen y cómo usarlas, pero la ejecución en sitios de terceros requiere un paso más.

Es una distinción importante que refleja el estado actual de la tecnología. WebMCP define el contrato; la capa de automatización que cierra el ciclo está evolucionando en paralelo.

WebPerf Snippets lleva años siendo esa colección de scripts que se usan a mano. Con esta integración, empieza a ser también una colección que los agentes pueden descubrir y usar de forma estructurada, lista para cuando esa capa de automatización madure.

Conclusión

WebMCP todavía es un draft del W3C y la API está disponible solo en Chrome Canary. Pero el modelo es claro: los sitios web exponen herramientas estructuradas, los agentes de IA las descubren y usan de forma nativa. WebPerf Snippets ya está preparado para ese escenario.

Mientras tanto, hay una alternativa que ya podemos utilizar: los Agent Skills de WebPerf Snippets. Usando Chrome DevTools MCP, un agente puede navegar a cualquier página y ejecutar los snippets directamente, sin esperar soporte de navegador. Dos aproximaciones al mismo objetivo; lo detallo en este otro artículo (próximamente).

Next Post
WebAssembly: el estándar olvidado del W3C