Purificar el CSS en WordPress

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

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

Purificar el CSS con 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

  1. Remover CSS y JS Innecesario de WordPress
  2. Reseña sobre WP Rocket: Plugin de Cache para WordPress
  3. Reseña Honesta sobre Perfmatters
  4. Reseña sobre CloudFlare APO: ¿Debería Usarlo?
  5. Reseña sobre FlyingPress
  6. Full Page Caching de CloudFlare: ¿Indispensable?
  7. Cómo Reducir el Impacto de Google Analytics en WordPress
JM-

Sobre Jose manuel

Mi nombre es José Manuel y me gusta escribir pensamientos en diferentes blogs. Este blog contiene pensamientos sobre Costa Rica, entretenimiento y mi vida

TicoLibre.com

TicoLibre.com es un sitio donde encontrarás mi coleccion de pensamientos sobre Anime, Cine, Series, Música y muchas otras cosas

Categorias

Anime

Cine

Series

Musica

Contacto

Puedes contactarme por medio de los siguientes canales