¿Qué vas a leer?
Cómo utilizar Google Lighthouse para verificar los Core Web Vitals
Lighthouse es una herramienta de código abierto proporcionada por Google que audita cualquier página web en cuanto a rendimiento, accesibilidad, aplicaciones web progresivas, SEO y más.
Hay varias formas en las que puede ejecutar un informe de Lighthouse de la siguiente manera:
- Extensión de Chrome Lighthouse: Una extensión simple de Chrome para iniciar informes y ver resultados en una página web que se navega en Chrome.
- Interfaz de usuario web de PageSpeed Insights: Ejecute un informe desde las herramientas de desarrollo de la interfaz de usuario web de Google.
- Herramientas para desarrolladores de Chrome: Proporciona las mismas opciones de informes y resultados que la extensión de Chrome, pero dentro de las herramientas para desarrolladores de Chrome.
- Command line: Opción avanzada para automatizar informes a través de scripts de shell.
- Node module: Opción avanzada para integrar en métodos de desarrollo.
Cubriremos la extensión Lighthouse Chrome por simplicidad. Las otras opciones son opciones más avanzadas que usamos en nuestro ciclo de vida de desarrollo al crear sitios web.
La extensión Lighthouse Chrome nos proporciona una extensión simple para la generación de informes con un solo clic.
Instalar la extensión Chrome Lighthouse
Abre tu navegador Chrome e instala Lighthouse desde Web Store utilizando este enlace directo.
Lighthouse debería aparecer en la barra de extensiones en la esquina superior derecha.
Extensiones del navegador Chrome – Icono de Lighthouse
Si no ves el icono de extensión de Lighthouse, haz clic en el icono de extensiones en esta barra y luego clic en el icono de alfiler para anclar la extensión de Lighthouse a la barra de extensiones.
Ejecución de un informe Lighthouse
Debes ir a tu sitio web o al sitio web para el que deseas generar un informe.
Haz clic en el ícono de extensión ‘Lighthouse’ en la barra de extensiones, debería aparecer la siguiente ventana emergente.
La ejecución del análisis se hace por defecto para dispositivos móviles, pero puedes cambiar de dispositivo desde el engranaje en la parte superior derecha, y simplemente seleccionar la opción de escritorio:
Haz clic en el icono de engranaje, arriba a la derecha dentro de la ventana emergente para seleccionar estas opciones.
Breve resumen de las categorías
- Rendimiento. En resumen, esto analizará el rendimiento de la velocidad de carga detsu página. Se tiene en cuenta una serie de factores para producir la puntuación de rendimiento.
- Accesibilidad. Qué tan accesible es tu página web, la práctica inclusiva del diseño para incluir a todos los usuarios sin barreras. ¿Todos los usuarios pueden acceder a su sitio de manera efectiva?
- Mejores prácticas. Una auditoría de las mejores prácticas aplicadas en el desarrollo de una página web, tecnologías obsoletas, seguridad, UX (User Experience)…
- SEO. En la página de optimización de motores de búsqueda. ¿Pueden los motores de búsqueda entender el contenido de su página? ¿Tu página es compatible con dispositivos móviles?
- PWA. Comprueba los requisitos de la aplicación web progresiva (PWA). Capaz, confiable e instalable. Solo aplicable a aquellos que construyen un PWA específico.
Selecciona todas las categorías que no sean PWA (a menos que estés probando su PWA, por supuesto), luego selecciona el dispositivo desde el que desea probar, Móvil o Escritorio.
Haga clic en GENERAR INFORME. Se abrirá una nueva ventana y comenzará a analizar su página. Cuando se complete, el informe se mostrará en la página.
Si tiene un sitio web de excelente rendimiento, entonces los resultados deberían ser similares a esto…
Lectura breve de los resultados
Cómo se codifican las puntuaciones por colores
Las puntuaciones de las métricas y la puntuación de rendimiento están coloreadas según estos rangos:
- 0 a 49 (rojo): Pobre
- 50 a 89 (naranja): necesita mejorar
- 90 a 100 (verde): Bueno
Para proporcionar una buena experiencia de usuario, los sitios deben esforzarse por tener una buena puntuación (90-100). Una puntuación «perfecta» de 100 es extremadamente difícil de lograr y no esperada. Por ejemplo, tomar una puntuación de 99 a 100 necesita aproximadamente la misma cantidad de mejora métrica que tomaría de 90 a 94.
Revisa los resultados de cada categoría y específicamente los detalles de cualquier oportunidad, ya que esto le brindará orientación y detalles sobre cómo mejorar sus resultados.
Google clasifica su sitio web en términos de rendimiento, accesibilidad, mejores prácticas y SEO. Es esencial que tu sitio web tenga resultados verdes y, al menos, amarillos para clasificarse orgánicamente en Google de la mejor manera posible. La velocidad y el rendimiento son vitales para que los clientes permanezcan en tu sitio y ahora es una parte fundamental del algoritmo de Google desde junio de 2021.
Al ejecutar un informe, los resultados son para la página específica en la que se ejecutó, no para todo el sitio web. Deberá generar un informe por página para analizar partes de su sitio web.
Si tienes muchos videos, imágenes no optimizadas o muchos complementos, esto puede afectar en gran medida tu puntaje.
Creo que te sorprenderás al saber que hay muchos sitios web que no funcionan al máximo de su capacidad. Realiza un informe Lighthouse y verás tus resultados, si no estás satisfecho con ellos, deberás contactar con un profesional para que te ayude a mejorar tus métricas.
Descargo de responsabilidad: la temática de Google Lighthouse puede ser un tema complicado. Este artículo ni siquiera rozará la superficie de ellos. De hecho, ni siquiera lo intentará.
