Hace unas semanas anunciamos el nuevo sitio de NodeConf Argentina y mientras estaba ayudando con algunas cosas del sitio se me ocurrió probar correr Lighthouse desde las Chrome Developer Tools

picture of Audits tab in Chrome Developer Tools
Open the Developer Tools and select the Audits tab to run Lighthouse

En ese momento la accesibilidad del sitio no era tan buena (59/100) y supe que era importante mejorarla. Empecé a pensar en formas de automatizar el reporte y poder de esa forma mejorar progresivamente. No solo serviría para el caso de accesibilidad, sino también podría informar sobre mejoras en performance, SEO y otras métricas relevantes.

Disparando un build por cada Pull Request

Quería hacer un build únicamente cuando los features están “completos” y eso en general sucede cuando se decide abrir un PR. También hay una restricción en la herramienta que utilicé que no permitirá ser ejecutada por branchs en Travis CI.

Después de unos 20 minutos de prueba y error con la configuración de Travis logré obtener el comportamiento que estaba buscando. Esta fue la configuración final:

picture of Travis CI configuration

Y necesité agregar estas líneas al archivo .travis.yml (tal vez quisieras cambiar el branch a “master”):

1
2
3
branches:
  only: 
    - gh-pages

lighthouse-ci

lighthouse-ci es un paquete genial que te permite ejecutar Lighthouse desde la terminal y puede reportar los resultados directamente a GitHub. Su documentación está muy buena. En resumen: tenés que obtener una API key, configurar esa key en Travis CI, agregar el paquete cómo una de tus dev dependencies y finalmente ejecutar npm run lh https://tugenialsitio.com

Después de que el build finalice deberías ver un comentario en tu PR cómo el siguiente:

picture of lighthouse-ci's comment

Encontré algunas inconsistencias con los reportes de Lighthouse versus los reportes de Lighthouse desde la terminal, por ejemplo obteniendo diferente valor de performance, pero no encontré nada hasta ahora que lo pueda estar provocando. Tal vez crearé un issue para seguir el problema en el repositorio.

Si querés conocer acerca de cómo configuré el deployment con Surge.sh en Travis CI podés leer este blog post.