Herramienta de análisis de rendimiento front-end - Lighthouse

1. Introducción básica del faro del complemento de Google

Lighthouse es una herramienta de evaluación del rendimiento del sitio web. Es una herramienta de automatización de código abierto lanzada por Google Chrome. Puede evaluar varios indicadores de rendimiento de PWA y páginas web, y brindar sugerencias de mejores prácticas para ayudar a los desarrolladores a mejorar la calidad del sitio web. También es muy simple de usar, solo necesitamos proporcionar una URL para medir, ejecutará una serie de pruebas contra esta página y luego generará un informe sobre el rendimiento de la página. A través del informe, podemos saber qué acciones se deben tomar para mejorar el rendimiento y la experiencia de la aplicación.

2. Guía del usuario del faro

En la versión superior (debería ser >= 60) del navegador Chrome, Lighthouse se ha integrado directamente en la herramienta de depuración DevTools, por lo que no se requiere instalación ni descarga.

Presione F12 para abrir la herramienta de desarrollo, puede ver que hay una opción de auditorías detrás de la consola, la seguridad y otras opciones (el complemento Lighthouse está instalado o una versión superior de Google Chrome puede mostrar Lighthouse), seleccione esta opción, y luego haga clic en generar informe.

Para diferentes escenarios aplicables, podemos instalar y usar Lighthouse de varias maneras:

• Complemento del navegador Chrome. Se proporciona una interfaz más fácil de usar en forma de un complemento de Chrome para facilitar la lectura de los informes.

• Herramientas de desarrollo de Chrome. La herramienta está integrada en la última versión del navegador Chrome y se puede utilizar sin instalación.

• Herramienta de línea de comandos Lighthouse CLI. Es conveniente integrar Lighthouse en el sistema de integración continua.

• forma programada. También podemos importar el kit de herramientas de Lighthouse a través de los módulos de Node.js para usarlo mediante programación.

3. Lighthouse genera informes de sitios web

Primero visite el sitio web que necesita ser evaluado, como http://www.baidu.com, luego haga clic en el botón del faro y seleccione generar informe. Como se muestra abajo:

lighthouse ejecutará una serie de pruebas para revisar la página y luego le mostrará algunos indicadores de rendimiento sobre el rendimiento de la página en forma de informe. Puede consultar algunos consejos de indicadores en este informe para mejorar la aplicación de su sitio web. Lighthouse puede generar un informe JSON o HTML, HTML se puede abrir directamente y un informe en formato json se puede abrir a través de la  dirección de Lighthouse Report Viewer  . como muestra la imagen:

4. El ciclo de vida del funcionamiento del faro

El proceso de ejecución de la evaluación en Lighthouse tiene un ciclo de vida completo, que se puede dividir en tres procesos principales:

Collecting (recolectando datos): El primero es el proceso de Collecting, este paso llamará al controlador incorporado (Driver), y su función es invocar al navegador a través del protocolo de la herramienta de desarrollo de Google (Chrome DevTools Protocol), y crear un nuevo Solicitud de pestaña para ser evaluado Sitio, recopilar datos del sitio a través del navegador y guardar los resultados (llamados Artefactos) en un directorio temporal local.

Auditoría (análisis de datos): luego ingrese al proceso de auditoría, lea los datos de los artefactos, verifique cada elemento de acuerdo con la estrategia de evaluación integrada y calcule la puntuación numérica de cada elemento.

Informe (generar informe): Finalmente, se lleva a cabo el proceso de Informe, y los resultados de puntuación se dividen según la latitud de PWA, rendimiento, accesibilidad, mejores prácticas, etc., y salida en JSON, HTML y otros formatos.

Como se muestra abajo:

En base a esto, la herramienta de línea de comandos proporciona opciones de ciclo de vida y podemos hacer que la CLI ejecute solo uno o más ciclos de vida específicos de todo el proceso de evaluación. Por ejemplo, use --gather-mode (-G) para realizar solo el ciclo de vida de recopilación de recursos. La herramienta de línea de comando iniciará el navegador, recopilará datos relevantes del sitio probado y almacenará los resultados localmente en forma de json. El el directorio predeterminado es ./latest-run/, luego salga del proceso:

1. faro https://ejemplo.com/ -G

Si desea omitir la interacción del navegador, leer los datos temporales de la página directamente desde el local, ejecutar la evaluación y producir el informe de resultados, puede usar --audit-mode (-A), el valor predeterminado será de ./latest-run/ El directorio dice:

1. faro https://ejemplo.com/ -A

Si se utilizan las dos opciones al mismo tiempo, se ejecutará todo el ciclo de vida de la evaluación. En comparación con la ejecución directa del comando lighthouse, se guardará una copia de los datos del sitio de prueba en el directorio actual.

1. faro https://ejemplo.com -GA

Si no queremos usar el directorio predeterminado ./latest-run/, también podemos personalizar el directorio donde se guardan los datos json del sitio, como:

1. faro -GA=./micarpetapersonalizada https://example.com

Referencia: Apéndice 1 Use Lighthouse para evaluar la práctica de aplicación de PWA PWA

5. Análisis de indicadores del informe del faro

Después de usar Lighthouse para evaluar el sitio web, obtendremos un informe de puntuación, que incluye rendimiento (rendimiento), accesibilidad (accesibilidad), mejores prácticas (mejores prácticas), optimización de motores de búsqueda (SEO), PWA (aplicación web progresiva) cinco partes:

5.1 Rendimiento

El rango de puntuación de la puntuación de rendimiento es de 0 a 100. Si hay una puntuación de 0, normalmente se trata de un error al ejecutar Lighthouse. Una puntuación total de 100 representa los datos de que el sitio web ha alcanzado el valor del percentil 98, mientras que una puntuación de 50 es el percentil 75. datos de valor.

Indicadores de desempeño que afectan la calificación: los resultados de la prueba de desempeño se dividirán en tres partes: Métricas, Diagnósticos y Oportunidades, pero solo los indicadores en la parte de Métricas tendrán un impacto directo en la calificación.

Lighthouse mide los siguientes indicadores de rendimiento de métricas:

• Primera pintura con contenido. Es decir, el momento en el que el navegador dibuja contenido arbitrario (como texto, imágenes, lienzo, etc.) en la pantalla por primera vez.

• Primera pintura significativa. Mide cuánto tiempo perciben los usuarios que el contenido principal de una página es visible. Para diferentes sitios, el contenido principal es diferente, por ejemplo: para los artículos de blog, el título y el texto de la mitad superior de la página son el contenido principal, mientras que para los sitios de compras, las imágenes también serán muy importantes.

• Primera CPU inactiva. Es decir, el momento en el que la página es capaz de responder a la entrada por primera vez, y su momento suele ser después de que se completa el primer dibujo efectivo. Este indicador es actualmente todavía experimental.

• Hora de Interactivo. Hace referencia al momento en el que todo el contenido de la página se ha cargado correctamente y puede responder rápidamente a las acciones del usuario. Este indicador es actualmente todavía experimental.

• Índice de Velocidad (Speed ​​Index). Mide la rapidez con la que el contenido visible de la mitad superior de la página se dibuja en la pantalla. Mostrar la mayor cantidad de contenido posible durante la primera carga de la página a menudo puede brindar una mejor experiencia de usuario, por lo que el valor del índice de velocidad debe ser lo más pequeño posible.

• Latencia de entrada estimada. Este indicador mide la velocidad de respuesta de la página al comportamiento de entrada del usuario y su valor de referencia debe ser inferior a 50 ms.

Los indicadores en la sección Métricas afectarán directamente el puntaje y pueden usarse como nuestro principal punto de referencia.

En las otras dos partes,  Oportunidades  se refiere a las oportunidades de optimización, que brindan sugerencias y documentos detallados para explicar las razones de las puntuaciones bajas y ayudarnos a implementarlas y mejorarlas. Los diagnósticos  se refieren a los problemas existentes y brindan orientación para una mayor experimentación y ajuste para mejorar el rendimiento. Ambos no están incluidos en el cálculo de la puntuación.

5.1.1 Criterios de puntuación de desempeño

La contribución de cada indicador de rendimiento a la puntuación tiene su lógica de cálculo y Lighthouse asignará el valor de rendimiento original a un número entre 0 y 100.

Por ejemplo, el valor original de FMP (primera pintura significativa) es el tiempo desde la inicialización de la página hasta la representación exitosa del contenido principal. Según los datos del sitio real, el valor de FMP del sitio de mayor rendimiento es de aproximadamente 1220 ms, y este valor se asignará a Lighthouse 99 puntos.

Para diferentes puntajes, Lighthouse usa diferentes colores para marcar.La relación correspondiente entre el rango de puntaje y el color es la siguiente:

• 0 - 49 (lento): rojo

• 50 - 89 (promedio): naranja

• 90 - 100 (rápido): Verde

La contribución de cada indicador al puntaje de desempeño no es la misma, y ​​el indicador con mayor peso tiene un mayor impacto en el puntaje de desempeño. Para conocer la distribución del peso de cada indicador, consulte: https://docs.google.com/spreadsheets/d/1Cxzhy5ecqJCucdf1M0iOzM8mIxNc7mmx107o5nj38Eo/edit#gid=0

5.2 Accesibilidad

El puntaje para el puntaje de accesibilidad se calcula como un promedio ponderado de los indicadores relevantes. Puede consultar el peso específico de cada indicador en los detalles de puntuación . De manera similar, los ítems del índice con mayor peso tienen un mayor impacto en el puntaje.

El resultado de la prueba de cada elemento del índice de accesibilidad es aprobado o reprobado, que es diferente del método de cálculo del elemento del índice de rendimiento. Cuando la página solo pasa parcialmente un cierto índice, el índice de la página no se calificará. Por ejemplo, si algunos elementos de la página tienen nombres descriptivos para lectores de pantalla pero otros no, la página obtendrá una puntuación de 0 en la métrica de nombres descriptivos para lectores de pantalla.

5.3 Mejores Prácticas (Optimización)

La puntuación de las mejores prácticas está en una escala de 0-100. Los ítems del índice que afectan este puntaje tienen el mismo peso.

Por ejemplo: se recomienda usar https, los enlaces de salto entre dominios deben usar el logotipo rel y no se pueden usar API obsoletas, etc.

5.4 Optimización de motores de búsqueda (SEO)

Por ejemplo: los elementos de imagen usan atributos alt, etc. para mejorar las clasificaciones de búsqueda de los motores de búsqueda, para que los motores de búsqueda puedan encontrar su sitio web.

5.5, PWA (aplicación web progresiva)

Lighthouse utiliza la lista de verificación de referencia de PWA (Lista de verificación de referencia de PWA) para la evaluación. Los resultados de la evaluación dividen estos indicadores en cuatro categorías, incluidos 12 elementos de prueba automática y 3 elementos de prueba manual. El peso de puntuación de cada elemento de prueba automática es idéntico. Los indicadores de evaluación de PWA son muy importantes para nosotros. Podemos aprender más sobre los indicadores de referencia de estas cuatro categorías.

Rápido y fiable:

1. Las páginas se cargan rápidamente en condiciones de red móvil.

2. La página puede devolver el código de estado 200 en condiciones sin conexión. Aquí podemos usar Service Worker para que esté disponible sin conexión.

3. URL de inicio devuelve el código de estado 200 en condiciones fuera de línea. start url es un atributo en manifest.json que mencionamos en el capítulo anterior, que especifica la URL que se cargará cuando el usuario abra la PWA.

Se puede instalar:

1. Utilice siempre HTTPS.

2. Registre Service Worker en la página de caché y start_url.

3. Use el archivo de manifiesto para cumplir con los requisitos de instalación de PWA, y el navegador puede notificar activamente al usuario que agregue la aplicación al escritorio para aumentar la tasa de retención.

Optimización de PWA:

1. Redirigir el tráfico HTTP a HTTPS.

2. Configure una pantalla de presentación personalizada.

3. Establezca el color del tema de la barra de direcciones.

4. El contenido de la página se adapta al tamaño de la ventana gráfica, que es más amigable para los usuarios móviles.

5. Se utiliza la etiqueta y se establece el atributo de ancho o escala inicial.

6. Cuando el archivo JavaScript no está disponible, se proporcionan medidas alternativas y la página puede mostrar contenido básico sin una pantalla en blanco.

Elementos de prueba manual:

1. El sitio está disponible en todos los navegadores, como Chrome, Edge, Firefox y Safari, etc.

2. El cambio entre páginas es fluido Incluso en un entorno de red deficiente, la animación de cambio debe ser simple y fluida, que es la clave para mejorar la experiencia percibida por el usuario.

3. Asegúrese de que cada página tenga una URL única, se abra en una nueva ventana del navegador y sea fácil de compartir en las redes sociales.

Además de los indicadores de referencia anteriores, para que la experiencia de PWA sea más perfecta, existen algunos indicadores avanzados que Lighthouse no ha implementado, es decir, indicadores de PWA que se pueden usar como referencias ejemplares, como experiencia de usuario, caché, push notificaciones, etc .

Referencia: 2 Guía de puntuación de Lighthouse Práctica de aplicación de PWA

6. Requisitos de la versión de Node y Chrome

Hay ciertos requisitos para las versiones de nodo y navegadores Chrome cuando se usa Lighthouse.

nodo > =8.9 (no verificado)

El navegador Chrome debe tener >= 79; de lo contrario, es posible que Lighthouse no se ejecute o que no se muestren algunos indicadores. Por ejemplo, instalé Chrome75.0.3770.80 a continuación, y cuando ejecuto lighthouse usando la línea de comando, dos indicadores se muestran de manera anormal:

Los indicadores de rendimiento y mejores prácticas son anormales, y el error es el siguiente:

 -------------------------------------------------- -------------------------------