Optimización de la carga de estilos de bloques en WordPress 5.8

fondo azul con texto de WordPress 5.8

Si ya te estás preparando para los cambios que introducirá WordPress 5.8 a partir del 20 de julio de 2021, uno que debes tener en cuenta es que podrás optimizar la carga de estilos de los bloques del editor.

¿Había antes algún problema con los estilos de los bloques?

Previamente, para cargar los estilos de los bloques, WordPress cargaba los estilos de todos los bloques en todas las entradas y páginas, aunque no se usasen la mayoría , con el consiguiente problema de optimización por 2 motivos:

  1. Al depender de una llamada a un recurso externos a la página no era posible almacenar los estilos en la caché, salvo que se apliquen técnicas como generar la ruta de CSS crítico.
  2. Se cargaban demasiados estilos, la mayoría innecesarios, sin tener en cuenta cuáles eran necesarios para cada entrada o página en concreto.

Desde WordPress 5.8 puedes hacer que no se incluya este enlace a la hoja de estilos en la cabecera de tus páginas y entradas, sino que…

  1. Se cargarán solamente los estilos necesarios para los bloques existentes en cada página.
  2. Los estilos pequeños se  insertará directamente el CSS en el código en vez de cargar la hoja de estilos.

Así, si en una página solo has incluido los bloques de párrafo y encabezado, solo se cargarán los estilos necesarios para mostrar esos bloques, pero no el resto de estilos de todos los demás bloques del editor, como pasaba hasta ahora.

Y si la página solo necesita unos pocos estilos, en vez de reclamar la carga de una pequeña hoja de estilos, se insertarán directamente esos estilos en el código de la página, algo parecido a lo que hace la técnica del CSS crítico.

¿Es automática la optimización de carga de estilos de bloques?

No, aunque actualices a WordPress 5.8 no se aplicará esta mejora de optimización automáticamente, sino que tu tema tiene que se compatible con esta nueva característica.

Puedes esperar a que el desarrollador de tu tema la incorpore o hacerlo tú, añadiendo este filtro al archivo functions.php del tema (acuérdate, que sea tema hijo) activo:

add_filter( 'should_load_separate_core_block_assets', '__return_true' );

Cuando añadas este filtro WordPress ya no cargará la hoja de estilos completa. En su lugar hará esto:

  1. La hoja de estilos wp-block-library, en vez de cargar el archivo wp-includes/css/dist/block-library/style.css que contiene todos los estilos de todos los bloques, ahora cargará el archivo wp-includes/css/dist/block-library/common.css (mucho más pequeño), que contiene estilos genéricos, como los colores por defecto, estilos básicos de alineación y la clase para lectores en pantalla.
  2. Los estilos de los bloques solo se incluirán cuando se muestre el bloque en una página o entrada.
  3. Si el CSS es mínimo, se insertará directamente en el código, en vez de cargar la hoja de estilos mínima.

¿Es esto algo bueno?

Por supuesto que sí. Que WordPress aplique novedades que optimicen la velocidad de carga de los contenidos es la línea a seguir, y en esta versión tenemos esta optimización en la carga de los estilos de los bloques, y la compatibilidad con el formato de imagen WebP así que vamos por el buen camino.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(10 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

11 comentarios en “Optimización de la carga de estilos de bloques en WordPress 5.8”

  1. Que buena noticia, ya hacía falta esta optimización o Gutenberg iba por el camino de otros constructores visuales con la carga excesiva de recursos externos en cada página. Gracias por compartirlo Fernando.

  2. Genial el aporte Fernando como siempre, quería preguntarte si esta línea se utiliza en el WordPress actual ¿Haría la misma función?
    Gracias por compartir todo los que nos aportas a tus seguidores. Un saludo.

  3. Hola Fernando, he leído varios de tus post me han sido de gran ayuda.

    Tengo un problema con la velocidad de carga de mi sitio, le he instalado varios plugins que ayudan con la velocidad y aun así la carga en móviles es lenta según Page Speed Insight de Google.

    Que podría hacer para mejorarla? Solo se me ocurre que un profesional en programación toque el código de la página. ¿Crees que esto serviría?

    Muchas gracias de antemano por tu respuesta.

    1. Hola Kevin,

      Primero habría que ver en qué da problemas concretamente, y para eso te puedes apoyar en los informes tanto de PageSpeed Insights como los de GTMetrix.

      Ahora bien, si no sabes interpretarlos, o arreglar los problemas, son cosas muy técnicas a veces, por supuesto siempre te pueden ayudar profesionalmente.

      Yo, antes de empezar a gastar dinero, te animo a que te pases por uno de mis directos de los viernes en YouTube o Twitch y propongas tu web para analizarla en directo, es probable que pueda ayudarte ahí mismo, y sino, pues siempre puedes reservar una consultoría, ya privada, aquí: https://servicios.ayudawp.com/tienda/consultoria-online-wordpress/

  4. Hola Fernando,
    Me ha resultado muy interesante tu artículo, como muchos otros que escribes, y es de mucha ayuda. La duda que me queda (sin haber probado la beta por falta de tiempo) es de donde toma los estilos que debe cargar. En mi caso creo los bloques con Advanced Custom Fields, por lo que supongo que los tomará de la función que hayas designado como ‘enqueue_assets’ a la hora de registrar el bloque. ¿Es así?

    De nuevo muchas gracias por tus consejos, y por todo lo que publicas.

  5. Hola Fernando, ¿no crees que esto ya tendria que venir por defecto en la instalación de wordpress? ¿Y no tener que meterlo en nuestro tema a mano? ¿porque crees que lo han hecho?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba Ir al contenido