Más de 10 trucos y técnicas para acelerar una web creada con Elementor

¡Reconócelo! Elementor hace que tu web vaya más lenta que si diseñas tu web solamente con un tema WordPress y los bloques del editor. ¿Quieres saber cómo evitarlo?

Es un hecho, Elementor carga muchos más elementos de código que WordPress por defecto, y cada código que tenga que ejecutarse en tu web hará que tus páginas tarden más en cargarse totalmente.

No obstante, hay maneras de que puedas seguir usando esta herramienta de diseño web sin tener que ofrecer unos tiempos de carga que impidan una navegación fluida por tu web.

En esta guía vamos a ver las principales técnicas para hacer que tu web con Elementor cargue rápido.

Elige un hosting de alta calidad

Aunque te parezca cansino tener que leer esto casi cada vez que hablemos de optimización web es una realidad, y mejor nos iría si – lo primero – nos aseguramos de que nuestra web, nuestra marca online, incluso nuestro negocio, funciona sobre una plataforma de calidad.

Todo lo demás que hagamos para acelerar nuestra web tendrá mucha menos relevancia y resultados si tenemos nuestra web en un alojamiento web deficiente.

Ninguna de las técnicas y trucos que verás más adelante harán nada relevante por la velocidad de tu web si la tienes alojada en un hosting mediocre, que no aporte las últimas tecnologías de optimización web especializadas para WordPress.

Vamos a hablar de versiones de software, de cachés, de tácticas de optimización, y si tu empresa de hosting no está preparada para ofrecerte lo último, todo lo que intentes optimizar será como pretender matar dinosaurios a pellizcos, no servirá de nada, o casi nada.

Mi consejo es que alojes tu web profesional en un hosting de calidad como SiteGround, que te ofrece:

• Hardware de servidores última generación optimizado.
• Discos SSD para máxima velocidad.
• Sistema triple de caché optimizada para NginX y Apache.
• Plugin propio de optimización de scripts y contenidos.
• Conversión gratuita a WebP.
• Herramientas específicas para WordPress.
• Soporte 24/7 especializado en WordPress y Elementor.

Dicho esto, si ya tienes tu web en un hosting profesional, vamos a ver técnicas y trucos específicos para acelerar Elementor. Si no estás perdiendo el tiempo.

Siempre usa las últimas versiones de PHP, MySQL, memoria disponible, etc

Lo siguiente a tener en cuenta para optimizar la carga de Elementor es utilizar versiones del software base optimizadas para velocidad y seguridad.

Según las especificaciones de Elementor los mínimos serían los siguientes:

• PHP 7 o superior
• MySQL 5.6 o superior
• 64 MB de memoria disponible para WordPress

Ahora bien, no debes quedarte ahí, pues las últimas versiones del software base marcan enormes diferencias en el rendimiento de una web.

Así, en cada nueva versión de PHP se mejora la velocidad de carga.

Como puedes ver en la captura anterior cada nueva actualización de PHP es más rápida que la anterior, así que deberías siempre ejecutar la última versión estable de PHP en tu servidor, si no hay problemas de incompatibilidad con el resto de aplicaciones.

WordPress es compatible, y de hecho recomienda usar siempre la última versión de PHP estable (actualmente la 7.4.x), así que asegúrate de que en tu servidor puedes actualizar la versión de PHP sin coste para ti.

Por ejemplo, en SiteGround esto lo tienes a un clic en el panel de herramientas.

Una vez en estas herramientas, conocidas como Site Tools, puedes optar por la versión gestionada, en la que los técnicos de SiteGround irán actualizando la versión de PHP a las últimas versiones, o seleccionarla manualmente.

Además, SiteGround ofrece unas versiones optimizadas de PHP, que ofrecen hasta un  30% de más velocidad de carga de tus páginas, activable a un clic.

Otra variable importante es la memoria disponible para WordPress, y aunque la web de Elementor recomienda un mínimo de 64 MB yo te recomiendo subirla, al menos, hasta 256 MB.

Puedes forzar este incremento de memoria añadiendo la siguiente línea al archivo wp-config.php:

define( 'WP_MEMORY_LIMIT', '256M' );

Aquí vas a depender de las limitaciones de tu empresa de hosting (otra vez), así que si ves que no hay un cambio apreciable en la carga de Elementor habla con tu hosting.

En SiteGround puedes aumentarla hasta 768M en hosting compartidos y mucho más en los hosting cloud.

Y, por supuesto, utiliza siempre las últimas versiones seguras de…

• WordPress
• Tema
• Plugins

Utiliza un tema de carga rápida

Lo siguiente en importancia a la hora de ofrecer una web de carga rápida es el tema WordPress activo.

El tema ideal, no solo para Elementor, debe tener algunas características fundamentales de velocidad:

• Poco peso del código.
• Pocas consultas a la base de datos.
• Poco uso de scripts externos.
• Modular, que puedas elegir qué funcionalidades activar y cuáles no.

Hay muchos temas compatibles con Elementor, en realidad la mayoría, pero algunos están especialmente optimizados para Elementor, y los recomiendan en la propia web oficial.

De todos ellos, los temas WordPress optimizados para Elementor y de carga más rápida en todos los tests son…

• Astra
• GeneratePress

Optimiza imágenes y vídeos

Es tán fácil añadir imágenes y vídeos en módulos de Elementor para diseñar nuestras páginas que a veces no nos damos cuenta de que estamos sobrecargando de peso nuestra web.

Imágenes y vídeos son, con diferencia, lo que más peso aportan a la carga de las páginas web, y en consecuencia lo que más ralentizan su velocidad.

Por ello es especialmente importante controlar la cantidad, pero sobre todo el peso de los medios que insertemos en nuestras páginas.

Lo ideal sería que siempre reduzcas el peso de imágenes y vídeos antes de subirlos a tu web, pero si no te es posible hacerlo puedes usar algunos trucos para conseguirlo.

• Convierte tus imágenes a WebP, un formato de imagen de nueva generación que ofrece la misma calidad a menor peso, y que puedes realizar de manera automática.
• Optimiza tus imágenes automáticamente a medida que las subes a tu web con plugins como Smush, TinyPNG o SG Optimizer.
• Optimiza la carga de tus vídeos externos de YouTube y otros servicios con carga diferida (lazy loading).
• Aplaza la carga de tus imágenes (lazy load).
• Controla las imágenes que genera WordPress automáticamente.

Un ejercicio que siempre recomiendo a mis alumnos es comparar una imagen optimizada con la misma imagen sin optimizar, y prácticamente nunca notan diferencia alguna entre ellas.

Aquí tienes un ejemplo, de las siguientes dos imágenes ¿cuál dirías que es la más optimizada?

Pues la de la de la derecha pesa menos de la mitad que la de la izquierda, 143 Kb frente a 303 Kb, y la diferencia de calidad es inapreciable. Ahora multiplica lo que supondría para la carga de tus páginas reducir el tamaño de todas tus imágenes – como poco – a la mitad de su peso actual, sin perder calidad.

Reduce el uso de scripts externos

Esto es una verdad universal, cuantos más códigos scripts externos necesite mostrar una página web más tardará en cargarse totalmente. Y por scripts externos nos estamos refiriendo a códigos de webs tan comunes como…

• Mapas de Google
• Vídeos de YouTube
• Códigos de seguimiento de analítica
• Streams de redes sociales

Para que tus páginas muestren el susodicho mapa de Google, tus últimos tuits o analicen tu tráfico tienen que conectarse con el servicio externo a través del script o el plugin y, tras recopilar los datos externos, mostrarlos en tus páginas. Cuántos más scripts externos usen tus páginas más tardarán en cargarse.

El mejor consejo es que no cargues ningún script o recurso externo a no ser que sea estrictamente necesario para ti o para tus visitantes, y por necesario no me refiero a chulo, molón, cuqui o como lo quieras llamar, me refiero a que sea un recurso que, de verdad, aporte valor al contenido de tu web.

Y, si no te queda más remedio que cargar algún script externo, porque es imprescindible para tu web o tus visitantes, entonces aplica alguna técnica WPO de aplazamiento de carga o de precarga de DNS externas.

Optimiza y reduce la carga de fuentes e iconos

Aunque iría en la categoría de recursos externos de los que te hablaba antes, las fuentes son de una tipología especial, pues no son estrictamente scripts, pero igualmente actualmente hay una tendencia en cargar las fuentes de los temas y plugins desde servicios externos, como por ejemplo Google Fonts.

La realidad es que la mayoría de los temas actuales cargan sus tipografías desde Google Fonts (y muchos plugins), y aunque es una buena táctica para ofrecer bonitos tipos de letra que se vean en cualquier navegador y cliente, no deja de ser una carga de recursos externos, que igual que los scripts, generan consultas a un sitio externo, y ralentizan la carga de tus páginas.

Aplaza la carga de Google Fonts

Para subsanar esto puedes aplicar estrategias muy diferentes, y la más indolora y segura sería aplazar la carga de las Google Fonts, algo que puedes hacer con plugins como Autoptimize o SG Optimizer.

Otro modo, más técnico, de abordar este problema podría ser desactivar las Google Fonts y cargarlas localmente.

Y ya, centrándonos en Elementor en concreto, si no las utilizas, puedes desactivar fuentes que carga por defecto.

Desactivar Google Fonts de Elementor

Con el siguiente código, añadido al final del archivo functions.php del tema hijo desactivas las Google Fonts que carga Elementor:

add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

Desactivar familias de iconos de Elementor

También puedes desactivar las familias de iconos que carga Elementor por defecto.

Con este código desactivaremos los iconos de Font Awesome:

add_action( 'elementor/frontend/after_register_styles',function() {
foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
wp_deregister_style( 'elementor-icons-fa-' . $style );
}
}, 20 );

Y con este otro los de Eicons:

add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 ); 
function remove_default_stylesheet() { 
wp_deregister_style( 'elementor-icons' ); 
}

Minimiza todos los códigos de la web

Para mostrar el contenido de tu web WordPress convierte todo el código de plugins y el tema para mostrar HTML, CSS y JavaScript, y todo este código puedes minimizarlo para que pese lo mínimo posible.

Esta técnica del minimizado no suele tener ningún efecto negativo en la visualización de tus páginas porque simplemente elimina todo lo que sobra en el código (espacios, tabulaciones, líneas huérfanas, comentarios).

Puedes hacerlo fácilmente con plugins como SG Optimizer…

O también con Autoptimize…

Utiliza caché para crear HTML estáticos

¿Te acuerdas del concepto de Headless WordPress? Pues es básicamente ofrecer a tus visitantes una versión estática de tus contenidos mientras estos no cambien, y esto en WordPress lo hacemos con los sistemas de caché.

Afortunadamente tenemos montones de plugins gratuitos para entregar cacheado nuestro contenido, estos son solo algunos de los mejores…

• SG Optimizer: El plugin de SiteGround ofrece 3 niveles de caché (estática, dinámica, memcached)
• Cache Enabler: Caché de página muy potente, hace versiones estáticas en disco de todos tus contenidos.
• WP SuperCache: Plugin de caché de página y objetos en disco, muy fácil de usar.

Sirve contenidos estáticos desde una CDN

Otra estrategia para acelerar los tiempos de carga de Elementor es servir todos tus recursos estáticos (imágenes, códigos, etc.) desde una CDN, una red global de entrega de contenidos.

Lo que hacen las CDN es alojar tus contenidos estáticos en la caché de sus servidores de alta velocidad repartidos por todo el planeta para, de este modo, mostrar a los visitantes el recurso desde el servidor más cercano a la ubicación desde la que se conecte.

Si quieres saber cómo hacerlo fácilmente revisa este tutorial de cómo acelerar WordPress con la CDN de CloudFlare. Es más sencillo de lo que imaginas, y tremendamente efectivo.

Optimiza la salida del DOM de Elementor

Desde la versión 3.0, Elementor tiene una configuración que reduce considerablemente la carga de elementos en el DOM de cada página, pues optimiza la cantidad de elementos que se cargan en cada página.

Para activar esta optimización solo tienes que ir a la página de ajustes de Elementor en la administración de WordPress, en Elementor > Ajustes > Avanzado y activar esta optimización.

Optimiza otros recursos de WordPress

Una vez hecho todo lo anterior puedes aplicar más optimizaciones a recursos de WordPress, para cargar solo lo necesario y evitar el consumo innecesario de recursos que ralenticen la carga de tu web.

Para ello hace ya tiempo que tengo disponible en el directorio de WordPress.org el plugin gratuito WPO Tweaks, con el que optimizas montones de aspectos de WordPress solo con instalarlo y activarlo, sin tener que configurar nada.

Mejoras y optimizaciones WPO

Solo con activarlo aplicas las siguientes optimizaciones:

• Compresión GZIP.
• Caché del navegador.
• Elimina scripts y estilos de Dashicons.
• Aplaza la carga de JavaScript.
• Quita las cadenas de petición.
• Desactiva la REST API.
• Reduce el intervalo de la Heartbeat API.
• Reduce las cabeceras HTTP.
• Desactiva jQuery Migrate.
• Y muchas más…

Optimiza la base de datos

Para finalizar algo que siempre se nos olvida, y es optimizar el tamaño y rendimiento de la base de datos que utiliza WordPress y, lógicamente, Elementor.

Las técnicas básicas para optimizar la base de datos son estas:

• Reparar habitualmente la base de datos.
• Borrar tablas de plugins que ya no estén instalados.
• Optimizar la tabla options.

Evita usar plugins innecesarios o que consuman muchos recursos

Entiendo que esto es difícil de aplicar, pues la lógica manda que solo tengamos activos los plugins que necesitemos, pero sí aprovecho para recordarte que debes aplicar la misma máxima de la que hablábamos al principio de esta guía de solo instalar aquellos plugins que sean realmente necesarios para la web y nuestros visitantes.

Mi consejo es que siempre que instales un nuevo plugin realices una comprobación de rendimiento de tu web en servicios como GTMetrix, para comprobar si ha provocado algún efecto negativo en la carga de nuestras páginas, en cuyo caso lo inteligente sería buscar un plugin alternativo, que haga lo mismo, pero sin ralentizar la carga de nuestras páginas ni realizar un consumo excesivo de recursos de nuestro servidor.

Bueno, y hasta aquí, espero que estos consejos te sean útiles para acelerar Elementor. Si has utilizado alguna técnica o estrategia que no esté en la guía te agradeceremos todos que la compartas en los comentarios.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!