WordPress Gutenberg Rendimiento mejorado del sitio

El editor del complemento de almacenamiento en caché de WordPress, WP Rocket, rediseñó su sitio con Gutenberg y mejoró el rendimiento del sitio. Descubrieron que Gutenberg escribe un código sorprendentemente ligero, pero compartieron que hay algunas cosas a tener en cuenta.

Captura de pantalla de la puntuación de PageSpeed ​​Insights

Editar en Gutenberg es más fácil

El objetivo de Gutenberg siempre ha sido crear una interfaz de edición que facilite a los editores de todos los niveles la publicación de sitios web.

Anuncio

Continuar leyendo a continuación

La creación de una interfaz intuitiva reduce la barrera de entrada, permite a casi cualquier persona crear fácilmente una presencia en la web y, lo mejor de todo, ayuda a los creadores de contenido a concentrarse en crear contenido en lugar de curar y preocuparse por el código.

Según la página oficial de WordPress Gutenberg:

“Sin ser un desarrollador experto, puede crear sus propias publicaciones y páginas personalizadas”.

La página del desarrollador de WordPress describe la visión de Gutenberg de esta manera:

“Gutenberg transforma el editor en una herramienta que permite a los usuarios escribir publicaciones enriquecidas y crear diseños atractivos con unos pocos clics, sin necesidad de conocimientos técnicos. WordPress se convertirá en una herramienta de contenido potente y flexible accesible para todos “.

El editor utiliza un concepto llamado “bloques” que se pueden organizar para formar un diseño personalizado.

Este enfoque en facilitar que cualquiera se concentre en el contenido explica por qué el equipo de marketing de WP Rocket apreció instantáneamente la nueva interfaz.

Según WP Rocket:

“El cambio del editor clásico a Gutenberg ha sido sencillo para el equipo de marketing. Además, comenzamos a disfrutar de algunas funciones que hacen que nuestro trabajo sea más fácil y rápido “.

Anuncio

Continuar leyendo a continuación

Captura de pantalla PageSpeed ​​Insight Puntuación de la página de inicio

Captura de pantalla de la puntuación de rendimiento de velocidad de página de 98 sobre 100

Construyendo con Gutenberg Rendimiento mejorado

WP Rocket informa que la creación de un sitio con Gutenberg resultó en un sitio web más rápido y con mejor rendimiento.

Hubo dos razones por las que las páginas que WP Rocket construyó con Gutenberg tuvieron un desempeño excepcional:

  1. HTML más ligero (integrado en Gutenberg)
  2. CSS y JavaScript bajo demanda (no es una característica de Gutenberg)

El código HTML más ligero es una característica lista para usar de Gutenberg.

En el lado negativo, la carga de CSS innecesario también es una característica incorporada de Gutenberg. Debido a eso, WP Rocket creó una solución alternativa para automatizar CSS bajo demanda.

Gutenberg está diseñado para cargar todo el CSS necesario para cada bloque de estilo. Entonces, el primer desafío fue crear una forma de cargar JavaScript y CSS automáticamente y solo cuando fuera necesario.

Gutenberg es sorprendentemente robusto

Francamente, me sorprendió un poco que WP Rocket hiciera todo lo posible por Gutenberg. La razón de mi asombro fue que Gutenberg no está del todo terminado.

La experiencia de edición completa del sitio no se lanzará hasta junio de 2021. Sin embargo, WP Rocket descubrió que rediseñar todo su sitio web con Gutenberg era la elección correcta.

Le pedí al equipo de WP Rocket que compartiera su experiencia.

Entrevista con WP Rocket

Cohete Gutenberg WP

¿El equipo de desarrollo se enfrentó a desafíos y tuvo que encontrar soluciones para enfrentarlos?

Anuncio

Continuar leyendo a continuación

“¡Si!

En primer lugar, no teníamos experiencia de desarrollo con los bloques personalizados de Gutenberg, y todo lo que leímos sobre el tema fue muy desalentador al principio.

No hace falta decir que la curva de aprendizaje fue bastante empinada.

Para más detalles: como complemento de almacenamiento en caché, una de nuestras principales preocupaciones de desarrollo fue la necesidad de rendimiento. En ese sentido, existe un inconveniente con Gutenberg: la hoja de estilo predeterminada contiene todos los CSS de los bloques nativos.

Esto era un problema ya que el CSS no utilizado se carga en todas las páginas (y esto no sigue la recomendación de PageSpeed ​​Insights “Eliminar recursos CSS no utilizados”).

En nuestro caso, desaprobamos varios bloques que no se utilizaron. Creamos un sistema de puesta en cola personalizado para que CSS y JS carguen bloques solo cuando sea necesario. Nos tomó solo unos minutos desarrollar este sistema.

También decidimos no utilizar el archivo CSS de Gutenberg. En su lugar, “migramos” el CSS que realmente necesitábamos a nuestra propia hoja de estilo, a un archivo CSS dedicado. Eso hizo el truco “.

Anuncio

Continuar leyendo a continuación

¿Gutenberg siente que está completo y listo para los sitios de producción?

“Bueno, logramos construir nuestro sitio con Gutenberg (excepto el encabezado y el pie de página). Creo que eso dice algo sobre cómo ha evolucionado Gutenberg y su preparación.

Con la edición completa del sitio planificada para junio de 2021, creo que uno tendrá la capacidad de editar todos los elementos de un sitio utilizando bloques de Gutenberg “.

¿Hubo una curva de aprendizaje para usarlo?

“Absolutamente. Y creo que ese será el caso especialmente para aquellos acostumbrados a los constructores de páginas visuales.

Dicho esto, nos sorprendió gratamente lo visual que es realmente Gutenberg. El back-end ofrece una excelente vista previa del front-end, lo que significa que incluso para las personas que no son expertos en tecnología, como yo, es fácil realizar algunos cambios en una página o crear páginas nuevas desde cero “.

Con el conocimiento ahora adquirido de su experiencia, ¿qué consejo tiene para aquellos que contemplan cambiarse a Gutenberg?

“¡Ve a por ello!

Nuestras dos conclusiones principales fueron las siguientes:

Anuncio

Continuar leyendo a continuación

  1. Empiece a trabajar en su nuevo diseño web con Gutenberg en mente. Te ahorrará mucho tiempo y terminarás siendo más eficiente. (Esto no es algo que hicimos porque comenzamos el diseño sin haber tomado una decisión sobre el editor …)
  2. Considere cuidadosamente cuántos bloques necesita según su negocio. Piense si todos tienen que ser personalizados o no. Los bloques marcan una diferencia real cuando se usa Gutenberg. (Se nos ocurrieron más de 20 bloques personalizados, lo que está lejos del promedio. Es posible que solo necesite un par).

¿Cuáles son las principales consideraciones en las que pensar antes de cambiarse a Gutenberg?

“Gutenberg no es necesariamente para todos.

Si estás de acuerdo con un tema gratuito, entonces es genial. Puedes crear todos los bloques que quieras y disfrutar de Gutenberg.

Sin embargo, si desea un diseño específico y bloques específicos, necesitará un desarrollador que lo ayude con el diseño. Probablemente no le llevará tanto tiempo como a nosotros.

Aun así, hará que el desarrollo de su nuevo sitio web sea más largo y caro de lo habitual, ya que necesitará ayuda. También debe ser consciente de la empinada curva de aprendizaje que tiene por delante.

Dicho esto, Gutenberg está realmente en el corazón de WordPress y, todos los días, los colaboradores trabajan para mejorarlo.

Al elegir otra opción, corre el riesgo de que no se actualice cuando WordPress haga un cambio. Además, siempre será más fácil encontrar a alguien que le ayude con un sitio de WordPress creado con Gutenberg.

Creemos que Gutenberg es el futuro de WordPress, además de que es gratuito y de código abierto “.

Anuncio

Continuar leyendo a continuación

¿Qué tipo de editoriales deberían pensarlo dos veces antes de cambiarse a Gutenberg?

“Esto es algo que mencionamos en nuestra publicación de blog:

Si es un profesional independiente o dirige una empresa pequeña, aún podría estar bien con un creador de páginas que no requiera ayuda del desarrollador o costo adicional.

Si dirige una empresa más grande y necesita un desarrollo específico, entonces sí, Gutenberg es la solución adecuada para usted, sin más dudas ”.

WordPress Gutenberg es el futuro

WP Rocket tiene un punto válido cuando afirma que Gutenberg es el futuro. El objetivo es permitir que los editores se centren menos en el código y más en el contenido. La edición del sitio completo de Gutenberg está programada para debutar en junio de 2021.

Gracias a que WP Rocket tomó uno para el equipo, ahora sabemos que Gutenberg realmente tiene una interfaz de usuario de edición prometedora y puede ayudar a mejorar el rendimiento del sitio.

Citación

Lea el artículo de WP Rocket sobre el rediseño de su sitio web con Gutenberg:

Anuncio

Continuar leyendo a continuación

Por qué WP Rocket eligió a Gutenberg y cómo mejoró el rendimiento