¿Qué es Google Lighthouse y cómo se usa?

Lighthouse es una herramienta de Google de código abierto que analiza el rendimiento de las páginas web. Si bien su enfoque son las aplicaciones web y los sitios móviles, aún brinda mucha información útil y recomendaciones que pueden mejorar cualquier sitio web.

Cuando optimiza un sitio web pensando en los dispositivos móviles, casi siempre también está mejorando su rendimiento general en un navegador web de escritorio. Y la optimización móvil puede beneficiar a todos los desarrolladores de sitios web.

Optimización de sitios web y Google

Si bien el enfoque principal de Google siempre ha sido la búsqueda, durante muchos años también ha estado creando herramientas para ayudar a los propietarios de sitios web a aumentar el rendimiento y la indexabilidad de sus sitios.

Es posible que haya utilizado su aplicación de prueba compatible con dispositivos móviles o Test My Site . O mi favorita de las herramientas SEO de Google, la herramienta de prueba de datos estructurados .

Si no has aprovechado ninguno de esos recursos, hazte un favor y échales un vistazo. Pero prepárate para que te presenten muchas recomendaciones de mejora.

La cantidad de información que puede obtener de las herramientas puede ser abrumadora. Pero si aborda un problema a la vez, eventualmente escalará la montaña de rendimiento del sitio web.

Cada vez que cargo una herramienta de desarrollo de Google, termino pasando una hora (o dos o tres) haciendo cambios en el sitio web. Puede que no quiera dedicar ese tiempo a cosas que la mayoría de los visitantes de mi sitio nunca verán, pero siempre me siento mejor sabiendo que el rendimiento de mi sitio ha mejorado.

Y ayuda saber que estoy obteniendo una ventaja competitiva sobre los sitios que no funcionan para aumentar el rendimiento.

Otra herramienta que he mencionado en un artículo anterior es PageSpeed ​​Insights . Hoy nos vamos a centrar en la herramienta que impulsa PageSpeed ​​Insights: Lighthouse.

¿Qué es el faro de Google?

Lighthouse es una aplicación que ejecuta una serie de pruebas llamadas "auditoría". Esto analiza la información en una aplicación web o página de un sitio web. A continuación, crea un informe sobre el rendimiento de la aplicación o la página.

La auditoría consiste en cargar la página a través de una conexión 3G débil y simulada mientras se visualiza en un dispositivo lento. También simula la pérdida de paquetes o datos, la red y la aceleración de la CPU.

Básicamente, mira la página de la forma en que podría aparecerle a alguien en un teléfono antiguo con una conexión menos que increíble.

Eso podría parecer como apilar el mazo contra la página. Incluso la página más grande, más rápida y más optimizada del mundo sufriría en tales condiciones.

La idea es mejorar la velocidad. Y si puede mejorar la velocidad en condiciones que estresan la página, el rendimiento realmente mejorará en un dispositivo rápido conectado a una red rápida.

Al ver los resultados de una auditoría de página, los buenos resultados son una puntuación de 90 a 100. El promedio es 50-89, y pobre es 0-49. Según Google, cualquier puntaje superior a 90 lo ubica en el 5% superior de los sitios web que funcionan bien.

¿Qué prueba Lighthouse?

Actuación

La percepción de la velocidad es tan importante como la velocidad real. Por esa razón, el informe Lighthouse se enfoca en una serie de cosas relacionadas con mostrar contenido en la pantalla lo más rápido posible. También pone a prueba la capacidad de los usuarios para interactuar con el contenido.

La sección Rendimiento del informe incluye:

• First Contentful Paint es una medida de cuánto tiempo tarda el contenido de cualquier tipo en aparecer en la pantalla.
• Primera pintura significativa es el tiempo que tarda en aparecer en pantalla el primer contenido significativo . Cuanto menor sea la puntuación, más rápido aparecerá esa página.
• Speed ​​Index es una prueba de velocidad del sitio que muestra qué tan rápido se pueden ver los contenidos de una página. El índice se basa en un tiempo de carga inferior a 1,25 segundos.
• La primera inactividad de la CPU es el momento en que el dispositivo ya no funciona para representar la página.
• Time to Interactive mide cuándo una página es interactiva. Esto significa que la mayoría de los elementos de la interfaz de usuario son interactivos y la pantalla responde a las entradas del usuario.
• La latencia de entrada estimada mide el tiempo que tarda una página en responder a la entrada del usuario. Cuanto menor sea la latencia, más rápida se sentirá la página. El objetivo para la latencia de entrada es menos de 50 milisegundos.

Accesibilidad

La sección Accesibilidad del informe incluye controles para un encabezado de página. También incluye si los colores de fondo y de primer plano tienen suficiente contraste, una etiqueta de título del documento, nombres de enlaces y si la ventana gráfica es escalable por el visor.

La sección Accesibilidad de Lighthouse también proporciona una lista de "Elementos adicionales para verificar manualmente". Esto se debe a que no es posible automatizar una verificación de todos los puntos de referencia relevantes.

Mejores prácticas

La sección Mejores prácticas del informe verifica HTTPS, el caché de la aplicación y la seguridad de los enlaces de origen cruzado. También analiza las solicitudes de permiso de geolocalización, las bibliotecas de JavaScript vulnerables, las API en desuso y si los usuarios pueden pegar en los campos de contraseña. Otra cosa a considerar es cómo se muestran las imágenes con la relación de aspecto correcta.

SEO

Lighthouse proviene de Google, por lo que sabe que incluirá información y recomendaciones de SEO.

Sin embargo, es una prueba bastante básica. Busca etiquetas de página y códigos de estado, así que no confíes en Lighthouse como una herramienta estricta de SEO. Sin embargo, Google ha indicado que tiene la intención de ampliar las comprobaciones de SEO que realiza Lighthouse.

La sección Lighthouse SEO también proporciona una lista de "Elementos adicionales para verificar manualmente". En el momento de esta publicación, la verificación solo incluye un enlace a la Herramienta de prueba de datos estructurados .

Aplicación web progresiva

Cuando ejecuta una auditoría de Lighthouse en una página web normal, la mayoría de los resultados aquí no son aplicables.

Pero hay algunos controles útiles.

• Si la carga de la página es lo suficientemente rápida en las redes móviles.
• Una verificación de que el contenido tiene el tamaño correcto para la ventana gráfica.
• Si la página tiene una etiqueta meta name=”viewport” con ancho o escala inicial.
• Una verificación de contenido cuando JavaScript no está disponible.

usando el faro

Ahora que sabe lo que puede hacer, probablemente esté ansioso por probar Lighthouse.

Si usa el navegador Google Chrome, ya tiene acceso a Lighthouse (busque la pestaña Auditorías en DevTools). Si encuentra que Chrome DevTools es un poco un laberinto (¡porque lo son!), puede instalar la extensión Lighthouse Chrome .

Si no desea instalar el navegador Chrome, aún puede usar Lighthouse. Hay una versión de línea de comandos de Node si le gusta ese tipo de cosas o puede acceder a la mayoría de las herramientas de Lighthouse visitando el sitio de PageSpeed ​​Insights .

Mencioné que Lighthouse audita una página , es decir, una sola página a la vez. No rastrea un sitio ni audita varias páginas. Pero muchas partes del informe de Lighthouse se ocupan de problemas que probablemente afecten a todo el sitio. Esto incluye cosas como javascript de bloqueo de procesamiento.

Entonces, una auditoría de una sola página puede decirle mucho.

Pero si tiene secciones claramente diferentes en su sitio, como un blog o foro junto con páginas estáticas, debe probar cada una de las secciones individualmente. En esos casos, casi siempre habrá pasos de optimización que se apliquen a una parte del sitio pero no a otra.

Analizando una página

Realizar una auditoría de página con Lighthouse no podría ser más fácil.

Uso de la extensión de Chrome

• Instale la extensión Lighthouse Chrome .
• Cargue la página que desea auditar en el navegador Chrome.
• Haga clic en el icono de Lighthouse junto a la barra de direcciones de Chrome.
• Haga clic en el botón "Generar informe".

Lighthouse ejecutará sus auditorías y abrirá una nueva pestaña con el informe.

Abrir Lighthouse en Chrome DevTools

• Cargue la página que desea auditar en el navegador Chrome.
• Abra Chrome DevTools.
  • Windows: tecla F12 o Control+Shift+I
  • Mac: Comando+Opción+I
  • Desde el menú principal de Chrome: haga clic en "Personalizar y controlar Google Chrome" en la esquina superior derecha, luego seleccione Más herramientas > Herramientas para desarrolladores.
• Haga clic en la pestaña Auditorías.
• Haga clic en el botón "Ejecutar auditorías".

Lighthouse ejecutará sus auditorías y mostrará el informe en el panel o ventana DevTools.

Preocuparse por el rendimiento es una ventaja competitiva automática

Como ya se habrá dado cuenta, puede ejecutar Lighthouse en cualquier página de la web. Lo que significa que puede ir más allá de sus propias páginas.

No hace mucho, ejecuté Lighthouse en varios sitios de alto perfil pensando que podría aprender una o dos cosas de la forma en que los "grandes" hacen las cosas. En cambio, me sorprendió ver cuántas cosas están haciendo mal la mayoría de los grandes.

Los sitios de alto perfil tienen otras ventajas sobre el resto de nosotros. Y la mayoría de nosotros no estamos en competencia directa con ellos. Pero es divertido ver cómo su sitio o sitios se comparan con corporaciones multimillonarias.

También es valioso ver cómo se compara con los sitios que son competidores directos. Si puede hacer que su sitio funcione mejor que el de ellos, puede obtener una ventaja técnica.

Si no está vendiendo un producto o simplemente no es del tipo competitivo, es posible que no crea que existe competencia con otro sitio web. Pero los resultados de búsqueda de Google son una especie de competencia. Si desea que su sitio se encuentre en esos resultados, está compitiendo con miles de sitios similares para ser visto.

Utilice Lighthouse para mejorar el rendimiento

Cuando se preocupa por el rendimiento y trabaja activamente para mejorarlo, ya tiene una ventaja. Afortunadamente, Google nos brinda acceso a muchas herramientas que pueden hacer ese trabajo mucho más fácil.

Lighthouse es una de esas herramientas.

Si está dispuesto a dedicar el tiempo y el esfuerzo necesarios para seguir mejorando sus sitios web, el cielo es el límite.