Dominar INP: cómo aprovechar la visibilidad del contenido para mejorar la capacidad de respuesta

Publicado: 2024-01-06

¿Quiere conocer el secreto para lograr páginas web responsivas, una experiencia de usuario más fluida y una excelente puntuación INP?

Es un trabajo de renderizado eficiente.

Esto generalmente se logra controlando la representación del contenido fuera de la pantalla, liberando al navegador de ejecutar tareas que no son necesarias inmediatamente durante la carga inicial de la página.

En las siguientes líneas, aprenderá cómo aprovechar la propiedad CSS de visibilidad del contenido para mejorar significativamente el rendimiento de su sitio, aumentar sus Core Web Vitals y mejorar la experiencia del usuario.

Sigue leyendo.


Cuantificación de la capacidad de respuesta con interacción con la siguiente pintura (INP)

El 90% del tiempo que un usuario pasa en una página se dedica después de que se carga.

Dicho de otra manera, tan crucial como invertir esfuerzos en acelerar la carga inicial de la página, es igualmente importante cómo se comporta su sitio web una vez que el usuario comienza a interactuar con él.

¿Tiene fallas? ¿Proporciona un desplazamiento suave? ¿Es responsivo?

Todas las respuestas están ocultas detrás de su puntuación INP.

Interacción con Next Paint en PSI

La interacción con Next Paint es una métrica de rendimiento centrada en el usuario y sucesora de First Input Delay, que se utiliza para evaluar la capacidad de respuesta de una página web. Mide específicamente el tiempo que tarda una página web en responder visualmente a la entrada de un usuario.

La palabra clave aquí es "visualmente".

Nadie espera que todas sus interacciones se ejecuten en un par de milisegundos. Eso simplemente no es posible. Todo lo que necesita hacer para tener una buena puntuación INP y Core Web Vitals es proporcionar retroalimentación visual inmediata a las acciones de sus visitantes en su sitio web.

Ejemplo de mala capacidad de respuesta frente a buena capacidad de respuesta

Volviendo al principio de nuestro artículo, asegurarse de que el navegador pueda representar sus páginas de manera eficiente es la forma segura de lograr excelentes puntuaciones y una experiencia en el mundo real.

Y los dos factores críticos que afectan en gran medida la velocidad de renderizado son el hilo principal y el tamaño de su DOM.


El papel del hilo principal y el tamaño del DOM

Hagamos un poco de limpieza antes de profundizar en los tecnicismos.

Su puntuación INP depende de la rapidez con la que el navegador devuelve comentarios visuales al usuario después de interactuar con su sitio web.

Para que el navegador pueda recibir, procesar y presentar rápidamente los comentarios, su hilo principal debe estar libre de tareas de larga duración.

Algunos de los mayores culpables incluyen recursos pesados ​​de JavaScript y, por último, pero no menos importante, un gran tamaño de DOM.

Este es el proceso. Ahora, desmitifiquemos cada parte.

El hilo principal

El hilo principal es el hilo principal de ejecución que maneja la mayoría de las tareas críticas asociadas con la representación de una página web, que incluyen:

  • HTML, análisis de CSS
  • Ejecución de JavaScript
  • construcción del modelo de objetos de documento (DOM)
  • agregando estilos calculados
  • producir el árbol de diseño
  • creando registros de pintura

Tareas del hilo principal

Cuando una tarea tarda más de 50 ms en ejecutarse, se considera una tarea larga . Esto sucede principalmente debido a la gran cantidad de archivos JavaScript que se ejecutan o al gran tamaño de DOM.

Debes saber que el hilo principal sólo puede ejecutar una tarea a la vez. Por lo tanto, cuanto más largas sean las tareas, más lento aparecerá su sitio web.

¿Por qué?

Imagine que tiene una página web con una función interactiva, como una visualización de datos compleja o una interfaz de usuario dinámica. El usuario desencadena una acción, por ejemplo, al hacer clic en un botón, lo que inicia un cálculo pesado de JavaScript (tarda más de 50 ms en ejecutarse).

Esto plantea automáticamente varios desafíos para el rendimiento y la capacidad de respuesta de su sitio:

  1. Este largo cálculo bloquea el hilo, impidiéndole realizar otras tareas como manejar entradas de usuario, generar actualizaciones o ejecutar otros scripts.
  2. Mientras se realiza el cálculo, el usuario puede intentar interactuar con otras partes de la página: desplazándose, haciendo clic en otros botones o escribiendo en los campos de entrada. Sin embargo, estas acciones no se procesarán de inmediato y la página parecerá congelada o no responde.
  3. Si se suponía que la interacción del usuario desencadenaría un cambio visual (como resaltar un botón al hacer clic), esta retroalimentación se retrasará hasta que se complete la tarea de larga duración.

En pocas palabras, es fundamental descargar tareas del hilo principal y conocemos al menos 7 formas de hacerlo.

El DOM (modelo de objetos de documento)

Una de las tareas del hilo principal es analizar el HTML.

Esto significa que el navegador convierte los datos (marcado HTML) en DOM.

El DOM representa la estructura de la página como un árbol de objetos que el navegador utiliza para representar contenido en la pantalla.

Un DOM más grande generalmente significa más nodos (elementos, texto, comentarios, etc.) para que los administre el navegador.

estructura de árbol DOM

Cuando tienes un tamaño DOM grande, el hilo principal tiene más trabajo por hacer. Se necesita más tiempo para analizar el HTML en un DOM, aplicar estilos CSS, diseñar la página y volver a representar partes de la página cuando se producen cambios (como mediante manipulaciones de JavaScript).

Los árboles DOM grandes también pueden ralentizar las interacciones de la página porque cada interacción del usuario (como clics, desplazamientos y escritura) a menudo requiere que el navegador vuelva a calcular los estilos y el diseño de partes del DOM.

Entonces, una buena regla general es que una página tenga untamaño DOM de hasta 1400 nodos.

Es bueno saberlo: similar al árbol DOM, CSSOM (modelo de objetos CSS) es una representación de la estructura de las hojas de estilos en cascada (CSS) como una estructura jerárquica similar a un árbol en la memoria.Tener muchos archivos CSS grandes también puede afectar negativamente la capacidad de respuesta y el rendimiento de su sitio.


Una forma de mejorar la eficiencia del hilo principal y mitigar el impacto de un DOM grande es controlar la representación del contenido fuera de la pantalla.

Y esta propiedad CSS puede ayudarte a hacerlo…

Aprovecharla visibilidad del contenidopara mejorar la representación

La propiedad CSS de visibilidad del contenido es una adición innovadora a la caja de herramientas de optimización del rendimiento web.

Esta propiedad, específicamente en su configuración automática, juega un papel fundamental en la mejora de la eficiencia de representación de las páginas web. El atributo content-visibility: auto informa al navegador que puede omitir los cálculos de renderizado y diseño de un elemento hasta que sea necesario, que generalmente es cuando el elemento ingresa a la ventana gráfica.

Cuando se aplica, content-visibility: auto permite que el navegador optimice la carga de trabajo de renderizado. Al diferir la representación de contenido no visible, la visibilidad del contenido disminuye significativamente el tiempo de carga inicial y reduce la carga de trabajo en el hilo principal, lo que genera velocidades de representación más rápidas y una mejor capacidad de respuesta de la página web.

Un ejemplo práctico donde la visibilidad del contenido: auto brilla es la optimización de la interacción con Next Paint.

Por ejemplo, en una publicación de blog con múltiples comentarios o en un sitio de noticias de desplazamiento largo, aplicar visibilidad de contenido: automático a comentarios individuales o artículos de noticias que no se ven inmediatamente garantiza que el navegador siga respondiendo a las interacciones del usuario y cargue contenido visible rápidamente.

A continuación se muestra una forma sencilla de implementarlo:

ejemplo de visibilidad de contenido

Es bueno saberlo: también necesita usarcontiene-intrínseco-tamañopara reservar espacio para los elementos no renderizados. Esto le dice al navegador cuáles son las dimensiones renderizadas del contenido omitido. Cuanto más precisamente configures estos valores, más fluida será la experiencia al final.


Sin embargo, debes saber que no es una solución única para todos. Debe abordar la visibilidad del contenido con equilibrio, probando sus efectos en varios dispositivos y navegadores para garantizar un rendimiento constante y evitar cambios de diseño imprevistos o problemas de accesibilidad.

Visibilidad del contenido en acción

Durante nuestro seminario web con Google sobre "Optimización de INP", tuvimos la oportunidad de demostrar el impacto de la visibilidad del contenido y cómo NitroPack lo aplica.

Identificamos la causa raíz del INP deficiente utilizando varias herramientas: la extensión Web Vitals, Chrome DevTools y Performance Profiler.

En el proceso, descubrimos que los principales culpables que causaron una puntuación INP de 272 ms fueron dos eventos de "estilo Recalcular" que tardaron 69,87 ms en procesarse y afectaron a 1139 elementos.

Resultados INP sin NitroPack

Al habilitar NitroPack en el sitio web, nuestro servicio detectó automáticamente los elementos que se beneficiarían de la visibilidad del contenido: auto . Después de una configuración rápida, logramos reducir el tiempo de renderizado de las tareas largas y la cantidad de elementos afectados más de dos veces:

Puntuación INP con NitroPack

Además, la puntuación del INP mejoró de “necesita mejorar” a “buena”.

Prepare su sitio web para el futuro y pase INP en piloto automático. Obtenga NitroPack ahora →


Consejos adicionales para optimizar INP

Sin duda, la visibilidad del contenido ofrece grandes mejoras de rendimiento con un mínimo esfuerzo.

Sin embargo, en algunos casos, es posible que necesite potencia de rendimiento adicional para garantizar una capacidad de respuesta fluida y buenas puntuaciones de INP. Si eso sucede, aquí hay otras estrategias de optimización de INP que puede utilizar:

1. Ceder al hilo principal

Como ya sabes, el rendimiento de tu sitio depende en gran medida de qué tan ocupado esté el hilo principal. Ceder al hilo principal se refiere a la práctica de dividir deliberadamente tareas de larga duración en partes más pequeñas y manejables para evitar bloquear el hilo principal durante períodos prolongados.

Cediendo al hilo principal

Esto se puede lograr utilizando funciones de rendimiento como:

  • planificador.rendimiento()
  • establecer tiempo de espera
  • solicitudAnimaciónMarco
  • Solicitar devolución de llamada inactiva

2. Reduzca el tamaño de su DOM

El segundo culpable de la capacidad de respuesta mencionado fue el tamaño del DOM. Tener un DOM grande puede dificultar significativamente el paso de INP. Para evitar esto, es crucial minimizar su tamaño o, más específicamente, limitar la profundidad de su DOM.

Este objetivo se puede lograr a través de varias estrategias:

  • Manténgase alejado de complementos y temas que estén mal codificados.
  • Limite el uso de JavaScript para crear nodos DOM.
  • Opte por alternativas a los creadores de páginas conocidos por producir HTML excesivo.
  • Considere dividir un sitio web de una sola página en varias páginas.
  • Evite ocultar elementos innecesarios con la visualización: ninguna propiedad CSS.

3. Evite la superposición de interacciones

La superposición de interacciones ocurre cuando un usuario interactúa con otro elemento de la página antes de que se complete la representación de la primera interacción. Esto sucede a menudo durante la escritura rápida en campos de formulario, donde se pulsan varias teclas rápidamente.

Para optimizar esto, considere:

  • Implementar la eliminación de rebotes en las entradas para reducir la frecuencia de devolución de llamadas de eventos.
  • Utilizar AbortController para cancelar solicitudes de recuperación en curso, evitando la sobrecarga del hilo principal debido a devoluciones de llamadas de recuperación excesivas.

Envolver

Recuerde: INP consiste en permitir que el navegador pinte la siguiente pantalla lo más rápido posible.

Los usuarios quieren saber que sus acciones se están procesando y que algo está sucediendo en segundo plano.

Y combinar capacidades del navegador como la visibilidad del contenido con potentes soluciones de rendimiento web como NitroPack significa que cubre todo el espectro de la experiencia del usuario, desde la carga inicial hasta la navegación por todas sus páginas.

Pruebe NitroPack gratis →