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

Últimamente, se ha hablado mucho sobre Gutenberg y la actuación ha versado la facilidad de sus características. ¿Gutenberg es la elección correcta para su sitio? Ventajas superadas? Si tiene curiosidad por obtener más información, ¡sigue leyendo! Nuestro nuevo sitio es 100% Gutenberg, excepto el encabezado y el sótano. Como dijo WPMarmite, esto hace nuestro sitio único. Y compartiremos nuestra experiencia y resultados. Explicaremos por qué elegimos a Gutenberg y qué hizo que esta elección fuera la adecuada para nosotros. Como beneficio adicional, le daremos algo en lo que pensar para entender si Gutenberg también puede ser la solución adecuada para usted.
Le daremos información sobre los beneficios de back-end que más disfrutamos y le explicaremos por qué podría ser útil para usted y le mostraremos cómo hemos mejorado y el rendimiento de Gutenberg. ¡Definitivamente es algo que disfrutará leer! Por qué elegimos a Gutenberg y cómo fue en enero, lanzamos nuestro nuevo sitio web para educar mejor a nuestros lectores sobre el rendimiento web y mejorar la experiencia de los usuarios y clientes. Era hora de otro cambio significativo: nuestro editor de WordPress. Hasta entonces, nuestro sitio web fue creado principalmente por desarrolladores para desarrolladores. Usé el editor clásico. Cada vez que el equipo de marketing tenía que crear una nueva página de destino, actualizar contenido o incluso pensar en un nuevo diseño para una determinada página, bueno … ¡fue un desafío desalentador!
Además, las cosas pueden estar desactualizadas rápidamente en un entorno que cambia rápidamente, como la industria de WordPress. Necesitaba un cambio importante para ser más receptivo. Lo primero que primero: nuestras necesidades se centraron primero en nuestras necesidades de marketing, diseño y desarrollo. Estamos buscando una solución simple y simple que también garantice la mayor precisión y, por supuesto, los mejores resultados de rendimiento. El otro requisito principal era que el equipo de marketing fuera independiente al actualizar el contenido o crear nuevas páginas. Queríamos hacerlos lo más fácil posible, sin la necesidad de una codificación. Como resultado, el back-end tenía que ser manejable con cada tipo de página, debido a las reglas de diseño específicas y claras. En otras palabras, el diseño tenía que ser limpio y consistente entre los tipos de páginas. Nuestro equipo desarrollaría las mismas reglas de diseño. Intentamos considerar la facilidad de desarrollo cuando aprobamos el proyecto. Queríamos mantener el número de bloques personalizados lo más pequeño posible. Por ejemplo, si creamos una determinada sección con un fondo, una imagen y una breve descripción, intentamos reutilizar el mismo diseño en otras páginas en las que el contenido podría mostrarse de la misma manera.
En este momento, todavía no habíamos decidido sobre el editor. Lo siguiente: cómo tomamos nuestra elección Una vez que acordamos los requisitos de diseño y desarrollo, comenzamos a explorar cómo satisfacer mejor nuestras necesidades de marketing independientes. Tenemos que tener dos opciones: Gutenberg o Plugin Advanced CustiS Cields. Tenía algunas preocupaciones sobre Gutenberg. No teníamos experiencia previa en el desarrollo con bloques personalizados de Gutenberg, y algunos artículos fueron muy desalentadores. Parecía ser bastante difícil de usar y tuvimos que equilibrar su potencial de rendimiento con efectividad todos los días. Hemos superado las preocupaciones con los expertos, haciendo preguntas e investigando. El momento del giro fue la discusión con nuestra agencia web, WoodUnit. Nos mostraron cuán visualmente era Gutenberg. ¡Era posible ver exactamente cómo se vería una página de backend! Como ya sabes, este era el tipo de solución fácil que estaba buscando. Nos gustó la idea de que Gutenberg sería muchos bloques de LEGO que podríamos armar como queríamos, verá a qué nos referimos en la siguiente sección. Además de todos, existía la ventaja de rendimiento del uso de Gutenberg, otro requisito esencial para nosotros.
Entonces nuestra elección se convirtió en un problema. Lo que nuestra elección única hizo ahora, es posible que se pregunte si algunas de las preocupaciones sobre Gutenberg aún eran válidas. Comencemos por explicar lo que esta elección única hizo para nosotros. No mentiremos: hubo mucho trabajo detrás del proceso de diseño. Y el equipo de desarrollo también estuvo muy involucrado. El primer aspecto que hizo nuestro proyecto único fue la cantidad de bloques personalizados. El diseño no se centró en Gutenberg. ¿Recuerda? Cuando comenzamos a trabajar en nuestro nuevo sitio web, ni siquiera sabíamos que íbamos a usar Gutenberg. Al mismo tiempo, utilizamos muchas plantillas diferentes y teníamos muchas formas diferentes de organizar el contenido. Como resultado, tuvimos que crear 24 bloques, que están lejos del número promedio. El número de bloques hace una gran diferencia y puede variar mucho. ¡Incluso podrías tener solo una pareja! ¡Además, nuestra experiencia en el desempeño ha hecho que los desarrolladores sudaran un poco! En comparación con el cliente promedio, nuestras expectativas en términos de rendimiento fueron bastante altas. Queríamos el sitio web de mejor desempeño. Después de todo, vendemos la optimización del rendimiento, ¿no? Según nuestra experiencia, aquí hay algunas ideas para usted:
Comience a trabajar en su nuevo diseño web en vista de Gutenberg. Le ahorrará mucho tiempo y podrá ser más eficiente.
Considere cuidadosamente cuántos bloques necesita dependiendo de su negocio. Piense en si necesita ser personalizado o no. Los bloques marcan una verdadera diferencia al usar Gutenberg.
Si no vende el complemento de caché más rápido, simplemente puede optimizar su rendimiento del cohete WP. ¡Te ahorrará mucho tiempo y disfrutará del sitio más rápido hasta ahora! Gutenberg sería la elección correcta para ti? Como viste, no todo era un pastel completo. Esto plantea el potencial de la siguiente pregunta: ¿Gutenberg sería la mejor opción para mi sitio?
Para responder completamente a esta pregunta, le preguntamos a nuestra agencia web por qué podríamos tener sentido para ir a Gutenberg. Vine con tres razones principales.
Primero, Gutenberg es creado por WordPress. Todos los días, muchos colaboradores trabajan para mejorarlo. Gutenberg está realmente en el centro de WordPress. Al elegir otra opción, es posible que no se actualice cuando WordPress hace un cambio.
Con el tiempo, con Gutenberg, necesitará cada vez menos su tema para un nuevo desarrollo. Por ejemplo, con la edición completa del sitio planificado en junio de 2021, podrá editar todos los elementos de un sitio utilizando los bloques de Gutenberg. Lo que es más importante, no necesitará habilidades técnicas para construirlo. Lo mismo es cierto si desea crear otros elementos. Es un gran paso. Y recuerde que Gutenberg es de código abierto y gratis.
Gutenberg le permite dar un paso en el futuro. Claro, podrías ignorarlo. Pero la innovación no se detiene. En un momento, ya no es una opción. Y si tiene un sitio de WordPress, Gutenberg es la mejor opción. Siempre será más fácil encontrar a alguien que lo ayude con un sitio de WordPress construido con Gutenberg que con otra solución. Si piensa en el largo plazo, la elección será una idea para usted. Entonces, ¿es el paso a Gutenberg? No tan rapido.
Si está de acuerdo con un tema gratuito como es, entonces es genial. ¡Puedes poner todos los bloques que quieras, disfrutar de Gutenberg y unirte al futuro WordPress! Sin embargo, si desea un diseño específico y bloques específicos, necesita un desarrollador que lo ayude. Probablemente no te llevará mientras nos haya llevado. Sin embargo, hará que el desarrollo de su nuevo sitio web sea más largo y más costoso de lo habitual porque necesitará ayuda. También debe estar al tanto de la empinada curva de aprendizaje que lo espera.
Esto nos lleva a nuestra última pregunta: ¿quién debería ir por Gutenberg? Si usted es un profesional independiente o administra una pequeña empresa, puede estar bien con un generador de páginas que no requiere desarrollador o costo adicional. Tenga en cuenta por qué Gutenberg podría ser la opción correcta para usted, compartí las razones principales anteriores, y tome su propia elección. Si ejecuta una empresa más grande y necesita un desarrollo específico, entonces sí, Gutenberg es la solución adecuada para usted, sin dudarlo. Si todavía eres un poco escéptico, ¡sigue leyendo! ¿Cuáles son los beneficios del back-end de Gutenberg? La transición del editor clásico a Gutenberg fue sin esfuerzo 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. En otras palabras, ¡hemos logrado el objetivo que tuvimos en mente desde el principio! Veamos juntos cuáles son las funciones que más disfrutamos. Actualizando el contenido: ¿Back-end o front-end? Lo primero que debe saber es que el back-end es casi el mismo que el front-end. Una vez que haya iniciado sesión, podrá explorar el sitio y realizar cualquier cambio en la página haciendo clic en “Editar la página”. Puede actualizar fácilmente una página o una determinada sección y puede ver rápidamente cómo el cambio en el backd. Así es: es directamente visible allí. Hace que las cosas sean muy fáciles para todos.
Página principal de backend
Los bloques personalizados de Gutenberg ofrecen una biblioteca de bloques que son elementos preconstruidos.Cada bloque se puede personalizar y editar y agregar a cualquier página que desee.Como lees en la sección anterior, venir con el diseño requiere el mayor esfuerzo.Una vez que se completa el diseño, puede aprovechar los bloques personalizados.Significa que crear nuevas páginas desde cero o cambiar los elementos en las páginas existentes se vuelve simple.Ya no necesitas ningún diseño.Todo lo que necesita son sus bloques personalizados. Los bloques personalizados WP Rocket para ser prácticos: suponga que tiene un bloque personalizado para CTA.Es muy probable que desee usarlo en varias páginas, ¿verdad?Gracias al bloque personalizado, puede incluir fácilmente CTA en cualquier lugar.Mantendrá el mismo diseño y editará el contenido tanto como desee.
El sótano del impulso de la acción ¿Te imaginas cuánto tiempo y esfuerzo podemos ahorrar ahora? Los bloques y modelos reutilizables también pueden crear bloques reutilizables. Es posible guardar un bloque personalizado que contenga un contenido o imagen particular que usará nuevamente. Tomemos el ejemplo de la CTA anterior. En un momento, desea cambiar un CTA en particular. Puede actualizarlo fácilmente una vez y se actualizará en el sitio. Lo mismo es cierto si tiene un sitio web multilingüe. Edite CTA para cada idioma una vez y así. Además, puede crear modelos. Es decir, puede crear una combinación diferente de bloques de diferentes maneras. ¿Recuerdas que mencioné los bloques LEGO? Es exactamente eso. En términos simples, puedes jugar con los bloques que tienes: formas, iconos, contenido y más. Y puede encontrar páginas nuevas o diferentes solo utilizando los bloques personalizados que ha creado anteriormente. Aquí están todos nuestros bloques reutilizables: lista con bloques de cohetes WP reutilizables
Las páginas de destino de Gutenberg también son útiles para crear nuevas páginas de destino. Las páginas de destino son esenciales para SEO y campañas de marketing más grandes. Cada equipo de marketing le dirá cuánto tiempo y a veces doloroso puede ser crear nuevas páginas de destino. Crear nuevas páginas, incluido el contenido que queremos y el uso del diseño que necesitamos sin esfuerzo es simplemente increíble. Y una vez más, la actualización de contenido es más fácil que nunca, sin importar lo que desee editar.
La página del destino del boletín informativo ¿Puede ver por qué estamos tan entusiasmados con Gutenberg? ¡Y todavía tenemos la sección de rendimiento! Como hemos mejorado el rendimiento (¡y puede ser un almacenamiento de caché que se esfuerza por mejorar el tiempo de carga del sitio web de WordPress, es justo decir que el rendimiento web es un énfasis en nuestro propio sitio. En nuestra opinión, Gutenberg es el instrumento que mejor aborda el rendimiento. Explicaremos en dos puntos clave cómo Gutenberg puede ayudar a hacer un sitio web más eficiente. Tenga en cuenta que no se trata de expresar opiniones negativas sobre las posibles alternativas de Gutenberg, como Pages Builder. Simplemente descubrí que Gutenberg es más fácil de administrar cuando se trata del rendimiento de nuestro sitio. Se minimiza una estructura HTML de código LIGHT HTML generada por Gutenberg. En otras palabras, Gutenberg produce unos pocos
. Este es un punto importante que le permite controlar lo “principal del hilo” y mejorar el tiempo del proceso de representación del navegador. Gutenberg genera un pequeño código, asegurando así que se siga la recomendación de PageSpeed ​​Insights “Evite una dimensión DOM excesiva”. Aquí hay un ejemplo de un código para generar una sección con dos columnas, como la siguiente: Ejemplo de dos columnas La estructura HTML es muy simple:

Gutenberg genera muy pocas etiquetas HTML, lo que lo convierte en una solución ideal para construir un sitio de WordPress de alto rendimiento. Los archivos CSS y JavaScript cargados a pedido, como explicamos anteriormente, nuestro equipo de marketing necesitaba un sitio que pudiera personalizarse sin tener que confiar en un desarrollador para crear nuevas páginas. Como resultado, nuestro tema está compuesto por 24 bloques personalizados. Decidí que cada bloque tenía su propia hoja de estilo y, si es necesario, el archivo JavaScript para las interacciones. Este podría ser un punto de bloqueo, porque se deben cargar más de 25 hojas de estilo y más archivos JavaScript en todas las páginas. Hemos desarrollado nuestro tema dadas las recomendaciones de PageSpeed ​​Insights, especialmente las de “eliminar los recursos de CSS no utilizados”. Esta recomendación especifica que debemos eliminar las reglas CSS no utilizadas de la página actual. Por lo tanto, le pedí a la agencia a cargo de desarrollar el tema para encontrar una manera de cargar archivos CSS y JavaScript desde un bloque a pedido. Es decir, los archivos se cargan solo cuando el bloque se incluye en la página. Luego mejoré el sistema para automatizarlo tanto como sea posible. Finalmente, así es como declaramos y cargamos archivos JavaScript desde un bloque a pedido:

Debido a esta metodología, cada página de nuestro sitio contiene solo el código CSS necesario, reduciendo así el peso de la página. Un punto común entre Gutenberg y Pages Builders Una de las deficiencias de los constructores de páginas es que la hoja de estilo predeterminada contiene demasiada CSS sin usar. La misma desventaja existe con Gutenberg: la hoja de estilo predeterminada contiene todos los CS de los bloques nativos. En términos de rendimiento, este es un problema, porque el CSS no utilizado se carga en todas las páginas. Incluso después de la miniificación, un archivo CSS Gutenberg tiene otros 50kb. En nuestro caso, renunciamos a varios bloques que no se utilizan. También decidimos no usar el archivo CSS Gutenberg. En cambio, “migré” el CSS que realmente necesitaba en nuestra propia hoja de estilo. Después de la compresión, el archivo CSS Gutenberg tiene solo 8KB. Cuando se trata de rendimiento, siempre tratamos de optimizar todo lo que podamos. Esperamos que ahora tenga una idea más clara sobre Gutenberg y por qué podría ser la elección correcta para usted. Disfrutamos más. El diseño y el desarrollo fueron un desafío bastante grande. Sin embargo, el resultado valió la pena, incluida la parte de rendimiento de las cosas. Compartimos algunas conclusiones de nuestra experiencia, posibles desventajas y razones por las cuales Gutenberg parece ser la futura WordPress. Si tiene más dudas, ahora conoce las empresas que deberían tener en cuenta el cambio a Gutenberg. ¿Todavía tiene alguna pregunta o le gustaría compartir su experiencia? ¡Dinos en los comentarios!