WP Rocket es el complemento de almacenamiento en caché más popular para los sitios de WordPress. Al ser solo premium, admiten más de 2 millones de sitios web para acelerar y mejorar los tiempos de carga de la página. Una vez instalado y activado en su sitio, el complemento almacenará automáticamente en caché el contenido y reducirá la cantidad de trabajo manual requerido en la configuración manual. Sin embargo, la eliminación de CSS no utilizado es una función beta que puede causarle problemas. Si tiene problemas y no puede usar la función CSS no utilizada, aquí hay algunas ideas que puede intentar solucionar.
Comprensión de CSS usado y no usado
Anteriormente, la optimización de la velocidad se centraba principalmente en los archivos JavaScript, lo que ralentizaba la carga de la página. Sin embargo, las cosas han cambiado por completo con Core Web Vital de Google, y el enfoque ahora está en mejorar la experiencia del usuario, lo que en última instancia debería conducir a una mayor velocidad. Para hacer esto, debe optimizar el contenido en la parte superior de la página en cada página de su sitio eliminando el código innecesario necesario para cargar el contenido debajo del pliegue.
Por ejemplo, puede tener un hermoso widget de boletín que se muestra en la parte inferior de sus páginas. Pero el complemento o tema que utilice para este widget cargará los archivos CSS necesarios en la sección de título de su página. Tradicionalmente ha sido bueno, ya que los archivos CSS siempre se incluyen en la sección de encabezado. Ahora, centrado en la experiencia del usuario, GoogleSpeed Insights te avisará que no usaste CSS cuando cargaste la página por primera vez. El problema es que necesita habilidades de desarrollador o back-end para analizar manualmente el área de plegado y posponer el CSS no utilizado para cargarlo más tarde. Esto será más complicado cuando tenga diferentes diseños de página, como publicaciones, páginas, productos de WooCommerce y tipos de publicaciones personalizadas. Debe analizar cada página de su sitio y eliminar el CSS no utilizado y WP Rocket hace exactamente eso con unos pocos clics desde su tablero.
Beneficios de eliminar CSS no utilizado
Simplemente reduce los archivos CSS y, por lo tanto, el tamaño de la página con solicitudes HTTP reducidas a su servidor.Además, eliminar el CSS no utilizado ayudará a corregir los siguientes elementos en la herramienta PageSpeed Insights.
- Reducir CSS no utilizado
- Eliminar recursos de bloqueo de imágenes
También puede ayudar a cargar más rápido el contenido de pintura más grande con estilos más pequeños sobre el pliegue.
Recuerde que eliminar CSS no utilizado esencialmente significa recopilar y guardar solo CSS usado en cada página. Por lo tanto, no confunda los términos "usado" y "sin usar".
¿Cómo puedo solucionar el problema de eliminar la función CSP no utilizada de WP Rocket?
Para eliminar el CSS no utilizado, vaya a Configuración> WP Rocket> Optimización de archivos. Esta sección contiene dos subsecciones para optimizar los archivos CSS y JS en su sitio. Desplácese hacia abajo y marque la sección "Optimizar la entrega de CSS" en la sección "Archivo CSS". Encontrará dos formas de optimizar la entrega de CSS y solo se puede usar una opción a la vez.
- Eliminar CSS no utilizado (beta): nos centraremos en esta opción.
- Cargue CSS de forma asíncrona: esto es para generar CSS crítico para sus páginas Obtenga más información sobre esto en nuestro artículo sobre cómo generar CSS crítico en WordPress.
Puede seleccionar el botón "Eliminar CSS no utilizado" y desplazarse hacia abajo para guardar los cambios. El proceso ahora funcionará mostrando una barra de progreso como se muestra a continuación.
Problemas al eliminar CSS no utilizado con WP Rocket
Hay tres desafíos principales que puede encontrar o que debe comprender al usar esta función en WP Rocket:
- El primer problema es que muchas veces la barra de progreso se quedará en el medio y el proceso nunca terminará. Debido a que este es un proceso en segundo plano, aún funciona incluso si sale de la página de configuración.
- En segundo lugar, después de compilar con éxito los estilos CSS usados, es posible que el diseño se rompa repentinamente debido a los cambios manuales que realiza en el sitio o a la acción automática del propio WP Rocket.
- Finalmente, varios elementos específicos se rompen y otras partes se cargan correctamente. Puede agregar selectores de CSS o direcciones URL de hojas de estilo para estos elementos rotos a la lista de exclusión para corregir el problema.
Vamos a explicar todos los casos posibles que cubren los dos problemas anteriores, junto con posibles ajustes.
1. Servicio en la nube lento
WP Rocket usa su servidor en la nube para comenzar a eliminar los procesos CSS no utilizados. Este es un proceso realmente complejo y el resumen es el siguiente:
- Recopila todos los archivos CSS/JS de cada una de tus páginas.
- Enviar a su servidor en la nube para procesamiento de archivos e identificación de selectores de CSS.
- Los estilos CSS compilados se compararán con el HTML de la página y se clasificarán como usados o sin usar.
- Almacene CSS usado y no usado en su base de datos.
- Finalmente, el CSS utilizado se recuperará en línea para resolver el problema con SpeS Insights.
Por lo tanto, puede tomar mucho tiempo cuando tiene miles de páginas y diferentes tipos de publicaciones. A veces, su servicio en la nube nunca responde, lo que bloquea la barra de progreso al mismo ritmo durante mucho tiempo. Además, su solicitud se enviará a la cola y el tiempo requerido depende de la cantidad de solicitudes que ya se hayan procesado en la cola. Como se mencionó, WP Rocket admite más de 2 millones de sitios y el proceso de generación de CSS utilizado se ejecuta automáticamente después de 30 días en cada sitio. Por lo tanto, hay posibilidades, su solicitud está en cola y lleva tiempo.
Todo lo que puede hacer aquí es simplemente desactivar la opción y guardar los cambios. Espere un momento y vuelva a intentarlo para ver si esto funciona. Evite cambiar esta característica constantemente para evitar que se envíen múltiples solicitudes a la cola de procesamiento. Esto solo ralentizará aún más el proceso y no lo ayudará a terminar rápidamente.
2. Permitir la dirección IP del WP Rocket
La dirección IP del servidor en la nube de WP Rocket es 135.125.83.227. En una situación poco frecuente, es posible que haya bloqueado esta IP, lo que fallará en el proceso de generación de CSS. Recuerda que puedes bloquear el rango de IP como 135.*.*.* o 135.125.*. * o 135.125.83 * En todos estos casos, el proceso fallará y deberá eliminar el bloqueo de IP para acceder a su servidor.
3. Activar trabajo cron
Como se mencionó, la eliminación del proceso CSS no utilizado se ejecutará en segundo plano utilizando el trabajo predeterminado de WordPress cron (WP-Cron). El proceso también se ejecutará cada 30 minutos hasta su finalización y automáticamente cada 30 días para restaurar los estilos CSS utilizados. Todos usan WP-Cron y se aseguran de no deshabilitar esta función en su sitio. Muchos usuarios y desarrolladores deshabilitan WP-Cron de forma predeterminada en WordPress, ya que puede ralentizar la sección de administración. En este caso, puede configurar su propia operación cron para asegurarse de que WP Rocket pueda usarla.
Si está confundido, hay un Complemento de verificación de estado de WP-Cron lo que puede ayudarlo a notificar que cron no está funcionando en su sitio. Este complemento se ejecutará cada 24 horas para verificar el estado de ejecución de WP-Cron en su sitio. Como en el caso de la propia tarea de cron, al verificar el complemento, debe comprender que la frecuencia afectará el proceso de generación de CSS. Cuando sospeche que cron no funciona en su sitio, primero asegúrese de que funciona antes de intentar habilitar la opción CSS no utilizada en la página de configuración del complemento WP Rocket.
También puede consultar con su empresa de alojamiento para confirmar que WP-Cron se está ejecutando y no se ha desactivado en su sitio.
4. Limpie el CSS usado después de actualizar
Cuando inicie el proceso, WP Rocket comenzará a mostrar inmediatamente un nuevo elemento de menú para borrar el CSS usado. Puede ver esto desde la barra de administración superior en "WP Rocket> Borrar CSS utilizado". Al hacer clic en este menú, se eliminarán todos los estilos CSS usados guardados de la tabla de su base de datos.
- Debe eliminar el CSS usado cuando cambie el tema, instale un complemento adicional que agregue estilos cuando agregue CSS manualmente a través del panel de temas o personalizador. De lo contrario, verá que el diseño está roto, lo que indica que su CSS no funciona. En este caso, la generación de CSS comenzará automáticamente y no hay opciones para verificar si se completó con éxito o no. Por lo tanto, asegúrese de probar su sitio con frecuencia cuando use la opción para eliminar CSS no utilizado en WP Rocket. De lo contrario, el diseño se romperá repentinamente debido a sus acciones o la recuperación automática de CSS del complemento WP Rocket.
- Cuando se quede con la barra de progreso mientras genera CSS, primero borre su CSS usado y deshabilite la opción de optimización de entrega de CSS. Verifique los puntos 2 y 3 anteriores y espere un momento antes de volver a intentarlo. Aunque puede llevar más tiempo volver a crear CSS, ayuda a confirmar que no hay problemas de su parte.
5. Mesas de cohetes WP Backend en blanco
Simplemente activar la eliminación de la función CSS no utilizada en WP Rocket no termina ahí. Puede causar un problema en cualquier momento con las actualizaciones donde puede usar "Borrar de CSS sin usar” y reconstruir el CSS usado como se explica en el punto 4 anterior. Sin embargo, el problema puede deberse a las grandes tablas de back-end que crea WP Rocket.WP Rocket creará dos tablas de base de datos que verificará utilizando phpMyAdmin, Adminer u otra herramienta de administración de base de datos.
- wp_wpr_rucss_resources - todos los archivos CSS y JS (WP Rocket verifica y elimina el CSS no utilizado de esta tabla una vez cada 30 días)
- wp_wpr_rucss_used_css - CSS utilizado
La tabla de recursos puede ser grande cuando su tema o complementos usan muchos archivos CSS y JS. De manera similar, la tabla CSS utilizada puede crecer rápidamente cuando tiene habilitada una memoria caché móvil independiente. Los tamaños de tabla más grandes afectarán directamente el rendimiento de su sitio, aunque no verá una advertencia para reducir el CSS no utilizado en SpeSeed. Puedes navegar el problema está abierto en GitHub a continuación se muestra una de las quejas registradas allí, mencionando que el tamaño de la base de datos ha aumentado de 8 MB a 800 MB debido a este problema.
Este problema puede deberse a complementos para crear páginas como Elementor, secuencias de comandos de anuncios dinámicos y temas que usan CSS personalizado para páginas individuales. La solución aquí es deshabilitar el contenido dinámico de páginas individuales o vaciar manualmente la tabla de la base de datos para que se pueda reconstruir el complemento. simplemente puede hacer clic en la opción "En blanco" en la tabla de la base de datos MySQL y confirmar la ventana emergente para eliminar su contenido.
Tenga en cuenta que WP Rocket no eliminará estas entradas de la tabla cuando deshabilite la eliminación de la función CSS no utilizada de la configuración. Consulte nuestro artículo sobre cómo limpiar el desorden que queda del WP Rocket si decide eliminarlo de su sitio.
6. Comprueba tu complemento de seguridad
Su complemento de seguridad puede bloquear el servidor WP Rocket cuando intenta habilitar la eliminación de CSS no utilizado. En general, los complementos de seguridad aplican un firewall para proteger el sitio de ataques maliciosos. Potencialmente, podría bloquear WP Rocket y detener el proceso de generación de CSS que se está utilizando. Por lo tanto, cuando descubra que la eliminación del proceso no utilizado no funciona, deshabilite la configuración de su firewall y vuelva a verificar.Si esto funciona, entonces puede incluir en la lista blanca los servicios de WP Rocket en la configuración de su firewall.
Los complementos como Wordfence ofrecen un modo de entrenamiento para realizar todas las acciones deseadas para que el complemento aprenda y no bloquee las solicitudes cuando luego active la configuración del firewall. Sin embargo, el proceso puede diferir según el complemento de seguridad que esté utilizando y es posible que deba consultar al desarrollador del complemento para solucionar el problema del firewall.
7. Usa la lista segura de CSS
Este es un problema diferente, ya que el proceso finalizará en la página de configuración, pero el diseño de su sitio se verá comprometido debido a la eliminación de los estilos CSS. Por ejemplo, WP Rocket dividirá las tablas de datos con funciones de búsqueda y filtro cuando elimine el CSS no utilizado.
- En este caso, haga clic con el botón derecho en la página y verifique el elemento roto en Herramientas para desarrolladores.
- Busque la hoja de estilo CSS necesaria para el elemento.
- Pegue la URL del archivo CSS, excluyendo el nombre de dominio.
- Guarde sus cambios y regenere el CSS usado.
Supongamos que encuentra la siguiente URL que está causando el problema:
https://yoursite.com/wp-content/plugins/my-plugin/css/123.cssDebe ingresar la siguiente URL en el cuadro de lista Safe CSS:
/wp-content/ plugins/my-plugin/css/123.cssTambién es posible colocar un comodín, como se muestra a continuación, para excluir todos los archivos CSS en la carpeta de estilo de eliminación.
/wp-content/plugins/my-plugin/css/(.*).cssUltimas palabras
Los muchachos de WP Rocket están promocionando su complemento, diciendo que ayudará a mejorar Core Web Vitals y el resultado de SpeSpeed Insights. Puede obtener un buen resultado principalmente eliminando CSS no utilizado, ralentizando JS y cargando archivos multimedia de forma perezosa. Pero lo que no te dirán es que no te apoyarán cuando haya problemas. Encontrará problemas especialmente con una lógica tan compleja detrás de "Eliminar CSS no utilizado". Esta característica también ha estado en versión beta durante años, sin advertir que creará tablas de base de datos enormes. Si está bloqueado, pruebe las soluciones anteriores y vea si puede ayudar. De lo contrario, debe iniciar sesión en su cuenta de WP Rocket para marcar un ticket y esperar muchos días para recibir una respuesta de ellos. En pocas palabras, debe deshabilitar la función e intentar "Cargar CSS de forma asíncrona" o buscar opciones alternativas.
Deja una respuesta