«Elementor es lento» es una de las afirmaciones más persistentes del entorno WordPress. No es del todo falsa y aun así induce a error. Un maquetador de páginas genera más marcado que el código escrito a mano — eso cuesta algo. Pero lo que en la práctica vuelve lentas a las páginas hechas con Elementor son casi siempre otras cosas, y esas sí se pueden arreglar.
Los tres valores de los que se trata
Desde hace algunos años Google mide tres indicadores que juntos forman los Core Web Vitals.
LCP (Largest Contentful Paint) — cuándo termina de cargarse el elemento visible más grande. Normalmente la imagen principal o el título grande. Objetivo: por debajo de 2,5 segundos.
INP (Interaction to Next Paint) — con qué rapidez reacciona la página a una interacción. Ha sustituido al antiguo valor FID. Objetivo: por debajo de 200 milisegundos.
CLS (Cumulative Layout Shift) — cuánto salta el contenido durante la carga. Todo el mundo lo conoce: uno va a pulsar un enlace y en el último momento se cuela una imagen. Objetivo: por debajo de 0,1.
Importante para situarlo: Google evalúa con datos de campo de visitantes reales, no con el resultado de una única prueba. Un buen valor en la herramienta de test con malos datos de campo significa que sus visitantes experimentan una página distinta de la que ve usted.
LCP: casi siempre la imagen principal
En nueve de cada diez proyectos con Elementor que reviso, la imagen grande de la parte superior es la causa de un LCP malo.
El tamaño. Una foto recién salida de la cámara suele tener 4000 píxeles de ancho y varios megabytes. Se muestra a 1600 píxeles. Escale la imagen al tamaño realmente necesario antes de subirla.
El formato. WebP en lugar de JPEG ahorra típicamente un tercio con la misma calidad. Hay plugins que lo hacen automáticamente.
Nada de lazy loading para la imagen principal. Suena contradictorio, pero es decisivo: la carga diferida está pensada para imágenes que solo se ven al hacer scroll. Si la aplica a la imagen superior, está retrasando justo el elemento que determina el LCP. En Elementor esto se desactiva en el widget de imagen.
Imágenes de fondo con criterio. Una imagen como fondo de contenedor se carga más tarde que un widget de imagen real. Para el elemento superior de la página, el widget de imagen es la mejor opción.
CLS: reservar el espacio
Los saltos de maquetación aparecen cuando un elemento reclama a posteriori un espacio que antes no estaba previsto. Tres causas cubren casi todo.
Imágenes sin medidas fijas. El navegador solo sabe al cargarla qué altura tendrá la imagen, y desplaza hacia abajo todo lo demás. Dé a las imágenes ancho y alto, o una proporción fija.
Tipografías que se cargan después. El texto aparece primero con una fuente de reemplazo y salta al cambiar. Alojar las fuentes en el propio servidor con una estrategia de carga adecuada resuelve esto — y desde el punto de vista de la protección de datos es de todos modos la mejor opción, véase Elementor conforme al RGPD.
Avisos que entran desde arriba. Un banner de cookies o una barra de aviso que empuja el contenido hacia abajo es un golpe garantizado al CLS. Colóquelo por encima del contenido, no delante de él.
INP: menos es más
El valor de reacción sufre con demasiado JavaScript. En páginas con Elementor los sospechosos habituales son: sliders y carruseles, contadores animados, efectos de movimiento al hacer scroll, vídeos incrustados y scripts externos como ventanas de chat o tracking.
La medida más eficaz es también la menos popular: use menos de todo eso. Un slider con cinco imágenes que casi nadie mira más allá de la primera cuesta tiempo de carga sin dar nada a cambio.
Para los vídeos incrustados vale esto: no incrustarlos directamente, sino mostrar primero una miniatura y cargar el vídeo al hacer clic. Elementor ofrece una opción para ello en el widget de vídeo.
Lo que el propio Elementor trae consigo
En Elementor → Ajustes → Funciones encontrará varios interruptores que ayudan de forma perceptible:
Carga optimizada de CSS carga solo los estilos que se necesitan en la página, en vez de un gran archivo conjunto. Carga mejorada de assets y la opción de omitir las bibliotecas de iconos no utilizadas van en la misma dirección.
Active estas opciones de una en una y revise la página después. En casos raros falta algún estilo que llegaba a través de un plugin de terceros.
Cómo hacer limpieza más allá de esto lo explico en Eliminar el lastre de Elementor.
Lo que Pro cambia en esto: nada
Para que no surja aquí una expectativa equivocada — la versión Pro no hace su página más rápida. Aporta funciones, no velocidad. Quien por tener Pro use más widgets tenderá a ir más lento.
Elementor Pro: tiene sentido por el Theme Builder, los formularios y los popups — no por el tiempo de carga. Eso forma parte de una valoración honesta. Ver Elementor Pro
El orden en el que procedo
Primero las imágenes, luego la caché, luego las tipografías, luego los scripts. En ese orden, porque está ordenado por rendimiento decreciente. En la mayoría de las páginas, los dos primeros pasos bastan para llevar el valor de la zona roja a la verde.
Mida antes y después, o estará optimizando a ciegas. Y mida en móvil — ahí los valores son peores y ahí se decide la evaluación.
Más palancas las he reunido en Optimizar el rendimiento de Elementor. Si prefiere repasar todo esto una vez sobre su propia página, lo hacemos en mi formación de Elementor.
Etiquetas