Lighthouse en las Herramientas para desarrolladores de Chrome para agentes permite que tu agente de codificación evalúe la calidad del sitio web realizando verificaciones de estado en vivo para la accesibilidad, el SEO, las prácticas recomendadas y la navegación con agentes.
En un flujo de trabajo con agentes, tu agente de codificación usa las auditorías de Lighthouse para identificar problemas de tiempo de ejecución específicos y medibles en lugar de buscar en tu base de código de forma aleatoria para realizar mejoras generales.
Este enfoque segmentado proporciona consejos prácticos directamente en el contexto de tu agente, lo que permite que tu agente de codificación encuentre y corrija errores con mayor precisión que las búsquedas amplias y estáticas en tu base de código.
Las auditorías de Lighthouse se centran en estas categorías principales:
- Accesibilidad (a11y): Garantiza que todos puedan usar tu sitio, incluidas las personas que usan lectores de pantalla.
- SEO: Ejecuta verificaciones técnicas para garantizar que los motores de búsqueda puedan encontrar y comprender tu contenido.
- Prácticas recomendadas: Confirma que tu sitio cumpla con los estándares modernos de desarrollo web
- Navegación con agentes: Mide cuánto pueden comprender los asistentes de IA y cómo pueden interactuar con tu sitio web.
Cuando uses Lighthouse, ten en cuenta lo siguiente:
- Compatibilidad local y de etapa de pruebas: Tu agente puede auditar cualquier página visible en
Chrome, incluidos los servidores de desarrollo local y los archivos HTML locales a los que se accede
a través del protocolo
file://. - Comportamiento del navegador: Las auditorías pueden interrumpir brevemente tu vista. Es posible que veas que la página cambia de tamaño o se vuelve a cargar mientras la herramienta simula diferentes dispositivos.
Audita la calidad web
Usa los siguientes flujos de trabajo y ejemplos para integrar Lighthouse en tu proceso de desarrollo.
Verifica la accesibilidad
Cuando cambies una IU, pídele a tu agente que verifique que la página siga siendo accesible.
Ejemplo de instrucción:
How can I improve accessibility on this page as measured by Lighthouse?
Ejemplo de ejecución del agente: Tu agente activa una auditoría de Lighthouse con formFactor establecido en mobile. Analiza los resultados, como el contraste de color insuficiente
o las etiquetas ARIA
faltantes,
y sugiere correcciones de código específicas.
Audita el SEO para mejorar la visibilidad en la Búsqueda
Los requisitos técnicos de SEO suelen detectarse demasiado tarde en el ciclo de desarrollo. Puedes pedirle a tu agente que encuentre y corrija los bloqueadores técnicos mientras compilas.
Ejemplo de instrucción:
According to Lighthouse audit, how can I improve this page for better discoverability in search?
Ejemplo de ejecución del agente: Tu agente ejecuta la auditoría de SEO y detecta las metaetiquetas, los vínculos canónicos o el texto descriptivo faltantes. Luego, puede ofrecer actualizar el código fuente para resolver la falla de la auditoría.
Valida las prácticas recomendadas
Asegúrate de que tu servidor local o sitio de etapa de pruebas cumpla con las prácticas recomendadas técnicas y de seguridad.
Ejemplo de instrucción:
Does my site follow best practices as measured by Lighthouse?
Ejemplo de ejecución del agente: Tu agente revisa aspectos técnicos, como el uso de HTTPS, los errores de la consola y las llamadas a la API obsoletas que informa Lighthouse.
Mejora general del sitio
Puedes ejecutar auditorías completas de Lighthouse de tu sitio y ayudarte a definir áreas de mejora en las primeras etapas del desarrollo.
Ejemplo de instrucción:
Run a full Lighthouse audit of my site, in mobile and desktop, and suggest improvement areas and possible fixes for any problems you find.
Ejemplo de ejecución del agente: Tu agente ejecuta una auditoría completa de Lighthouse de tu sitio en dispositivos móviles y computadoras, y sugiere cambios que podrían mejorar las puntuaciones de las diferentes auditorías. Si tu agente tiene conocimiento contextual completo del código fuente, puede sugerir correcciones directamente. Si tiene acceso al contexto correcto, también puede sugerir cómo mejorar la configuración del servidor o cualquier otra configuración de backend.