El material, cuya traducción publicamos hoy, está dedicado a la calificación de velocidad del sitio, que puede calcularse utilizando Google PageSpeed Insights.
No es ningún secreto que la velocidad de un sitio en nuestro tiempo se ha convertido en una de sus características más importantes. Cuanto más rápido se cargue el sitio y se prepare para trabajar, mayores serán los ingresos que le brinde a su propietario. Acelerar un sitio significa reducir el número de usuarios que, apenas lo han visitado, lo abandonan, cansados de esperar la descarga de sus materiales. De particular importancia para el rendimiento del sitio es el hecho de que ahora los indicadores de Google PageSpeed se utilizan como uno de los factores que clasifican los sitios en los resultados de búsqueda. Como resultado, hoy muchas organizaciones están prestando mucha atención a la velocidad de sus sitios.
Cambios en los algoritmos de clasificación del sitio
El año pasado, Google realizó dos cambios importantes en sus algoritmos de indexación de búsqueda y clasificación de sitios.
- En marzo, la indexación se basó en la versión móvil de la página en lugar del escritorio.
- En julio, se actualizó el algoritmo de clasificación de SEO. Al calcularlo para páginas móviles y publicitarias, comenzaron a usar la clasificación de velocidad de la página.
Estos hechos nos permiten sacar las siguientes conclusiones:
- La velocidad de la versión móvil del sitio afectará su clasificación general de SEO.
- Si las páginas del sitio se cargan lentamente, esto reducirá el nivel de calidad de los anuncios y los anuncios costarán más.
Esto es lo que Google dice al respecto: “Los sitios más rápidos no solo mejoran la experiencia del usuario; datos recientes muestran que aumentar la velocidad del sitio, además, conduce a una disminución en el costo de su soporte. Realmente apreciamos la velocidad. Lo mismo puede decirse de nuestros usuarios. Es por eso que decidimos que al calcular los indicadores de clasificación de búsqueda, también tendremos en cuenta la velocidad del sitio ".
Para comprender cómo estos cambios afectan nuestros proyectos en términos de optimizar su rendimiento, necesitamos comprender las tecnologías que subyacen a la evaluación de la velocidad del sitio.
PageSpeed 5.0 es una versión completamente revisada de este sistema. Ahora se basa en Lighthouse y
CrUX (Chrome User Experience Report).
Esta actualización, además, trajo un nuevo algoritmo de puntuación, que complica enormemente la tarea de obtener una puntuación alta en PageSpeed.
¿Qué ha cambiado en PageSpeed 5.0?
Antes de la versión 5.0, la herramienta PageSpeed verificaba la página, analizando su cumplimiento con un conjunto de reglas heurísticas. Si hubiera grandes imágenes sin comprimir en la página, PageSpeed podría recomendarle al desarrollador web que comprima estas imágenes. No hay encabezados de caché? El sistema podría aconsejarles que agreguen.
Las recomendaciones estaban vinculadas a estos controles de página. Seguir las recomendaciones podría conducir a un mejor rendimiento de la página. Pero las reglas heurísticas eran bastante superficiales, no tenían como objetivo explorar qué impresiones la página de carga y representación de una página causaría un visitante real a un sitio.
En PageSpeed 5.0, las páginas se cargan en un navegador Chrome real, que es controlado por Lighthouse. Lighthouse registra las métricas obtenidas del navegador, les aplica el modelo de puntuación y muestra una puntuación de rendimiento general. Las recomendaciones para mejorar el rendimiento se dan en base a los puntos obtenidos por la página estudiada para indicadores individuales.
Lighthouse, como PageSpeed, tiene un sistema de calificación de rendimiento del sitio. En PageSpeed 5.0, la evaluación del rendimiento se toma directamente de Lighthouse. El resultado de la puntuación de rendimiento de PageSpeed ahora es la misma puntuación que produce Lighthouse.
La calificación de desempeño de PageSpeed se basa en la calificación generada por LighthouseAhora que sabemos de dónde proviene el puntaje de PageSpeed, hablemos sobre cómo se calcula este puntaje y qué se puede hacer para mejorar la velocidad del sitio.
¿Qué es el faro de Google?
Lighthouse es un proyecto de código abierto, manejado por un equipo especial, seleccionado entre los desarrolladores de Google Chrome. En los últimos años, Lighthouse se ha convertido en la herramienta gratuita estándar para analizar el rendimiento del sitio.
Lighthouse utiliza el Protocolo de depuración remota de Chrome (Protocolo de depuración remota de Chrome) para leer información sobre solicitudes de red, medir el rendimiento del código JavaScript y verificar el cumplimiento de los estándares de accesibilidad del contenido de la página. Esta herramienta mide los indicadores de tiempo centrados en la percepción de la página por parte de los usuarios. Entre ellos, por ejemplo,
First Contentful Paint ,
Time to Interactive e Speed Index.
Si está interesado en Lighthouse, eche un vistazo a
este material del repositorio oficial del proyecto, dedicado a la descripción general de su arquitectura.
Cálculo de la calificación de rendimiento del sitio en Lighthouse
Como parte de un estudio de rendimiento de la página, Lighthouse escribe muchas métricas que se centran en evaluar lo que ve el usuario y lo que el usuario experimenta mientras trabaja con la página. Aquí hay seis métricas utilizadas para derivar una puntuación de rendimiento general:
- Time to Interactive (TTI, tiempo de descarga para la interacción).
- Índice de velocidad.
- Primera pintura satisfactoria (FCP, primer tiempo de descarga de contenido).
- Primera CPU inactiva.
- Primera pintura significativa (FMP, tiempo de descarga para suficiente contenido).
- Latencia de entrada estimada.
Cada uno de estos indicadores se evalúa en una escala de 0 a 100. La evaluación se lleva a cabo obteniendo los percentiles 75 y 95 para páginas móviles del
Archivo HTTP y utilizando la función de
log normal .
Siguiendo este algoritmo y considerando los datos utilizados para calcular el TTI, puede ver que si la página puede volverse "interactiva", adecuada para la interacción del usuario, en 2.1 segundos, el TTI será igual a 92/100.
TTIDespués de calcular cada uno de los indicadores, se le asigna un cierto peso, que se utiliza como modificador en el cálculo del indicador total. Aquí están los pesos asignados a las diferentes métricas.
Los pesos indican cómo cada uno de los indicadores afecta la experiencia del usuario móvil con la página.
En el futuro, este conjunto puede ampliarse para incluir indicadores tomados del conjunto de datos del Informe de experiencia del usuario de Chrome relacionados con las percepciones de los sitios por parte de los usuarios.
Puede interesarle saber cómo el uso de pesas afecta la calificación final de desempeño. Si es así, eche un vistazo a
esta tabla creada por el equipo de Lighthouse. Después de analizarlo, puede comprender mejor este proceso.
Fragmento de una tabla que demuestra el cálculo de la calificación de rendimiento de la páginaSi cambia la métrica
interactive en el ejemplo anterior (esto es lo que llamamos TTI aquí) de 5 segundos a 17 segundos (es decir, al nivel del TTI promedio global para páginas móviles), la calificación de la página se reducirá al 56% ( es decir, obtendrá 56 puntos de 100 posibles).
Si configura el
first-contentful-paint indicador de
first-contentful-paint contenta en 17 segundos, la calificación se reducirá al 62%.
Como resultado, podemos concluir que la métrica TTI tiene el mayor impacto en la calificación final del sitio. Se deduce que para obtener una página de PageSpeed altamente calificada, debe demostrar un TTI decente.
Mejora TTI
Si consideramos ampliamente el problema de mejorar la TTI, entonces podemos decir que hay dos factores que afectan extremadamente este indicador:
- La cantidad de código JavaScript cargado en la página.
- El tiempo que lleva completar varias tareas de JavaScript en el hilo principal.
Aquí puede encontrar detalles sobre TTI, pero si desea rápidamente, sin la necesidad de una investigación adicional, mejorar el TTI de su sitio web, podríamos recomendar reducir la cantidad de código JavaScript.
Siempre que sea posible, elimine el código JavaScript no utilizado o intente asegurarse de que la página solo cargue los scripts que se utilizan en esta página. El cumplimiento de esta recomendación puede significar deshacerse de los antiguos polyfills o reemplazar las bibliotecas de terceros con alternativas más compactas y modernas.
Es importante recordar que lo que se llama el "
precio de JavaScript " no es solo el tiempo que lleva descargar el código. El navegador necesita descomprimir, analizar, compilar y, en última instancia, ejecutar el código JavaScript cargado. Todas estas operaciones pueden tomar una cantidad considerable de tiempo. Especialmente en dispositivos móviles.
Entre las medidas efectivas para reducir la cantidad de código JS utilizado por las páginas, se puede observar lo siguiente:
- Análisis de los polyfills utilizados y rechazo de aquellos que su audiencia ya no necesita.
- Conocer el "costo" de cada una de las bibliotecas de terceros utilizadas. Para conocer los tamaños de las bibliotecas utilizadas en el proyecto, puede usar herramientas como webpack-bundle-analyzer y source-map-explorer .
- Las herramientas modernas de JavaScript (como el paquete web) pueden dividir grandes aplicaciones JS en conjuntos de pequeños paquetes que se cargan automáticamente a medida que se hacen necesarios. En particular, cuando un usuario va de una página a otra de un sitio. Este enfoque para optimizar el rendimiento del sitio se conoce como división de código . Su uso tiene un muy buen efecto en TTI.
- Utilice los trabajadores de servicios que almacenan en caché el código de bytes resultante de analizar y compilar scripts. Si puede incluir tales mecanismos de almacenamiento en caché en su proyecto, los recursos del sistema de los visitantes del sitio se gastarán en analizar y compilar el código solo cuando vaya al recurso por primera vez. En visitas repetidas al sitio, los materiales necesarios se tomarán del caché.
Monitoreo de TTI
Con el fin de explorar con éxito la forma en que los usuarios lo ven, los sistemas de monitoreo del rendimiento del sitio web como
Calibre . En particular, estamos hablando del hecho de que los sitios se prueban en al menos dos dispositivos: en una computadora de escritorio rápida y en un teléfono móvil, cuyo rendimiento está al nivel de los dispositivos lentos de clase media.
Con este enfoque, tendrá datos para la mejor opción para trabajar con su sitio, y para lo peor. Al mismo tiempo, tendrá que acostumbrarse al hecho de que los visitantes de su sitio no usan los mismos dispositivos potentes que usa su equipo.
Perfil manual cuidadoso
Para aprovechar al máximo el perfil de rendimiento del código JS, las páginas de prueba se prueban en dispositivos móviles especialmente ralentizados. Si tiene un teléfono viejo en el cajón de su escritorio, la realización de esta idea puede darle una segunda vida maravillosa.
Un buen sustituto para dispositivos reales son las capacidades de las Herramientas para desarrolladores de Chrome.
Aquí hay material sobre el perfil de las aplicaciones de React utilizando estas herramientas.
Otras métricas
Las métricas como Índice de velocidad, Primera pintura satisfactoria y Primera pintura significativa se basan en cómo el navegador representa la página. Están influenciados por factores similares a los que ya hemos hablado. El impacto en estos factores a menudo conduce a una mejora en todos estos indicadores.
Hablando objetivamente, mejorar estas métricas es más fácil que TTI. El hecho es que la base para su cálculo es la velocidad de representación de la página por parte del navegador. Estas métricas pueden mejorarse siguiendo exactamente las pautas dadas después del análisis de página usando Lighthouse.
Si no está precargando las fuentes u optimizando la página, teniendo en cuenta las características de las consultas críticas, puede comenzar a mejorar el rendimiento de representación de su sitio desde estas dos direcciones. En
este artículo, puede encontrar información detallada sobre cómo el navegador carga y muestra los recursos críticos utilizados en la formación de páginas web.
Resultados: en sitios de monitoreo y en hacer mejoras tangibles a su trabajo
La consola de búsqueda de Google actualizada, Lighthouse y PageSpeed Insights son excelentes herramientas que le permiten evaluar instantáneamente el rendimiento general del sitio. Sin embargo, no son adecuados para equipos que necesitan monitorear y mejorar continuamente el desempeño de sus proyectos.
El monitoreo continuo del rendimiento es una parte esencial de un flujo de trabajo destinado a mantener constantemente el rendimiento del sitio a un alto nivel. Con este enfoque, el equipo del proyecto aprende instantáneamente sobre problemas de rendimiento. Con las pruebas de rendimiento manuales, es posible una dispersión inesperada de resultados. Como resultado, sin crear un entorno de prueba especializado, es casi imposible probar el rendimiento del sitio utilizando diferentes dispositivos o simulando otros parámetros cambiantes de los sistemas de los usuarios potenciales.
La velocidad de la página se ha convertido en un factor crítico en el ranking de la página SEO. Esta afirmación es especialmente fuerte en estos días, cuando casi el 50% del tráfico web es generado por dispositivos móviles.
Para asegurarse de que su sitio no pierda su posición en los resultados de búsqueda, intente utilizar versiones modernas de herramientas para analizar el rendimiento de sus páginas más importantes y mantener su velocidad al nivel que más le convenga.
Estimados lectores! ¿Optimiza sus proyectos web teniendo en cuenta la mejora de los indicadores que influyen en las calificaciones de Google PageSpeed?
