WP Rocket 3.11 – Lanzamiento de un nuevo CSS para eliminar no utilizado

En WP Rocket, estamos comprometidos a hacer que nuestro producto sea más poderoso y simple de manera constante. Queremos ofrecer a nuestros Rocketeers el mejor complemento que existe por su rendimiento y simplicidad, y nunca dejar de mejorarlo.

También sabemos qué optimizaciones pueden marcar la diferencia en el rendimiento de su sitio y cuáles son difíciles de abordar. Eliminar CSS no utilizado es uno de ellos. El CSS no utilizado puede afectar enormemente el tiempo de carga y las métricas de rendimiento cruciales, incluida la pintura con contenido más grande y la primera pintura con contenido. Al eliminar o reducir el CSS, tendrá la oportunidad de mejorar drásticamente su puntaje de PageSpeed ​​Insights y hacer que su sitio sea más rápido.

Es por eso que WP Rocket 3.11 se enfoca en una nueva función Eliminar CSS no utilizado que lo ayudará a alcanzar sus objetivos de rendimiento más fácilmente.

Siga leyendo y descubra qué significa la función mejorada para sus resultados de rendimiento. Aprenderá cómo WP Rocket 3.11 le dará un impulso adicional a la velocidad de su sitio, ¡y hay más por venir!

Novedades de WP Rocket 3.11

WP Rocket 3.11 se centra en la renovación de Remove Unused CSS desde tres ángulos: disponibilidad, rendimiento y compatibilidad. El nuevo Remove Unused CSS permanece en versión beta por ahora, pero ya tenemos una línea de tiempo para ello: lea hasta el final del artículo para obtener más información al respecto.

Al descargar nuestro nuevo lanzamiento principal, se beneficiará de los siguientes aspectos:

• Mejor disponibilidad : Remove Unused CSS viene con la metodología asincrónica para evitar que el servicio se caiga al optimizar su entrega de CSS. Como consecuencia, también encontrará algo ligeramente diferente en la interfaz de usuario.
  
• Mejor rendimiento : esta nueva versión presenta un cambio significativo en la forma en que manejamos la función de fuente precargada al eliminar CSS no utilizado. ¡Debería ver un impacto positivo en sus puntajes, ya sea que haya usado o no Eliminar CSS no utilizado antes!

• Mejor compatibilidad : si le preocupan los posibles errores de Remove Unused CSS y cuánto tiempo llevaría solucionarlos, esto es para usted.

Puede ver nuestro video o pasar a la siguiente sección para obtener más información sobre los cambios y cómo aprovechará cada uno de ellos para optimizar el rendimiento de su sitio.

Qué significa mejor disponibilidad

WP Rocket 3.11 viene con Remove Unused CSS construido nuevamente desde cero. ¿Por qué? Porque la empatía y la humildad son dos de nuestros valores fundamentales, y nos apegamos a ellos.

Desde que lanzamos Remove Unused CSS con WP Rocket 3.9, aún no hemos podido deshacernos del modo beta. No estábamos satisfechos con la función en sí y cómo funcionaba. La disponibilidad no era buena y el servicio a menudo no funcionaba. Por lo tanto, decidimos reconstruir la función y cambiar del método síncrono al asíncrono. El modo asincrónico almacenará en caché la página, realizará una llamada API y generará el CSS usado después de 60 segundos.

Este cambio de metodología cambia las reglas del juego por dos razones:

1. Se beneficiará de una mejor disponibilidad. En otras palabras, ya no estará atascado cuando WP Rocket intente generar el CSS usado. Generarás CSS usado para 100 URL cada 60 segundos.

2. El método asíncrono abre la posibilidad de muchas mejoras nuevas en las que nunca podríamos pensar cuando usamos la metodología síncrona. Ahora podremos trabajar en nuevas funciones potentes al mismo tiempo que procesamos el CSS usado, confiando en las llamadas a la API. ¡Considere el nuevo Remove Unused CSS como un adelanto del futuro de WP Rocket!

El cambio en la metodología también tiene un impacto en la forma en que se presenta el proceso de optimización de CSS en la interfaz de usuario.

Hasta WP Rocket 3.10, la opción Remove Unused CSS le mostraría cómo iba el proceso de CSS:

Durante el proceso de CSS, no fue posible rastrear ninguna mejora potencial en PageSpeed ​​Insights hasta que el proceso de CSS se completó por completo. Además, la optimización de CSS podría tardar varias horas y seguir sin funcionar debido a la sobrecarga del servidor. Estos eran problemas críticos que no solo impedían que los clientes mejoraran su desempeño, sino que tampoco eran dignos del producto que queríamos ofrecer. Es por eso que trabajamos duro para abordarlos.

En primer lugar, la metodología asincrónica y la nueva infraestructura del servidor evitarán las sobrecargas y reducirán drásticamente los problemas que enfrentaban en el pasado. Una vez que se haya procesado la página de inicio (cuenta 90 segundos), el proceso de optimización de CSS se realizará en lotes para el resto de sus páginas, cada 60 segundos. Significa que no tiene que esperar hasta que el proceso se complete por completo para medir sus mejoras de rendimiento. Cada 60 segundos, se beneficiará de la optimización continua de CSS y lo verá reflejado en la auditoría de PageSpeed ​​Insights de inmediato.

Lo que hace que este cambio sea más sencillo que nunca es el temporizador de cuenta regresiva que encontrarás en WP Rocket 3.11.

Al habilitar la opción Eliminar CSS no utilizado, en la parte superior de la página, encontrará un temporizador que indica cuánto tarda la función en procesar su página de inicio.

Una vez que la página de inicio esté lista, recibirá un nuevo mensaje sobre el proceso Eliminar CSS no utilizado que se está llevando a cabo en todo su sitio:

Si aún no ha habilitado la precarga de caché, verá un mensaje que le recomienda que active la opción.

Al igual que en la versión anterior, al marcar las opciones “Activar precarga” y “Activar precarga de caché basada en sitemap”, evitas esperar a que un usuario visite una página para generar el CSS utilizado.

Esto acelerará la creación del CSS utilizado para todo el sitio web.

Recomendamos enfáticamente usar Remove Unused CSS y la precarga de caché juntos porque obtendrá dos beneficios correlacionados:

1. Reducirá drásticamente el tamaño de CSS.
2. Como resultado, mejorará su puntuación de PageSpeed ​​Insights, así como sus calificaciones de Core Web Vitals.

Realizamos varias pruebas con algunos de los creadores de páginas más populares. Habilitamos la nueva función Eliminar CSS no utilizado y realizamos un seguimiento de las mejoras. Como puede ver, el ahorro de CSS es enorme y tendrá un impacto en el rendimiento general:

El ahorro de CSS no es solo porque sí. Podemos ver cómo tales mejoras pueden traer mejores resultados de rendimiento.

Construimos un sitio de prueba usando Elementor y Astra. Activamos WP Rocket y habilitamos LazyLoad. Realizamos una prueba inicial de PageSpeed ​​Insights y obtuvimos una calificación de 67.

Luego, realizamos otra prueba después de habilitar la función Delay JS. La calificación de rendimiento general mejoró mucho, pero el puntaje no se volvió verde, ni tampoco algunas de las métricas de Lighthouse:

Finalmente habilitamos Remove Unused CSS y ejecutamos una tercera prueba. Nuestro puntaje de PageSpeed ​​Insights obtuvo una calificación de 94, y la primera pintura con contenido y la pintura con contenido más grande también obtuvieron una calificación verde.

Novedades para el rendimiento

Esta nueva versión importante también cambia el funcionamiento de la función de precarga de fuentes. Hasta WP Rocket 3.10, cuando estaba activado Eliminar CSS no utilizado, el complemento ignoraba la información incluida en la pestaña Precargar fuentes.

Ahora, hay un cambio importante. Al activar la opción Remove Unused CSS y generar el CSS usado, WP Rocket identifica automáticamente todas las fuentes y las precarga automáticamente. ¿Por qué? Porque según nuestras pruebas, los sitios pueden obtener mejores puntajes de PageSpeed ​​Insights.

Echa un vistazo a los resultados de nuestras pruebas y comprueba cómo mejora la nota de rendimiento general y las métricas específicas gracias a la opción Precargar fuentes:

Escenario n. ° 1: eliminar el CSS no utilizado activado sin fuentes precargadas

Escenario n.º 2: elimine el CSS no utilizado activado con fuentes precargadas

Lo que viene con una mejor compatibilidad

Esta importante versión no se trata solo de ofrecer una nueva interfaz de usuario y una mejor disponibilidad para Eliminar CSS no utilizado. Si probó la función Eliminar CSS no utilizado anterior y encontró algún problema o error, debe saber que WP Rocket 3.11 tiene una mejor compatibilidad y precisión.

En lenguaje sencillo, WP Rocket 3.11 corrige automáticamente el 90% de los problemas conocidos de eliminación de CSS no utilizados . Los restantes y los nuevos se pueden arreglar fácilmente sin requerir una versión menor de WP Rocket. Eso es un gran paso adelante, ¿verdad?

¿Cuánto tiempo durará la versión beta?

Apostamos a que se pregunta cómo le irá con la versión beta de Remove Unused CSS. Pronto dijo: lo mantendremos durante 3 o 4 semanas para verificar nuestro servidor a escala completa. Nuestro objetivo es que la opción Eliminar CSS no utilizado funcione sin problemas en el 95 % de los casos. Dado que es una característica tan poderosa, nuestro objetivo es activar Eliminar CSS no utilizado de forma predeterminada en un futuro próximo.

Por supuesto, lo tenemos cubierto. Como Rocketeer, recibirá un correo electrónico cuando eliminemos la versión beta.

Terminando

WP Rocket 3.11 viene con una nueva y potente característica Eliminar CSS no utilizado que le permitirá optimizar la entrega de CSS sin preocuparse por los errores o problemas que tardan en solucionarse.

Gracias al nuevo Remove Unused CSS y Font Preload, aumentará la velocidad de su sitio y optimizará las métricas de rendimiento de Lighthouse, ¡no tiene que preocuparse por nada!

Gracias a los cambios realizados en esta versión principal, será posible desarrollar nuevas características sorprendentes que harán que la optimización del rendimiento sea más fácil y rápida. ¿Listo para ver lo que le depara el futuro a WP Rocket?