Elementor es el page builder más popular de WordPress, con más de 5 millones de instalaciones activas. Es potente, flexible y visual. Pero también es uno de los principales responsables de que tantos sitios WordPress sean lentos.
Si usas Elementor y tu score de PageSpeed está bajo 60, este post es para ti.
Por qué Elementor agrega peso a tu sitio
Elementor funciona creando una capa visual sobre WordPress. Para que el editor funcione y los diseños se vean bien en el frontend, necesita cargar una cantidad significativa de código.
Lo que Elementor agrega a cada página:
- CSS del framework: Estilos base de Elementor (~200KB sin comprimir)
- CSS por widget: Cada widget que usas agrega sus propios estilos
- JavaScript: Scripts para animaciones, sliders, lightbox, etc. (~300KB+)
- Google Fonts: Si usas fuentes de Google, cada variante es una petición extra
- Font Awesome: La librería completa de íconos (~150KB) incluso si usas 3 íconos
- Inline CSS: Elementor genera estilos inline para cada elemento con personalización
En un sitio típico con Elementor, estamos hablando de 500KB-1.5MB de CSS y JS solo del builder. Eso antes de contar tu tema, plugins, imágenes y contenido.
El problema del DOM pesado
Elementor genera HTML con muchos divs anidados. Un simple texto con fondo puede generar 5 niveles de divs. Google específicamente penaliza sitios con “excessive DOM size” en PageSpeed Insights, y Elementor es una de las causas principales.
6 formas de optimizar Elementor sin cambiar diseño
No te voy a decir que dejes Elementor. Si tu sitio ya está construido con él, migrar a otra cosa es costoso y riesgoso. Lo que sí puedes hacer es optimizarlo significativamente.
1. Desactiva widgets que no usas
Elementor carga los estilos y scripts de todos los widgets habilitados, uses o no. Si no usas el widget de Accordion, Toggle, o Tabs, están cargando CSS innecesario.
Cómo hacerlo:
- Ve a Elementor > Ajustes > Avanzado
- Busca “Experimentos” o “Features”
- Desactiva los widgets que no necesitas
Con Elementor Pro, puedes ir a Elementor > Ajustes > Elementos y desmarcar los que no usas.
2. Activa las optimizaciones integradas de Elementor
Desde Elementor 3.0+, hay opciones de rendimiento que muchos no activan:
Ve a Elementor > Ajustes > Rendimiento:
- CSS Print Method: Usa “Internal Embedding” para páginas con poco tráfico, o “External File” para páginas con mucho tráfico (mejor para caché)
- Improved CSS Loading: Actívalo. Carga solo el CSS de los widgets que realmente usas en cada página.
- Lazy Load Background Images: Actívalo.
Ve a Elementor > Ajustes > Avanzado > Experiments:
- Optimized DOM Output: Actívalo. Reduce la cantidad de divs generados.
- Inline Font Icons: Reemplaza Font Awesome por SVG inline (mucho más liviano).
3. Reemplaza Google Fonts por fuentes self-hosted
Por defecto, Elementor carga fuentes desde Google Fonts CDN. Cada familia tipográfica es una petición HTTP adicional que bloquea el render.
Cómo hacerlo:
1. Descarga los archivos woff2 de las fuentes que usas (desde google-webfonts-helper)
2. Súbelos a tu servidor
3. En Elementor > Ajustes > Avanzado, desactiva Google Fonts
4. Carga las fuentes con @font-face en tu CSS personalizado
Esto elimina las peticiones a Google y te da control total sobre la carga de fuentes.
4. Elimina Font Awesome donde no lo necesites
Font Awesome es una librería de íconos que pesa ~150KB. Si solo usas 5 íconos en tu sitio, estás cargando una librería entera por 5 íconos.
Alternativas:
- Usa SVG inline para los pocos íconos que necesitas
- En Elementor > Ajustes > Avanzado, busca la opción de Font Awesome y cámbialo a SVG
- Si no usas íconos, desactiva Font Awesome completamente
5. Optimiza las imágenes dentro de Elementor
Elementor permite insertar imágenes en múltiples widgets, pero no las optimiza automáticamente.
Recomendaciones:
- Sube imágenes ya optimizadas (WebP, comprimidas)
- En cada widget de imagen, define el tamaño adecuado (no uses “Full” si se muestra a 600px)
- Activa lazy loading en las imágenes que no están above-the-fold
- Evita background images pesadas en secciones
6. Usa Asset CleanUp o Perfmatters
Estos plugins permiten controlar qué CSS y JS se carga en cada página específica. Puedes:
- Descargar los scripts de Elementor en páginas que no usan Elementor (por ejemplo, la página de checkout)
- Remover CSS/JS de plugins que no se necesitan en ciertas páginas
- Priorizar la carga de scripts críticos
Es una herramienta avanzada, pero el impacto es significativo. Hemos visto mejoras de 20-30 puntos en PSI solo con una buena configuración de Asset CleanUp.
¿Qué score puedes esperar con Elementor optimizado?
Con un sitio Elementor sin optimizar, lo típico en Chile es un score de 30-50 en mobile.
Con las optimizaciones de arriba, puedes llegar a 70-85 en mobile. No vas a llegar a 100 (eso requiere un sitio sin page builder), pero la diferencia entre 35 y 80 es enorme en términos de experiencia de usuario y SEO.
Lo que no puedes arreglar solo
Algunas optimizaciones requieren conocimiento técnico profundo:
- Configurar caché correctamente con Elementor
- Implementar critical CSS para el above-the-fold
- Optimizar el servidor (PHP workers, OPcache, base de datos)
- Resolver conflictos entre Elementor y plugins de optimización
Estos son los problemas que resolvemos en WP Rápido. Conocemos Elementor por dentro y sabemos exactamente cómo exprimirle rendimiento sin tocar tu diseño.
Diagnóstico gratuito para tu sitio con Elementor → wprapido.cl
