El nuevo editor Gutenberg de WordPress VS el editor clásico: desglose del rendimiento: ¿es tan malo como dicen?

El nuevo editor Gutenberg de WordPress VS el editor clásico: desglose del rendimiento: ¿es tan malo como dicen?

Una pregunta que ha estado pasando por nuestras mentes últimamente es: ¿Cómo funciona el nuevo editor en el bloque Sí, en serio Alto, ¿Gutenberg vs Clásico?

Gutenberg se acerca cada vez más al lanzamiento oficial como LA opción para la edición de contenido en WordPress.

Al igual que con todos los demás niños nuevos de la cuadra, hubo muchas reacciones diferentes a esta noticia.

Desde personas que están entusiasmadas de que finalmente haya un “constructor visual” oficial, hasta webmasters que están preocupados por problemas de rendimiento, hasta desarrolladores que se vuelven locos por problemas de implementación.

A medida que los dos últimos grupos han invertido más en el actual WordPress, sus voces se han vuelto más fuertes. Debido a esto, he visto mucha indignación en la comunidad de WordPress. Si es un miembro activo, es probable que también haya visto esta indignación.

Incluso podría haber sido disuadido de probar a Gutenberg al ver opiniones y juicios de terceros.

Pero, ¿cómo se compara realmente el rendimiento del editor de Gutenberg con el del clásico?

Profundizaremos en esta comparación y veremos cómo funciona el editor de Gutenberg. Desde crear contenido desde cero hasta tener problemas con la velocidad de la interfaz. También veremos la facilidad de uso y la calidad del código.

Nuestro objetivo es responder de una vez por todas cuál es la mejor opción para 2018/19.

Rendimiento de la interfaz

Interfaz del editor de Gutenberg

¿Hay problemas de rendimiento?

¿Es notablemente más lento o más rápido que el editor clásico?

Estas son las dos preguntas principales que abordaremos en esta parte de la comparación.

Apariencia de Gutenberg

Mucha gente estaba preocupada por la velocidad y la facilidad de uso real del editor de Gutenberg antes de su lanzamiento.

Teniendo en cuenta que algunos creadores de páginas (que se supone que permanecen sin nombre) tienden a funcionar muy lentamente después de abrir algunas pestañas, incluso en mi nuevo XPS 13 con 8 GB de Ram, y mucho menos en mi computadora portátil personal más antigua con solo 4 GB de Ram, esto también fue un gran problema para mí personalmente.

La buena noticia es que incluso con mi carga normalmente obscena de 40 pestañas abiertas, el editor de Gutenberg es muy fluido, tanto al agregar y editar texto, como al agregar nuevos bloques, imágenes e incluso galerías.

El único problema que tengo es que la edición de texto puede llevar un poco más de tiempo si avanza y retrocede entre párrafos, ya que el texto se divide en bloques de párrafos.

La única vez que pareció fue un momento en el que las vistas se cambiaron de la vista de código a la vista visual o viceversa.

Experiencia similar en la computadora más antigua, sin dejar problemas de rendimiento en el lado de la interfaz

*** Aunque personalmente no he tenido ningún problema importante de rendimiento en mis computadoras (y escribo bastante rápido con alrededor de 75-80 palabras por minuto), mucha gente ha informado de esto como un problema en su computadora.

Rendimiento del editor clásico

El editor clásico también pasó esta prueba con gran éxito.

No hay problema con que el texto se divida automáticamente en bloques aquí, incluso si no lo desea.

Una vez más, la única vez que se congeló ligeramente fue al cambiar de la vista visual al código y viceversa.

*** Si bien hay muchas quejas sobre el rendimiento de Gutenberg en línea, hay muy pocas sobre el editor clásico e incluso críticas favorables para el complemento del editor clásico de los nuevos usuarios de WP …

graduación

Si bien el editor de Gutenberg no lo hizo notablemente peor que el clásico, definitivamente no es una mejora en el rendimiento de ninguna imaginación.

El antiguo editor realmente no tenía un problema de rendimiento en sí mismo, por lo que dadas las quejas y problemas de otras personas, junto con un flujo de trabajo un poco más lento debido al bloqueo automático, El editor clásico tiene la ventaja.

la facilidad de uso

¿Cuál de los dos editores obtiene la mejor puntuación en términos de usabilidad?

Esta es quizás una de las partes más controvertidas de Guthenberg, donde algunas personas confían en editores visuales más poderosos, muchas personas prefieren el editor clásico limitado porque pueden entrar y crear el contenido y luego salir.

La facilidad de uso de Gutenberg

Pruebas de usabilidad de Gutenberg

Cuando se trata de facilidad de uso, debemos ignorar la curva de aprendizaje al usar una nueva herramienta.

Gutenberg puede ser un poco más fácil de usar que el clásico para los nuevos usuarios de WordPress.

También ofrece una mejor relación calidad-precio para aquellos que se centran en la creación de contenido multimedia.

Cabe señalar que puede insertar galerías y portadas inmediatamente, no tiene que escribir «agregar medios» y luego crear galerías. Esto puede ahorrarle curvas de aprendizaje a los principiantes.

buscar

Función de búsqueda de bloques de Gutenberg

La función de búsqueda es una gran ventaja de usabilidad que tiene Gutenberg sobre el editor clásico.

Permite a los usuarios menos expertos en tecnología acostumbrarse rápidamente a agregar videos de Youtube, así como otros elementos más complejos.

Cada párrafo es un bloque separado

Gutenberg convierte automáticamente cada párrafo en un nuevo bloque. Esto parece una especie de llamada de UX extraña del equipo.

Eso no se siente muy intuitivo. Por ejemplo, si solo desea copiar la segunda mitad de un párrafo y la siguiente, no puede hacerlo. Gutenberg te obliga a copiar / mover párrafos completos al seleccionar texto de varios.

La buena noticia es que si crea accidentalmente un párrafo, no tendrá que editar los bloques usted mismo. Simplemente puede eliminar la línea adicional y su texto volverá al mismo párrafo.

Alternar barra lateral derecha

Sin embargo, una característica que muchos autores del nuevo editor apreciarán es la capacidad de ocultar completamente la barra de herramientas derecha para reducir las distracciones.

Algunos trucos adicionales

A Gutenberg se le ocurren algunos trucos adicionales.

Por ejemplo, la portada, las columnas y mi favorito personal, agregando mayúsculas para imitar a un redactor publicitario o editor de noticias a la antigua.

Pero, ¿la mayoría de los usuarios de WP realmente necesitan que se agreguen los elementos y las opciones?

¿Demasiadas opciones?

Una cosa que le viene a la mente mientras trabaja con el nuevo editor es que puede haber demasiadas opciones para los nuevos usuarios.

Porque con el editor de texto clásico, el título está claramente enmarcado y separado, y los medios agregados están claramente delineados y separados para que pueda concentrarse realmente en escribir el texto.

Si intentan hacer de WordPress un CMS más capaz, podrían terminar alienando a quienes solían ser su audiencia principal, personas que solo quieren una plataforma para escribir en línea.

Nota sobre el descuento

Muchos escritores de contenido usan Markdown para ahorrar tiempo al formatear y convertir su contenido de un editor de texto de escritorio a WordPress.

Afortunadamente, también puede copiar / pegar el código HTML generado en el editor de Gutenberg. Con una salvedad, el contenido que inserta se agrega como un «bloque de contenido del editor clásico».

La única diferencia en el flujo de trabajo de copiar y pegar es un clic adicional.

Así que tampoco aquí hay un gran problema de rendimiento.

(Si usa el lenguaje Markdown para escribir en vivo en WordPress, todavía es compatible con el editor de Gutenberg, y no tuve ningún problema con eso).

Facilidad de uso del editor clásico

Autoexplicativo

Si bien uno de los objetivos de Gutenberg era crear una interfaz más fácil de usar para los usuarios no tecnológicos, el clásico ya está prácticamente Autoexplicativo.

La ubicación de Título, Categoría y «Agregar medios» significa que alguien que nunca lo haya usado antes puede publicar su primer contenido en minutos.

Menos elementos

Lo que inmediatamente me viene a la mente al mirar el viejo es la falta de elementos y la simplicidad del diseño.

No es necesario abrir una pestaña separada a menos que desee agregar imágenes o editar URL de enlaces.

Esto significa que agregar cosas como videos o intentar configurar dos columnas para contenido visual es un poco más laborioso. Pero para la mayoría de publicaciones y páginas, esto probablemente no sea un factor.

La cuestión es que, incluso con contenido de imágenes pesadas, la mayor parte del trabajo pesado fuera de WordPress se realizará en Photoshop, Illustrator y Final Cut Pro.

graduación

Qué editor tiene la ventaja en términos de usabilidad depende completamente del usuario.

Si el usuario es un bloguero y sus prioridades son primero el editor de texto y luego todo lo demás, el editor clásico todavía se siente como una opción más intuitiva y mejor.

Si eres fotógrafo o diseñador y te encanta contar historias visuales, Guthenberg es una alternativa más poderosa, aunque no tan poderosa como sus competidores o incluso los complementos de WordPress.

Comparación de código terminado lado a lado

¿Cómo se mantiene el código real para diferentes tipos de contenido?

¿Gutenberg está comprometido de alguna manera por su interfaz de arrastrar y soltar?

La respuesta absoluta y definitiva es no, en realidad no.

Parece agregar algunas líneas en blanco si realiza muchas ediciones continuas, pero ninguno de los contenedores interminables que usan muchos creadores de páginas.

Dado que no permite arrastrar y soltar reales y restringe las opciones de diseño para los diversos elementos. Por lo tanto, no hay código que esté cargado con demasiados divs o CSS en línea.

Probamos varias publicaciones diferentes, incluidas algunas con contenido visual, y el resultado fue prácticamente el mismo que el que da el editor clásico.

Texto simple con 2 columnas y algunas imágenes – Guthenberg

<header class="entry-header">
<h1 class="entry-title">Some headline</h1>
&nbsp;
<div class="entry-meta"><span class="byline"><i class="fa fa-user"></i><span class="author vcard"><a class="url fn n" href="http://website.com/author/ragnar-2/">Ragnar</a></span></span><span class="posted-on"><i class="fa fa-calendar"></i><a href="http://website.com/?p=916" rel="bookmark"><time class="entry-date published" datetime="2018-11-30T16:55:08+00:00">November 30, 2018</time></a></span> <span class="comments-link"> <i class="fa fa-comments"></i> <a href="http://website.com/?p=916#respond">0 Comments</a> </span> <!-- .entry-meta --></div>
<!-- .entry-header -->
</header>&nbsp;
<div class="clearfix entry-content">
I am literally typing out this as a random example sentence.
<div class="wp-block-columns has-2-columns">
&nbsp;
<div class="wp-block-column">
&nbsp;
<h2>There you go again</h2>
&nbsp;
</div>
&nbsp;
<div class="wp-block-column">Why me, I don’t want to Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur eros justo.</div>
&nbsp;
</div>
&nbsp;
<p class="has-drop-cap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur eros justo, id bibendum tortor consectetur vel. Proin vitae scelerisque nulla. Integer scelerisque leo a semper efficitur. Nullam pretium imperdiet turpis, a accumsan erat pharetra et. Duis faucibus, massa non mollis ullamcorper, sapien turpis fringilla mi, et rutrum urna nisl in nisl. Quisque vehicula velit eu vehicula eleifend. Donec vel faucibus diam.</p>
&nbsp;
<p class="has-drop-cap">Duis venenatis pretium nunc eu venenatis. Etiam id dui feugiat, dictum magna ac, fringilla lacus. Duis fermentum ex ut felis interdum consequat. Nulla tincidunt odio vel magna congue, vitae faucibus massa laoreet. Ut fermentum quam nisi, sed accumsan tortor faucibus id. Proin magna est, ullamcorper tincidunt nisl id, sollicitudin fringilla tellus. Phasellus et elit ut tortor laoreet cursus.</p>
&nbsp;
<ul class="wp-block-gallery columns-3 is-cropped">
<li style="list-style-type: none;">
<ul class="wp-block-gallery columns-3 is-cropped">
<li class="blocks-gallery-item">
<figure><img class="wp-image-889" src="http://website.com/wp-content/uploads/2017/12/IMG20171203102405-1024x768.jpg" alt="" data-id="889" data-link="http://website.com/shizuoka-onsen-ryokan/img20171203102405/" /></figure>
&nbsp;</li>
</ul>
</li>
</ul>
&nbsp;
<ul class="wp-block-gallery columns-3 is-cropped">
<li style="list-style-type: none;">
<ul class="wp-block-gallery columns-3 is-cropped">
<li class="blocks-gallery-item">
<figure><img class="wp-image-885" src="http://website.com/wp-content/uploads/2017/12/shuzenjifallcolors-1024x768.jpg" alt="" data-id="885" data-link="http://website.com/shizuoka-onsen-ryokan/shuzenjifallcolors/" /></figure>
&nbsp;</li>
</ul>
</li>
</ul>
&nbsp;
<ul class="wp-block-gallery columns-3 is-cropped">
<li style="list-style-type: none;">
<ul class="wp-block-gallery columns-3 is-cropped">
<li class="blocks-gallery-item">
<figure><img class="wp-image-884" src="http://website.com/wp-content/uploads/2017/12/shuzenji-1024x768.jpg" alt="" data-id="884" data-link="http://website.com/shizuoka-onsen-ryokan/shuzenji/" /></figure>
&nbsp;</li>
</ul>
</li>
</ul>
&nbsp;
<ul class="wp-block-gallery columns-3 is-cropped">
<li style="list-style-type: none;">
<ul class="wp-block-gallery columns-3 is-cropped">
<li class="blocks-gallery-item">
<figure><img class="wp-image-883" src="http://website.com/wp-content/uploads/2017/12/amagiso-oodaru-onsen-shizuoka-1024x768.jpg" alt="" data-id="883" data-link="http://website.com/shizuoka-onsen-ryokan/amagiso-oodaru-onsen-shizuoka/" /></figure>
&nbsp;</li>
</ul>
</li>
</ul>
&nbsp;
Vestibulum id ultricies diam. Phasellus suscipit nunc ac velit euismod lobortis. Nam bibendum metus mi, consectetur suscipit purus ornare id. Nullam ut mollis purus.
</div>
&nbsp;

Mismo código para sitio clásico

<article id="post-923" class="clearfix post-923 post type-post status-draft format-standard hentry category-uncategorized">
<header class="entry-header">
<h1 class="entry-title">Some headline</h1>
<div class="entry-meta">
<span class="byline"><i class="fa fa-user"></i><span class="author vcard"><a class="url fn n" href="http://website.com/author/ragnar-2/">Ragnar</a></span></span><span class="posted-on"><i class="fa fa-calendar"></i><a href="http://website.com/?p=923" rel="bookmark"><time class="entry-date published" datetime="2018-11-30T17:20:16+00:00">November 30, 2018</time></a></span>
<span class="comments-link">
<i class="fa fa-comments"></i>
<a href="http://website.com/?p=923#respond">0 Comments</a> </span>
<!-- .entry-meta --></div>
<!-- .entry-header --></header>
<div class="clearfix entry-content">
<p>I am literally typing out this as a random example sentence.</p>
<div class="has-2-columns">
<div class="half">
<h2>There you go again</h2></div>
<div class="half">Why me, I don’t want to<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur eros justo.</div></div>
<p class="has-drop-cap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur eros justo, id bibendum tortor consectetur vel. Proin vitae scelerisque nulla. Integer scelerisque leo a semper efficitur. Nullam pretium imperdiet turpis, a accumsan erat pharetra et. Duis faucibus, massa non mollis ullamcorper, sapien turpis fringilla mi, et rutrum urna nisl in nisl. Quisque vehicula velit eu vehicula eleifend. Donec vel faucibus diam.</p>
<p class="has-drop-cap">Duis venenatis pretium nunc eu venenatis. Etiam id dui feugiat, dictum magna ac, fringilla lacus. Duis fermentum ex ut felis interdum consequat. Nulla tincidunt odio vel magna congue, vitae faucibus massa laoreet. Ut fermentum quam nisi, sed accumsan tortor faucibus id. Proin magna est, ullamcorper tincidunt nisl id, sollicitudin fringilla tellus. Phasellus et elit ut tortor laoreet cursus.</p>
<div id="slider-1" class="flexslider slider-923"><div class="flex-viewport" style="overflow: hidden; position: relative; height: 350px;"><ul class="slides" style="width: 1200%; margin-left: -720px;"><li class="item clone" aria-hidden="true" style="width: 720px; float: left; display: block;"><a href="http://website.com/shizuoka-onsen-ryokan/amagiso-oodaru-onsen-shizuoka/"><img width="467" height="350" src="http://website.com/wp-content/uploads/2017/12/amagiso-oodaru-onsen-shizuoka.jpg" class="attachment-650x350 size-650x350" alt="" draggable="false"></a></li><li class="item active flex-active-slide" style="width: 720px; float: left; display: block;"><a href="http://website.com/shizuoka-onsen-ryokan/img20171203102405/"><img width="467" height="350" src="http://website.com/wp-content/uploads/2017/12/IMG20171203102405.jpg" class="attachment-650x350 size-650x350" alt="" draggable="false"></a></li><li class="item" style="width: 720px; float: left; display: block;"><a href="http://website.com/shizuoka-onsen-ryokan/shuzenjifallcolors/"><img width="467" height="350" src="http://website.com/wp-content/uploads/2017/12/shuzenjifallcolors.jpg" class="attachment-650x350 size-650x350" alt="" draggable="false"></a></li><li class="item" style="width: 720px; float: left; display: block;"><a href="http://website.com/shizuoka-onsen-ryokan/shuzenji/"><img width="467" height="350" src="http://website.com/wp-content/uploads/2017/12/shuzenji.jpg" class="attachment-650x350 size-650x350" alt="" draggable="false"></a></li><li class="item" style="width: 720px; float: left; display: block;"><a href="http://website.com/shizuoka-onsen-ryokan/amagiso-oodaru-onsen-shizuoka/"><img width="467" height="350" src="http://website.com/wp-content/uploads/2017/12/amagiso-oodaru-onsen-shizuoka.jpg" class="attachment-650x350 size-650x350" alt="" draggable="false"></a></li><li class="item active clone" style="width: 720px; float: left; display: block;" aria-hidden="true"><a href="http://website.com/shizuoka-onsen-ryokan/img20171203102405/"><img width="467" height="350" src="http://website.com/wp-content/uploads/2017/12/IMG20171203102405.jpg" class="attachment-650x350 size-650x350" alt="" draggable="false"></a></li></ul></div><ol class="flex-control-nav flex-control-paging"><li><a class="flex-active">1</a></li><li><a>2</a></li><li><a>3</a></li><li><a>4</a></li></ol><ul class="flex-direction-nav"><li><a class="flex-prev" href="https://www.clarityoneaudio.com/the-new-wordpress-gutenberg-editor-vs-classic-editor-performance-breakdown-is-it-as-bad-as-they-say/#">Previous</a></li><li><a class="flex-next" href="https://www.clarityoneaudio.com/the-new-wordpress-gutenberg-editor-vs-classic-editor-performance-breakdown-is-it-as-bad-as-they-say/#">Next</a></li></ul></div>
<p>Vestibulum id ultricies diam. Phasellus suscipit nunc ac velit euismod lobortis. Nam bibendum metus mi, consectetur suscipit purus ornare id. Nullam ut mollis purus. Nullam efficitur imperdiet massa, at gravida orci sollicitudin ut. Sed interdum augue in congue mollis. Vestibulum sodales volutpat posuere. Suspendisse sollicitudin nibh id consectetur maximus.</p>
<p>Quisque venenatis sem massa, sit amet lacinia ante faucibus non. Aliquam sem tortor, feugiat vitae neque a, eleifend tristique augue. Nam maximus lacus risus, sed tristique tortor laoreet nec. Fusce sagittis lorem quis ex semper scelerisque non eget neque. Mauris fermentum sapien sit amet lorem varius condimentum. Curabitur molestie ut tellus quis consequat. Nam molestie consectetur congue. Morbi non felis eget lectus tempus malesuada eu quis neque. Duis eu mattis lectus. Fusce pulvinar ex eget mauris fringilla vulputate. Phasellus at dolor nec urna aliquet auctor tristique eget turpis. Suspendisse diam odio, egestas sed luctus vel, scelerisque egestas libero. Cras eu massa orci. In et mauris eu risus scelerisque sodales non et erat.</p>
<p>There is nothing really that should be said I wonder if there is nothing</p>
<!-- .entry-content --></div>
<footer class="entry-meta entry-footer">
<span class="cat-links">
<i class="fa fa-folder-open"></i>
<a href="http://website.com/category/uncategorized/" rel="category tag">Uncategorized</a> </span>
<span class="bookmark-link">
<i class="fa fa-bookmark"></i>
<a href="http://website.com/?p=923" rel="bookmark">Bookmark</a> </span>
<span class="edit-link"><i class="fa fa-pencil"></i><a class="post-edit-link" href="http://website.com/wp-admin/post.php?post=923&amp;action=edit">Edit</a></span> <!-- .entry-footer --></footer>
<!-- #post-923 --></article>

Última llamada: ¿vale la pena mover Gutenberg?

Después de darle a Gutenberg una oportunidad real y probarla mientras escribía varias publicaciones, mi conclusión final es: No. La versión actual del nuevo editor no vale el costo y el esfuerzo de cambiar para la mayoría de los usuarios.

Sufre problemas de rendimiento y una interfaz de usuario que se supone que es más intuitiva y menos abarrotada. Pero termina con más obstáculos junto con opciones.

Si tiene un sitio web de WordPress principalmente basado en texto, probablemente este no sea para usted. Y si desea centrarse en lo visual, es probable que ya esté familiarizado con otros complementos.

El principal punto de venta para usar Gutenberg como editor sería que desea crear contenido rico en medios pero tener estándares de código más altos de lo que permiten la mayoría de los creadores de páginas visuales.

¡Si te ha gustado no dudes en compartirlo!

Deja un comentario

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad