INP (Interacción a la siguiente pintura): Vitalos de la Web Core de -Dephth Core

¿Alguna vez ... al ingresar al sitio web y encontrar un botón "Agregar la canasta" que se presiona, aún así, el menú desplegable que se hace clic o el cuadro de búsqueda que se ha imprimido pero no ha pasado nada? ¡La sensación de "retraso" está frustrada como esta es lo que Google está a punto de llegar en "Revolución" con los últimos vitales de la Web Core llamados "INP" o interactivo para la próxima pintura!

Si usted es propietario del sitio web, vendedor o desarrolladores web que han pensado que nuestro sitio web es lo suficientemente rápido porque la descarga ... hoy puede tener que pensar de nuevo porque INP no se mide solo "la velocidad de carga" sino la medida de la "velocidad de respuesta" para las acciones de cada usuario. ¡Lo cual está a punto de convertirse en un factor importante que afecta tanto la experiencia del usuario (UX) como su SEO directamente! Este artículo lo llevará a Inph INP en un fácil y entendido. Con una guía, el método de optimización, hecho a mano para cambiar el sitio web que solía "retrasar" para "suavizar" hasta que el cliente deba ser impresionado.

El verdadero problema en la vida: el sitio web "todavía" es como el personal.

Imagine que encuentra un anuncio de productos muy interesante. Haga clic rápidamente en el sitio web. La página web se cargó maravillosamente en un abrir y cerrar de ojos. Encuentra el producto que desea presionar el botón "Elija el color" ... y ... en silencio ... no pasó nada que intentes presionar de nuevo ... todavía todavía. Comienza a frustrarse y no está seguro de si el sitio web está roto o Internet. Tienes un problema. Al final, acabas de cerrar la ventana. Luego vaya a comprar en otros sitios web en su lugar

Esta es la "pesadilla" del sitio web de comercio electrónico y todos los sitios web que necesitan conversión. El problema "Haga clic y mantiene y" Presione y luego retrase "crea una tremenda experiencia mala. Destruye la confiabilidad y nos hace perder a nuestros clientes desafortunadamente, aunque usar mucho dinero para disparar o hacer SEO, un pequeño problema llamado" respuesta lenta ". Este es un factor importante que hace que su dinero" desperdicie "e INP es una herramienta que Google creó este problema específicamente.

‍

Solicitud de ilustraciones: los gráficos muestran al usuario. Mientras los dedos se sumergen en el botón en la pantalla móvil sin ninguna respuesta con el símbolo de reloj de arena o el icono de carga girando

¿Por qué ocurrió ese problema? "Un empleado" llamado hilo principal

La razón principal por la que nuestro sitio web "respuesta lenta" o alta INP proviene del navegador. Los "empleados importantes" son el único llamado "hilo principal". Este empleado es responsable de casi todo. Desde la pantalla de la página web (diseño de renderizado), CSS Code Management, hasta la compleja ejecución de JavaScript

Ahora piense en si pedimos el hilo principal para que trabaje duro durante mucho tiempo, como el procesamiento de JavaScript grande para crear una hermosa animación o una gran cantidad de gestión de datos de terceros, mientras que el hilo principal es "cabeza giratoria" con estos trabajos. Luego, el usuario presionó para "hacer clic" en el botón o "tipo". El mensaje entra. El hilo principal no tendrá una mano vacía para "recibir invitados" o responder a esa orden de inmediato. Por lo tanto, tiene que esperar a que el trabajo se complete primero. Recurrir a lo que el usuario hace el resultado es el "retraso" o "sobresaliente" que sentimos. Este problema generalmente es causado por:

• JavaScript que funciona durante demasiado tiempo (tareas largas): scripts que tardan más de 50 milisegundos en bloquear el hilo principal de inmediato.
• DOM es grande y complejo: cuanto más elemento tenga muchos cálculos para mostrar cada nuevo resultado, cuanto más tiempo lleva.
• Las devoluciones de llamada de eventos innuales: escribir código que se ocupa de varios eventos (como Click, Scroll, KeyPress) no es lo suficientemente bueno.
• Scripts de terceros que son pesados: los scripts externos como los sistemas de chat, el análisis o los anuncios también pueden competir por los recursos de los hilos principales.

Comprender los vitales web centrales es una base importante para resolver estos problemas.

‍

Solicitud para ilustraciones: imágenes infográficas fáciles. Mostrar "hilo principal" es como el único empleado que está haciendo un gran documento (JavaScript) hasta que no hay tiempo para contestar el teléfono (interacción del usuario) que está al lado.

Si se deja, ¿cómo afectará: no solo "molesto" sino el "desastre" del negocio?

Tener un alto valor de INP o el sitio web responde lentamente no solo afecta al usuario "frustrado", sino que tiene un impacto directo en el negocio y el SEO a largo plazo.

• Tasa de conversión. Dang: cuando los usuarios se encuentran usan problemas desde el principio, como presionar el botón de selección del producto. O complete el formulario la oportunidad para que alcance el paso final para "pagar" casi cero.
• La tasa de límite es alta: la primera impresión es importante. Si su sitio web crea una mala experiencia, el usuario presionará de inmediato. Y no pensé en volver de nuevo
• Rompe la imagen de la marca: sitios web lentos y difíciles. Reflejando la ignorancia y la no profesional destruir la fiabilidad que se acumula
• Ranking de SEO: Desde marzo de 2024, Google ha traído a INP como uno de los vitales de la Web Core oficial. Para reemplazar el FID (primera demora de entrada). Esto significa que el sitio web que tiene un INP malo se reducirá directamente en la página de búsqueda, especialmente en el sitio web para el negocio B2B que es confiable es lo más importante.

En otras palabras, dejar que el sitio web tenga un alto valor de INP, como abrir una hermosa tienda. Pero bloqueó la puerta de permitir que los clientes ingresen es destruir las oportunidades de negocios y reducir la eficiencia de todo el marketing que ha hecho.

‍

Solicitud de ilustraciones: el gráfico que muestra la línea de tasa de conversión se desplome mientras la línea de velocidad de bondce aumenta con el icono INP que es rojo en el fondo.

¿Hay alguna solución? Y dónde comenzar: abra el libro de texto completo de optimizar INP

La buena noticia es que los altos problemas de INP se pueden resolver y mejorar. La clave para el "retorno independiente" al hilo principal para que esté lista para responder a los usuarios en cualquier momento. Debemos comenzar "medir los resultados" para encontrar la fuente del problema primero. Y luego arregle estas pautas

1. Medir y encontrar una interacción que tenga un problema:

• Use herramientas de datos de laboratorio: por ejemplo, Google PageSpeed Insights o Usar Chrome DevTools (Performance) para simular y encontrar las "tareas largas" que ocurren.
• Use las herramientas de datos de campo: consulte la información de los usuarios reales a través del Informe de Experiencia de usuario de Chrome (Crux) o instale la biblioteca de Google para almacenar datos INP directamente desde su usuario.

2. Optimizar las técnicas de código (corazón de reducción de INP):

• Divida el gran trabajo en subcascaras: la técnica más importante es la "rendición", liberando el hilo principal para estar libre de vez en cuando. En lugar de ordenar que funcione durante mucho tiempo, podemos usar el `setTimeout` para retrasar la función de algunas funciones para hacer que el ritmo principal del hilo" respire "y responder a los usuarios. Lea más de la fuente de datos oficial en Web.dev por Google.
• Evite la paliza de diseño: no escriba un script que ordene leer el tamaño del elemento y escriba un nuevo valor alternando en el mismo bucle. Porque obligó al navegador a calcular repetidamente el diseño innecesariamente
• Reduzca la complejidad de DOM: cuanto menos elemento tiene, más elemento. El navegador es más fácil y más rápido. Intente hacer que la estructura HTML sea lo más simple posible.
• Usando el `Content-Visibilidad SP y '` contiene en CSS: para decirle al navegador que cualquier parte que no necesite renderizar o puede calcularse por separado de otras partes. Que ayuda a reducir mucho la carga de la pantalla
• Administre el script de terceros: Cargue el script según sea necesario y use el atributo 'async` o diferir' para no bloquear la página principal de la página web. Aprender a arreglar los recursos de bloqueo de renderización ayudará mucho en esta parte.

Porque la información en profundidad del equipo de búsqueda de Google directamente se puede estudiar desde la introducción INP hasta los vitales de la Web Core.

‍

Solicitud de ilustraciones: infografía que muestra optimizar INP como 3 pasos: 1. Medir (un icono de gafas ampliado) 2. Identificar (Aviación objetivo) 3.

Ejemplos de lo real que solía tener éxito: el sitio web de comercio electrónico que devolvió "Haga clic en el dedo"

Para ver claramente la imagen, me gustaría levantar el caso del sitio web de comercio electrónico. Venda una ropa de moda que ha encontrado altos problemas de INP. Su sitio web tiene características. Los usuarios "Filtrar" (muy complejos) pueden elegir ropa, color, tamaño y rango de precios.

El problema original: cada vez que el usuario elija un filtro, como elegir "rojo", toda la página se mantendrá durante 1-2 segundos para esperar a que el JavaScript procese y muestre todos los productos nuevos. Lo que crea mucha molestia que muchos clientes hacen clic para elegir el filtro uno al lado del otro y el sitio web es demasiado largo, lo que hace que la tasa de conversión del deber sea la más importante.

Optimizar INP: El equipo de desarrollo ha llegado a editar utilizando la técnica "Romper tareas largas". Cambiaron de ejecutar todo el código a la vez. Se divide en partes utilizando el 'setTimeout'. Después del usuario, haga clic en Filtro, el sistema mostrará la giradora de carga inmediatamente (responde inmediatamente) y luego dejará que JavaScript extraiga la información y represente el nuevo producto en segundo plano.

Resultados sorprendentes: el INP de la página del producto se reduce de ~ 800 ms a solo ~ 150 ms (de "mal" se vuelve "bueno"). La experiencia de uso sin problemas es como una aplicación móvil. El usuario puede presionar para seleccionar muchos filtros continuamente sin sentirse tropezando. ** La sesión que usa el filtro tiene una tasa de conversión de hasta el 25%** y ** La tasa de rebote de la página cae 15%** Este es el poder de optimizar INP que realmente puede cambiar la experiencia de los usuarios y crear resultados comerciales. Igual que aumentar la velocidad para las tiendas en Shopify que afectan directamente las ventas.

‍

Solicitud de ilustraciones: la página de antes y después de la página de comercio electrónico. El primer lado muestra al usuario. Irritado con el filtro en el costado del después de mostrar al usuario.

Si quieres seguir, ¿qué hacer? (Se puede usar de inmediato): Lista de verificación. Verificación de salud en su sitio web.

¿Listo para cambiar su sitio web "Haga clic en el dedo" todavía? No es necesario esperar a que el problema se acumule. Intente seguir esta lista de verificación fácilmente para comenzar la optimización INP inmediatamente.

1. Vaya a Google PageSpeed Insights: escriba su sitio web. Y mire el tema de "diagnosticar problemas de rendimiento", desplácese hacia abajo para ver la métrica llamada Interactive to Next Paint (INP). ¿Cuánto es tu valor? (Bueno = por debajo de 200 ms, debe mejorarse = 200-500 ms, malo = superior a 500 ms)
2. Encuentre la interacción Slowst: PageSpeed Insights a menudo dice qué interacción (como hacer clic en el botón, abrir el menú) que lleva el tiempo más largo. Ese es tu primer objetivo.
3. Hable con su desarrollador (o abra el DevTools): envíe este informe a los desarrolladores. O si puede hacerlo usted mismo, abra el Chrome DevTools a la pestaña Performance e intente hacer una interacción que tenga un problema en busca de una banda roja larga. Que tiene una señal de que la "tarea larga" es la
4. Comience con lo más fácil: trate de buscar JavaScript que funcione innecesariamente de inmediato. La página web está terminada. Intente usar el `setTimeout` para retrasar su operación durante 1-2 segundos.
5. Verifique los scripts de terceros: ¿Tiene un complemento o script? Como un sistema de chat que no tiene usuario o mapa de calor que no se haya abierto. Intente cerrar temporalmente y medir los resultados nuevamente.
6. Consulte a un especialista: si el problema es complicado, invertir con expertos en desarrollo de sitios web avanzados para verificar y editar la estructura del código puede ser la inversión más valiosa a largo plazo.

‍

Solicite ilustraciones: imágenes de lista de verificación con elementos de inspección de INP, con cada icono de componente, como el icono de PageSpeed Insights, el icono de código, el icono de plug -IN e íconos expertos.

Preguntas que las personas tienden a preguntarse y las respuestas que se limpian

Por lo tanto, puede entender el INP a fondo. He compilado una pregunta común con una respuesta clara.

¿En qué se diferencia INP de FID (primera demora de entrada), cómo son los viejos vitales de la web?
FID solo "Primera entrada" (primera entrada), pero INP la medición "cada interactiva" que ocurre a lo largo del uso del usuario. Desde el primer clic hasta el clic final, INP es un representante mucho mejor de la experiencia general del usuario.

¿Cuánto debería ser el "buen" valor de INP?
Según los criterios de Google, los buenos valores de INP deberían ser inferiores a 200 miliseses (MS), si entre 200 y 500 ms, se considera renovado, y si más de 500 ms se considera malo.

¿No soy un programador que pueda mejorar el INP por sí mismo?
Algunas mejoras pueden ser difíciles si no hay conocimiento del código. Pero lo que puede hacer es 1. Use herramientas como PageSpeed Insights para "diagnosticar" problemas. 2. Reduzca el número de scripts externos innecesarios o de plug -IN. 3. Elija el tema o la temperatura que escriba bien el código y enfatice el rendimiento y 4.

Mi sitio web es solo una información ordinaria. ¿No tiene que estar interesado en INP?
¡Es absolutamente necesario! Independientemente del tipo de sitio web, que tenga una interacción suave, como presionar el menú, hacer clic para reproducir video o incluso presionar el botón de aceptación de cookies, todo afecta la confiabilidad y la experiencia del usuario. Y lo más importante, afecta directamente sus clasificaciones de SEO.

‍

Solicitud de ilustraciones: el icono en forma de Libra con un signo de interrogación (FAQ) con el personaje, los programadores y los especialistas en marketing están de pie y hablando.

Resumen para ser fácil de entender + quiero intentar hacer

En resumen, la interacción a la siguiente pintura (INP) no es solo un "dolor de cabeza técnico" que es una "reflexión de los usuarios" que Google usa como un nuevo estándar para medir la calidad del sitio web. Su corazón es fácil: cuando el usuario hace algo en nuestro sitio web. Debería ver la respuesta de inmediato.

Salir del sitio web con High INP es como ignorar la voz del cliente. Destruye toda la experiencia, confiabilidad, ventas y clasificación de SEO. La inversión es efectiva para optimizar INP hoy, no solo hacer la tarea, enviar Google, sino que es una base sólida para su negocio a largo plazo. Muestra respeto por todos los usuarios y sentimientos.

No espere a que su sitio web "retrase" hasta que pierda más clientes. Intente usar la lista de verificación que di para consultar su sitio web hoy. O si desea un ayudante para hacer auditoría de optimización de comercio electrónico, es un excelente punto de partida para buscar y resolver todos los problemas profundos. ¡Es hora de cambiar cada clic del usuario en una impresión!

‍

Solicitud de ilustraciones: las imágenes inspiradoras muestran la flecha que se eleva del icono del mouse que hace clic. Se convirtió en un gráfico de ventas creciente con el telón de fondo de un sitio web que se ve limpio y rápido

‍