Con la solución de supervisión de sitios web de Dotcom-Monitor, puede crear y configurar un dispositivo de supervisión de informes de faro (solución de supervisión de página web) para auditar el rendimiento, la optimización del motor de búsqueda (SEO) y otras métricas del sitio web automáticamente.

¿Qué es Google Lighthouse?

Google Lighthouse es una herramienta automatizada de código abierto para auditar la velocidad y el rendimiento del sitio web. Audita el tiempo de carga, la accesibilidad, el SEO de páginas web, las aplicaciones web progresivas y una lista ampliada de prácticas recomendadas. Lighthouse se incorporó a PageSpeed Insights (PSI) y los usuarios ahora pueden revisar los informes sobre los datos de rendimiento. Además, PageSpeed Insights utiliza una combinación de datos de laboratorio y del mundo real, mientras que Lighthouse solo utiliza datos de laboratorio para generar informes.

Las métricas de PageSpeed Insights ayudan a proporcionar información sobre la percepción de un usuario sobre la velocidad de la página web, que se ha convertido en un factor para las clasificaciones SEO. Sin embargo, por importante que sea apuntar a una gran puntuación de Lighthouse, que cubrimos más en este artículo a continuación, lo importante es lo que se hace con estas recomendaciones de Lighthouse para mejorar el rendimiento de la página web al disminuir los tiempos de carga de páginas web percibidos y reales.

Lighthouse simula la carga de una página web en un navegador real en condiciones reales (paquetes perdidos, mala conexión, etc.) y genera el informe con puntuaciones que reflejan las métricas de auditoría. Además, el informe contiene sugerencias sobre cómo mejorar la velocidad del sitio y las puntuaciones de rendimiento. Además de las pruebas aisladas, los informes de Lighthouse pueden ser extremadamente útiles en el desarrollo web para comparar los cambios en los resultados a lo largo de un tiempo.

Sin embargo, cuando se trata de pruebas periódicas del sitio web, ejecutar Lighthouse manualmente en cada caso de prueba no parece ser eficiente. En este artículo discutiremos la forma de ejecutar la auditoría automáticamente usando Dotcom-Monitor.

Cómo utilizar el informe Lighthouse de manera más eficaz

Cada vez que mejore el contenido de la página web para cumplir con los requisitos de SEO, es posible que tenga que realizar un seguimiento de los cambios en la puntuación SEO antes y después de mejoras. En el caso del SEO, una comprobación de una sola vez no será significativa. Todo lo contrario es cierto. Es necesario monitorear cómo las puntuaciones SEO cambian con el tiempo y de forma regular.

Supongamos que desea tener información sobre el impacto de las actualizaciones de páginas web en relación con las métricas de rendimiento, sin tener que extraer los informes manualmente en cada versión. Además, a veces la optimización de la funcionalidad del sitio web puede afectar a una métrica de rendimiento determinada. Por ejemplo, si está trabajando en acortar la cantidad de tiempo que se tarda en cargar contenido en una página web, debe centrarse en los cambios en las puntuaciones Primera pintura con contenido o Primera pintura significativa y asegurarse de que la puntuación no se reduce. Discutiremos estas métricas con más detalle en este artículo.

 

Configuración de un informe de faro con Dotcom-Monitor

Dotcom-Monitor puede generar un informe Lighthouse con la frecuencia especificada para supervisar los cambios en una métrica de página web específica. La característica clave de la solución es supervisar una métrica de auditoría específica. Puede seleccionar una métrica y establecer un umbral de error para recibir notificaciones de alerta cuando una puntuación supervisada está fuera del intervalo aceptable. Además, puede configurar alertas sobre los errores que se produjeron al ejecutar Lighthouse, especificar un programador de auditoría y configurar informes programados sobre los resultados de supervisión.

Una vez configurado el dispositivo de supervisión, puede extraer informes de Lighthouse del informe en líneadotcom -Monitor .

Configuración de una auditoría de informes de faros

Url

Introduzca la dirección URL que desea auditar con Lighthouse. La dirección URL debe formarse exactamente como lo usaría en un navegador, como http://www.example.com. Debe incluir el http:// o https:// al principio de la dirección. En este momento, también puede incluir cualquier parámetro GET al final de su URL.

Métricas del informe lighthouse

Dotcom-Monitor permite supervisar y alertas para una métrica de auditoría de página web determinada. El sistema supervisará las puntuaciones de métricas seleccionadas en el informe Lighthouse. Si se especifica el Umbral de error para la puntuación de métrica y se selecciona la opción Errores de alerta en faro, el dispositivo se considerará como un error en las instancias en las que la puntuación de interés está más allá del intervalo permitido. Para recibir notificaciones de alertas, configure alertas para el dispositivo en la pestaña Alertas de la pantalla de edición del dispositivo.

Además, puede configurar informes programados que agregarán los resultados de la supervisión de métricas seleccionada en función de las estadísticas diarias, semanales o mensuales. Elija una métrica de auditoría de las siguientes métricas de Lighthouse para recibir alertas e informes. El informe Rendimiento incluye varias métricas y analizaremos cada una de estas métricas a continuación.

Puntuación general de rendimiento

La puntuación general de rendimiento es el promedio ponderado de todas las métricas de rendimiento. Las métricas más ponderadas tienen un efecto mayor en la puntuación general de rendimiento.

Primera pintura Contentful

La primera pintura contenta (FCP) mide cuánto tiempo tarda el explorador en representar el primer fragmento de contenido DOM después de que un usuario navega a la página. Una buena puntuación de First Contentful Paint es cualquier cosa por debajo de un segundo. Es importante diferenciar First Contentful Paint con el término First Paint. First Paint es cuando cualquier cosa se considera renderizada, que podría ser tan simple como el color de fondo de la página en sí, pero no proporciona ningún contenido relevante o información que el usuario vino a hacer uso de o actuar sobre.

La primera pintura contenta será el contenido que se entrega, o se pinta, al usuario. Para la mayoría de las páginas web, este suele ser el contenido anterior, como el menú de navegación o una imagen de héroe, como ejemplo. Estas serán las primeras piezas de contenido real que los usuarios verán cuando se cargue la página. First Contentful Paint proporciona un punto de datos más útil y del mundo real que First Paint.

Indice de velocidad

El índice de velocidad muestra la rapidez con la que se rellena visiblemente el contenido de una página. El índice de velocidad se determina midiendo la velocidad de su página web y comparándola con los datos de otros sitios web. Cuanto menor sea la puntuación del índice de velocidad, mejor será el rendimiento. Cualquier página que esté por debajo de 4.3 segundos se considera buena y se indicará con una codificación de color verde. Una velocidad de página entre 4.4 y 5.8 se considera velocidad moderada y se indicará en naranja. Por último, una velocidad de página de más de 5,8 segundos se considera lenta y se indicará en rojo.

Tiempo de interactivo

El tiempo de interactivo, o TTI, mide el tiempo desde que la página comienza a cargarse hasta que se han cargado sus sub-recursos principales y es capaz de responder de forma fiable a la entrada del usuario rápidamente. Un tiempo de interactivo razonable es inferior a cinco segundos. Una nota importante sobre Time to Interactive es que desea asegurarse de que los usuarios pueden interactuar con su sitio cuando el contenido de la página, como botones o vínculos, se vuelve visible. El objetivo es hacer que el tiempo entre First Contentful Paint y Time to Interactive sea lo más corto posible. Si la página está configurada para publicar este contenido, pero no es interactiva hasta que se haya cargado el script, esto podría provocar que algunos usuarios se enojen.

Primera pintura significativa

La primera pintura significativa (FMP) mide cuando el contenido principal de una página está visible. La primera pintura significativa es el tiempo entre el momento en que se inicia la carga de página y cuando se ha representado la principal, por encima del doble. First Meaningful Paint se mide de la misma manera que First Contentful Paint, que se compara con el rendimiento real de los datos del sitio web. Dependiendo de cómo se configure la página para cargarse, la primera pintura significativa y la primera pintura contenta podrían ser la misma puntuación, sin embargo, en los casos en que se utiliza un marco en línea (iframe), por ejemplo, los tiempos serán diferentes. Un tiempo inferior a dos segundos se considera rápido y se indicará en verde. Cualquier cosa entre dos y cuatro segundos es moderada y se indicará en naranja. Por último, cualquier cosa durante cuatro segundos es lenta y se indicará en rojo.

Primera CPU inactiva

La primera inactividad de CPU marca la primera vez en la que el subproceso principal de la página es lo suficientemente silencioso como para controlar la entrada. Se puede considerar el tiempo entre el momento en que se carga la página y el momento en que se carga. Esta puntuación, al igual que otras en esta lista, se determina comparando su página con datos de otros sitios web. Una buena puntuación de inactividad de la primera CPU es en cualquier momento por debajo de 4.7 segundos y se indicará en verde. Cualquier tiempo entre 4.8 y 6.5 segundos es moderadamente rápido y se indicará en naranja. Por último, cualquier tiempo durante 6,5 segundos es lento y se indicará en rojo.

Máximo potencial de primer retardo de entrada

El retardo máximo de primera entrada potencial es la duración, en milisegundos, de la ejecución de dispositivo más larga que los usuarios podrían experimentar. En otras palabras, es la cantidad de tiempo que tarda el navegador en responder a la acción del usuario, como hacer clic en un enlace o botón, y procesar esa acción. Un retardo máximo rápido de primera entrada es cualquier cosa por debajo de 130 milisegundos y se indicará en verde. Cualquier cosa de más de 250 milisegundos se considera lenta y se indicará en rojo.

Puntuación general de accesibilidad

La Puntuación general de accesibilidad destacalas oportunidades para mejorar la accesibilidad de su sitio web. No se trata solo de garantizar la accesibilidad de los usuarios que tienen discapacidades. Incluso las correcciones más pequeñas, como making sure los elementos HTML se titulan correctamente y los elementos implementados pueden ir un largo camino para garantizar la accesibilidad para todos los usuarios que aterrizan en sus páginas web.

Puntuación general de las mejores prácticas

La puntuación general de prácticas recomendadas garantiza que la página siga las prácticas recomendadas del sector, como JavaScript válido, dimensiones de imagen, cifrado y mucho más. Esta sección también proporciona una visión general de los diversos elementos que han pasado o fallado en la auditoría de Lighthouse, junto con recomendaciones

Puntuación general seo

Las puntuaciones generales de SEO garantizan que tu página esté optimizada para la clasificación de resultados de los motores de búsqueda. Por ejemplo, la auditoría Lighthouse mostrará que hay títulos relevantes y metadescridaciones, código de estado correcto y mucho más para la página especificada. Esta sección también incluye elementos que no cumplían con los criterios de auditoría y que deben revisarse para mejorar y optimizar SEO.

Umbral de error

Establezca un rango de puntuación aceptable para una métrica seleccionada. Si la puntuación está fuera del rango, el dispositivo se marcará como error. Para recibir alertas basadas en el umbral que ha establecido, seleccione en el campo Alerta sobre errores de faro.

Opciones de DNS

The DNS Options feature allows users to choose how domain name server (DNS) requests are conducted during a monitoring task.

To specify the mode of resolving hostnames, in the DNS Resolve Mode section, select one of the available modes. For more details on the feature configuration, see DNS Mode Options.

The Custom DNS Hosts section contains the mappings of IP addresses to hostnames.

To specify the mapping, enter the IP address and the host name in the corresponding fields.

Examples:

192.168.107.246   example.com user.example.com userauth.example.com tools.example.com
192.168.107.246   example.com
192.168.107.246   user.example.com
192.168.107.246   userauth.example.com

See also: DNS Mode Options.

 

Automatice la supervisión del faro para una mejor experiencia del usuario

Es importante tener en cuenta que la velocidad de la página y el tiempo de carga de la página, aunque estrechamente relacionados, deben verse como factores separados cuando se trata del rendimiento del sitio web. Mientras que el tiempo de carga de la página se centra en medir cuánto tiempo tarda todo el contenido de la página web en representarse, lo que es un factor a la hora de ofrecer una gran experiencia de usuario, los usuarios no esperan a que las páginas web se carguen por completo antes de navegar, hacer clic o realizar sus siguientes acciones.

Los informes de supervisión de Lighthouse le permiten medir y realizar un seguimiento continuo del rendimiento de sus páginas web a lo largo del tiempo y garantizar que sus páginas cumplan con las métricas de rendimiento, los umbrales y las prácticas recomendadas establecidas por PageSpeed Insights, lo que le da la tranquilidad de que sus clientes y usuarios están obteniendo una experiencia web rápida sin importar dónde se encuentren.

Recursos adicionales sobre métricas de faros

Para obtener descripciones más detalladas de las métricas de Lighthouse, visite las siguientes páginas:

https://developers.google.com/web/tools/lighthouse

https://web.dev/performance-scoring/