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 ya para optimizar esa hoja de estilos.
Table of Contents
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:
| #1 | Paragraph |
| #2 | Heading |
| #3 | Lists |
| #4 | Table |
| #5 | Embed |
| #6 | Image |
A pesar de eso el css generado por la librería de bloques es 11KB, esta carga estilos para bloques que no he usado y que estoy seguro que no usaré en el futuro.
EL CSS que compone esa hoja de estilo 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 optimización la realicé usando la opción de remover CSS de PerfMatters.
El HTML y el Inline CSS de la publicación ahora 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.
Tomé 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 agregué usando la sección de elementos de GeneratePress, pero tambien se puede agregar usando un child theme.
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 el CSS asociao con todo el resto de bloques no utilizados.
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
A pesar de no ser experto en el tema de hoja de estilo, el metodo que uso es limpiar la hoja de estilos de los bloques de Gutenberg manualmente.
Más sobre 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:
- Reseña Honesta sobre Perfmatters
- Reglas de Firewall de CloudFlare
- Reseña sobre CloudFlare APO: ¿Debería Usarlo?
- Seguridad de WordPress sin Plugins: 8 Pasos
- Full Page Caching de CloudFlare: ¿Indispensable?
- 7 Plugins de Cache para WordPress
- Purificar el CSS en WordPress
Si tienes preguntas, puedes escribirme por medio de mis redes sociales
