WordPress Gutenberg – Rendimiento mejorado del sitio – Usabilidad web y seo

WordPress Gutenberg – Rendimiento mejorado del sitio

Vistas: 89
0 0
Tiempo de lectura:6 Minutos, 21 Segundos

El editor de complementos de almacenamiento en caché de WordPress, WP Rocket, ha rediseñado su sitio con Gutenberg y ha mejorado el rendimiento del sitio.

Descubrieron que Gutenberg escribe un código sorprendentemente ligero, pero admitieron que hay algunas cosas a tener en cuenta.

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

Captura de pantalla que muestra la puntuación de Page Speed ​​Performance 97 sobre 100

Editar en WordPress Gutenberg es más fácil

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

La creación de una interfaz intuitiva reduce la barrera de entrada, permite que casi cualquier persona cree fácilmente una presencia en la web y, lo que es más importante, ayuda a los creadores de contenido a concentrarse en la creación de contenido en lugar de seleccionar y preocuparse por el código.

Según el sitio web oficial de WordPress Gutenberg:

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

El sitio para desarrolladores de WordPress presenta la visión de Gutenberg de la siguiente manera:

“Gutenberg transforma el editor en una herramienta que permite a los usuarios escribir publicaciones enriquecidas y crear diseños hermosos con solo unos pocos clics, sin ningún conocimiento técnico. WordPress se convertirá en una herramienta de creación de contenido potente y flexible, accesible para todos “.

El editor utiliza un concepto llamado “bloques” que se puede configurar para crear un diseño personalizado.

El enfoque en facilitar que todos se concentren en su contenido, explica por qué el equipo de marketing de WP Rocket apreció de inmediato la nueva interfaz.

Según WP Rocket:

“La transición de Classic Editor a Gutenberg fue fácil para el equipo de marketing. Además, comenzamos a utilizar funciones que hacen que nuestro trabajo sea más fácil y rápido “.

Captura de pantalla del resultado de PageSpeed ​​Insight de la página de inicio

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

Construyendo con Gutenberg un Rendimiento mejorado

WP Rocket informa que la construcción de un sitio con Gutenberg ha resultado en un sitio más rápido y con mejor rendimiento.

Había dos razones por las que los sitios de WP Rocket construidos con Gutenberg funcionaban excepcionalmente:

  1. HTML más ligero (construido en Gutenberg)
  2. CSS y JavaScript bajo demanda (no es la función de Gutenberg)

El código HTML más ligero es una función estándar de Gutenberg.

Por otro lado, cargar CSS innecesario también es una función de Gutenberg incorporada. Por esta razón, WP Rocket ha creado una solución para automatizar CSS a pedido.

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

Gutenberg es sorprendentemente duradero

Honestamente, me sorprendió un poco que WP Rocket hiciera todo lo posible por Gutenberg. El motivo de mi sorpresa fue que Gutenberg no está completamente terminado.

No se espera que la edición del sitio completo se publique hasta junio de 2021. Sin embargo, WP Rocket dijo que rediseñar todo el sitio con Gutenberg fue la elección correcta.

Entrevista con WP Rocket

Cohete Gutenberg WP

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

“¡Si! Primero, no teníamos experiencia en programación con bloques Gutenberg personalizados, y todo lo que leímos al respecto fue muy desalentador al principio.

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

Para más detalles: uno de los principales problemas con el desarrollo del complemento de almacenamiento en caché fue la necesidad de rendimiento. En este sentido, Gutenberg tiene una desventaja: la hoja de estilo predeterminada contiene el CSS de todos los bloques nativos.

Esto fue un problema porque 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, retiramos algunos bloques que no se utilizaron. Hemos creado un sistema de cola personalizado para que el bloque solo se cargue en CSS y JS cuando sea necesario. Solo nos tomó unos minutos desarrollar este sistema.

También optamos por no utilizar el archivo CSS de Gutenberg. En cambio, “movimos” el CSS que necesitábamos a nuestra propia hoja de estilo, a un archivo CSS especial. Eso hizo el truco.

¿Se siente Gutenberg completo y listo para la producción?

“Bueno, logramos construir nuestro sitio con Gutenberg (excepto por el encabezado y pie de página). Creo que eso dice algo sobre la evolución y preparación de Gutenberg.

Creo que con la edición completa del sitio programada para junio de 2021, será posible editar todos los elementos del sitio con bloques de Gutenberg “.

¿Tuviste que aprender a usarlo?

“Absolutamente. Creo que esto será especialmente cierto para las personas acostumbradas a los creadores 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 conocen la tecnología como yo, es fácil realizar algunos cambios en el sitio web o crear nuevas páginas desde cero “.

Con el conocimiento ahora adquirido de su experiencia, ¿Qué consejo tiene para aquellos que estén considerando cambiarse a Gutenberg?

“¡Ve a por ello!

Nuestras dos conclusiones principales fueron las siguientes:

  1. Empiece a trabajar en un nuevo diseño de sitio web con Gutenberg en mente. Te ahorrará mucho tiempo y serás más eficiente. (Esto no es algo que hicimos porque empezamos a diseñar sin decidirnos por un editor…)
  2. Considere cuidadosamente cuántos bloques necesita dependiendo de su negocio. Considere si todos tienen que ser personalizados. 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 unos pocos).

¿Cuáles son las cosas más importantes en las que pensar antes de cambiar a Gutenberg?

“Gutenberg no es necesariamente para todos.

Si tiene el tema gratuito tal como está, 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 nos llevará tanto tiempo.

Aun así, hará que su nuevo sitio web crezca más y sea más 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 es verdaderamente el corazón de WordPress, y cada día los colegas trabajan para mejorarlo.

Al elegir una opción diferente, 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 su 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 “.

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

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

Si usted es un profesional independiente o tiene una pequeña empresa, es posible que aún esté bien con un creador de sitios web que no requiera asistencia de desarrollador ni costo adicional.

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

WordPress Gutenberg es el futuro

WP Rocket tiene razón al decir 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 completa del sitio web de Gutenberg está programada para debutar en junio de 2021.

Con WP Rocket eligiendo uno para el equipo, ahora sabemos que WordPress Gutenberg tiene una interfaz de usuario realmente prometedora para editar y puede ayudar a mejorar el rendimiento de su sitio.

Happy
Happy
0
Sad
Sad
0
Excited
Excited
0
Sleepy
Sleepy
0
Angry
Angry
0
Surprise
Surprise
0
Previous post Las 10 Mejores Alternativas de Google Analytics en el 2021
Next post Cómo configurar las conversiones de Google Analytics 4