Cómo utilizar Google Lighthouse para mejorar la velocidad de tu web

Según Google, tu tasa de rebote puede aumentar un 123 % si la velocidad de carga de tu página pasa de 1 a 10 segundos. 

Por suerte, el gigante tecnológico ofrece desde entonces un conjunto de valiosas herramientas para ayudarte a mejorar la velocidad de carga de tu página y la experiencia general del usuario. Una de estas herramientas es Google Lighthouse. 

¿Qué es Google Lighthouse?

Google Lighthouse es una herramienta gratuita diseñada para ayudar a mejorar el rendimiento de una web. Es un software de código abierto, por lo que cualquiera puede utilizarlo en cualquier página.

La herramienta audita la accesibilidad y el SEO de tu página, con especial atención a los aspectos vitales de la web.

¿Qué son Core Web Vitals?

Core Web Vitals son un conjunto de métricas desarrolladas por Google para medir la velocidad de las páginas y la experiencia general del usuario. En 2021, Google introdujo la actualización del algoritmo Core Web Vitals que mide las métricas Core Web Vitals de una web. 

Estas métricas son cada vez más importantes para los propietarios de las webs que desean ofrecer una buena experiencia de usuario y posicionarse mejor en Google. 

Las tres principales Core Web Vitals son:

1. Largest Contentful Paint (LCP): cuánto tarda en cargarse el contenido más grande por encima del pliegue. Aprende más sobre LCP con nuestra guía completa.
2. First Input Delay (FID): el tiempo que tarda una página en responder tras la primera interacción del usuario. Consulta nuestra guía sobre el FID.
3. Cumulative Layout Shift (CLS): la cantidad de contenido que se desplaza al cargar la página.

Lectura recomendada: Core Web Vitals: Guía para mejorar la velocidad de las páginas

Qué puedes comprobar con Google Lighthouse

Puedes medir tu Core Web Vitals utilizando Google Lighthouse. La herramienta audita tu web basándose en el dispositivo y la conexión de medios que tiene un usuario. Sin embargo, puedes especificar el dispositivo y la relación que quieres que la herramienta emule para tus pruebas. Los resultados de estas pruebas te ayudarán a saber qué etapas de la carga de la página necesitas optimizar para ofrecer una buena experiencia al usuario 

Cómo utilizar Google Lighthouse

Puedes utilizar Google Lighthouse con el navegador Chrome (en las Devtools) o como una extensión de Chrome. 

Tras realizar la auditoría de tu página, Lighthouse generará un informe sobre 5 áreas diferentes:

1. Rendimiento incluye los elementos que ralentizan tu página, incluidas las imágenes y los recursos.
2. Accesibilidad audita el grado de accesibilidad de tus contenidos para los usuarios, incluido el uso de tecnología de asistencia. 
3. Mejores prácticas identifica cualquier elemento de desarrollo web que no siga las directrices y mejores prácticas actuales.
4. SEO destaca los aspectos más esenciales de SEO de la página, pero no es exhaustivo.
5. Progressive Web App indica el rendimiento de tu aplicación web y los problemas de implementación.

Cómo utilizar Lighthouse en Chrome Devtools

En tu navegador Chrome, puedes realizar una auditoría de Google Lighthouse desde Chrome Devtools. 

Para acceder a ella debes:

1. Descarga e instálate Google Chrome para escritorio (si aún no lo tienes).
2. Visita la página que quieres auditar en Google Chrome.
3. Haz clic con el botón derecho del ratón en cualquier parte de la página y selecciona Inspeccionar.
4. La función Inspeccionar abrirá un panel en la parte inferior o a la derecha de la página. Selecciona Lighthouse en la barra de herramientas del panel. (Si no encuentras la opción Lighthouse, haz clic en las dos flechas situadas al final de la barra de herramientas).
5. El panel se abrirá en la herramienta Lighthouse. Selecciona Generar informe.

Para acceder a Lighthouse con Chrome Devtools, sigue estos 3 pasos:

1. Abre el navegador Chrome y, después, abre el menú seleccionando los tres puntos verticales situados a la derecha de la barra de direcciones. 
2. Selecciona Más herramientas.
3. Selecciona Herramientas para desarrolladores.

Cómo utilizar Lighthouse como extensión de Chrome 

1. Descargar Google Chrome para escritorio.
2. Visita Chrome Webstore.
3. Descargua e instálate la extensión Lighthouse para Chrome.
4. Reinicia tu navegador.
5. Haz clic en el símbolo del faro de la barra de direcciones.
6. Selecciona Generar informe.

¿Cuál es la diferencia entre Lighthouse y PageSpeed Insights?

Además de Lighthouse, Google también ofrece otra herramienta de auditoría, la herramienta PageSpeed Insights. Esta herramienta puntúa la velocidad de tu página y proporciona una lista de mejoras. 

Ambas herramientas auditan aspectos similares de tu página, incluyendo la velocidad de la página y Core Web Vitals. Sin embargo, Page Speed Insights solo se centra en mejorar la velocidad de tu página, mientras que Lighthouse cubre múltiples aspectos de la misma. 

Es bueno utilizar ambas herramientas para mejorar la velocidad de tu página y las métricas de Core Web Vitals. 

Cómo utilizar PageSpeed Insights

Para utilizar PageSpeed Insights, es necesario:

1. Visita PageSpeed Insights.
2. Copia y pega la URL de tu página.
3. Haz clic en Analizar.

Otras formas de mejorar tu web

A la hora de realizar un seguimiento de tus Core Web Vitals, cuanta más información tengas, mejor. Siempre puedes combinar los datos que recopiles de Lighthouse, Page Speed Insights y otras herramientas de Google con aplicaciones de auditoría de terceros.

La herramienta Auditoría del sitio audita el SEO técnico de tu web, incluida la velocidad y el rendimiento. El informe temático Core Web Vitals muestra datos de Lighthouse en un formato fácil de leer que incluye una lista de las páginas analizadas. Puedes editar la lista directamente para añadir o eliminar páginas para una nueva puntuación. 

Para obtener una visión general del rendimiento de tu web, selecciona el informe temático Rendimiento del sitio en el informe general Auditoría del sitio:

Este informe temático proporciona una puntuación global del rendimiento del sitio, así como la velocidad media de carga de la página:

Puedes utilizar la tabla de problemas de rendimiento para revisar cualquier problema que esté afectando al rendimiento de tu web. Selecciona Más información para leer más sobre cada problema y cómo solucionarlo.

Para empezar a utilizar la herramienta Auditoría del sitio:

1. Accede a tu cuenta de Semrush. Si no tienes una cuenta, puedes crear una cuenta gratuita.
2. En la barra de herramientas, selecciona Proyectos en Gestión para ver tu(s) proyecto(s):
3. Haz clic en tu proyecto preferido y, a continuación, selecciona Auditoría del sitio en el panel del proyecto.
4. La herramienta te pedirá que configures los parámetros de la auditoría. Podrás establecer el alcance de rastreo de la auditoría, no permitir URL y añadir información adicional de acceso a la web.
5. Selecciona Iniciar auditoría del sitio.

Lectura recomendada: 2021 Core Web Vitals Update: evaluación del impacto inicial

Resumen

La velocidad de la página es tan importante para Google como para los usuarios. Una velocidad de carga de página deficiente puede afectar a la tasa de rebote y, en cierta medida, al posicionamiento orgánico.

Google Lighthouse te ayuda a auditar páginas e identificar áreas específicas para mejorar la velocidad de carga de tu página y la experiencia general del usuario. Combina Lighthouse con otras Devtools de Google o aplicaciones de auditoría de sitios similares para obtener una revisión exhaustiva del rendimiento de tu web.