[GUÍA] para conseguir una buena nota en PageSpeed con Elementor

¡Hola, hola querido lector! Ya estoy de nuevo por aquí y, en esta ocasión, vengo con una sencilla guía para conseguir una buena nota en PageSpeed con Elementor, el maquetador visual de moda para WordPress.

Y es que pese a que este maquetador es el más potente del mercado y es  el que yo mismo utilizo en mis propias páginas web y en las de mis clientes aún así tiene algunas desventajas, entre ellas, que sus desarrollos pueden llegar a ser algo lentos y pesados.

Este factor, unido a que Google cada vez tendrá más en cuenta la velocidad web (WPO) a la hora de mejorar el posicionamiento SEO de las diferentes páginas web hace imprescindible que si utilizas este maquetador aprendas a optimizarlo al máximo para no solo ofrecer una buena experiencia de usuario sino también para estar el primero en Google y sus SERPs.

Por lo tanto, no me enrollo más ya que hoy hay mucho que ver para que consigas una buena nota en el PageSpeed de Google con Elementor.

¡Vamos al lío!

1. Elimina los íconos (Font Awesome + íconos de Elementor) y crea los tuyos propios

En general los iconos son una mala idea si quieres hacer que tu página web con Elementor vuele en internet.

Por este motivo, lo mejor será que elimines la petición de Font Awesome de tu WordPress ya que suelen pesar mucho y crees tu propia librería de iconos.

Para llevar a cabo tus propios iconos sigue estos pasos:

  1. Crea tu página web con los iconos de Font Awesome como si nada. Es decir, no te preocupes de este factor.
  2. Una vez tengas lista tu página web ve a Fontastic.me y créate una cuenta.
  3. Crea un conjunto de iconos y agrega los que necesites para tu página web.
  4. Descarga el conjunto de iconos (No tienes por que publicarlos, solo ve a la pestaña Publicar y descárgalos)
  5. Ve al WP admin de Elementor y en iconos personalizados carga el archivo descargado para posteriormente publicarlo.
  6. Una vez publicado sustituye los antiguos Font Awesome por tus iconos recién creados.

subir tus librerías de iconos con elementor

2. Elimina el icono de menú de Elementor o utiliza iconos aún más rápidos que los anteriores

Si deseas ser aún más rápido y optar por ni siquiera subir tus propios iconos personalizados siempre podrás utilizar caracteres especiales en tu código que sustituyan a los iconos.

Estos caracteres especiales son soportados por la mayoría de navegadores ya que, en el fondo, son simplemente código wev.

Para saber que iconos HTML existen echa un vistazo a HTMLsymbols.xyz o a alt-codes.net.

Estos caracteres los podrás utilizar directamente dentro de tu página web copiándolos directamente en el texto o, insertándolos mediante CSS como te explicaré a continuación.

PD. Podrías optar por sustituir el icono de menú hamburguesa por un SVG pero has de tener cuidado con este formato ya que puede hacer tu página web vulnerable a ataques. Por lo tanto, no te recomiendo esta práctica.

En este caso, te voy a enseñar a reemplazar el icono de menú de hamburguesa que aparece por defecto en Elementor por un carácter especial similar.

.eicon-menu-bar:before{
content: "=" !important
line-height: 17px;
}

Una vez insertado este código CSS bastará con eliminar FontAwesome y los Eicons que lo podrás hacer copiando los siguientes códigos en tu functions.php (Te recomiendo hacerlo mediante el plugin Code Snippet).

/* unload Font Awesome*/
add_action( 'elementor/frontend/after_register_styles',function() {
	foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
		wp_deregister_style( 'elementor-icons-fa-' . $style );
	}
}, 20 );
/* Unload Eicons */
add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );
function remove_default_stylesheet() {
wp_deregister_style( 'elementor-icons' );
}

3. Elimina los Dashicons

Con los Dashicons ocurre lo mismo que con los iconos FontAwesome.

Estos dashicons se cargan en casi toda tu página web ayudando a hacer tu página web más lenta. Por lo tanto, y con el fin de que esto no ocurra, elimínalos.

Para esta tarea te recomiendo utilizar el plugin Perfmatters o copiar el siguiente código:

// remove dashicons in frontend to non-admin 
    function wpdocs_dequeue_dashicon() {
        if (current_user_can( 'update_core' )) {
            return;
        }
        wp_deregister_style('dashicons');
    }
    add_action( 'wp_enqueue_scripts', 'wpdocs_dequeue_dashicon' );

4. Asegúrate de que utilizas un tamaño de imagen apropiado.

Elementor te permite seleccionar el tamaño de imagen que deseas mostrar.

Por lo tanto, asegúrate de utilizar siempre el tamaño que mejor calidad de pero que a su vez no sea excesivamente grande para no sobrecargar tu página web de archivos pesados.

cambiar tamaño de la imagen en elementor

5. Consigue un buen hosting

Si, lo se, esto siempre se repite en todos lados pero es importante contar con un hosting de calidad y no escatimar en recursos para ello.

Existen numerosos estudios que demuestran la eficacia (A nivel de velocidad de carga) de contar con un buen hosting frente a otro de dudosa calidad.

Lógicamente, también será mejor contar con un servidor dedicado (VPS) que utilizar un servidor compartido con otras páginas web. Sin embargo, entiendo que el precio de un servidor dedicado puede ser muy elevado para algunos los bolsillos/proyectos.

Por todo ello, yo siempre recomiendo Siteground ya que su soporte, velocidad y servidores son de 10. Estos últimos no están super saturados de páginas web y hasta la fecha es mi hosting de referencia tanto en mis proyectos propios como en el de los clientes.

6. Utiliza un buen gestor de caché

En mi caso recomiendo utilizar el que yo mismo uso, WP Rocket.

No obstante, si no cuentas con dinero para pagar su licencia siempre tendrás una opción free asequible como es Autoptimize.

7. Minimiza el HTML, CSS y JS de tu página web

Esto lo podrás hacer desde estos plugins SEOs ya que todos ellos incorporan esta funcionalidad que te permitirá eliminar el “ruido”  dentro del código de tu página web.

8. Utiliza una versión de PHP actualizada

Una versión antigua de PHP hará que tu página web sea lenta a la hora de “procesar los datos” y realizar tareas.

Por este motivo, siempre es recomendable actualizar la versión de PHP hacia la más avanzada y recomendada posible.

Cuidado con esto por que cuando sale una nueva versión de PHP no es recomendable actualizarla según salga. De hecho, ningún hosting te recomendará hacerlo y te recomendarán justo la versión anterior a la nueva hasta que la recién creada sea 100% estable.

9. No uses Elementor para todo

El mejor consejo que te puedo dar. No utilizar Elementor en todas las URL de tu página web. Solo usarlo en las necesarias.

Para ello, lo recomendable o, al menos, lo que suelo hacer yo es desactivar Elementor en los post de los blogs propios y de clientes ya que en ese tipo de URLs lo importante es el contenido y no el diseño.

Por lo tanto, haz una balanza y comprueba si te compensa utilizar Elementor en todas las URLs de tu página web o no. En caso de no necesitarlo desactívalo con Perfmatters.

10. Incrementa la memoria de tu servidor y de tu WP

Intenta incrementar la memoria de tu WordPress y de tu servidor hasta al menos los 128MB y, si puede ser, hasta los 256MB.

Para aumentar el Memory limit de WordPress abre el archivo wp-config.php y localiza la siguiente línea de código:

define( ‘WP_MEMORY_LIMIT’, ’96M’ );

Una vez localizada, aumenta tu valor hasta el máximo que te permitan y guarda los cambios.

En el caso de Siteground te permitirán aumentarlo hasta 768M lo cuál está bastante bien.

Respecto a aumentar dicha capacidad en tu servidor te recomiendo ponerte en contacto con el soporte del mismo para que te ayuden con ello.

11. Limpia tu base de datos regularmente

Elimina los borradores que no utilices o las página web estén en la papelera de tu WordPress.

Además, elimina de la base de datos la imágenes que no se estén utilizando en el front de tu página web y asegúrate de limpiar tu base de datos de forma regular para “limpiar la casa”.

Por ejemplo, el plugin WP Rocket incorpora esta funcionalidad.

12. Elimina los componentes JS y CSS no utilizados por URL

Es decir, elimina todo aquello que no se utilice. Para ello, la mejor opción de hacerlo a día de hoy es mediante el plugin Perfmatters como te cuento aquí.

No obstante, los desarrolladores de Elementor se encuentran actualmente muy preocupados con el tema de la velocidad de carga y, por ello, han lanzado una sección de experimentos (Dentro de Ajustes) en la que se encuentra la opción “Improve Asset Loading”

Esta nueva opción en pruebas lo que hará será cargar únicamente aquellos componentes de Elementor que sean estrictamente necesarios por URL (No como hace ahora que carga todos los componentes independientemente de si se utilizan o no).

No obstante, esta opción aún está en Beta y puede romper tu página web por lo que recomiendo probarla y ver si no rompe tu página web durante el proceso.

Total, siempre podrás desactivar esta opción y dar marcha atrás en caso de fallo.

13. Optimiza la salida del DOM

De nuevo, esta opción se encuentra dentro de la sección experimentos y te ayudará a mejorar tu nota el el Page Speed de Google ya que eliminará del DOM o del código de tu página web las capas DIV innecesarias.

Lo mismo, prueba esta opción y si rompe tu página web da marcha atrás.

14. No te vuelvas loco con los Addons

Lo se, a todos nos gustan los sliders, los movimientos, las interacciones y derivados que hacen los diferentes Addons o Extras de Elementor.

No obstante ¿Realmente son tan necesarios? Ya te digo yo que no.

Por lo tanto, utiliza solo aquellos Addons que realmente necesites y sean imprescindibles ya que cuantos más Addons de Elementor instales en tu WordPress más lenta se volverá tu página web.

15. Utiliza plugins modulares

Si vas a utilizar Addons o similares (Se que al final lo harás como hacemos todos jeje) intenta que al menos estos sean modulares.

¿Esto que significa?

Significa que pese a que instales el Addon solo se carguen aquellos módulos o Widgets que vayas a utilizar y puedas desactivar el resto.

De esta forma, te ahorrarás cargas innecesarias y no ralentizarás tanto tu página web con las nuevas funcionalidades.

16. Utiliza un CDN

Los CDN son fundamentales por varios motivos:

  • Si los visitantes a tu página web lejos de tu servidor de origen esto mejorará tu velocidad de carga.
  • Protege contrata ataques de SEO Negativo o DDos.
  • Te ayuda a aliviar la carga de recursos desde tu servidor directamente.
  • Previene el Hotlinking
  • Muchas cosas más.

Si quieres saber más sobre esta herramienta te recomiendo leer este artículo sobre CDNs.

17. Optimiza tus imágenes

Sobre el tema de optimizar imágenes en WordPress hablé aquí.

Sin embargo, y por resumir, haz que estas no pesen más de 100kb y se muestren en formato .WEBP

18.Optimiza las Google fonts

Para aprender como optimizar tus Google Font lee este artículo.

De todos modos, como siempre, lo mejor será optar por pocas tipografías y alojarlas de forma local en tu página web.

19. Optimiza las terceras partes

Terceras partes como Google AdSense, Google Analytics, Google Maps, Tag Manager o vídeos de YouTube suelen ralentizar de forma severa la velocidad de carga de tu página web.

Por lo tanto, para evitarlos sigue estos consejos:

  • Intenta alojar los archivos de forma local (Muy útil con Google Analytics)
  • Usa Lazy load a la hora de cargar iframes o vídeos. Con WP Rocket lo podrás hacer.
  • Aloja tus Google Fonts de forma local. Con este plugin lo conseguirás de forma sencilla.
  • Retrasa la carga de comentarios especialmente si usan gravatar. A veces es incluso posible eliminarlos con Perfmatters.
  • Retrasa la ejecución de ciertos Javascript de Google AdSense, Google Analytics o Google Tag Manager con WP Rocket.

20. Haz uso del Preload, Prefetch y Preconnect

Estos componentes los encontrarás en cualquier plugin de caché como WP Rocket:

  • Precarga (Preload): La precarga de fuentes e imágenes ayudará a los navegadores a descubrir archivos antes de mostrarlos.
  • Prefetch: Ayuda a los navegadores a anticipar las solicitudes de sitios de terceros.
  • Preconexión (Preconnect): Establece conexiones tempranas con importantes orígenes de terceros. Suele utilizarse con los CDN o a la hora de cargar las Google Fonts de forma externa (fonts.gstatic.com). No obstante usa esta característica con cuidado.

21. Utiliza Elementor’s Hello Theme

Los amigos de Elementor no son para tontos y sacaron al mercado su propia plantilla la cual está prácticamente “pelada” de funcionalidades.

De ahí, que esta plantilla solo sirva si se complementa con Elementor.

¿Lo bueno?

Que al estar tan pelada en cuanto a funcionalidades esta plantilla no generará duplicidades de funcionalidades como si pasa con otras plantillas para WordPress y esto reducirá el código web en tu proyecto mejorando así tu velocidad de carga.

22. Elimina los WooCommerce Scripts, Styles, Cart Fragments

En caso de que tu página web no cuente con una tienda online desarrollada en Woocommerce utiliza el plugin Perfmatters para eliminar estos archivos innecesarios si no tienes una tienda online.

De esta forma, ahorrarás un poco más de recursos a la hora de mejorar la velocidad de carga de tu página web.

23.Intenta construir tu web en Gutenberg

Si todo lo anterior no te ha funcionado y aún necesitas mejorar tu nota en Page Speed lo mejor será contar con los servicios de un profesional para optimizar tu página web en Elementor (Yo mismo podré ayudarte).

O, siempre tendrás lo opción de remaquetar tu página web en Gutenberg. Si, este editor hará que tu página web sea más rápida y cargue menos código pero, en contraposición, tu página web será menos funcional.

Al final es como todo, poner en balanza que necesitas realmente y que no.

Conclusiones

Como has visto a lo largo del post optimizar tu página web con Elementor no es tarea sencilla. Sin embargo, una vez hecho podrás ver como Elementor no es tan malo como te lo pintan y, de hecho, sus desarrolladores están avanzando mucho en cuanto a velocidad de carga.

Sin embargo, si es cierto que este acelerón ha sido provocado por la gran importancia que está empezando a dar Google a este área, a las Core Web Vitals y por la cantidad de usuarios que están migrando sus páginas web de Elementor a Gutenberg.

Ahora me interesa saber tu opinión ¿Conseguirá Elementor ser una opción rápida para los diseñadores web? ¿Gutenberg acabará tomando la delantera en esta carrera? Te leo en los comentarios y, como siempre, nos vemos en dos semanas.


Autor del artículo: Borja Aranda Vaquero

Artículo escrito por:
BORJA ARANDA VAQUERO

Propietario de este bonito blog sobre SEO, WordPress y diseño web. Mi intención es ayudar a empresas y emprendedores a conseguir las primeras posiciones en Google con el fin de que generen nuevos ingresos y clientes a través de internet.

suscribirse al blog

¡SUSCRÍBETE!

Y llévate 2 maravillosos ebooks SEO GRATIS