WordPress Gutenberg 10.1 impulsa los elementos básicos de la web

WordPress Gutenberg 10.1, lanzado el 3 de marzo de 2021, aumenta drásticamente el rendimiento de Core Web Vitals. WordPress ahora presenta importantes ganancias en la velocidad de la página.

Lanzamiento de Gutenberg 10.1

WordPress anunció el lanzamiento de Gutenberg 10.1 y enterrado en todos los pequeños detalles de las nuevas funciones fue una mejora que los editores estaban esperando.

Google pronto actualizará su algoritmo para dar un pequeño aumento de clasificación a los sitios que tienen una puntuación de Core Web Vitals aprobatoria.

Core Web Vitals es un conjunto de métricas que describen colectivamente si una página web ofrece una buena o mala experiencia de usuario cuando la visita.

No hay puntaje intermedio. Un sitio puede aprobar o reprobar la prueba de Core Web Vitals.

A los editores web les resulta cada vez más difícil lograr una puntuación de Core Web Vitals aprobatoria porque muchos de los problemas que deben resolverse son inherentes al sistema de gestión de contenido (como WordPress) y a los temas y complementos que se utilizan.

El anuncio oficial de WordPress sobre la versión más reciente de Gutenberg (10.1) incluyó muchas mejoras, pero enterrado en el fondo del anuncio, en una sección denominada Experimentos, estaba este fragmento vagamente redactado:

«Experimentos
Mejorar el método de carga para estilos de bloque «.

No es particularmente descriptivo. Pero esas seis palabras describen una actualización importante de cómo el editor de sitios de WordPress Gutenberg ofrece hojas de estilo en la interfaz, donde afecta a los visitantes del sitio.

¿Qué es Gutenberg?

Gutenberg es una nueva forma de crear sitios web que tiene como objetivo simplificar el proceso de creación de sitios web. Es un tipo de similarpero no exactamente) a un «Lo que ves es lo que obtienes (WYSIWIG)”Interfaz de creación de páginas.

El editor de Gutenberg se propone reinventar el proceso de creación de sitios web como uno que involucra bloques de elementos de página.

Por ejemplo, un bloque puede ser el encabezado. El siguiente bloque debajo del encabezado puede ser la sección del menú. Debajo de ese bloque está el bloque de contenido, seguido de un bloque de pie de página.

Para el área de contenido, hay otros bloques que se pueden usar para crear una gran variedad de diseños personalizados. Gutenberg es una forma visual de crear páginas web mediante el uso de elementos de diseño prefabricados llamados bloques.

Entonces, si necesita un formulario de contacto, puede optar por colocar un bloque de formulario de contacto. Si desea crear columnas dentro del área de contenido, puede elegir un bloque de Columnas.

Captura de pantalla de la interfaz de usuario de bloques de contenido de Gutenberg

La interfaz del generador de páginas es una forma popular de crear sitios web que simplificará el proceso. De esa manera, más editores pueden crear sitios web sin tener que preocuparse por la programación, lo que libera a los editores de contenido para que se centren más en el contenido y menos en la codificación y los complementos.

La hinchazón del código Gutenberg que se solucionó

Cada bloque de Gutenberg tiene códigos de estilo que son específicos para cada bloque. Los códigos de estilo dictan cómo se ve cada bloque.

Antes de esta actualización, los sitios creados con Gutenberg cargaban todos los códigos de estilo para cada bloque que posiblemente se pueden usar, en cada página del sitio web.

Esto significó que se cargó un archivo gigante con código para cada bloque en todas las páginas, independientemente de si usó ese bloque o no.

El código excesivo puede hacer que la experiencia de la página se degrade. Cuanto más lenta se carga una página, peor se vuelve la experiencia del usuario.

Las páginas web de carga lenta son frustrantes y pueden hacer que un sitio gane menos.

Además, debido a que en mayo de 2021, las páginas web rápidas tendrán una ligera ventaja sobre las páginas web más lentas en forma de un aumento de clasificación en Google, mejorar el rendimiento de la velocidad de la página es un gran problema en este momento.

Gutenberg 10.1 aborda la hinchazón del código

La última versión de Gutenberg soluciona este problema. Según WordPress, el código de estilo para cada bloque es relativamente pequeño. La solución que eligieron fue cargar selectivamente solo el código de estilo necesario para los bloques que se encuentran en una página web.

Aún mejor, en lugar de crear numerosas hojas de estilo que deben descargarse para esas páginas, los códigos de estilo necesarios ya están en la página web.

Esto se denomina «insertar» el código y es una buena práctica para acelerar la velocidad de descarga de una página web.

WordPress describió cómo lograron esta mejora:

“Dado que la mayoría de los bloques tienen hojas de estilo bastante pequeñas, no tenía sentido enviar solicitudes al servidor para estos estilos del tamaño de un bocado.

Para resolver esto, las diminutas hojas de estilo se insertaron, mejorando aún más el rendimiento al incluir todo lo que el navegador necesita en una sola solicitud. Piense en esto como enviar un mensaje de texto que cubra algunos temas, en lugar de escribir un montón de mensajes individuales uno tras otro «.

Gutenberg 10.1 es un campeón de velocidad

Los resultados de este pequeño cambio son notables.

WordPress mide el antes y el después de las puntuaciones de rendimiento de Core Web Vitals y la diferencia fue abrumadoramente positiva.

Estas son las puntuaciones de Core Web Vitals antes de las mejoras de Gutenberg:

Esta es una captura de pantalla de las puntuaciones de Core Web Vitals después de las mejoras:

Es muy evidente que Gutenberg 10.1 representa un importante paso adelante para mejorar el rendimiento de la velocidad de la página.

Los desarrolladores de WordPress describieron su logro así:

“Hay un aumento significativo del rendimiento, y eso es en una página simple sin demasiados bloques. ¡En estructuras más complejas, el efecto será aún más pronunciado! «

WordPress está prestando atención a los elementos fundamentales de la web

Este cambio será muy bienvenido en la comunidad editorial y de SEO. Si bien Gutenberg no está completamente terminado en este momento, todavía está listo para usarse si los editores así lo desean.

Más importante aún, esta actualización subraya cómo Gutenberg no solo es el futuro de la publicación web, sino una clara mejora en la publicación.

Una búsqueda en el sitio WordPress.org anteriormente no mostró reconocimiento de Core Web Vitals de Google.

Este anuncio no solo menciona los desafíos de SEO, sino que también enfatiza cómo este tipo de mejoras benefician a los visitantes y editores del sitio.

“Si bien se dedica mucho trabajo a democratizar la publicación en el proyecto de WordPress, este tipo de trabajo ayuda a democratizar la entrega, lo que permite a las personas obtener el contenido que desean consumir de manera más fácil y rápida.

Con los cambios que se realizan en la Búsqueda de Google relacionados con la velocidad de las páginas web, las mejoras de rendimiento tanto en la interfaz como en el editor nunca han sido más oportunas «.

WordPress Core Web Vitals Boost es real

Si bien se puede decir que este cambio en la forma en que se entrega CSS es incremental, el beneficio para los editores y los usuarios es enorme. Esta actualización corrige uno de los principales problemas de hinchazón de código que afectan a Gutenberg. Con este problema resuelto, Gutenberg se convierte en un sistema de gestión de contenido más viable.

Citas

Mejora del editor principal: necesidad de velocidad (página / publicación)

¿Qué hay de nuevo en Gutenberg 10.1? (3 de marzo)

Mejorar el método de carga para estilos de bloque