Lighthouse y SEO
Vamos a profundizar un poco en una de las herramientas que más peso ha acumulado en los últimos tiempos: Lighthouse. El faro de Google se ha colado en el día a día de casi cualquier profesional del marketing digital preocupado por atender y monitorizar la salud de su sitio web a los ojos del gigante de Mountain View. En concreto, para los SEO se ha convertido en un indicador prácticamente imprescindible a la hora de optimizar lo que se conoce en el mundillo como WPO (Web Performance Optimization).
«¿Y qué opinas del faro? ¿De verdad piensas que allí hay un grupo de científicos locos,… «(Shutter Island, 2010. Martin Scorsese)
¿Qué es Lighthouse para Chrome?
Definición: Es una herramienta del ecosistema Google integrada en el navegador Chrome que audita de forma online cualquier página de un site ofreciendo métricas de optimización por áreas (Performance, Accesibilidad, SEO) y dando indicaciones para seguir las mejores prácticas web de cara a aumentar la satisfacción del usuario. Todo ello mostrado en un informe online que puede obtenerse en apenas unos segundos tras activar la herramienta.
¿Cómo se activa e instala Lighthouse en Chrome?
Digamos que Lighthouse ya está integrado en Chrome. Solo hace falta saber dónde encontrarlo. Para ello debemos ubicarnos en cualquier página de la web que queramos auditar y seleccionar con nuestro ratón o touch pad la opción de inspeccionar elemento. Se nos abrirá la ventana de código y elementos. En el menú horizontal aparecerán varias secciones (Elements, Console, Sources, etc.) y tendremos que pulsar en Audits. Es aquí donde se integra Lighthouse y donde se nos mostraran algunas opciones de configuración de la herramienta para precisar en la auditoría que estamos a punto de realizar.
♦♦♦ ¡Ojo! Como prácticamente todas las herramientas de auditoría WPO, los resultados son para una url específica y no para toda la web. Es un error muy típico pasar la herramienta por la Homepage y sacar conclusiones generales para todo el site. Desde el punto de vista de una auditoría nuestro consejo es auditar por tipología de páginas (Home, contacto, categoría, producto, post, etc.) o bien auditar algunas páginas en concreto que nos interesen por estrategia. Por supuesto que habrá optimizaciones o puntos de mejora que apliquen a toda la web, pero debemos tener en cuenta que los resultados variarán de forma significativa dependiendo de la página que auditemos. ♦♦♦
Volviendo a la configuración de la herramienta. Podremos elegir las áreas a auditar, por si solo nos interesa saber algunas, también simular la velocidad de conexión y elegir el dispositivo (Móvil o escritorio). Una vez configurada a nuestro gusto pulsaremos en Run audits y la herramienta nos arrojará sus resultados reflejados en métricas por áreas.
No obstante, existe también un plugin Lighthouse para Chrome que podemos instalarlo como add-on del navegador y activarlo con solo pulsar en el icono del faro. Sin embargo, de esta forma no nos deja simular el dispositivo y siempre arrojará resultados para la versión móvil. Con ambas opciones podemos exportar el informe o imprimirlo. La opción de Add-on, además, te permite exportar la información en html y json.
Auditoría Lighhouse: Performance
Quizá este es el módulo o área que más importancia cobra desde el punto de vista SEO y digo esto teniendo en cuenta que hay un módulo específico que se llama SEO, pero la profundidad del mismo tiene escaso valor para un profesional, ya que este área basa sus métricas en ítems demasiado básicos. Un vistazo rápido por su check list SEO da buena cuenta de ello:
El módulo de Performance es ya de por sí es valioso, porque nos indica en qué parámetros Google se centra para valorar una web a nivel de velocidad de carga. Es lógico intuir, que esos ítems serán los que algoritmo de Google incorporé para posicionar una página dentro de sus resultados.
- FCP (First Contentful Paint): Posiblemente esta sea la métrica más importante. Mide el tiempo que tarda en aparecer algún elemento en la pantalla al usuario cuando hace la petición en su navegador y es cargado en el DOM. El usuario percibe que la página está cargando el contenido o imágenes, o “haciendo algo” y no aparece una pantalla en blanco que puede causar rebote.
- Speed Index: La velocidad o capacidad de indexación de esa url. Mide la capacidad que tendría el bot de Google en indexar el contenido en su índice dependiendo del código que tenga que cargar. A mayor cantidad de html y sencillez en los procesos de java y css mayor rapidez y facilidad de indexación.
- Time to Interactive: Métrica que mide el tiempo en que un usuario puede interactuar o realizar alguna acción en la web.
- First Meaningful Paint: métrica que mide el tiempo en el que el primer contenido significativo (es decir, contenido relacionado con la búsqueda del usuario) aparece en la web.
- Firs CPU Idle: Es una métrica que mide qué elementos de la web son interactivos. Muy relacionada con Time to Interactive, pero basada en los procesos que se pueden ejecutar cuando la web no muestra interacción para cargar procesos y responder inmediatamente a las acciones del usuario.
- Estimated Input Latency: mide el tiempo en que una web responde a la entrada o acción de un usuario y lo fija en 50 milisegundos. Todo basado en el método RAIL (Response, Animation, Idle y Load)
Una vez atendidas estas métricas y teniendo en cuenta que es casi imposible, además de innecesario, optimizar todo para que las puntuaciones se muestren en verde (los colores son los del semáforo), podemos pasar a la parte de Oportunidades y Diagnósticos. Aquí Lighthouse nos comenta detalladamente qué podemos optimizar para reducir los tiempos de carga de la web. Es un check list con una serie de bullets que ya encontrábamos en la herramienta Page Speed Insight o en otras externas a Google como GT Metrix o WebPageSpeed. Podemos resumir estas optimizaciones en:
- Optimización de imágenes: reducir el tamaño de las imágenes cargadas en la página y de posponer su carga
- Priorizar recursos: llamadas generalmente externas a recursos que se deben priorizar o postergar y que reducen el tiempo de carga.
- Carga asíncrona: cargar el código css y java (siempre que se pueda) después del código html.
- Minificar java y css: reducir el código de java y css al mínimo posible
- Definir Cache: definir un tiempo de caché para los recursos de la web y también activar la comprensión del caché
- Tiempo de respuesta del servidor: mejora la velocidad en las peticiones al servidor. El famoso Time to First Byte.
Auditoría Lighthouse: Accesibilidad
Llegamos ahora al área de Accesibilidad o lo que es lo mismo las métricas que se aplican para ponderar que una página cumple los requisitos mínimos para ser visibilizada, comprendida y utilizada por diferentes usuarios y por los lectores de pantalla para personas con accesibilidad limitada. Por eso aquí se miden campos como: contraste, textos alternativos en imágenes, títulos en las etiquetas, id de identificación, listas y tablas legibles por un lector de pantalla, tipo y tamaño de letra utilizado, contenido html estructurado, etc.
Mejores Prácticas según Lighthouse
Como muestra de la buena voluntad y filosofía de Google, Lithhouse también nos ofrece una serie de mejores prácticas para poder implementarlas, si es que aún no las tenemos, en nuestra web. Entre ellas está el uso del protocolo https o Http /2, no se solicita la geolocalización al cargar página, se usas bibiliotecas javascript,… Es casi imposible cumplir todas, así que tampoco merece la pena obsesionarse con esto. Este módulo se centra sobre todo en seguridad al procesar información y en no ser intrusivo de cara al usuario.
Auditoría Lighthouse: SEO
Como hemos visto, se basa en una check list muy básica de elementos SEO. No es muy útil porque deja fuera campos muy importantes y porque puestos de esa manera, solo te servirían para una hipotética comprobación SEO basada en check list que nosotros desaconsejamos por completo, ya que carece de estrategia y no pondera los factores relevantes para cada página en concreto. No obstante, sí te proporciona información valiosa si tienes algunos “errores groseros” desde un punto de vista SEO.
Auditoría Lighthouse: Progressive Web App
Si cuentas con un site con este tipo de tecnología, sin duda es una herramienta fundamental. Ahora mismo el uso de esta nueva generación de sites tiene una penetración en el mercado mínima, pero Google la está empujando, por lo que entendemos que pronto varias empresas van a desarrollar esta tipología de producto digital y que Lighthouse será una de las herramientas de referencia para validarlo y saber qué optimizar.
Conclusiones
Como hemos visto, Lighthouse es una estupenda herramienta para realizar auditorías. Como es del ecosistema Google hay que tenerla sí o sí en consideración, ya que cumplir con los estándares de Google es importante para posicionar tu web en el buscador y porque además te da pistas de lo que Google considera más o menos importante. Entendemos que la herramienta está en desarrollo constante e irá incluyendo nuevos indicadores al tiempo que la tecnología va cambiando. A nivel de SEO on-page es aún bastante básica, aunque puede servirnos para comprobar los errores de bulto; pero donde es realmente fina y valiosa es para la auditoría WPO y accesibilidad. Sin duda debe ser una tool que incluyas entre tus habituales, ya sea para optimización, estrategia o saber cómo anda de salud tu web.
¡Espero que te haya sido útil este análisis de Lighthouse! Si crees que puedes aportar algo o tienes alguna duda no dudes en escribir un comentario.
