WordPress Gutenberg 10.1 aumenta Core Web Vitals

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

Se lanza Gutenberg 10.1

WordPress anunció el lanzamiento de Gutenberg 10.1 y enterró en todos los pequeños detalles de las nuevas características una mejora que los editores estaban esperando.

Google pronto actualizará su algoritmo para dar un pequeño impulso en la 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 visitan la página web.

No hay puntuación intermedia. Un sitio puede aprobar o reprobar la prueba Core Web Vitals.

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

El anuncio oficial de WordPress sobre la versión más nueva de Gutenberg (10.1) incluía muchas mejoras, pero muy dentro del anuncio, en una sección denominada Experimentos, se encontraba este fragmento vagamente redactado:

Experimentos
Mejore el método de carga para los estilos de bloque”.

No particularmente descriptivo. Pero esas seis palabras describieron una actualización importante de cómo el editor del sitio de WordPress Gutenberg ofrece hojas de estilo en el front-end, 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 una especie de interfaz de creación de páginas “Lo que ves es lo que obtienes (WYSIWIG)”.

El editor de Gutenberg se propone volver a imaginar 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 piezas de diseño prefabricadas llamadas 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 Columnas.

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

Captura de pantalla de los bloques de Gutenberg

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

La hinchazón del código de 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 cada código de estilo para cada bloque que posiblemente se pudiera usar, en cada página del sitio web.

Esto significaba que se cargaba un archivo gigante con código para cada bloque en todas las páginas, independientemente de si usaba 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 Direcciones Código Inflado

La última versión de Gutenberg soluciona este problema. Según WordPress, el código de estilo de 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 “incrustar” 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, se incorporaron las diminutas hojas de estilo, lo que mejoró 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 cubre 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 midió las puntuaciones de rendimiento de Core Web Vitals antes y después y la diferencia fue abrumadoramente positiva.

Estos son los puntajes de Core Web Vitals antes de las mejoras de Gutenberg:

Captura de pantalla de las puntuaciones anteriores de Gutenberg Core Web Vitals

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

Captura de pantalla de Gutenberg 10.1 Core Web Vitals Scores

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 Core Web Vitals

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

Lo que es más importante, 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 de WordPress.org anteriormente no mostró el 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.

“Aunque se invierte mucho trabajo en 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 avecinan en la Búsqueda de Google relacionados con la velocidad de las páginas web, las mejoras de rendimiento tanto para la interfaz como para el editor nunca han sido tan 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 soluciona uno de los principales problemas de código que afectan a Gutenberg. Con este problema resuelto, Gutenberg se convierte en un sistema de gestión de contenidos 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

Publicaciones relacionadas

Botón volver arriba