¡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 que muchos.
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 cómo diseñador web WordPress 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!
Los 25 pasos para optimizar Elementor a nivel de WPO
Si buscas optimizar tu Elementor de forma 100% efectiva lo mejor será que sigas estos 25 pasos:
1 – Optimiza los iconos de Elementor
En general los iconos son una mala idea si quieres hacer que tu página web con Elementor vuele en internet salvo que los optimices.
Para ello, el propio equipo de Elementor ha desarrollado un sistema que convierte todos los iconos mal optimizados de FontAwsome en SVV con el fin de reducir drásticamente su tamaño.
Para llevar a cabo esta tarea de forma automática bastará con activar dicho experimento que actualmente está en versión de pruebas (Es decir, que al activar el experimento puedes romper tu página web así que ten cuidado al hacerlo).
Para activar esta mejora ve a la sección Experimentos de Elementor (Elementor > Ajustes > Experimentos) y activa la opción: «Fuentes de iconos integradas».
2 – Sube tus propios iconos a Elementor
Otra opción más sencilla y que no romperá tu página web en Elementor será subir tus propios iconos en formato .svg a tu página web.
Para ello bastará con utilizar algún widget de Elementor que utilice iconos y pulses sobre «Subir SVG» en vez de optar por la opción «Biblioteca de iconos».
Es posible que la primera vez que hagas esto te aparezca un popup advirtiendote de que puede ser peligroso habilitar estas subidas de archivos en SVG pero desde ya te digo que no tendrás problemas ni vulnerabilidades en tu página web por ello.
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 gracias a su opción «Disable Dashicons».
Si esta opción no te convence siempre podrás optar por hacerlo de forma manual mediante su sistema de «Script Manager» que podrás activar en Ajustes > Perfmatters > Assets > Script Manager > Activar.
4 – Asegúrate de que utilizas un tamaño de imagen apropiado
Elementor no te permite seleccionar el tamaño de imagen que deseas mostrar en función del dispositivo.
Esto puede provocar que en un ordenador cuyas dimensiones correctas eran 800×600 en un móvil dichas dimensiones sean inmensas y este cargando una imagen demasiado pesada para lo que requiere.
Por lo tanto, para evitar esto utiliza el plugin Dynamic Visibility for Elementor con el fin de mostrar una imagen u otra con su correspondiente tamaño en función del dispositivo utilizado para su visualización.
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.
Además, siempre será mejor optar por un servidor LiteSpeed a un servidor Nginx o Apache como verás en la siguiente gráfica:
Por lo tanto, si buscas un servidor compartido NGINX de gran calidad, velocidad y con un soporte de 10 te reocmiendo Siteground (Qué es el que yo mismo utilizo).
Si por el contrario buscas un buen servidor compartido LiteSpeed te recomiendo utilizar Raiola Networks.
6 – Utiliza un buen gestor de caché para Elementor
A la hora de optimizar la entrega de archivos ya en Elementor lo mejor será utilizar un plugin de caché especializado en Elementor.
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 y optimiza el HTML, CSS y JS de tu página web
Esto lo podrás hacer gracias a plugins como WP Rocket ya que te permitirá eliminar el «ruido» dentro del código de tu página web como verás en la siguiente imagen.
Además, con este plugin podrás optimizar la entrega de CSS y JS que es lo que más suele retrasar la carga de una página web.
Para ello bastará con ir al plugin y en la sección «Optimizar CSS&JS» activa todas estas casillas:
- Minificar archivos CSS.
- Optimizar la entrega del CSS > Load CSS Asynchronously.
- Minificar archivos JavaScript.
- Cargar archivos JavaScript de de manera diferida.
- Retarasar la ejecución de Javascript.
7 – Desactiva el LazyLoad nativo de WordPress y activa el de WP Rocket
Desactiva la carga de imágenes diferida nativa de WordPress gracias a este tutorial.
Posteriormente activa el Lazy Load nativo de WP Rocket en la sección «Medios» del plugin. También activa el resto de opciones para iframes y vídeos así como la opción de «Add msssing image dimensions».
Además, excluye de esta carga diferida a las imágenes que se encuentre Above The Fold mediante clases de CSS para dicha imágenes para ello utiliza el plugin Add class to Elementor Image que te permitirá dar una clase a cada imagen de tu WordPress.
Una vez otorgadas las clases bastará con que añadas dichas clases en el cuadro de excluir imagenes o iframes de la sección «Medios» de WP Rocket.
8 – Genera un CSS Crítico por URL
Generando un CSS Crítico por URL el propio plugin WP Rocket creará un CSS único y exclusivo para el Above The Fold de dicha URL.
De esta forma se cargará primero este CSS y los elementos no se irán recolocando a medida que se cambia la página mejorando así la métrica CLS de las Core Web Vitals de Google que tan importante es.
Para generar este CSS crítico bastará con editar dicha URL y cuando esta se encuentre en modo edición acudir a la sección de WP Rocket que generalmente se encuentra en tu sidebar derecho pulsar sobre el botón «Generar CPCSS Específico».
9 – Utiliza una versión de PHP actualizada para Elementor
Una versión antigua de PHP hará que tu Elementor vaya lento a la hora de «procesar los datos» y realizar tareas.
Por este motivo, siempre será recomendable actualizar la versión de PHP hacia la más avanzada y recomendada por tu hosting.
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 actualizar a la versión anterior a la nueva hasta que la recién creada sea 100% estable.
10 – No utilices Elementor para todo
No utilices Elementor en todas las URL de tu página web. Solo utilízalo en las URLs 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 necesitas utilizar Elementor en ciertas URLs lo mejor será desactivarlo con Perfmatters.
11 – Incrementa la memoria de tu WP y del PHP de tu servidor
Intenta incrementar la memoria de tu WordPress y del PHP 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.
Respecto a aumentar dicha capacidad en el PHP de tu servidor te recomiendo ponerte en contacto con el soporte del mismo para que te ayuden ya que habrá que acudir a la sección PHP.INI y cambiar el valor del campo «Memory Limit».
12 – Limpia tu base de datos regularmente
Elimina los borradores que no utilices o vayas a utilizar así como las páginas que estén en tu papelera de 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 con el plugin Media Cleaner y asegúrate de limpiar tu base de datos de forma regular para «limpiar la casa».
Con el plugin WP Rocket podrás hacer casi todas estas tareas.
13 – 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 «Carda de recursos mejorada»
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.
14 – Optimiza el HTML de Elementor
Si eres de los que ve continuamente el mensaje de «DOM excesivo» tendrás que optimizar el HTML de Elementor.
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.
15 – 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.
16 – 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.
17 – Utiliza una 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.
18 – 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 a poder ser en formato .WebP
19 – 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.
20 – 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.
21 – Aloja de forma local tu Google Analytics en Elementor
Si solo vas a utilizar Google Analytics en Elementor dentro de tu página web sin ningún otro tipo de medición o código lo mejor será que alojes el código de seguimiento de Analytics de forma local para reducir la petición externa que el proprio script de Analytics produce.
Para alojar de forma local tu Analytics lo mejor será utilizar el plugin Perfmatters que te permitirá activar esta opción de forma sencilla siguiendo estos pasos:
Panel de administración de WordPress > Perfmatters > Analytics > Enable Local Analytics + Insertar código de seguimiento (QUe comienza por UA-XXXXX)
22 – 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. No obstante usa esta característica con cuidado.
23 – Optimiza tu código de Google Adsense en Elementor
A la hora de optimizar Google Adsense en Elementor lo mejor será precargar su petición.
Para ello, utiliza un plugin de caché como WP Rocket en el cuál dentro de su sección PRECARGAR > Precarga de peticiones DNS deberás incluir las siguientes líneas (Una por línea) :
//pagead2.googlesyndication.com
//googleads.g.doubleclick.net
//adservice.google.com
//adservice.google.ca
24 – Utiliza Elementor’s Hello Theme
Los amigos de Elementor no son para tontos y sacaron al mercado su propia plantilla «Hello de Elementor» 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.
25 – 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.
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.
Un comentario
Excelente artículo, completo, conciso y claro.