En publicaciones pasadas he hablado sobre remover el CSS no necesario de tu sitio de WordPress.
Eso se logra facilmente con plugins como PerfMatters que permite que la carga del CSS se haga de manera condicional.
Purificar el CSS es un paso más avanzado que remover el CSS no necesario porque la purificación del CSS requiere la limpieza de un código que se deba utilizar.
Remover el CSS no usado consiste en deshacerse completamente de una hoja de estilo mientras que la purificación del CSS consiste en conservar el CSS que necesitamos conservar y remover ese código que no necesitamos.
Purificar el CSS es un método quirúrgico
Table of Contents
Paso #1 Desactivar Optimizaciones al CSS
Esta es la forma de purificar el CSS de forma manual
Lo primero que debes hacer es deshabilitar optimizaciones a las hojas de estilos que estés realizando con un plugin de caché o un plugin o servicio para optimizar WordPress
¿Por qué hacerlo?
Porque las optimizaciones impiden ver las hojas de estilo cuando estas están combinadas o “inline”
Este es un ejemplo de ese problema cuando queremos analizar la web de GeneratePress
Ahora veamos el sitio web que nos ayudará con la purificación del CSS de forma gratuita .
Paso #2: Usar PurifyCSS
El segundo paso es ir al sitio PurifyCSS y pegar la URL de una publicación que represente muy bien el sitio
El sitio te dará un reporte de todos los estilos que cargan en esa pagina
En ocasiones las hojas de estilo tendrán únicamente el estilo deseado y en otras casos tendrán código de sobra
Si observas que puedes ganar un mejor rendimiento con la aplicación de una hoja de estilo purificada, puedes darle click al boton que dice “show clean CSS code” y copiarlo en la sección llamada CSS adicional de tu tema
Paso #3 Eliminar la Solicitud Original
Como ya tienes una código purificado en tu sitio para hacer que tu sitio luzca de cierta manera, ahora debes de remover la hoja de estilos original para evitar la duplicación de código.
Puedes entrar al script manager de Perfmatters y remover la hoja de estilos que ya no necesitas.
Eso es todo lo que debes de hacer.
Una vez terminado esto, puedes revisar que el sitio luzca como se supone que debe lucir.
Y si no hay problema, repite el proceso
Purificar el CSS con Plugins
Si no quieres seguir este proceso, puedes usar dos plugins que hacen esto de una manera excepcional.
- WP Rocket
- FlyingPress
FlyingPress es un plugin tan bueno como WP Rocket pero escuchas hablar del primero por antigüedad y por el programa de afiliación que tienen
Así luce la sección que aplica esa funcionalidad en WP Rocket
Ambos plugins permite remover el CSS or cargar el CSS de forma asincrónica, es decir el CSS no necesario será cargado pero no tendrá prioridad sobre otros elementos del sitio.
Purificar el CSS de Forma Manual
La purificación del CSS también se puede realizar de forma manual pero eso requiere la ayuda de un experto que pueda crear hojas de estilo con lo mínimo que necesitas.
Eso no es lo más conveniente porque no hay código que dure mil años por lo que posiblemente requieras darle mantenimiento al código con la llegada de nuevas actualizaciones para el tema o plugin.
Más Sobre Velocidad de WordPress
Espero que hayas aprendido algo nuevo sobre la optimización de sitios de WordPress.
Si quieres aprender más cosas sobre la velocidad de sitios en WordPress, dale un vistazo a todas estas publicaciones
- Remover CSS y JS Innecesario de WordPress
- Reseña sobre WP Rocket: Plugin de Cache para WordPress
- Reseña Honesta sobre Perfmatters
- Reseña sobre CloudFlare APO: ¿Debería Usarlo?
- Reseña sobre FlyingPress
- Full Page Caching de CloudFlare: ¿Indispensable?
- Cómo Reducir el Impacto de Google Analytics en WordPress
