Cómo configurar Elementor para que no ralentice WordPress
Elementor es el constructor de páginas más usado en WordPress, y también uno de los que más carga añade si no se configura bien. Por defecto genera CSS inline para cada elemento, carga fuentes de Google en cada página y registra scripts globales que no siempre hacen falta. Con unos ajustes específicos, el impacto en rendimiento se reduce de forma notable.
Cargar assets solo en páginas que los usan
El ajuste con más impacto: Elementor → Ajustes → Avanzado → Método de carga de assets → selecciona «Mejorado». Elementor cargará sus archivos solo en las páginas donde detecte elementos de Elementor. En páginas creadas con Gutenberg, no cargará nada.
CSS inline vs archivos CSS externos
Elementor → Ajustes → Avanzado → Método de impresión CSS: selecciona «Archivo externo». Elementor genera un archivo CSS separado por página que el navegador puede cachear entre visitas. La primera carga requiere una petición adicional, pero las siguientes sirven el CSS desde caché.
Google Fonts: cargarlas desde el servidor
Elementor carga las fuentes directamente desde los servidores de Google con cada página. En Elementor → Ajustes → Avanzado → Fuentes de Google: selecciona «Desactivar». Las fuentes siguen funcionando porque LiteSpeed Cache o el plugin OMGF las descarga al servidor y las sirve desde ahí, eliminando la dependencia de terceros y los problemas de privacidad del GDPR.
Limitar los breakpoints personalizados
Elementor permite definir breakpoints personalizados para diseño responsivo. Cada breakpoint adicional añade código CSS. En Elementor → Ajustes → Estilo → Puntos de interrupción: elimina los que no estés usando activamente.
Regenerar CSS después de los cambios
Después de aplicar cambios en los ajustes, regenera los archivos CSS: Elementor → Herramientas → Regenerar archivos y datos. Sin este paso, las páginas antiguas pueden seguir usando la configuración anterior.
Medir el impacto antes y después
Pasa la URL principal por Google PageSpeed Insights antes y después de aplicar estos ajustes. Los apartados «Eliminar recursos que bloquean el renderizado» y «Reducir el CSS no utilizado» son donde Elementor suele tener más impacto y donde deberías ver mejoría.
