Qué es Lighthouse de Google Chrome

 ¿Cómo utilizar la herramienta Lighthouse de Google Chrome para mejorar el SEO de nuestra web.

Google Chrome tiene integrada una herramienta de auditoría web que podemos utilizar durante nuestras tareas de desarrollo. Esta herramienta se llama Lighthouse. También podemos encontrarlo como una extensión.

No es una herramienta de análisis SEO propiamente dicha, pero realiza una auditoría general de la web evaluando muchos de los factores que influirán en el posicionamiento SEO, entre ellos, la accesibilidad, la velocidad de carga o el responsive.

Podemos encontrar Lighthouse en 2 versiones:

  Extensión de Google Chrome
  Integrado en Google Chrome (Consola de depuración F12)

Lighthouse como extensión en Google Chrome

La extensión de Lighthouse de Google Chrome ofrece los informes en formato web. Antes tenemos que ir a la Google Web Store para instalar la extensión.

Lighthouse8

Lighthouse9

¿Dónde está Lighthouse en Google Chrome?

Desde Google Chrome pulsamos F12 y abrimos la consola de depuración. A la derecha podemos ver una pestaña en la que pone Audit. En esta pestaña tenemos Lighthouse, que nos permite realizar una auditoría o análisis de la web de forma rápida y clara. La auditoría se centra en 5 puntos, podemos verlo en la siguiente imagen:

Lighthouse1

El resultado de la auditoría se muestra en los puntos comentados anteriormente. De un vistazo nos hacemos una idea del estado de nuestra web.

Lighthouse2

Ya hemos comentado en otros post que entendemos el desarrollo Web y el SEO como dos procesos que se deben realizar en paralelo. Cualquier herramienta de análisis SEO trabaja sobre en el HTML renderizado en el navegador.

En AM defendemos que el consultor SEO debe ser ante todo un experto en tecnologías web: HTML5, CSS3, jQuery, Bootstrap. Debe conocer los procesos de carga de las *.css y los *.js sobre el navegador, debe dominar cualquier aspecto responsive, como por ejemplo las imágenes o el tamaño de la letra.

Lighthouse: Performance

¿Cuánto tiempo tarda una web en mostrar su contenido en el navegador?

Evaluando los resultados del Lighthouse podemos hacernos una idea de la velocidad real de carga de nuestra web. Se nos mostrarán una serie de recomendaciones para mejorar los tiempos de renderizado. Algunos puntos de observación que tendremos que tener en cuenta:

 Tiempo de carga de los archivos *.js y *.css
 Tamaño de los *.jpg/*.png, código de las *.css que no utilizamos...
 Archivos relacionados con la tipografía: *.woff

Lighthouse3

Lighthouse4

Lighthouse5

Lighthouse: Progressive Web App

Existen una serie de estándares que debe cumplir una web progresiva. Nos informará del tamaño del viewport que nos recomienda, de la falta de la meta tag “theme-color”… Y mucho más.

Lighthouse: Accessibility

Obtendremos un informe sobre recomendaciones para hacer que nuestra web sea accesible para personas discapacitadas e incluso invidentes. Es un punto interesante a tener en cuenta que se descuida en la mayoría de las webs.

Existen lectores de código HTML5 destinados a facilitar el acceso a la web a personas invidentes. Determinados softwares como NVDA están desarrollados para este propósito.

 Lighthouse nos puede lanzar una serie de recomendaciones de accesibilidad como las siguientes:

Lighthouse6

Lighthouse: Best Practices

Una de las prácticas más frecuentes que nos va a recomendar Chrome Lighthouse es el uso de https en lugar de http. En el caso de tecnologías web de la plataforma .NET tendríamos que configurar el certificado SSL del IIS.

Lighthouse: SEO

Lighthouse analiza nuestro HTML comprobar que existen las meta tag imprescindibles para el posicionamiento SEO. También comprobará que el archivo robots.txt es válido. Es un punto de partida estupendo para adentrarnos en una estrategia SEO efectiva.

Lighthouse7

Miguel

Ingeniero en Informática | Arquitecto .NET

Experto en Desarrollo Web y consultoría SEO.

  miguel@amgrafic.com
  91 527 86 97

Sigue aprendiendo con nuestro Blog de SEO

Diccionario SEO

Diccionario SEO

Diccionario SEO con todos los términos necesarios para optimizar y posicionar tu web.

Como elegir agencia SEO

Cómo elegir agencia SEO

Elegir una agencia SEO es muy importante para el éxito de tu proyecto. Te lo contamos en este artículo.

Scrum y SEO

Evitar el SEO barato y porqué no funciona

El SEO barato no funciona y no va a funcionar.