10 consejos para optimizar Elementor

¿Tu web con Elementor va lenta? La velocidad es lo primero que nota un visitante, y también una de las cosas que mira Google para decidir qué páginas muestra arriba. La buena noticia es que una web con Elementor puede ser rápida si se construye y se configura bien.

En este artículo te doy mis consejos para optimizar Elementor, ordenados de lo más sencillo a lo más técnico. Son los mismos que aplico cuando un cliente me llama porque su web tarda en cargar.

1. Selecciona un método de carga del texto

Las fuentes son uno de los recursos que más retrasan que se vea el texto. Elementor te deja controlar cómo se cargan las Google Fonts:

• Cárgalas desde tu servidor. Elementor puede descargar las Google Fonts y servirlas desde tu propio hosting en lugar de pedirlas a Google. Ahorras peticiones a otro servidor y, de paso, evitas enviar datos de tus visitantes a Google, algo importante por la protección de datos.
• Elige bien el método de visualización (font-display). En los ajustes de Elementor puedes elegir entre Auto, Bloquear, Intercambiar (swap), Reserva (fallback) u Opcional. Mi recomendación es Intercambiar: el texto se ve al momento con una fuente del sistema y cambia a la tuya en cuanto ha cargado, en lugar de quedar invisible.
• Usa pocas fuentes y pocos pesos. Cada familia y cada grosor (300, 400, 600…) es un archivo más. Con una familia y dos o tres pesos suele bastar.

2. Mejora el tamaño de los elementos visuales sin afectar la calidad

Las imágenes suelen ser lo que más pesa en una página. Para que no frenen tu web:

• Súbelas al tamaño en que se van a ver. Una foto de 4.000 píxeles para un hueco de 800 es peso tirado.
• Usa formatos modernos como WebP o AVIF. Un plugin como Imagify o el propio hosting pueden convertirlas automáticamente.
• Activa la carga diferida (lazy load) para las imágenes que están más abajo, de forma que solo se descarguen cuando el usuario llega a ellas. Te lo explico en mi guía de lazy load en WordPress y Elementor.
• No apliques lazy load a la imagen principal de la parte de arriba de la página. Es la que Google mide como «elemento más grande» (LCP) y tiene que cargar cuanto antes.

Y cuidado con los vídeos de fondo y las animaciones Lottie pesadas: quedan muy bien, pero pueden ser lo más lento de toda la página.

3. Elige y gestiona tus plugins de forma eficiente

Elementor se integra con muchos plugins (WooCommerce, Rank Math, ACF, Crocoblock…), y es fácil acabar con decenas de complementos activos. Cada uno puede cargar sus propios archivos CSS y JavaScript en todas las páginas, aunque no se use en ellas.

• Quédate solo con los que necesitas y borra los que no uses.
• Evita tener varios paquetes de widgets para Elementor que hacen lo mismo.
• Antes de instalar uno nuevo, comprueba si Elementor ya lo hace de serie.

4. Selecciona un alojamiento bien optimizado

Por mucho que optimices Elementor, si el servidor tarda en responder, la web irá lenta. No hace falta un servidor dedicado: un buen hosting compartido o gestionado para WordPress es suficiente para la mayoría de webs. Lo importante es que tenga:

• Una versión de PHP actual.
• Discos rápidos (NVMe) y recursos suficientes para tu tráfico.
• Caché a nivel de servidor (por ejemplo, LiteSpeed o Nginx con caché).
• Servidores cerca de tus visitantes, o un CDN.
• Buen soporte técnico.

Si tienes dudas, aquí tienes mi comparativa de hosting y dominio para WordPress.

5. Escoge un tema ligero para optimizar Elementor

Con Elementor, el tema solo pone la base, así que cuanto más ligero, mejor. Busca un tema modular, que cargue poco código y te deje desactivar lo que no uses.

Algunos temas WordPress ligeros que te recomiendo son los siguientes:

• Hello Elementor: el tema oficial de Elementor, mínimo y pensado para construirlo todo con Elementor. Funciona también con la versión gratuita.
• Astra: muy ligero y con muchas opciones.
• GeneratePress: otro clásico rápido y bien programado.

Te explico más sobre el tema oficial en mi guía de Hello Theme de Elementor.

6. Acelera tu sitio eliminando la caché

La caché guarda una copia ya preparada de cada página para servirla mucho más rápido. Lo que conviene es tener la caché activada y vaciarla cuando cambias algo, para que tus visitantes vean la versión nueva.

• Usa un plugin de caché como WP Rocket o LiteSpeed Cache (si tu hosting usa LiteSpeed), o la caché del propio hosting.
• Cuando cambies el diseño y no veas los cambios, ve a Elementor > Herramientas > Regenerar archivos y datos y después vacía la caché del plugin.
• Si usas Cloudflare u otro CDN, vacía también su caché.

7. Limpia la base de datos de WordPress

Con el tiempo, la base de datos acumula revisiones de entradas, borradores, comentarios de spam y restos de plugins que ya no usas. Limpiarla no va a hacer milagros, pero ayuda a que WordPress responda más rápido, sobre todo en webs antiguas.

Un plugin como WP-Optimize te permite borrar todo eso y optimizar las tablas. Haz siempre una copia de seguridad antes.

8. Mejora el diseño de tu sitio web

La forma de construir la página también influye mucho en la velocidad.

Ocultar elementos en móvil no los quita de la carga

Un error muy habitual: hacer una versión de escritorio y otra de móvil de la misma sección, y ocultar una u otra con las opciones de visibilidad de Elementor. Parece limpio, pero ocultar un elemento por dispositivo solo lo esconde con CSS: el HTML sigue en la página y sus imágenes, vídeos o animaciones pueden seguir descargándose. El propio equipo de Elementor lo confirma: ocultar un elemento no lo elimina del DOM.

El resultado es que el móvil carga las dos versiones. Mejor un único contenedor que se adapte a cada dispositivo (cambiando la dirección, el orden o los tamaños) que duplicar secciones.

Menos capas, menos código

Cada contenedor, sección o columna anidada añade código. Revisa que no tengas contenedores dentro de contenedores sin motivo, y usa las plantillas del Theme Builder para la cabecera y el pie en lugar de repetirlos en cada página.

9. Usa contenedores en lugar de secciones

Si tu web se hizo con secciones y columnas, pasarla a contenedores flexbox reduce mucho el código generado. Y si empiezas una web nueva con el editor V4, el Div Block es todavía más ligero cuando solo necesitas agrupar elementos. Te lo explico en mi guía de Flexbox en Elementor, de V3 a V4.

Revisa también los ajustes de rendimiento de Elementor: las versiones recientes cargan los estilos y scripts solo cuando un widget los necesita y generan un HTML más ligero. Si tu web es antigua, puede que alguna de esas opciones esté desactivada.

10. Mide antes y después

No optimices a ciegas. Antes de cambiar nada, mide tu web con PageSpeed Insights o con mi auditor web gratuito, y fíjate en las métricas de Core Web Vitals: LCP (lo que tarda en verse lo principal), INP (lo que tarda en responder al tocar algo) y CLS (si la página se mueve mientras carga). Vuelve a medir después de cada cambio, para saber qué ha funcionado.

Palabras finales

Una web lenta pierde visitas, clientes y posiciones en Google. Con estos consejos puedes optimizar Elementor sin cambiar de herramienta: empieza por las imágenes, las fuentes y la caché, que son los cambios más rápidos, y sigue con los plugins y la estructura de las páginas.

Si prefieres que lo haga yo, puedo optimizar tu web con mi servicio de optimización WPO, o ayudarte como experto en WordPress freelance.