¿Qué es Google Lighthouse?

Todos aquellos que estéis buscando una buena herramienta gratuita para realizar una auditoría de Web App deberíais echar un vistazo a Google Lighthouse. Si acabas de aterrizar o eres profesional independiente en el mundo SEO, seguro que agradecerás poder contar con herramientas eficaces gratuitas para realizar auditorías web y, más específicamente, auditorías SEO. En este artículo te explicamos cómo instalar y empezar a utilizar esta interesante herramienta automatizada de código abierto de Google.

Cómo obtener Lighthouse

Te vamos a mostrar cómo puedes obtener Google Lighthouse por dos vías diferentes. Verás que ambas resultan realmente sencillas, así que ya está en tu criterio elegir cuál de las dos te resulta más cómoda de usar.

Opción 1: Extensión de Google Chrome

Como bien sabrás, el navegador Google Chrome te permite añadir nuevas funcionalidades mediante la instalación de pequeños programas o extensiones. Bien, pues Lighthouse es una más de las múltiples extensiones que puedes instalar en tu navegador para personalizarlo y dotarlo de útiles herramientas de trabajo. A continuación, te mostramos paso a paso cómo puedes instalar la extensión Google Lighthouse de forma sencilla en el navegador Google Chrome.

En primer lugar, debes acceder a la tienda de Google Chrome, la Chrome Web Store, y realizar la búsqueda de Lighthouse.

Puedes introducir el nombre de la extensión en el campo de búsqueda ubicado en la parte superior izquierda de la página.

De esta forma encontrarás fácilmente la extensión que estás buscando, en el listado con el resultado de la búsqueda.

A continuación, una vez localizada esta herramienta para desarrolladores, sólo queda añadirla a Chrome pulsando en el botón que se muestra a tal efecto. Aparecerá una ventanita en la que te preguntan si quieres instalar la extensión, así como información relacionada con los permisos del programa. Obviamente, si quieres instalar Lighthouse, tendrás que pulsar el botón «Añadir extensión».

¡Ya tienes Google Lighthouse instalado en tu navegador! Verás que se muestra un icono de un faro, con fondo azul, en la barra de extensiones de Google Chrome ubicada en la parte superior derecha del navegador.

Ahora ya puedes empezar a utilizar Lighthouse y beneficiarte de forma gratuita de sus funciones de auditoría web. Sólo tienes que ir al sitio web que quieras auditar y, una vez dentro, hacer clic en el icono de la extensión (el del faro) para que la herramienta se ejecute. En la ventana que se mostrará haces clic en «Generate report» y de esta forma Lighthouse realizará una auditoría del sitio web que te interesa analizar y generará un informe con los resultados.

Opción 2: Consola de Google Chrome

En este caso, en primer lugar debes acceder a la Consola de Google Chrome.

Para acceder a la Consola de forma rápida y sencilla presiona Ctrl + Shift + J en Windows o Linux, o Cmd + Opt + J en Mac.

Una vez se muestre la Consola de Google Chrome debes hacer clic en la pestaña «Audits» (auditorías) de la consola.

Dentro de este apartado de auditorías es donde encontrarás disponible la herramienta Lighthouse para su ejecución en el sitio web que desees analizar.

Sólo te quedaría pulsar en el botón «Perform and audit…», marcar las casillas de verificación de aquellas auditorías que quieres que se lleven a cabo y, finalmente, pulsar en el botón «Run audit».

Análisis de los resultados

La parte superior del informe muestra la puntuación del sitio web analizado en cada una de las cinco categorías que considera Google Lighthouse, donde 100 es la puntuación más elevada. Lighthouse mide el rendimiento del sitio web utilizando cinco categorías: Performance (rendimiento), Progressive Web App (aplicación web progresiva), Accessibility (accesibilidad), Best Practices (mejores prácticas) y SEO.

Vamos a echar un vistazo muy por encima a cada una de estas categorías para que te hagas una idea de lo que puede ofrecerte Lighthouse.

Performance

Un primer apartado dentro de esta categoría, denominado «Metrics», nos ofrece los resultados obtenidos en varias métricas para el sitio web analizado, como:

• First Contentful Paint
• First Meaningful Paint
• Speed Index
• First CPU Idle
• Time to interactive
• Estimated Input Latency

En el apartado «Opportunities», Lighthouse muestra las oportunidades que ha detectado en forma de recursos que pueden optimizarse para acelerar el sitio web. Concretamente, encontrarás un listado de recursos optimizables y el tiempo estimado de carga del sitio web que puedes ahorrar al hacerlo. Estos son sólo algunos ejemplos de las sugerencias sobre recursos a optimizar que puedes encontrar:

• Cargar imágenes en formatos de próxima generación como JPEG 2000 o JPEG XR, que proporcionan una mejor compresión que JPEG o PNG.
• Considerar la carga lenta («lazy-loading») de imágenes fuera de pantalla.
• Minificar los archivos JavaScript para intentar reducir el tamaño de la carga útil y el tiempo de análisis de secuencia de comandos.

Un tercer apartado denominado «Diagnostics» aporta más información acerca del rendimiento del sitio web con sugerencias relacionadas con la carga del texto, el tamaño del DOM o el tiempo de inicio de JavaScript, entre otros.

Finalmente, el apartado «Passed audits» te muestras aquellas auditorías aprobadas por Lighthouse acerca del sitio web analizado.

Progressive Web App

En esta categoría se muestran los resultados arrojados en los distintos aspectos de una aplicación web progresiva contenidos en la lista de verificación PWA de referencia de Google. Entre estos aspectos encontramos el tiempo de carga de la página web con 3G o la personalización de la barra del navegador para que el color coincida con el del sitio web o de la marca corporativa, por ejemplo.

En el apartado «Additional items to manually check» Lighthouse muestra comprobaciones que son importantes pero que deben realizarse manualmente porque Lighthouse no las lleva a cabo de forma automática.

Cómo utilizar la herramienta gratuita Google #Lighthouse para #auditoría web. #SEO #optimización Clic para tuitear

Finalmente, también nos encontramos con un apartado de «Passed audits», es decir, todo aquello que el programa ha detectado que está correcto en el sitio web analizado en relación con la categoría en la que nos encontramos. Este apartado es común en todas las categorías de la auditoría de Web App realizada por el programa.

Accesibility

Los controles que se muestran en esta categoría tienen que ver con la accesibilidad de la aplicación web, como la estructura del HTML o el uso de las Meta Tags. En este caso, Lighthouse también recomienda realizar comprobaciones manuales para algunos ítems.

Best Practices

Las mejores prácticas tienen que ver con el análisis del uso de HTTP/2 o HTTP/1.1, de bibliotecas JavaScript front-end con vulnerabilidades de seguridad conocidas, o las dimensiones de visualización de las imágenes.

SEO

Llegamos a la quinta categoría de datos analizada, que muestra las comprobaciones realizadas sobre la optimización de la página web en referencia a la clasificación de los resultados del motor de búsqueda.

Conclusiones

Con el detallado informe de resultados de la auditoría realizada por el programa podrás conocer qué aspectos del sitio web analizado funcionan correctamente, así como cuáles no benefician al rendimiento del mismo y son optimizables. Si modificas y actualizas el sitio web en base a las sugerencias de optimización que muestra Lighthouse, conseguirás una mayor velocidad, más tráfico y retención de visitantes.

En definitiva, se trata de una buena y sencilla herramienta (no olvidemos que es gratuita) que te puede proporcionar información muy útil para optimizar un sitio web.