Muchos dicen que para tener una web rápida hay que sacrificar el diseño o pasarse a editores de bloques ultraligeros. Yo digo que lo que falta no es potencia en las herramientas, sino Soberanía Técnica en la configuración.
En este caso de estudio, pasamos un sitio en WordPress + Elementor de un 34/100 a un 96/100 en Mobile (99/100 en Desktop). Aquí tienes el «paso a paso» de la arquitectura que lo hizo posible.
La Filosofía: Optimizar no es «activar casillas»
Antes de entrar en los plugins, grábate esto: el rendimiento se pierde en el camino crítico de renderizado. Mi objetivo fue eliminar todas las peticiones innecesarias y «congelar» la web para que el servidor no tenga que trabajar en cada visita.
Paso 1: Limpieza de «Bloat» con Code Snippets
Elementor y WordPress cargan por defecto scripts que el 90% de las webs no necesitan. Usar 10 plugins para quitar 10 cosas es un error. Usamos Code Snippets para insertar estas funciones PHP:
Desactivar Emojis y oEmbeds: Eliminamos scripts innecesarios que cargan en el head.
/**
* Desactivar Emojis de WordPress
*/
add_action( 'init', function() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
});
/**
* Desactivar scripts de oEmbed (wp-embed.min.js)
*/
add_action( 'wp_footer', function(){
wp_deregister_script( 'wp-embed' );
});
Carga condicional de Elementor: Configuramos el sistema para que solo cargue los widgets que realmente se usan en cada página.
Limpieza de cabeceras: Quitamos enlaces de RSD, WLW Manifest y versiones de WP para ganar seguridad y ligereza.
/**
* Limpieza de meta-tags innecesarios en el <head>
*/
add_action('init', function() {
remove_action('wp_head', 'rsd_link'); // Enlace RSD (para clientes externos)
remove_action('wp_head', 'wlwmanifest_link'); // Enlace para Windows Live Writer
remove_action('wp_head', 'wp_generator'); // Versión de WordPress
remove_action('wp_head', 'start_post_rel_link');
remove_action('wp_head', 'index_rel_link');
remove_action('wp_head', 'adjacent_posts_rel_link');
});
Paso 2: El motor de velocidad con WP Super Cache
Aquí es donde respondemos a los escépticos del «alto tráfico». Configuramos WP Super Cache para servir HTML estático.
1. Pestaña «Sencilla» (Easy)
Asegúrate de que el Caché está activado (Caching On).
Haz clic en Actualizar estado.
2. Pestaña «Avanzado» (Advanced) – El corazón del sistema
Aquí es donde ocurre la magia. Marca exactamente estas casillas:
Caching: Activa «Caché de páginas para un acceso rápido».
Método de entrega: Selecciona Expert. (Esto es clave: evita que PHP se ejecute, delegando todo el trabajo al servidor Apache/Nginx).
Restricciones: * Marca «No cachear páginas para usuarios conocidos» (para que tú, como administradora, siempre veas los cambios en tiempo real).
Marca «No cachear páginas con parámetros GET».
Avanzado:
Marca «Compresión de páginas» (Gzip).
Marca «Reconstrucción de caché» (Sirve un archivo antiguo mientras se genera el nuevo para que el usuario nunca espere).
Marca «Cabeceras 304 Not Modified».
3. El paso crítico: Actualizar las reglas de Mod_Rewrite
Al seleccionar el modo Expert, verás que aparece un cuadro amarillo o con código debajo.
Haz clic en el botón azul «Actualizar reglas Mod_Rewrite».
WP Super Cache escribirá automáticamente en tu archivo
.htaccess.Si el cuadro se vuelve verde, felicidades: tu servidor ahora sirve archivos estáticos como un búnker.
4. Pestaña «Precarga» (Preload) – Para el «Efecto Instantáneo»
Para que incluso el primer usuario que entra después de un cambio vea la web a máxima velocidad:
Configura el refresco de caché de precarga cada 1440 minutos (24 horas) o menos si actualizas mucho.
Marca «Modo precarga».
Haz clic en «Precargar caché ahora».
Paso 3: Agregación inteligente con Autoptimize
No te limites a marcar «Minificar CSS». La clave está en la optimización del camino crítico:
Generación de CSS Crítico: Extraemos el CSS necesario para pintar la parte superior de la web (Above the Fold) y cargamos el resto de forma asíncrona.
Agregación de JS: Combinamos los scripts pero mantenemos el orden de carga para no romper las funcionalidades de Elementor. Usamos el atributo
deferpara que el JS no bloquee el renderizado.
Paso 4: Control total de imágenes y LCP
El Largest Contentful Paint (LCP) suele ser el talón de Aquiles de Elementor.
1. Identificar el «Hero» (La imagen principal)
El Largest Contentful Paint (LCP) mide cuánto tarda en verse el elemento más grande de la pantalla (normalmente la imagen de cabecera).
El problema: Por defecto, muchos plugins de optimización aplican Lazy Load (carga diferida) a todas las imágenes.
La consecuencia: El navegador «esconde» la imagen principal hasta que el usuario hace scroll o hasta que todo el JS se carga, retrasando el LCP varios segundos.
2. Configurar «Lazy Load Control for Elementor»
Este plugin es un bisturí. No lo usamos para activar el Lazy Load (que ya lo hace WordPress o Autoptimize), sino para crear excepciones.
Instala y activa el plugin.
Ve a los ajustes del plugin en el panel de WordPress.
Busca la opción «Exclude leading images» (Excluir imágenes iniciales).
Configura el valor en 1.
¿Qué estamos haciendo? Le decimos al navegador: «Carga todas las imágenes de forma lenta, EXCEPTO la primera«. Así, la imagen Hero se descarga desde el milisegundo uno con prioridad
eager(ansiosa).
3. Reservar espacio para evitar el CLS (Cumulative Layout Shift)
El CLS ocurre cuando entras en una web, empiezas a leer, y de repente el texto «salta» hacia abajo porque una imagen de Elementor ha terminado de cargar y ha ocupado su lugar. Google penaliza esto severamente.
Cómo solucionarlo en Elementor:
Ve al editor de Elementor en tu página de inicio.
Haz clic en el contenedor o sección que contiene la imagen principal.
En la pestaña Disposición (Layout), asegúrate de definir una Altura Mínima (Min Height).
¿Por qué? Al definir la altura mínima (por ejemplo,
90vho600px), el navegador reserva ese hueco vacío antes de que la imagen aparezca. El texto de abajo ya está en su sitio y no se moverá cuando la imagen cargue.
4. Forzar dimensiones (Width y Height)
PageSpeed suele quejarse de que «las imágenes no tienen dimensiones explícitas».
En cada widget de imagen de Elementor, asegúrate de seleccionar un tamaño de imagen específico (no lo dejes en «Full» si no es necesario).
Elementor añadirá automáticamente las etiquetas
width="xxx"yheight="xxx"al HTML.Esto permite al navegador calcular el aspecto de la imagen antes de descargarla, eliminando el parpadeo o salto visual.
Resultados Finales: Datos, no opiniones
| Métrica Core Web Vitals | Antes (Sin Optimizar) | Después (Móvil – Real) | Después (Desktop – Real) |
| Puntuación Global | 34 / 100 🔴 | 96 / 100 🟢 | 99 / 100 🟢 |
| FCP (Primer pintado) | 3.8 s | 1.6 s | 0.7 s |
| LCP (Carga imagen principal) | 5.2 s | 2.5 s | 0.7 s |
| TBT (Tiempo de bloqueo) | 890 ms | 120 ms | 70 ms |
| CLS (Estabilidad visual) | 0.280 | 0.004 | 0.003 |
| Speed Index | 6.4 s | 2.7 s | 0.9 s |
Conclusión: Recupera el control
Tener una web rápida con Elementor es posible si dejas de ver WordPress como un puzzle de piezas que «encajan solas» y empiezas a verlo como un sistema que tú diriges.
Si tu web sigue en la zona roja, no es culpa del constructor. Es que tu arquitectura aún no tiene Soberanía Técnica.
¿Necesitas ayuda para implementar este stack en tu proyecto?
