Cómo optimizar Elementor en WordPress

En esta lección aprenderás cómo optimizar Elementor Page Builder en WordPress para obtener buenas notas en Google PageSpeed y acelerar la carga de las webs creadas con Elementor.

Aunque Elementor Page Builder es uno de los maquetadores más populares de WordPress, con el tiempo y los cambios de Google no ha sabido adaptarse de la mejor manera.
Durante este tiempo el equipo de Elementor ha trabajado duro para añadir mejoras de optimización del código del plugin, consiguiendo reducir bastante el uso de archivos CSS y JavaScript, pero no ha sido suficiente para las exigencias de Google y el exceso DOM que añade a WordPress.

Te recomiendo encarecidamente que cambies Elementor por un maquetador basado en Gutenberg como Spectra.

Si usas Elementor Page Builder y por la razón que sea no quieres cambiar a otro maquetador esta lección es para ti, ya que te enseñaré cómo optimizar y acelerar Elementor para obtener buenas notas en Google PageSpeed.

A modo de recopilación de la lección he grabado el siguiente vídeo donde te muestro paso por paso como optimizar correctamente Elementor para que no nos afecte negativamente a las notas de PageSpeed:

Después de grabar el vídeo se han añadido nuevos y mejorados experimentos para optimizar Elementor, te recomiendo encarecidamente que leas y actives las opciones que te indico en esta lección.

Evitar el uso de Elementor

Aunque Elementor sea un buen maquetador y se puedan conseguir buenas notas con él no es el más recomendable a día de hoy. 

Lo ideal sería que crearas tu página web con Gutenberg junto con uno de los temas ligeros y recomendables como Astra, Kadence, Botiga, etc. 

Si en tu caso necesitas una estética muy trabajada para crear landings pages basadas 100% en el marketing, entonces Elementor sí es una buena opción. 

Es importante que solo uses Elementor en las páginas que requieran una estética trabajada y en el resto de páginas lo desactives. 

Optimizar scripts de Elementor

Optimizar los archivos de Elementor es fundamental para aliviar el peso de tu sitio web y mejorar la velocidad de carga. Esto se debe a que, cuanto más pesado sea tu sitio, más tardará en cargar y esto puede afectar negativamente la experiencia del usuario y el posicionamiento en los motores de búsqueda. Por eso, es importante saber cómo optimizar Elementor y reducir el tamaño de los archivos de tu sitio para mejorar su rendimiento.

Vamos a aprender cómo optimizar los scripts de Elementor:

Consejos de uso que acelerarán Elementor

No usar cabecera y pie de página de Elementor

Estas deben ser siempre trabajo del tema y nunca usar las plantillas de Elementor para crear la cabecera y pie de página de la web. 

Al usar Elementor para la cabecera y pie de página aumentarás significativamente el DOM de la página, su peso y la carga de scripts, reduciendo drásticamente las notas en PageSpeed y aumentando la velocidad de carga de la página web.

No definir la tipografía al diseñar con Elementor

Aquí debo insistir mucho, ya que es algo que me encuentro en el 99% de las webs con las que trabajo y es uno de los errores que más problemas traen a la larga. 

Nunca, nunca, nunca (y perdón por insistir tanto) debemos definir la fuente cuando diseñamos la página. 

El campo de la tipografía debe estar siempre en “Por defecto”. 

Si especificamos una familia en este campo no importa cuanto optimicemos después las fuentes o cambiemos la familia desde el tema, Elementor siempre forzará la carga de la tipografía, esto añadirá fuentes extras a la carga de la web, empeorando nuestras notas y velocidad de carga.

Además, ¿Qué ocurriría si en un futuro quieres hacer una remodelación de branding y quieres cambiar de tipografías?
Que tendrías que ir página por página, título por título y texto por texto a revisar cambiar de forma manual la tipografía.  

Las tipografías deben estar definidas siempre por el tema. 

Lo mismo que con las fuentes pasa con el peso de la fuente, siempre debe estar en «normal» o «negrita» para que sea el tema quien ponga la variación 400 o 700, o la que hayamos asignado. 

No usar Elementor para maquetar entradas 

Las entradas, al igual que la cabecera y pie de página, deben ser siempre trabajo del tema. 

Hay que evitar a toda costa cualquier uso de las plantillas de Elementor y dejar que todo el trabajo sea del tema: tipografías, colores, diseño de entradas, diseño de archivos, cabecera, pie de página, barra lateral, etc. 

Lo recomendable es desactivar todos los tipos de contenido que uso tu web excepto las páginas dejando solo activa la siguiente opción:

No usar la versión Pro de Elementor

Debemos evitar el uso de la versión Pro de Elementor. 

Se pueden crear páginas profesionales, grandes, incluso tiendas online, sin la necesidad de la versión Pro de Elementor.

Si el tema ya se encarga de los archivos, cabecera, pie de página y un largo etcétera de elementos y debemos evitar el uso de las plantillas (que lo único que hacen es añadir más scripts a la carga de la web) ¿de qué nos sirve la versión Pro? 

Si nos vamos al script manager de Perfmatters vemos que Elementor pesa, ni más ni menos, que 1096,5 KB (más adelante aprenderemos a reducir el peso). ¡Una auténtica barbaridad! 
Y si añadimos el peso extra de la versión Pro ya rozamos casi 2 MB, además de 7 scripts extra que tendrá que cargar nuestra web. 

Si queremos hacer uso de Elementor en nuestra web debemos ser conscientes de su impacto en nuestra web y usar solo lo estrictamente necesario. 

No usar plugins extras para Elementor

Esto es algo que me encuentro también con regularidad: instalar plugins extra que complementan Elementor o añaden más módulos para diseñar. 

Sinceramente no necesitas ningún plugin ni módulo extra para diseñar una web moderna y funcional.

Te muestro el ejemplo con algunos de los plugins más famosos: Premium Addons for Elementor, Happy Elementor Addons y Essential Addons for Elementor:

Elementor tiene un total de 18 scripts, Elementor Pro un total de 7 scripts y si los sumamos a Happy Elementor Addons, por ejemplo, tendríamos un total de 29 archivos CSS Y JavaScript solo para hacer funcionar Elementor. 

Esto es, de lejos, un número demasiado grande de scripts para hacerle cargar a nuestra web.

Es por eso que insisto:

Si queremos hacer uso de Elementor en nuestra web debemos ser conscientes de su impacto en nuestra web y usar solo lo estrictamente necesario. 

No usar animaciones

Las animaciones hace ya un tiempo que han dejado de ser una tendencia en el diseño web, ya que, en la mayoría de los casos, distraen y dificultan la interacción de los usuarios con nuestra web. 

Pero además de a la experiencia de usuario afecta también a la carga de nuestra web, ya que añade scripts extra para hacer funcionar estas animaciones. 

Lo que te recomiendo, tanto como profesional de optimización como profesional de diseño web, es que evites el uso de animaciones. 

Una web sencilla aumenta significativamente la conversión de leads. 

Hacer uso de los experimentos para optimizar Elementor

Desde hace un tiempo el equipo de Elementor está trabajando rápidamente para mejorar el impacto que genera su plugin en las notas y rendimiento de nuestra web. 

Han añadido opciones nuevas y muy interesantes en la sección de Experimentos. 

A continuación vamos a aprender a activar los experimentos, cuáles son los que debemos activar para mejorar el rendimiento de Elementor y para qué sirve cada uno:

Para llegar a ellos debemos ir a Elementor > Ajustes > Experimentos

Te recomiendo activar las siguientes opciones para mejorar la velocidad de carga de la web y las notas en Google Page Speed en una web creada con Elementor: 

Resultados de los experimentos de Elementor

Peso de Elementor sin experimentos activos: 1096,5 KB

Peso de Elementor con experimentos activos: 846,5 KB

Peso de Elementor Pro sin experimentos activos: 630,8 KB

Peso de Elementor Pro con experimentos activos: 61 KB

La diferencia es notable al activar los experimentos de Elementor.

En esta lección hemos aprendido cómo optimizar Elementor para mejorar el rendimiento de nuestro sitio web.
Aplicar estos consejos nos ayudará a reducir el tamaño de los archivos y la carga del servidor, lo que a su vez aumentará la velocidad de carga de nuestro sitio y mejorará las notas de Google PageSpeed.

Ahora es el momento de poner en práctica todo lo aprendido y empezar a utilizar Elementor de manera más eficiente.

Sin embargo, es recomendable a largo plazo dejar de usar Elementor y optar por utilizar otras opciones más recomendables y adaptadas a las exigencias de Google como Spectra.

¡Aplica lo aprendido y comienza a optimizar WordPress hoy mismo!