Optimizar el CSS de la Librería de Bloques de Gutenberg

Actualizado en

El equipo de desarrolladores detrás de WordPress siempre están agregando nuevas funcionalidades para facilitar la tarea de crear contenido.

Una de esas funcionalidades fueron los bloques de Gutenberg, los cuales fueron adoptados por la mayoría de usuarios.

En lo personal, yo creo que los bloques de Gutenberg han mejorado la experiencia de crear contenido en WordPress.

Mi único problema con los bloques de Gutenberg es que estos agregan una hoja de estilo con CSS de bloques que no estas usando.

Veamos qué puedes hacer mientras tanto para resolver este problema

Puedes Remover el CSS no Usado

Yo estoy a favor de remover cada línea de código a la que no le estes dando uso.

Yo en este momento estoy usando GenerateBlocks, un plugin creado por el equipo que está detras de GeneratePress.

Por lo que los bloques de Gutenberg que uso son los siguientes:

  • Paragraph
  • Heading
  • Lists
  • Table
  • Embed
  • Image

A pesar de eso el css generado por la librería de bloques es 11KB, porque carga estilos para bloques que no he usado y que estoy seguro que no usaré en el futuro.

EL CSS detrás no es tecnología alienígena por lo tanto puedes removerlo manualmente o con la ayuda de un plugin.

Estos son algunas pruebas por las que considero que es esencial remover el CSS no usado.

Remover el CSS no Usado

Hoy en día hay herramientas que permiten remover el CSS no usado.

Algunas de esos plugins son:

  • Perfmatters
  • WP Rocket
  • FlyingPress

Este trabajo también puede ser realizado manualmente por usuario que conozcan detalles básicos de CSS.

Estos son los resultados obtenidos de una publicación sin optimizar y con dos optimización automática y manual

Tamaño de la Hoja de Estilos sin Optimizar

El HTML y el Inline CSS de la publicación tiene un tamaño de 21.3 KB

Al medir el tamaño de la hoja de estilos, encuentro que style.min.css tiene un tamaño 11.9 KB

Por lo que ambos suman un total de 33.2 KB

Tamaño de la Hoja de Estilos Optimizada

La segunda optimización la realicé usando la opción de remover CSS de PerfMatters.

El HTML y el Inline CSS de la publicación tiene un tamaño de 21.4 KB

La hoja de estilos ahora renombrada post.used.css ahora es de 3.53 KB

Por lo que la combinación de ambos es 24.93

Limpiar la Hoja de Estilos Manualmente

El tercer método que use fue limpiar la hoja de estilos manualmente.

Tome el CSS de la librería de bloques que está minificado y lo desminifiqué con la ayuda de Unminify

Luego borré todo el código relacionado con bloques que no estoy usando.

La tarea de borrar el css de bloques no utilizado porque los bloques están bien identificados.

En todo caso puedes revisar la documentación oficial si tienes dudas sobre qué estilos pertenecen a qué bloque de Gutenberg

El código limpio lo agregue usando la sección de elementos de GeneratePress.

Ahora el HTML y el Inline CSS tiene un tamaño de 22.3 KB

Ligeramente más liviano que la optimización realizada por Perfmatters.

¿Qué Método Usar?

Yo aconsejo usar PerfMatters porque es un método mucho más seguro y en el cual no tienes que hacer nada, ademas de pulsar botones.

Si sabes algo de CSS, haz una lista de los bloques de Gutenberg que usas y elimina todo el resto.

El método manual tiene una ligera ventaja porque es más liviano y no requiere que este sea generado regularmente.

El problema con el método manual es que requiere eventualmente mantenimiento y monitoreo, porque no hay código que dure mil años

Más sobre Optimización de WordPress

Espero que esta publicación pueda contribuir a que tengas un sitio de WordPress mucho más rapido.

Estas son algunas publicaciones sobre la optimización de sitios de WordPress que te pueden interesar:

  1. Tablets y La Barra Lateral
  2. Lazy Loading para los Anuncios de Adsense: La Cura
  3. Precargar Enlaces en WordPress
  4. Remover Menús del Escritorio de WordPress
  5. Importar Imágenes Externas en WordPress
  6. Purificar el CSS en WordPress
  7. Remover CSS y JS Innecesario de WordPress

Si tienes preguntas, puedes escribirme por medio de mis redes sociales

Sobre Jose manuel

Soy José Manuel, empecé un blog en el 2011 como un pasatiempo y para usarlo en mis clases y poco a poco, me enamoré de WordPress. Espero que algo de todo lo que he escrito te sirva de ayuda.

RevistaWP

RevistaWP es un sitio donde registro mis pensamientos y descubrimientos sobre todo lo que sucede dentro del mundo WordPress.

Contacto

Puedes contactarme por medio de los siguientes canales