Cómo usar el modelo de rendimiento ferroviario para medir la velocidad de su sitio

¿Cómo se mide el rendimiento del sitio? Hay mucha información en línea sobre cómo optimizar los sitios web, pero ¿dónde sabe realmente cuándo hizo lo suficiente? Para ayudar a los desarrolladores a medir sus esfuerzos de optimización, y recordarles poner a los usuarios en el medio de la historia de rendimiento, una pocos empleados de Google han desarrollado el modelo ferroviario. Rail es un modelo de rendimiento centrado en el usuario que desglosa la experiencia web del usuario en cuatro acciones clave. Él alienta a los desarrolladores a pensar en holística sobre el rendimiento web y en lugar de preguntar “¿qué se desprende?” En su lugar, pregunte “¿Qué siente el usuario cuando interactúa con las cosas que construimos?”
En esta publicación, exploraremos qué es el riel, las pautas que el modelo establece para ayudarlo a determinar cuándo “hizo lo suficiente” y las herramientas que puede usar para medir el riel. Cuando se carga una página web, se llevan a cabo muchas cosas técnicas detrás de escena. En el backend, el sitio solicita y recibe archivos y recursos, mientras que en el front-end el navegador carece palabras, imágenes y otros medios. Si bien todo esto sucede, el usuario está esperando que la página cargue, para que pueda comenzar a interactuar con ella, lo cual es bueno y bueno si ha optimizado la velocidad de la página. El problema es que los desarrolladores a menudo olvidan lo que sucede después de que se ha cargado una página.
Según la Guía web de Google Fundaments, los usuarios pasan la mayor parte de su tiempo esperando que los sitios respondan a sus entradas (es decir, clics, toques y conmutadores), sin esperar a que los sitios carguen. Por lo tanto, aunque su sitio puede cargar Lightning, significa que Diddly-Squat si un usuario hace clic en un enlace en su navegación y tarda dos segundos en que la entrada se registre. El modelo ferroviario tiene esto en cuenta, dividiendo la experiencia del usuario con un sitio web en cuatro acciones clave: respuesta, animación, inactiva y carga: Paul Irish.

Cada acción ferroviaria viene con sus propios objetivos de rendimiento, que se basan en los umbrales de la percepción humana, que cubriremos pronto. La idea detrás del modelo es que si optimiza su sitio en función de cada una de estas áreas y ofrece una experiencia web constante rápida, sus usuarios estarán contentos. Antes de explorar el riel específico y los puntos de referencia que establece, es importante comprender primero los umbrales de la percepción humana. El tiempo y el rendimiento percibidos cuando optimiza su sitio para que sea más rápido, ¿está pensando en cómo se puede sentir un usuario mientras navega en su sitio? Probablemente no. Sin embargo, esta noción percibida del rendimiento de su sitio es una parte crítica del ferrocarril.
El trabajo de Jakob Nielsen en los tiempos de respuesta ha sido la investigación académica básica para las percepciones humanas sobre el rendimiento web, desde que se publicó en 1993. En 2015, cuando Google Paul Irish y Paul Lewis han propuesto su modelo ferroviario. Han revisado los descubrimientos originales de Nielsen, agregando, agregando, agregando, agregando, agregando. En un tiempo de respuesta adicional (de 0 a 16 ms) para animaciones.0 a 16 ms: las personas son muy buenas en el movimiento y no les gusta cuando las animaciones tienen marcos variables o paradas excesivas. Las animaciones se perciben tan suaves, ya que se juegan 60 marcos nuevos cada segundo. Es decir, 16 ms en el marco.
0 a 100 ms: los usuarios sienten las respuestas a sus acciones que tienen lugar en menos de 100 ms como inmediato. Más y la conexión entre la acción y la reacción se rompen.
100 a 300 ms: los usuarios sienten un ligero retraso notable.
300 a 1000 ms: en esta ventana, los usuarios sienten que “las cosas suceden”, es decir, las páginas se cobran y las tareas progresan.
1000 ms o más: más de 1 segundo, los usuarios pierden su enfoque en la tarea que realizan.
10000 ms o más: Más de 10 segundos, los usuarios están frustrados y probablemente abandonan las tareas si aún no lo han hecho.
Estos umbrales de percepción son útiles para recordar, ya que ofrecen una guía útil para cuánto tiempo debe durar su sitio para responder a diferentes interacciones del usuario.
Sin embargo, es importante tener en cuenta que la forma en que los usuarios perciben retrasos en el rendimiento a menudo dependen de las condiciones de la red y del dispositivo que usan. Por ejemplo, no se excluiría para esperar que una página se cargue en menos de 1 segundo en una computadora de escritorio fuerte a través de una conexión Wi-Fi rápida, pero para dispositivos móviles que usan conexiones 3G lentas, la carga es en 5 segundos. más realista. Como tal, los usuarios móviles son generalmente más pacientes. Para obtener más información sobre los umbrales de percepción humana, vea cuál es el rendimiento percibido y por qué tiene que optimizar. Lo que podemos seguirlos cuando construimos y optimizamos los sitios web. Veamos cada uno de los cuatro campos clave del ferrocarril en más detalles. Respuesta La respuesta se refiere a la rapidez con que su sitio responde a la interacción de un usuario. Por ejemplo, esto puede ser un clic, conmutando controles en el formulario o iniciar una animación. Es esencial que su sitio responda inmediatamente antes de que aparezca cualquier retraso visible. De lo contrario, la conexión entre acción y reacción se romperá.
Como Lewis describe, si alguna vez hace clic en algo y tardó tanto en responder que comenzó a preguntar si grabó su clic, por lo que hace clic por segunda vez, pero al hacerlo interrumpió la respuesta al primer clic … bueno, bueno, bueno, bueno, bueno, Este es exactamente el tipo de trabajo que Rail tiene como objetivo evitar. Objetivo: Eventos de proceso en menos de 50 ms. Reglas de Google: los sitios deben procesar las acciones/entradas del usuario dentro de los 50 ms para garantizar una respuesta visible en 100 ms. Para acciones que duren más de 50 ms, siempre proporcionen comentarios, es decir, muestre un indicador de carga o cambie el color para la condición activa. Las animaciones de animación se han vuelto tan omnipresentes en el diseño web que los usuarios esperan interacciones muy fluidas y observan inmediatamente cuando la velocidad de cuadro es incluso ligeramente reducido. Las animaciones incluyen:
Animaciones visuales. Esto incluye animaciones de entrada y salida e indicadores de carga.
Desfile. Esto incluye el uso de un desfile, pero también el lanzamiento, que es cuando un usuario comienza a ejecutarse, luego suelta y la página continúa ejecutándose.

Tracción. Como pasar por un mapa o pellizcar para aumentar.
Propósito: Producir un marco en 10 ms. Instrucciones de Google: para animar correctamente, cada cuadro de una animación debe completarse en menos de 16 ms para obtener 60 cuadros por segundo (es decir, 1 segundo ÷ 60 = 16.6 ms). El “presupuesto” máximo para cada cuadro es de 16 ms, pero los navegadores necesitan aproximadamente 6 ms para jugar cada cuadro.
Inactivo El tiempo de inactividad se refiere a lo que está sucediendo en el backstage de su sitio después de que inicialmente se haya cargado. Como mencioné en una publicación reciente sobre las técnicas de prehebramiento, el tiempo inactivo ofrece una oportunidad ideal para recursos de precarga, precarga y preconceación. Objetivo: Maximice el tiempo de inactividad para aumentar las posibilidades de que la página pueda responder a una interacción del usuario en 50 ms. Reglas de Google: cargue solo los elementos más importantes de su página durante la carga inicial y use el tiempo de inactividad para cualquier otra cosa. Google recomienda agrupar cualquier trabajo retrasado durante el tiempo inactivo en los bloques de 50 ms para que su sitio pueda responder en las 100 respuestas. Si un usuario interactúa con una página durante el trabajo durante el tiempo inactivo, su interacción debe tener prioridad e interrumpir el trabajo durante el tiempo inactivo.
La carga del embarazo se refiere a la rápida atracción del usuario con la primera pintura significativa. Esto significa cargar páginas en menos de 1 segundo. Cuanto más rápido se carguen sus páginas, menos usuarios se saltarán y menos probabilidades tendrán de perder su concentración y percibir una tarea que están tratando de realizar como interrumpidos. No es sorprendente que, según Google, los sitios web que cobran rápidamente tienen sesiones promedio más largas, tasas de rechazo más bajas y anuncios más altos. Objetivo: entrega la primera pintura significativa en 1 segundo y obtenga un tiempo de interacción en menos de 5 segundos. Reglas de Google: optimice la velocidad de su página en relación con sus dispositivos de red y conexiones que sus usuarios usan para acceder a su sitio. Concéntrese en optimizar la ruta de representación crítica para su sitio para desbloquear la reproducción y usar el tiempo inactivo para su ventaja de Google, recomienda que las páginas se cargan e interacten en 5 segundos o menos en dispositivos móviles de rango promedio utilizando conexiones 3G lentas. Para las cargas posteriores, el objetivo durante 2 segundos o menos. Instrucciones para medir rieles Los objetivos establecidos por el ferrocarril pueden parecer altos, pero de hecho no son tan difíciles de medir y seguir utilizando tres herramientas disponibles: Chrome Devtools, Lighthouse y WebPageTest.
Chrome DevTools: las herramientas de desarrollador construidas de Chrome le permiten mirar detrás de la cortina, por así decirlo, dando un análisis en profundidad de todo lo que sucede mientras su página se está cargando o ejecutando. Google ofrece instrucciones más específicas sobre cómo usar DevTools para medir los valores ferroviarios en esta guía. Básicamente, ingrese una URL y un faro simulan un rango promedio con una conexión 3G lenta. Realice una serie de auditorías y luego le brinde un informe que examine el rendimiento de su sitio, si cumple con las mejores prácticas, accesibilidad y SEO.
WebPageTest: también cubrí esta herramienta de prueba de velocidad en este blog. Al ingresar una URL para pruebas, use la configuración avanzada para elegir un dispositivo móvil y una conexión 3G lenta para emular las reglas de carga de riel.
La conclusión es fácil de atrapar en la optimización de los sitios y obsesionados con la velocidad. Lo que hace Rail es proporcionar un marco que enfatice la experiencia general del usuario, brindando a los desarrolladores puntos de referencia de confianza para medir y mejorar el rendimiento del sitio web. Para recapitular, aquí hay un detalle útil de los objetivos de rendimiento ferroviario:
Le recomiendo que pruebe su sitio en relación con los criterios de referencia ferroviaria y descubra qué mejoras puede traer para crear una experiencia de usuario más agradable.