¡Hola, hola querido lector! Ya estoy de nuevo por aquí con una guía para optimizar Elementor y mejorar tus resultados en PageSpeed.
Elementor es el maquetador que utilizo en mis webs y en las de mis clientes, pero genera bastante código, así que necesita atención si quieres una página web rápida.
Te aviso de algo desde el principio: el 100 en PageSpeed no es el objetivo, y perseguirlo suele salir caro. Te explico por qué y qué sí merece la pena hacer. ¡Al lío!
Resumen rápido
- Lo que más pesa: el hosting, las imágenes, el número de plugins y la cantidad de elementos por página.
- Activa las optimizaciones de Elementor y utiliza contenedores flexbox en lugar de secciones y columnas.
- Combínalo con un buen plugin de caché, sin duplicar funciones.
- Olvídate del 100: lo que importa son las Core Web Vitals de tus usuarios reales, sobre todo en móvil.
Antes de empezar: el 100 en PageSpeed no es el objetivo
PageSpeed da una puntuación de laboratorio, calculada en condiciones simuladas. Lo que Google utiliza para evaluar la experiencia son las Core Web Vitals de usuarios reales, que están en Search Console.
Puedes tener 100 en PageSpeed y malas métricas reales, o un 75 con una experiencia estupenda. Apunta a estar en verde en las Core Web Vitals, no a la puntuación.
Además, llegar al 100 con un maquetador suele implicar romper cosas: desactivar scripts necesarios, diferir CSS que hace falta o eliminar funciones que tu página web utiliza.
PD. Mide siempre antes de tocar nada. Guarda los datos de partida de tus páginas importantes y compara después de cada cambio, de uno en uno. Si cambias diez cosas a la vez y algo se rompe, no sabrás qué fue.
Diseño tu página web en WordPress rápida y optimizada para SEO. Tu web pensada para convertir visitas en clientes
- Diseño web 100% personalizado. Nada de IA. 100% artesanal.
- Web rápida y lista para posicionar en Google.
- Diseño tu web en menos de 21 días. Firmado por contrato.
- Comunicación directa conmigo. Sin intermediarios.
1. Empieza por lo que no es Elementor
La mayor parte del problema suele estar fuera del maquetador:
- El hosting: si el servidor tarda en responder, no hay optimización que lo arregle. Revisa tu TTFB.
- La versión de PHP: utiliza siempre una versión actual y con soporte.
- Las imágenes, que suelen ser lo que más pesa.
- El número de plugins y su calidad.
- La plantilla: utiliza una ligera como GeneratePress o Hello, el theme del propio Elementor.
Tienes la guía completa en cómo optimizar WordPress.
2. Activa las optimizaciones de Elementor
Elementor incluye ajustes de rendimiento propios que conviene revisar. Los más relevantes:
| Ajuste | Qué hace |
|---|---|
| Iconos en línea | Carga los iconos como SVG en lugar de la librería completa de fuentes |
| Carga optimizada de CSS | Solo carga el CSS de los widgets que utiliza cada página |
| Salida del DOM optimizada | Genera menos elementos HTML por widget |
| Carga diferida de imágenes de fondo | Retrasa las imágenes de fondo que no se ven al entrar |
| Google Fonts en local | Sirve las tipografías desde tu servidor, sin peticiones externas |
| Precarga de la imagen principal | Prioriza la imagen más grande, lo que mejora el LCP |
Actívalos de uno en uno y comprueba que nada se rompe, sobre todo los de CSS, que pueden afectar al diseño.
Diseño tu página web en WordPress rápida y optimizada para SEO. Tu web pensada para convertir visitas en clientes
- Diseño web 100% personalizado. Nada de IA. 100% artesanal.
- Web rápida y lista para posicionar en Google.
- Diseño tu web en menos de 21 días. Firmado por contrato.
- Comunicación directa conmigo. Sin intermediarios.
3. Utiliza contenedores flexbox
Es el cambio con más impacto dentro de Elementor. La maquetación antigua con secciones y columnas genera muchos más elementos HTML que los contenedores flexbox.
En páginas nuevas, utiliza siempre contenedores. En las que ya tienes, rehazlas cuando vayas a tocarlas, sin prisa: no compensa rehacer una web entera solo por esto.
Esto ataca directamente el aviso de tamaño excesivo del DOM. Te lo explico en cómo reducir el DOM.
4. Simplifica el diseño
- Menos secciones anidadas: cada nivel añade código.
- Sin animaciones ni efectos de entrada, que además molestan en móvil.
- Evita los sliders: cargan varias imágenes grandes y suelen convertir peor que una imagen fija.
- Pocas tipografías y pocos grosores.
- Sin vídeos de fondo, que pesan muchísimo.
- Cuidado con los complementos de terceros para Elementor: cada uno carga sus propios recursos.
Diseño tu página web en WordPress rápida y optimizada para SEO. Tu web pensada para convertir visitas en clientes
- Diseño web 100% personalizado. Nada de IA. 100% artesanal.
- Web rápida y lista para posicionar en Google.
- Diseño tu web en menos de 21 días. Firmado por contrato.
- Comunicación directa conmigo. Sin intermediarios.
5. Controla qué se carga en cada página
Aquí está la optimización más rentable. Con Perfmatters o Asset CleanUp puedes desactivar, URL por URL, el CSS y el JavaScript que no se utiliza.
Es habitual que una página de contacto cargue el script de un carrusel que no tiene, o que un post cargue el CSS de WooCommerce.
6. Añade caché y compresión
- Un plugin de caché como WP Rocket, LiteSpeed Cache o el de tu hosting.
- Compresión GZIP o Brotli, que casi siempre ya viene activada.
- Una CDN si recibes visitas de varias zonas.
- Minificación de CSS y JavaScript, con cuidado: es lo que más suele romper diseños.
PD. No dupliques funciones. Si tu plugin de caché ya hace la carga diferida, no la actives también en Elementor: cuando dos plugins hacen lo mismo, lo normal es que algo deje de funcionar.
7. No maquetes todo con Elementor
Elementor compensa en la home, las páginas de servicio y las landings. Para los posts del blog, el editor nativo es mucho más ligero y suficiente.
Compruébalo tú mismo: analiza una URL maquetada y otra sin maquetar y compara.
8. Ajustes de WordPress que ayudan
- Limita las revisiones de entradas y páginas.
- Reduce la frecuencia del Heartbeat, que genera peticiones constantes.
- Limpia la base de datos de vez en cuando.
- Borra las plantillas y los borradores de Elementor que no utilizas.
- Regenera las miniaturas si has cambiado los tamaños de imagen.
Qué NO hacer por subir la puntuación
- Desactivar scripts a ciegas hasta que algo deja de funcionar.
- Aplicar carga diferida a la imagen principal: empeora el LCP, que es justo lo que quieres mejorar.
- Eliminar funciones que tus usuarios utilizan para ganar unos puntos.
- Optimizar solo la home y olvidarte del resto de páginas.
- Medir solo en escritorio, cuando la mayoría del tráfico es móvil.
- Obsesionarte con la puntuación en lugar de con las métricas reales.
Conclusiones sobre optimizar Elementor
Elementor puede ir rápido si lo utilizas con criterio: buen hosting, contenedores flexbox, imágenes optimizadas, caché y control de lo que se carga en cada página.
Mi recomendación: persigue el verde en las Core Web Vitals, no el 100 en PageSpeed. Lo primero mejora la experiencia real de tus usuarios; lo segundo, solo un número.
Si prefieres que lo haga yo, puedo encargarme en mi servicio de mantenimiento web WordPress. Y si quieres una página web con Elementor rápida desde el primer día, te ayudo con mi servicio de diseño web WordPress.
Ahora te toca a ti, querido lector. ¿Qué puntuación tienes en móvil? ¡Te leo en los comentarios!
Preguntas frecuentes sobre Elementor y el rendimiento
¿Elementor hace lenta una página web?
Genera más código que el editor nativo, pero una web con Elementor puede ir rápida. El problema suele estar en el hosting, las imágenes, el exceso de plugins y el número de elementos por página.
¿Se puede conseguir el 100 en PageSpeed con Elementor?
Es posible en páginas muy sencillas, pero no debería ser el objetivo. PageSpeed ofrece una puntuación de laboratorio, mientras que Google evalúa la experiencia con las Core Web Vitals de usuarios reales.
¿Qué es lo que más mejora el rendimiento de Elementor?
Utilizar contenedores flexbox en lugar de secciones y columnas, activar las optimizaciones de rendimiento del plugin, optimizar las imágenes y controlar qué CSS y JavaScript se carga en cada página.
¿Qué theme conviene usar con Elementor?
Uno ligero, como Hello (el theme del propio Elementor) o GeneratePress. Las plantillas multiusos cargadas de funciones se solapan con el maquetador y añaden código innecesario.
¿Conviene maquetar los posts del blog con Elementor?
Normalmente no. El editor nativo es mucho más ligero y suficiente para un artículo. Elementor compensa más en la home, las páginas de servicio y las landings.
¿Puedo usar Elementor y un plugin de caché a la vez?
Sí, y es lo recomendable. Lo importante es no duplicar funciones: si el plugin de caché ya gestiona la carga diferida o el control del Heartbeat, no conviene activarlas también en Elementor.
¿Por qué mi puntuación es peor en móvil?
Porque PageSpeed simula un dispositivo y una conexión más limitados. Es la medición más relevante, ya que la mayor parte del tráfico llega desde el móvil.
