:-) Guía para conseguir buena nota en PageSpeed con Elementor

√ćndice

¡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.

cambiar tama√Īo de la imagen en elementor

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:

1665221304 530 : ) Guia para conseguir buena nota en PageSpeed con Elementor

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.

: ) Guia para conseguir buena nota en PageSpeed con Elementor

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¬Ľ.

Generar CSS crítico con WP Rocket

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.

VER MAS ENTRADAS
virus rat la caixa
OPTIMIZACION SEO
Ibm Trusteer Caixabank, Virus RAT que genera transferencias de dinero

Cómo eliminar el malware RAT de IBM Trusteer: Herramientas y consejos
Descripci√≥n: El malware RAT de IBM Trusteer puede causar graves problemas de seguridad y privacidad en su ordenador. ¬ŅSospecha que su ordenador ha sido infectado? Descubra c√≥mo eliminar el malware RAT de IBM Trusteer con una lista ordenada de herramientas que incluye herramientas de eliminaci√≥n de IBM Trusteer, programas antivirus y antimalware, herramientas de escaneo en l√≠nea, firewalls y herramientas de limpieza y optimizaci√≥n de sistema. Haga clic aqu√≠ para obtener consejos √ļtiles y precauciones para proteger su ordenador y cuentas en l√≠nea.

Leer m√°s ¬Ľ