WP Rocket 3.17: Mejore su métrica INP con renderizado diferido automático
Publicado: 2024-09-26¿Alguna vez ha sentido que su sitio web tarda en responder, especialmente si intenta interactuar con páginas de blogs largas o páginas de productos de comercio electrónico? La optimización del rendimiento es un desafío, y lo es aún más cuando se trata de mejorar métricas complejas relacionadas con la experiencia del usuario, como la Interacción con Next Paint (INP). INP es la nueva métrica Core Web Vital que mide la capacidad de respuesta de las páginas web y desempeña un papel clave en la mejora de la velocidad, la experiencia del usuario y el SEO; en otras palabras, no puede ignorarla.
Si ha estado trabajando arduamente para mejorar la velocidad de su sitio web y la experiencia del usuario para lograr una mejor calificación INP, le alegrará saber más sobre nuestra nueva versión principal y su nueva función automatizada. ¡Saluda a WP Rocket 3.17!
Nuestra nueva versión principal se centra en optimizar automáticamente la forma en que su sitio web presenta el contenido a medida que los visitantes se desplazan. Es especialmente útil para blogs, tiendas en línea y cualquier sitio con mucho contenido para explorar.
Estamos encantados de presentar WP Rocket 3.17 por dos razones.
En primer lugar, la nueva función mejorará la métrica INP y la velocidad percibida, especialmente en dispositivos móviles. También puede tener un impacto positivo en otras métricas clave, como las calificaciones de Pintura con contenido más grande y Primera pintura con contenido. Optimizar las métricas relacionadas con la experiencia del usuario también puede mejorar la tasa de conversión, que es el objetivo final de hacer que tu sitio web sea más rápido, ¿verdad?
Además, WP Rocket es el primer complemento que ofrece una optimización tan poderosa y automática en todas las páginas del sitio web con precisión.
Descubre todo en nuestra entrada de blog, o mira el vídeo.
¿Qué es el renderizado y su impacto en el rendimiento?
Para comprender cómo WP Rocket 3.17 puede mejorar el rendimiento de su sitio web, comencemos explicando el renderizado. Cuando se carga su página web, aparece el renderizado, es decir, la forma en que el navegador convierte el código de su sitio web en los elementos visuales que los usuarios ven en su pantalla.
La representación del navegador implica varias etapas que comienzan cuando el navegador recibe el archivo HTML y crea el árbol DOM, que es la representación de estructura de árbol de la página web. La última etapa es la pintura: es cuando el navegador pinta cada elemento en la pantalla y los usuarios pueden ver la página web terminada.
Como siempre sucede con la optimización del rendimiento web, hay un problema. De hecho, el proceso de renderizado puede ser un desafío de rendimiento porque requiere que el navegador maneje muchas tareas a la vez. Esta actividad multitarea ocurre en lo que se llama el hilo principal, que se ve afectado principalmente por archivos JavaScript.
Cuando el hilo principal está demasiado ocupado, genera tareas largas. Estas largas tareas son como atascos de tráfico que ralentizan la capacidad de respuesta de su página y afectan métricas como la interacción con Next Paint, una métrica crucial de Core Web Vital que mide la rapidez con la que su página responde a las interacciones del usuario.
Representación y rendimiento
Cuando hablamos de renderizado y su impacto en el rendimiento, nos referimos especialmente a dos partes del proceso: el renderizado y la pintura, como viste en la sección anterior. Estas son las etapas en las que el navegador trabaja duro para mostrar el contenido en la pantalla y las que contribuyen a la puntuación INP y la velocidad percibida.
Hay varias variables que pueden afectar el rendimiento durante este proceso. Por nombrar algunos: el tamaño del DOM, la velocidad de ejecución de JavaScript y las animaciones. Cuanto mayor sea el contenido de la página, más desafiante será la optimización de la representación.
Ahora que sabes que el renderizado es crucial para la velocidad y debe mejorarse, aprendamos cómo hacerlo posible.
Conozca la propiedad CSS de visibilidad del contenido
Una forma eficaz de optimizar la representación del navegador (por lo tanto, la velocidad y la capacidad de respuesta) es aprovechar la propiedad CSS de visibilidad del contenido. Esta propiedad le dice al navegador que no muestre todas las partes del contenido de la página de inmediato, sino que espere hasta que el usuario esté a punto de verlas.
¿Alguna vez has jugado videojuegos? Si es así, sabes que el mundo entero no se carga al mismo tiempo. En cambio, las nuevas escenas y su fondo sólo se muestran –o renderizan– a medida que avanzas. Esto es exactamente lo que permite hacer la propiedad CSS de visibilidad del contenido.
Entonces, ¿cómo ayuda esto? Al utilizar la visibilidad del contenido, el navegador tiene menos trabajo que hacer al mismo tiempo. En lugar de intentar renderizar todo de inmediato, puede centrarse en lo que es más importante en este momento. Esto significa:
- Informa al navegador que omita renderizar algunos elementos hasta que sean necesarios, por lo que el navegador tiene menos tareas largas con las que lidiar, especialmente cuando se trata de renderizar y pintar.
- La página se carga más rápido porque las partes más visibles están listas rápidamente.
- La página responde más rápidamente cuando los usuarios interactúan con ella.
Como resultado, su sitio web ofrece una experiencia de usuario mejorada. Los visitantes verán su contenido más rápido y podrán interactuar con la página mientras se desplazan y hacen clic.
La buena noticia es que la propiedad de visibilidad del contenido ahora es compatible con todos los principales navegadores. Esto significa que esta poderosa característica puede mejorar el rendimiento de un sitio web para casi todos los usuarios, independientemente de su navegador.
Al aplicar la propiedad de visibilidad de contenido en WP Rocket 3.17, presentamos la función de renderizado diferido automático. Sigue leyendo para saber lo que implica.
3.17: Presentación del renderizado diferido automático
Nuestra nueva versión principal hace posible el renderizado diferido automáticamente. Como siempre con nuestros nuevos lanzamientos y mejoras, el objetivo es ayudarlo a mejorar el rendimiento de su sitio web de la manera más fácil, sin importar sus habilidades técnicas y si domina las técnicas de optimización del rendimiento web.
Nos centramos en funciones que pueden tener un impacto significativo en la velocidad y la experiencia del usuario, y WP Rocket 3.17 no es una excepción.
En primer lugar, la nueva versión puede mejorar significativamente su puntuación INP, haciendo que su sitio web responda mejor a los visitantes. También puede mejorar ligeramente sus puntuaciones de Pintura con contenido más grande y Primera pintura con contenido, aunque esto sería un efecto secundario más positivo.
La nueva función es segura de implementar y nunca afectará a sus visitantes. Si un navegador no admite la propiedad de visibilidad de contenido porque es una versión anterior, no sucederá nada, incluso si WP Rocket 3.17 está activado.
La función también supone un riesgo bajo para su sitio web: es muy poco probable que rompa algo.
Como nota al margen, consideramos lanzar una función de este tipo hace tres años. En ese momento, la función se basaba en JavaScript y necesitaba una prueba a largo plazo para verificar el impacto potencial en SEO. Mientras tanto, la propiedad CSS de visibilidad del contenido tenía más soporte y ofrecía una solución viable y más sencilla. Dado que INP se está volviendo cada vez más relevante para la optimización del rendimiento web, lanzar esta función se convirtió en una obviedad.
Cómo funciona el renderizado diferido automático
Volvamos a nuestra analogía con los videojuegos.
Imagina que estás jugando un juego. A medida que avanzas con tu personaje, el juego muestra nuevas áreas antes de llegar a ellas. Así es exactamente como funciona el renderizado diferido automático para su sitio web.
La introducción del renderizado diferido automático ha sido posible gracias al anterior, WP Rocket 3.16. Nuestra versión anterior introdujo 2 mejoras cruciales:
- Activamos el caché móvil separado por defecto.
- Introdujimos la detección y optimización de las imágenes críticas (imágenes en la mitad superior de la página) gracias a una baliza que recopila información real sobre los elementos a optimizar. La característica 3.17 simplemente ampliará lo que rastrea la baliza para proporcionar información precisa sobre el diseño y hacer posible la nueva optimización.
Y esto es lo que sucede cuando se habilita WP Rocket 3.17.
Cuando un usuario llega a su página, la nueva característica no permitirá que el navegador muestre todo inmediatamente. Por el contrario, el navegador mostrará los elementos de la página sólo cuando los usuarios estén cerca de ese punto de la página, como si el juego sólo cargara la siguiente área cuando te acercas a ella. Cuanto más larga sea la página, más eficiente será el renderizado diferido.
Por eso la nueva versión es especialmente beneficiosa para:
- Páginas largas con mucho contenido, como publicaciones de blogs o listados de productos.
- Páginas con elementos complejos que tardan más en renderizarse, como animaciones no compuestas (por ejemplo, animaciones de lienzo y fondos de vídeo).
WP Rocket es el primer complemento que aplica con precisión esta función automática en todas sus páginas. De hecho, WP Rocket 3.17 analiza la estructura de la página y detecta elementos donde se puede aplicar el renderizado diferido. El complemento procesa cada página individualmente, tanto para escritorio como para dispositivos móviles, por separado, para garantizar que obtengamos los elementos precisos sin perder ninguna oportunidad.
No hay ninguna opción para marcar; no necesita hacer nada para activarlo. Tan pronto como WP Rocket se actualice a 3.17, funcionará.
Cómo el renderizado diferido puede mejorar la interacción con el siguiente grado de pintura
Veamos ahora cómo WP Rocket 3.17 puede mejorar su calificación INP.
Lo primero es lo primero: según Google, una buena capacidad de respuesta significa que su puntuación INP debe estar por debajo de 200 milisegundos.
Antes de profundizar en los resultados de las pruebas que realizamos, también es importante resaltar que las mejoras de rendimiento que puede lograr su sitio web dependen de su nivel de optimización actual. Si su sitio ya está bien optimizado, es posible que vea mejoras sutiles en su calificación INP. Sin embargo, si hay margen de mejora, podría experimentar un aumento más espectacular en la puntuación INP y en las calificaciones LCP y FCP.
Para medir la mejora del rendimiento de INP, recomendamos utilizar una herramienta como INP Debugger de DebugBear, que le brindará una imagen clara de la capacidad de respuesta de su sitio antes y después de habilitar WP Rocket 3.17 y su función automática Lazy Rendering.
Si se pregunta por qué esta vez no utilizaremos la herramienta PageSpeed Insights, que se basa en Lighthouse, es porque el INP es una métrica de campo y se calcula en función de la interacción. Y Lighthouse no lo mide, al menos por ahora.
Veamos un ejemplo del mundo real para mostrarle las posibles mejoras que puede aportar WP Rocket 3.17. Probamos un sitio web de comercio electrónico con una gran cantidad de contenido por el que desplazarse: múltiples secciones, imágenes de productos y listados de artículos. Para fines de prueba, también agregamos una carga de trabajo de JavaScript al sitio web para mantener ocupado el hilo principal y verificar la eficiencia del renderizado diferido para mejorar la situación.
Esto es lo que encontramos.
Antes de habilitar WP Rocket 3.17 con renderizado diferido automático
El resultado INP es 204 ms. Como puede ver, el resultado resalta una necesidad de mejora:
Desde un punto de vista más técnico, también analizamos la representación del navegador en la pestaña Rendimiento de Chrome DevTool. La captura de pantalla destaca las largas tareas y el tiempo que lleva renderizar: 2610 ms.
Después de habilitar WP Rocket 3.17 con renderizado diferido automático
El resultado de INP ahora es 146 ms. Esta vez, la calificación del INP está en color verde.
Esta vez, la pestaña de rendimiento de Chrome DevTool muestra cómo se optimizaron las tareas largas y el tiempo de renderizado se redujo a 2325 ms.
Como puede ver, probamos exactamente la misma página. La única diferencia es que el segundo tiene habilitado el renderizado diferido automático y el primero no.
La mejora es sustancial. Pasamos de una página con una puntuación INP naranja (que necesitaba mejorar) a una que muestra un resultado verde, lo cual se recomienda para garantizar la capacidad de respuesta y brindar una excelente experiencia de usuario.
Concluyendo
Ya sea que tenga un blog, una tienda en línea o cualquier otro tipo de sitio web rico en contenido, WP Rocket 3.17 y su función de renderizado diferido pueden mejorar automáticamente una métrica clave como INP.
Impulsar INP mejora la capacidad de respuesta de la página y, por lo tanto, la experiencia del usuario. Esto puede ayudar a mantener a los visitantes en su sitio por más tiempo y hacer que realicen conversiones y regresen, y es por eso que no debe pasar por alto su optimización.
¿Por qué no comprobar usted mismo cómo se puede mejorar la calificación del INP? Actualice WP Rocket a la versión 3.17 o pruébelo. Nos encantaría saber cómo funciona la nueva versión principal para usted. ¡Háganos saber en los comentarios sobre su experiencia con WP Rocket 3.17 y qué mejoras obtiene!