Todos los mejores sitios se crean en torno al mismo objetivo principal, y no es obtener la mayor cantidad de conversiones o incluso vender la mayor cantidad de productos. Si bien son ciertamente importantes, ocupan el segundo lugar cuando se trata de garantizar el perfecto experiencia de usuario.
La experiencia del usuario (UX) se puede juzgar en función del rendimiento de su sitio web. Si sus sitios web son lentos, su UX será débil. De hecho, sus usuarios no tendrán casi ninguna experiencia; se cree ampliamente que el sitio web comienza a perder gente después de unos dos segundos cargando.
La buena noticia es que no necesita contratar a un consultor ni reinventar la rueda para evaluar la UX de su sitio web. Linterna de Google es una herramienta en línea que revisa su sitio web en busca de lo que cree que brinda la mejor experiencia. Y considerando que es Google, probablemente sea una buena idea escuchar.
En esta guía introductoria, aprenderá qué es Google Lighthouse, cómo funciona, cómo usarlo para probar su sitio web y qué esperar de un informe de Google Lighthouse.
¿Qué es Google Lantern?
Google Lighthouse, o simplemente Lighthouse, es una herramienta gratuita de evaluación de la calidad de un sitio web. Lighthouse se puede utilizar en cualquier página de acceso público en cualquier sitio web o aplicación web y califica la calidad en cinco categorías: rendimiento, accesibilidad, mejores prácticas, SEO y calificación como aplicación web progresiva. Estas categorías son parte de las métricas web centrales que Google rastrea para ayudar a los propietarios de sitios web a medir la usabilidad del sitio web. Para cada una de estas categorías, Lighthouse recomienda pasos que mejorarán la experiencia general del usuario en el sitio.
Si bien la optimización de sitios web puede ser un tema denso para los propietarios de sitios web novatos, Lighthouse es fácil de usar y brinda información valiosa tanto para los webmasters nuevos como para los experimentados. Simplemente ingrese a un sitio web y Lighthouse generará un informe automático en menos de un minuto con sugerencias y enlaces a artículos que explican cada problema en detalle.
Google Lighthouse se destaca de otras clasificaciones de sitios web populares al proporcionar una vista más completa y realista de la calidad general de la página. Tiene en cuenta no solo la velocidad de la página, sino también cuán accesible, indexable y bien construida para el usuario promedio de Internet. También es de código abierto, lo que significa que puede ser utilizado por otras aplicaciones web, incluido su propio HubSpot. Herramienta de clasificación de sitios web.
Cómo utilizar las balizas de Google
Para generar un informe en Google Lighthouse de forma gratuita, debe utilizar el navegador Google Chrome. Hay dos formas de usar Lighthouse en Chrome: dentro Herramientas para desarrolladores de Chrome o z Extensión de Google Lighthouse para Chrome.
Cómo usar Google Lighthouse en Chrome DevTools
La forma más rápida de verificar una página con Lighthouse es usar DevTools, el panel de desarrollo integrado de Chrome. Para usar Lighthouse a través de DevTools, siga estos pasos:
- Abra el sitio web que desea calificar.
- Luego abra el panel DevTools haciendo clic derecho en la página y seleccionando Controlar. También puede abrir DevTools seleccionando Ver> Desarrollador> Herramientas para desarrolladoreso presionando Comando + Opción + C en una Mac o Control + Shift + C en Windows.
- En el panel DevTools, seleccione Faro en el menú superior de la pestaña. Luego haga clic Generar un informe. De forma predeterminada, Lighthouse evaluará las cinco categorías simuladas en un dispositivo móvil. Puede alternar estos ajustes en Faro antes de generar el informe.
Después de unos segundos, Lighthouse generará un informe completo de su sitio web. A continuación se muestra una explicación de este informe.
Cómo usar la extensión Google Lighthouse en Chrome
Hay una extensión de Lighthouse para Chrome que funciona igual que su contraparte de DevTools. Para utilizar esta extensión, sigue estos sencillos pasos:
- Instale Google Lighthouse desde Chrome Web Store.
- Abra el menú de extensiones en la esquina superior derecha del navegador (marcado con un icono de rompecabezas). En este menú, seleccione Faroluego haga clic Generar un informe.
- Haga clic en el icono de engranaje para abrir el menú de configuración. Aquí es donde puede alternar la salida del informe según sea necesario.
La extensión abrirá una nueva pestaña del navegador y después de unos segundos mostrará su informe de calificación de Lighthouse.
Indicadores del faro de Google
Después de generar el informe, verá un conjunto de datos similar a este:
Estos son los cinco aspectos de su sitio web que Lighthouse evalúa:
- Actuación
- Disponibilidad
- Mejores prácticas
- SEO
- Aplicación web progresiva (PWA)
Lighthouse califica la calidad general de las primeras cuatro categorías en una escala de 0 a 100. Una puntuación de 0 a 49 (triángulo) es mala, de 50 a 89 (cuadrado) es media y de 90 a 100 (círculo) es la mejor.
Una nota sobre las puntuaciones de Google: tanto para Lighthouse como para PageSpeed Insights, una puntuación de 100/100 es muy difícil de lograr e imposible para muchos sitios. Así que no intentes obtener una puntuación perfecta en cada categoría; si obtienes una calificación verde, eres bueno.
Estos resultados por sí solos no serían muy útiles para nosotros, por lo que el informe Lighthouse desglosa cada resultado en información y sugerencias de mejora que puede realizar en sus páginas. Ahora analicemos cada uno de estos puntajes.
Actuación
La característica más poderosa de Lighthouse es la evaluación del rendimiento, una prueba de velocidad mejorada para su sitio web.
Medir la velocidad de carga de una página web puede parecer simple al principio, pero hay dos consideraciones clave a tener en cuenta al evaluar el rendimiento de su sitio web que muchos no toman en cuenta. En primer lugar, no puede suponer que todos los visitantes tienen la misma conexión a Internet o utilizan el mismo dispositivo que usted. Aproximadamente la mitad del tráfico mundial de Internet proviene de dispositivos móviles que se conectan a través de una conexión relativamente lenta, lo que tiene un gran impacto en los tiempos de carga.
En segundo lugar, realmente no puede sumar los tiempos de carga de la página en un valor. Varios indicadores pueden afectar la rapidez o la lentitud con la que un espectador «siente» una página, desde el tiempo que tarda un espectador en mostrar cualquier contenido hasta el tiempo que puede interactuar con la página.
La última versión de Google Lighthouse aborda estos dos problemas, (1) simulando la carga de la página en un dispositivo móvil y (2) creando un puntaje de eficiencia basado en seis métricas:
- La primera pintura completa es el tiempo necesario para renderizar completamente la primera imagen o fragmento de texto.
- Tiempo para la interactividad es el tiempo hasta que el sitio web se vuelve completamente interactivo. En otras palabras, responde a la mayoría de las interacciones y entradas del usuario en menos de 50 milisegundos.
- Tiempo total de bloqueo es el tiempo entre First Contentful Paint y Time to Interactive durante el cual los usuarios pueden ver pero no interactuar con el contenido.
- índice de velocidad es el tiempo que se tarda en cargar completamente las imágenes en la página.
- La mayor cantidad de pintura. es el tiempo necesario para renderizar completamente el elemento de imagen o texto más grande.
- Cambio total de diseño es el número total de desplazamientos de diseño inesperados que se producen en la página. Un cambio de diseño ocurre cuando un elemento se mueve inesperadamente de un lugar de la página a otro, lo que puede causar problemas de interacción si el usuario hace clic en el lugar equivocado en el momento equivocado:
Debajo MétricaListas de faros posibilidades y Diagnósticoque proporcionan sugerencias para aumentar el rendimiento general en una página específica. Estas sugerencias incluyen eliminar el bloqueo de procesamiento o el código no utilizado, minimizar el código, cambiar el tamaño de las imágenes y mejorar el almacenamiento en caché del contenido.
Google también proporciona un desglose más detallado cómo Lighthouse calcula tu puntuación.
Disponibilidad
Lighthouse luego le da a su sitio web una puntuación que resume la accesibilidad de su sitio web para personas con discapacidades y limitaciones físicas y cognitivas. La disponibilidad web es esencial porque todos los visitantes merecen el mismo acceso a la información pública en su sitio.
Lighthouse realiza varias auditorías de accesibilidad, incluida la verificación de código bien estructurado y etiquetas HTML semánticamente ricas, el uso de texto alternativo y Lugares de interés ARIAy el idioma específico de la página.
Si su puntuación de accesibilidad no es la ideal, consulte nuestra guía completa de accesibilidad web y nuestra lista de verificación de accesibilidad web para mejorar la usabilidad para todos.
Mejores prácticas
Lighthouse también realiza una breve auditoría de las mejores prácticas de desarrollo web generalmente aceptadas. La mayoría tiene que ver con la seguridad: usar HTTPS, enlaces salientes seguros y bibliotecas JavaScript y APIS actualizadas, pero también verifican otras prácticas, como especificar el tipo de un documento HTML y mostrar imágenes con la resolución correcta.
SEO
Como última categoría calificada, la puntuación de SEO evalúa en qué medida su sitio web cumple con las mejores prácticas de SEO. La mayoría de las pruebas en esta categoría verifican que su página esté indexada usando correctamente etiquetas y atributos HTML.
El Informe de SEO de Lighthouse es bastante simple, pero puede ayudarlo a posicionarse en la búsqueda rápidamente; consulte nuestra Guía definitiva de SEO en la página para solucionar cualquier prueba fallida en esta categoría.
aplicación web progresiva
La verificación final que realiza Lighthouse es probar si su sitio cumple con los estándares de lo que Google cree que es aplicación web progresivaque se puede acceder y utilizar fácilmente desde cualquier lugar y con cualquier dispositivo. Esta evaluación era el objetivo original de Lighthouse y sigue siendo un beneficio útil de la herramienta.
El Progressive Web App Test no da resultado, pero sí indica si has superado o no. Evalúa el rendimiento, el tiempo de respuesta y varias otras medidas para mejorar la experiencia del usuario de la aplicación.
¿Cuál es la diferencia entre Google Lighthouse y PageSpeed Insights?
Es posible que haya oído hablar de otra herramienta de evaluación del rendimiento del sitio web de Google, Estadísticas de PageSpeed. PageSpeed Insights es una de las pruebas de velocidad disponibles más populares: pegue la URL de su página y genere un informe con sugerencias de optimización del rendimiento para la navegación de escritorio y móvil.
La principal diferencia entre PageSpeed Insights y Lighthouse es que el primero evalúa el rendimiento de la página en sí, mientras que el segundo proporciona una imagen más completa de la calidad de la página. El informe de PageSpeed Insights y el informe de rendimiento de Lighthouse son bastante similares, la única diferencia significativa es que PageSpeed Insights combina resultados de pruebas simulados (es decir, «datos de laboratorio») y datos de rendimiento de visitantes reales, mientras que Lighthouse solo contiene datos de laboratorio. .
Sin embargo, no hay ninguna razón por la que estas herramientas no se puedan usar juntas. Genere un informe Lighthouse para obtener una imagen completa de la calidad de su sitio web y pruebe PageSpeed Insights si desea mejorar el rendimiento; ambos son recursos valiosos y gratuitos.
Eche un vistazo a sus sitios web
Gran parte de los análisis web actuales se basan en KPI relacionados con el tráfico, como el recuento de visitantes, las páginas vistas y la tasa de rebote. Es importante medirlos, pero solo pueden informarle sobre estos resultado buena o mala experiencia de usuario, no lo que da forma a su UX.
Aquí es donde entra Lighthouse: con este recurso, cualquier persona puede conectar su sitio web y obtener comentarios inmediatos, así como aprender a mejorar su sitio, deleitar a más visitantes y, en última instancia, ver más conversiones y crecimiento.
