Principal Mejora de Rendimiento de Elementor 3.22
Elementor continúa su racha de traer nuevas mejoras de rendimiento. Entre algunas de las novedades incluidas en versiones anteriores, podemos encontrar: la carga diferida de imágenes de fondo, la carga mejorada de CSS, las fuentes de iconos integradas y la carga optimizada de Gutenberg. Para la versión 3.22, Elementor ha incluido como mejora principal un Sistema de Almacenamiento en Caché para Widgets.
Sistema de Almacenamiento en Caché para Widgets
Gracias a este nuevo mecanismo, Elementor renderizará los widgets que hayamos habilitado y posteriormente los almacenará en su caché. Esto significa que los mantendrá guardados en una memoria temporal y, la próxima vez que carguemos la página, no tendrá que renderizar de nuevo, sino que utilizará el widget almacenado en la caché.
Es importante entender que, a diferencia de otros plugins de caché empleados en WordPress, esta es una solución que funciona únicamente para sitios web que utilizan Elementor, ya que la caché solo se aplica a los widgets de Elementor. Esto es realmente una gran ventaja, ya que no sustituye otras soluciones de caché que podríamos tener en nuestro sitio y es totalmente compatible para usar en conjunto con ellas. Este proceso se realizará en los tiempos previos durante la carga de la página.
Datos de la Mejora de Rendimiento de Elementor
Todo esto no solo suena fantástico, sino que además nos han proporcionado datos del rendimiento, con reducciones del 33% al 69% en TTFB o “Time to First Byte” (Tiempo hasta el primer byte). Como ejemplo, mencionan reducciones de tiempo del TTFB que han pasado de 600-630 milisegundos a 180-200 milisegundos, suponiendo una mejora muy significativa.
Todo esto se logra gracias a que, con el almacenamiento en caché de los widgets, el uso de la memoria pasa de 3 MB a 8 KB, siendo así una de las mejoras de rendimiento más importantes que ha tenido Elementor hasta la fecha.
Precauciones con el Sistema de Almacenamiento en Caché para Widgets
Este nuevo sistema de caché de Elementor cuenta con algunos ligeros inconvenientes. Por ejemplo, no podrá ser empleado en widgets que utilicen contenido o etiquetas dinámicas, debido a que los datos pueden ofrecer valores diferentes para cada usuario. Un ejemplo serían datos de fecha y hora, información única del usuario, diferentes divisas, campos creados en ACF Fields, etc. De la misma forma, esto afecta también a los elementos que presenten condiciones de visualización.
Además, debemos tener en cuenta que algunos elementos serán automáticamente almacenados en caché y no tendremos forma de cambiarlo, como por ejemplo contenedores, contenedores de grid, el widget off-canvas, secciones, columnas y secciones interiores.
Cómo Activar el Sistema de Almacenamiento en Caché para Widgets
Para activar esta nueva función experimental de Elementor, que todavía se encuentra en fase de desarrollo, debemos primero tener actualizado Elementor a la versión 3.22 o posterior. Una vez realizada la actualización, desde nuestro dashboard de administración de WordPress nos dirigimos a Elementor > Ajustes > Características, desde ahí nos desplazamos hasta encontrar “Caché de elementos” y cambiamos su estado a activo.
Una vez activado, abrimos el editor de Elementor, seleccionamos un widget, como por ejemplo un botón, y en la pestaña de avanzado nos aparecerá una nueva opción llamada “Ajustes de la caché” que nos permitirá seleccionar entre activo, inactivo o por defecto. Es importante recordar que debemos desactivar la caché en widgets que usen contenido dinámico debido a los problemas que podría generar.
Además, en la nueva pestaña de rendimiento que podemos encontrar al acceder desde nuestro dashboard de administración de WordPress a Elementor > Ajustes > Rendimiento, nos muestra una opción llamada “Caducidad de la caché de elementos” donde podremos elegir cuánto duran los datos almacenados en la caché y cada cuánto necesita un nuevo renderizado.
Mejoras de Rendimiento adicionales de Elementor 3.22
La nueva Pestaña de Rendimiento
Como hemos mencionado anteriormente, para la activación de las funcionalidades de la caché, han implementado una nueva pestaña de rendimiento que se puede encontrar en la ruta Elementor > Ajustes > Rendimiento. Desde esta nueva pestaña, podremos activar y desactivar todas las funciones de rendimiento, así como realizar ajustes. Esta es una clara muestra del interés de Elementor en seguir añadiendo funcionalidades que mejoren el rendimiento en el futuro.
Reducción del Tamaño del DOM
Continuando con las mejoras realizadas en la versión 3.21, donde los widgets sin contenedor dejaban de crear elementos HTML vacíos, ahora también han incluido los widgets de Formulario y Publicaciones. Además, han reducido el tamaño de los «div” utilizados que se generan al arrastrar nuevos contenedores internos.
Eliminación de bibliotecas de JavaScript externas
Gran parte de los problemas de rendimiento de Elementor se deben a la forma en que está escrito su código. En esta nueva versión, continúan con el esfuerzo de limpiar y reducir ese código, reemplazando bibliotecas de JavaScript externas con soluciones nativas.
La primera biblioteca externa en ser eliminada es “waypoints.js”, que ayudaba en funciones de desplazamiento de elementos como los widgets de barra de progreso, la tabla de contenidos, el menú, etc. Ahora, están empleando la función nativa “IntersectionObserver()”. Con esta modificación, las páginas que utilicen alguno de los widgets mencionados experimentarán una reducción de 18 KB, lo que mejorará ligeramente los tiempos de carga en el frontend.
Conclusiones sobre las Mejoras de Rendimiento de Elementor 3.22
Como hemos visto en esta nueva actualización, queda claro que Elementor está intentando hacer las cosas bien, tanto añadiendo nuevas funciones que mejoran el rendimiento como corrigiendo la forma en que se escribía su código en el pasado para hacerlo más eficiente. Además, nos han dejado claro que vendrán muchos más de estos cambios. Todo esto lo están realizando mientras siguen añadiendo nuevas funciones realmente interesantes, como el nuevo widget Off-Canvas, que supondrá un antes y un después en la forma en que creamos menús y otros elementos, mejorando además métricas de SEO y rendimiento respecto al uso de Popups.
Descubre más novedades
Si el contenido de este artículo te ha resultado interesante, te invito a que explores más este blog, donde hablo de diseño y desarrollo web, ecommerce, diseño, inteligencia artificial, emprendimiento y mucho más. También puedes suscribirte a la newsletter para recibir un aviso cada vez que subo nuevo contenido a la web. Muchas gracias por leer este artículo.
