Cómo mejorar los valores de interacción del usuario de Google PageSpeed ​​en WordPress

La interacción con el usuario es uno de los aspectos críticos en los que debe concentrarse si desea proporcionar una experiencia de usuario acogedora. Desafortunadamente, no puede sentarse en su lugar y ver su sitio desde el punto de vista de los visitantes, por lo que necesita una forma de averiguar cómo responde su sitio a la entrada. Ingrese a Google PageSpeed ​​Insights. Hay 3 valores en Google PageSpeed ​​Insights que lo ayudarán a comprender la experiencia de interacción del usuario, por lo que puede mejorar, tiempo para interactuar, Max First Enput Dead y First CPU Idle.
En esta publicación, cubriremos los valores que usa Google PageSpeed ​​Insights para medir la interacción del usuario. Le mostraré cómo mejorar el tiempo hasta el retraso interactivo de primera entrada y la primera CPU inactiva, para que pueda proporcionar la mejor experiencia de usuario para sus visitantes. ¿Qué es el diseño interactivo? Dime si eso te ha pasado. Usted va a un sitio y, a medida que se carga el contenido, hace clic en algo, pero no pasa nada. Así que haga clic en él una y otra vez y luego, cuando la página finalmente responda, llegue a una página publicitaria aleatoria o en otro lugar que no quisiera estar.
Que mis amigos son una interacción negativa del usuario. El diseño interactivo se centra en permitir al usuario alcanzar sus objetivos, ya sea la compra de un producto o registrarse para el boletín informativo, lo más fácil posible. El diseño interactivo tiene muchas dimensiones. Lo que más se preocupa por este artículo son los comentarios y cuánto tiempo lleva, porque ayuda a los visitantes a evaluar si sus acciones son efectivas. Si el tiempo de respuesta entre una acción (como un clic) y la respuesta lleva demasiado tiempo, sus visitantes perderán la confianza en su sitio y probablemente volverán a sus competidores. Para dar al usuario una interacción positiva a medida que su sitio se está cargando, Debe concentrarse en varios valores para darnos una idea completa de lo que enfrenta el usuario. Veamos lo que son ahora. Medición de Google PageSpeed ​​Insights Interacción de usuario utiliza Lighthouse para analizar el rendimiento de una página web para dispositivos móviles y de escritorio.
Para este sitio, los valores de interacción con el usuario son excelentes, pero el sitio necesita algo de trabajo para mejorar los otros valores

Lighthouse adopta un enfoque centrado en el usuario y mide lo siguiente:
La primera pintura satisfactoria
La primera pintura significativa
Índice de velocidad
El primer procesador inactivo
Tiempo para interactivo
Latencia de entrada estimada
Lighthouse recopila datos de laboratorio en un entorno controlado con un dispositivo predefinido y configuración de red y luego asigna una puntuación. Los puntajes de la gama ideal se muestran en verde, mientras que los puntajes pequeños se muestran con rojo. Las puntuaciones amarillas caen dentro del rango promedio. Estos seis valores le dicen algo diferente sobre las experiencias de sus usuarios, mientras esperan que su sitio se cargue y juntos formen una imagen más completa. Tres que nos dirá sobre la interacción del usuario. Para obtener más información sobre la pintura contenta y el primer índice de pintura y velocidad significativos, vea estas publicaciones. ¿Cuál es el tiempo de faro para interactivos? El valor del tiempo para interactuar, o TTI, mide cuánto tiempo dura antes de que el usuario pueda interactuar de manera confiable con los contenidos en la página, haciendo clic en enlaces o ingresando texto en los campos introductorios. Un puntaje de menos de 100 ms es ideal, porque cuando su visitante toma una acción, la respuesta es casi instantánea. Además, el usuario percibirá la brecha como algo malo en su sitio.
Si bien el momento ideal para la interacción en WordPress debe ser inferior a 100 ms, tiene cierta flexibilidad. En una página de destino con un formulario web, el momento de interactivo de referencia sería muy importante. En una página de blog, con solo unos pocos enlaces, sería menos importante que la visibilidad del contenido. Cada sitio tiene diferentes prioridades, por lo que debe sacrificar la visibilidad del contenido de interactividad solo si tiene sentido. ¿Cómo medir el tiempo para interactivo? El tiempo de interactivo es difícil de medir, porque no hay un punto claro y claro cuando la página está preparada para la interacción. Déle a medir cuánto tiempo lleva hacer las flores de maíz en la placa. Es imposible decir exactamente cuánto tiempo llevará porque no puedes ver dentro de la olla y no sabes cuántas PIP deberían aparecer. Entonces, para hacer las flores de maíz sin quemarlas, tienes que escuchar. Cuando hay un retraso suficientemente largo durante unos segundos entre los pops, ciertamente puede suponer que las flores están casi listas. La medición del tiempo hasta la interacción es un proceso similar. Lighthouse observa el hilo principal y la actividad de la red para averiguar qué ocurre. Busque una ventana lo suficientemente larga en el bucle de eventos en el contexto de navegación y una ventana secundaria de 5 segundos de la red en la que la probabilidad de que los embarazos largos o el procesamiento pesado sean bajos.
Él sabe cuándo prestar atención buscando la primera pintura y detectar cuándo se registra el gerente de eventos para la mayoría de los elementos visibles de la página. Cómo mejorar el tiempo para que Interactive mejore su puntaje TTI, concéntrese en mejorar el código JavaScript de su sitio. Si bien los dispositivos móviles y las computadoras ahora tienen más CPU, la cantidad de JavaScript en las páginas web ha aumentado, aumentando 3 veces en los últimos 6 años. JavaScript funciona en un entorno de un solo hilo que forma un bloqueo cuando un proceso tarda demasiado en ser ejecutado. Cuando un proceso bloquea un solo cable, todo tiene que esperar, incluidos otros procesos y comentarios de los usuarios. Esto es aún peor en el móvil. Las tareas pueden tomar 3-5 veces más, y la gran carga del procesador consume las baterías. Sin mencionar que el sitio parecerá desagradable, por lo que no ofrece la mejor experiencia para el usuario. Las tareas que duran más de 50 ms se consideran embarazos largos. Para mejorar su puntaje TTI, elimine JavaScript innecesariamente o posponga hasta que finalice la página. También debe romper los archivos grandes para evitar bloqueos.
¿Cuál es el retraso en la primera entrada? El valor de Google First Enter Delay mide cuánto tiempo lleva el navegador para responder a la entrada del usuario, como hacer clic en un botón. Un retraso ideal para la primera entrada de 10 ms es ideal.
Si bien el tiempo de interactivo, se puede medir en un entorno de laboratorio, el primer retraso de entrada o FID requiere que los usuarios calculen con precisión.Una prueba de Insights de Google PageSpeed ​​incluye un valor para el máximo retraso potencial de la primera introducción, pero una herramienta de análisis, como Google Analytics, le dará resultados más precisos.Si recopila datos con la primera introducción de su herramienta de análisis, captura el dolor real del usuario.Si el tiempo de espera es largo, entonces sabes que tus visitantes probablemente estén frustrados, porque tienen que esperar cada vez que interactúan con la página.Si el tiempo de espera es particularmente largo y la tasa de rechazo es alta, ¿adivina qué?Pierde visitantes debido a una experiencia débil en el sitio.Tú tienes.¿Qué importa como la primera entrada?
Definamos la importancia del primer retraso de entrada, ya que no incluye todas las interacciones del usuario. FID mide acciones como clics, presionar clave y campos de entrada de texto. No incluye desplazamiento o ampliación, ya que el navegador puede enrollar sobre un hilo separado. Es por eso que, si su sitio no tiene ninguna acción que el usuario pueda tomar, aparte de ejecutar o ampliar, no tendrá un valor de retraso para la primera introducción. Cómo remediar el retraso en la primera entrada TTI y FID está estrechamente vinculada, por lo que si trabaja en la entrega de JavaScript de manera más eficiente para mejorar el tiempo de interacción, también mejorará la primera introducción. Si el hilo principal del navegador está ocupado, entonces no podrá responder a la entrada del usuario, por lo que debe trabajar para dividir tareas largas o no ejecutarlas en el hilo principal. Esto mantendrá el hilo principal abierto. Los anuncios de terceros y los widgets sociales tienen la reputación de ser codiciosos cuando se trata de consumo de recursos en sus páginas anfitrionas, por lo que debe tratar de incluir los menores cuadros del tercer tercio posibles. Un enfoque para mejorar la demora en la primera introducción es el aplazamiento de las tareas no críticas hasta que se soliciten. Este método se llama “urgente inactivo” si desea obtener más información sobre cómo usarlo. ¿Cuál es el primer procesador inactivo en Lighthouse?
La primera CPU inactiva en el faro mide cuando una página es mínimamente interactiva y la mayoría de ellas, pero no todos los elementos están preparados para la interacción.Si interactúa con los elementos en la página, puede haber un retraso, pero la página responderá.El primer procesador inactivo en PageSpeed ​​Insights se llamó inicialmente el tiempo para el primer interactivo.Indica cuándo hay los primeros 5 segundos en el hilo principal, cuando las tareas no duran más de 50 ms después de la primera pintura satisfactoria.La primera CPU inactiva es similar a la hora de interactiva, porque ambos escuchan las maniobras de eventos de JavaScript para devolver una medida precisa, pero la primera CPU inactiva no requiere que el navegador responda a la entrada del usuario en menos de 50 milisegundos.Un valor de 2-4 segundos para la primera CPU de WordPress inactiva es aproximadamente promedio.¿Cómo mejorar el primer procesador inactivo?
Un remedio fácil de la primera CPU inactiva es minimizar el número de recursos que se ejecutarán antes de que se pueda cargar una página y reducir el tamaño de los recursos restantes. Estas son las mismas estrategias para mejorar TTI y FID, para optimizar la representación crítica y optimizar la eficiencia del contenido. La guía de interacción con experiencia del usuario del faro no evalúa todo su sitio. Auditar una página, para comprender cómo funciona su sitio, debe probar una variedad de tipos de páginas en el sitio. Pruebe una página de blog, una página de producto, pago, etc. Preste especial atención a las páginas de conversión importantes, como sus páginas de destino y su carrito de compras. Lighthouse evalúa seis valores de prueba, pero no los pesa de todos modos cuando se trata de una puntuación general. Cada uno está ponderado de manera diferente. El valor de peso más alto es el momento de interactivo, ya que tiene un mayor impacto en el rendimiento general de la página. Esto es seguido por Speed ​​Index, First Contentul Paint, First CPU Idle y First Significful Paint, en este orden. Cómo mejorar su puntaje puede haber notado un modelo en las sugerencias para mejorar el tiempo de interacción, el primer procesador inactivo y el retraso de la primera entrada. Debido a que estos tres valores están estrechamente vinculados, adopte un enfoque holístico para mejorarlos. Al mejorar sus interacciones para los usuarios, las mejorará las tres. Estas son las acciones que puede tomar para mejorar sus puntajes: optimizar el camino de las críticas

Minimizar o eliminar los recursos críticos del hilo principal.
Posponga la descarga o cargue asíncrono si puede. Optimizar el tamaño de los activos por compresión o minimización para reducir el tiempo de descarga.
Descargue todos los activos críticos lo antes posible para acortar la longitud de la ruta crítica.
Cargue sus imágenes perezosamente: si una imagen está debajo del pliegue, espere para cargarla hasta que sea necesario. Priorice primero la carga de la página, luego, cuando tenga tiempo inactivo en el hilo principal, puede cargar la imagen una vez que el visitante se vaya por la página.
Active el almacenamiento del navegador: la memoria del archivo en caché reduce drásticamente el tiempo de carga de las páginas adicionales almacenando los activos en una recuperación más rápida. Con HTTP Cache, el navegador almacena una copia del usuario descargado por el usuario en el caché, para que puedan llevarlos sin hacer un viaje adicional al servidor. Recientemente comparé a Hummingbird con otros complementos de caché populares, y Hummingbird los ha optimizado a todos.
Use un caché intermedio CDN, como las redes de entrega de contenido, puede ayudarlo a servir más activos de un usuario más cercano al usuario.
Use JavaScript sabiamente
Elimine JavaScript innecesario y porciones no utilizadas de los archivos.
Divide grandes archivos JavaScript.
Postpone la carga de archivos JavaScript con baja prioridad.
Reducir y comprimir archivos JavaScript
Smush Pro tiene un CDN que puede ayudarlo a subir perezosamente sus imágenes. Hummingbird puede ayudar a activar el caché del navegador. Puede obtener un intento gratuito para ambos aquí para mejorar su puntaje de Google PageSpeed ​​Insights.
Por favor, dígame en los comentarios si ha encontrado este elemento útil o si tiene consejos adicionales para mejorar la experiencia de uso de su sitio:
Google PageSpeed ​​Insights