Mejora de Performance y Accesibilidad Web con Lighthouse

Recuerda que no podemos mejorar lo que no podemos medir. Para ello vamos a utilizar la herramienta Lighthouse, que nos ayuda a medir temas de accesibilidad, performance, buenas prácticas, entre otras. No tendrás que preocuparte por instalar nada, ya que viene embebida en las DevTools de Chrome.

Cómo acceder a Lighthouse

1. Abrimos el proyecto en nuestro navegador.

2. Clic derecho en alguna parte del proyecto. Clic en “Inspeccionar” para abrir las DevTools.

3. Al extender la sección de pestañas, seleccionamos “Lighthouse”.

4. Observamos varias opciones que podemos analizar. Puedes seleccionar todas o las que necesites. Sólo podemos generar un reporte por versión mobile o desktop. Si quieres ambas, genera otro reporte con la opción que te falte.

5. Una vez hecha la elección, clic en “Generar reporte”. Esperamos a que termine de generarlo.

6. Analizamos los resultados

Cómo monitorear el performance

Toma en cuenta que no debes frustarte por resultados no perfectos. Mientras se encuentre por encima del 90% significa que tu página está bien construida. Esto es porque hay muchos factores que determinan estas estadísticas como una mala conexión a internet, un mal computador o algún otro incoveniente que no puedas controlar.

El valor más bajo es el performance, o la velocidad de carga de nuestra página. Revisamos las razones haciendo clic sobre el mismo valor.

Se despliegan todos los detalles que se encontraron. Vamos a la sección de oportunidades.

Al desplegar cada una de las sugerencias que nos hace la herramienta, encontramos que la imagen de la sección comodín está algo pesada. Incluso nos recomienda comprimirla para aliviar un poco la puntuación que nos está dando.
Podríamos también, por ejemplo, seleccionar un tamaño de imagen más pequeño para móvil y otro para desktop. De esta manera sólo se descargaría la que necesite el usuario.

Cómo monitorear accessibility

Esta parte es muy importante. Lighthouse nos recomienda ajustar mejor los constrastes de ciertas etiquetas de párrafo para personas que tienen problemas de visión. En este caso podrías subir la opacidad de ciertas fuentes cuyo fondo tiene un color similar.

Te recomiendo tomar el Curso de Accesibilidad Web para que puedas profundizar más sobre este tema.

Qué puedes hacer con el feature de “mejora”

Al realizar el análisis en la versión de escritorio vemos cómo el performance sube mucho. Esto se debe a que una computadora puede tener mucho más poder de cómputo que un dispositivo móvil, como en este caso. Si aplicaste muchos estilos y elementos personales es probable que la parte de performance esté más baja.

Te recomiendo tomar el Curso de Optimización Web de cualquier manera para construir páginas web que vayan a la velocidad de la luz.

Toma en cuenta las recomendaciones que hace Lighthouse ya que es una forma de mejorar tu página en estos sentidos y lograr que sea mucho más fácil y cómoda de usar para la mayoría de usuarios posibles. ¡Haz de esta herramienta un superpoder para mejorar tus proyectos!

Contribución creada por: José Miguel Veintimilla (Platzi Contributor).