WordPress

¿Cómo arreglar Elementor lento y acelerar el sitio de WordPress? – Aprendermarketing.es/

Elementor es un complemento gratuito para crear páginas de WordPress con más de 5 millones de instalaciones activas. Además, el complemento también tiene una versión premium y cientos de complementos para agregar hermosos elementos a su sitio. Al igual que con todos los complementos de creación de páginas, Elementor agrega estilos y scripts personalizados que agregan el factor sorpresa al aspecto de sus páginas. Sin embargo, esto tiene un alto costo al afectar la velocidad de carga de las páginas de su sitio, tanto en la interfaz como en la parte posterior. Si tiene un sitio web lento debido al generador de páginas de Elementor, aquí hay algunas opciones que puede probar para solucionar el problema de velocidad.

Arreglar el complemento Slow Elementor Page Builder

La velocidad de la página y la experiencia del usuario son factores en la clasificación en el algoritmo de búsqueda de Google. Por lo tanto, debe prestar atención a acelerar el sitio en comparación con agregar elementos embellecedores con Elementor, que arrastran la velocidad de la página. Afortunadamente, Elementor ofrece un puñado de funciones de optimización dentro del complemento, además, puede optimizar los factores externos que podrían afectar la velocidad de carga de las páginas de Elementor.

Optimice la velocidad de la página con la configuración de Elementor

Examinemos estas configuraciones primero, y si estas configuraciones no resuelven su problema, entonces debe buscar otras soluciones.

1. Habilite Elementor solo para páginas

La configuración predeterminada de WordPress le permite crear dos tipos de publicaciones: publicaciones y páginas. Además, los complementos como WooCommerce crearán productos y también puede crear tipos de publicaciones personalizados para sus necesidades. Le recomendamos encarecidamente que habilite Elementor solo para páginas, no para publicaciones y otros tipos de publicaciones personalizadas. Esto ayuda a deshabilitar la carga de recursos de Elementor tanto en el frontend como en el backend, a excepción de las páginas. Cuando habilite el complemento Elementor, se habilitará para publicaciones y páginas predeterminadas. Puede ir al menú «Elementor> Configuración» y deshabilitar el complemento de publicación en la pestaña «General».

Deshabilitar Elementor para publicaciones

2. Usa Experimentos de Elementor

El complemento ofrece muchas funciones experimentales en la sección «Experimentos». Aquí puede ver tanto los experimentos actuales como los completados y aceptados como funciones estables. Para mejorar la velocidad de carga, puede activar todos los elementos relacionados con la velocidad en las secciones estable y actual.

Habilite los siguientes experimentos en curso:

  • Carga de activos mejorada: esta opción reducirá el código de carga predeterminado y cargará dinámicamente el código restante solo si es necesario.
  • Carga de CSS mejorada: esta es la misma característica que la carga de CSS anterior solo cuando es necesario.
  • Iconos de fuente incorporados: deshabilite Font Awesome y eicons loading y cargue iconos SVG incorporados.
Experimentos actuales de Elementor
Experimentos actuales de Elementor

Habilite los siguientes experimentos estables:

  • Salida DOM optimizada: esto reducirá la cantidad de shells HTML para mejorar la velocidad.
Características estables de Elementor
Características estables de Elementor

Asegúrese de probar su sitio a fondo después de activar los experimentos en curso, ya que pueden alterar el diseño de su sitio. Por ejemplo, la carga dinámica de recursos afectará funciones como la eliminación de CSS no utilizado con WP Rocket y otros complementos.

3. Optimiza el uso de fuentes

El uso de Google Fonts y otras fuentes personalizadas puede generar muchos problemas en GoogleSpeed ​​​​Insights. Por ejemplo, verá advertencias para que el texto sea visible al cargar fuentes web y precargar fuentes al usar Google Fonts con el complemento de Elementor. Afortunadamente, Elementor tiene opciones de optimización de fuentes integradas que puede usar para mejorar la velocidad de carga de la página.

  • Como se mencionó anteriormente, use iconos de fuentes en línea para usar iconos SVG en la sección Experimentos actuales.
  • Vaya a la sección «Elementor> Configuración> General» y habilite la opción «Deshabilitar fuentes predeterminadas». Esto lo ayudará a deshabilitar las fuentes cargadas por Elementor y el complemento heredará la fuente de su tema para todos sus elementos.
  • Si no desea deshabilitar las fuentes de Elementor, vaya a la pestaña «Avanzado» y seleccione la opción «Cambiar» para «Cargar fuentes de Google». Esto ayudará a agregar un parámetro de «intercambio» a cada solicitud de archivo de Google Fonts y ajustar la advertencia de visibilidad de texto en SpeSpeed ​​​​Insights.
Use un archivo CSS externo e intercambie las fuentes de Google
Use un archivo CSS externo e intercambie las fuentes de Google

4. Usa un archivo CSS externo

Como puede ver en la captura de pantalla anterior, Elementor permite dos opciones de Método de impresión CSS. Una es usar «Archivo externo» y la otra es «Incrustación interna». Seleccione la opción «Archivo externo» para que todos sus estilos CSS se carguen como un archivo externo. Luego vaya a la sección «Elementor> Herramientas> General» y haga clic en «Regenerar archivos y datos». Esto regenerará los datos y los cargará como un archivo CSS externo. Esto ayudará a almacenar correctamente las páginas en caché y mejorar la velocidad en lugar de inyectar dinámicamente CSS que no se puede almacenar en caché.

Modo seguro y recuperación de archivos en Elementor
Modo seguro y recuperación de archivos en Elementor

5. Prueba el modo seguro

Si se queda con un editor Elementor de carga lenta al crear o editar páginas, puede usar el modo seguro disponible en la sección «Elementos> Herramientas> General». El modo seguro mostrará sugerencias en el editor cuando se cargue lentamente.

Elementor Editor se abre en modo seguro
Elementor Editor se abre en modo seguro

De manera similar, puede habilitar la opción Cinta de opciones de depuración para buscar plantillas cargadas en una página. Esta información puede ser útil para solucionar problemas al intentar solucionarlos.

6. Accesorio de retracción

Finalmente, si encuentra un problema después de actualizar Elementor, hay una opción para volver a la versión anterior. Al igual que con cualquier reversión, asegúrese de hacer una copia de seguridad de su base de datos para usarla en caso de que sea necesario. Vaya a «Elementor> Herramientas> Versión de control». Puede reinstalar la versión actual o seleccionar cualquier versión anterior que desee revertir.

Cancelar el complemento de Elementor
Cancelar el complemento de Elementor

Otros factores para mejorar la velocidad del Elementor

Todos los factores anteriores se encuentran en la configuración de Elementor, y a continuación se encuentran los factores externos que pueden afectar la velocidad de su sitio web.

7. Usa un tema claro

Aunque Elementor es un complemento independiente, muchos temas comerciales ofrecen Elementor completo con otras características. Debido a que estos temas se personalizan para crear diseños de página, esto puede generar fácilmente conflictos y afectar las velocidades de carga. Recomendamos usar temas ligeros como Astra o GeneratePress, que vienen con plantillas de inicio gratuitas de Elementor.

La otra opción es usar Hola tema Elementor que es del mismo desarrollador del complemento. Este tema tiene más de 1 millón de instalaciones activas y funciona muy bien con Elementor. Tiene un diseño minimalista y funciona principalmente con plantillas de Elementor. Entonces, si realmente te gusta el complemento de Elementor, Hello Elementor es el mejor tema para tener un sitio web optimizado.

Tema gratuito Hola Elementor
Tema gratuito Hola Elementor

8. Reducir el número de aditivos

Hay cientos de complementos de terceros disponibles como complementos para el complemento de creación de páginas de Elementor. Estos complementos agregarán elementos adicionales al complemento principal para crear hermosos diseños. Sin embargo, es posible que estos complementos no funcionen bien con el complemento principal de Elementor, especialmente cuando el complemento principal se ha actualizado a una versión más nueva. Los complementos agregarán CSS / JS adicionales y aumentarán las solicitudes HTTP. Si te gusta Elementor, opta por la versión Pro, que ofrece suficientes elementos y bibliotecas de plantillas. Evite el uso de complementos de terceros para agregar algunos elementos que podrían ralentizar su sitio.

Si desea usar complementos, use complementos como Ultimate Add-ons para Elementor. Puede habilitar solo los widgets que necesita y deshabilitar otros para reducir el tamaño del archivo.

9. Verifique la configuración de almacenamiento en caché

Lo primero es asegurarse de tener el complemento adecuado para el almacenamiento en caché o la optimización al usar Elementor. Esto lo ayudará a mantener todas sus páginas como páginas estáticas y mejorar la velocidad de carga. WP Rocket y Perfmatters son los dos mejores complementos que puede usar para optimizar su sitio web de Elementor. Sin embargo, debe tener cuidado al usar la función de optimización de entrega de CSS con WP Rocket u otro complemento de almacenamiento en caché. Eliminar CSS no utilizado o generar un CSS crítico no funcionará correctamente cuando haya agregado CSS dinámico dentro de Elementor.

  • Si está optimizando la entrega de CSS en su sitio, deshabilite el experimento «Mejorar la carga de CSS» y use la opción de archivo externo.
  • Alternativamente, puede excluir archivos dinámicos de la optimización de CSS. Debido a que los recursos dinámicos cambiarán en cada página, debe excluirlos en formato comodín, según lo permita su complemento de almacenamiento en caché/optimización.

Si está utilizando Elementor para publicaciones u otros tipos de publicaciones personalizadas, le recomendamos encarecidamente que utilice el complemento Perfmatters o Asset Cleanup. Con estos complementos, puede deshabilite los archivos CSS y JS no utilizados en una publicación específica y nivel de sitio.

9. Cargador de cohetes Cloudflare

Cuando los usuarios visitan sus páginas en todo el mundo, CDN ayuda a entregar su contenido desde el servidor más cercano a la ubicación del usuario. Esto funciona bien para las páginas de Elementor y su sitio en general. Muchos usuarios utilizan el CDN gratuito de Cloudflare que ofrece la empresa de alojamiento junto con Elementor Setup. Cloudflare ofrece una función llamada Rocket Loader, que ayuda a mejorar la carga de páginas basadas en JavaScript. Sin embargo, puede causar problemas tanto en el editor de Elementor como en las páginas publicadas. Si encuentra que el editor es lento y salta cuando se desplaza o la página publicada está dañada, desactive la función Rocket Loader y verifique que funcione.

Si el problema es Rocket Loader, puede usar las reglas de página de Cloudflare para ignorar las páginas y plantillas de Elementor para solucionar el problema.

10. Configuración de alojamiento optimizada

Elementor y otros complementos pesados ​​como WooCommerce necesitan un alojamiento optimizado para cargar sus páginas más rápido. Anteriormente, debe buscar SiteGround Cloud, Cloudways o cualquier otra plataforma de alojamiento de VPS para usar Elementor Page Builder. Ahora que los propios chicos de Elementor ofrecen alojamiento optimizado con Google Cloud Platform y Cloudflare CDN. Aunque tiene límites de 100.000 visitas, 100 GB de ancho de banda y 20 GB de espacio, puede ejecutar fácilmente un sitio web y obtener Elementor Pro por $ 99 al año. Puede obtener una configuración completamente optimizada para Elementor y su sitio se cargará extremadamente rápido con temas como Hello Elementor.

11. Optimización de imagen

Finalmente, las imágenes grandes utilizadas en el área sobre el pliegue crearán problemas al cargar la pintura más grande con contenido. Además, otras imágenes también pueden causar un problema si no se optimizan correctamente.

  • Reduzca el tamaño y las dimensiones de sus imágenes, especialmente para aquellas imágenes utilizadas en el área superior del pliegue.
  • Carga perezosamente tus imágenes para cargarlas solo cuando el usuario se desplace a esta posición.
  • Utilice el formato WebP para reducir el tamaño y cargarlos más rápido.

Observaciones finales

Los complementos como Elementor se han vuelto populares con elementos de arrastrar y soltar y atractivas plantillas reutilizables. Ahora, sin embargo, las cosas han cambiado por completo y la velocidad es el factor más importante en comparación con los hermosos diseños de página. Puede usar los experimentos predeterminados de Elementor y otras configuraciones para ajustar el sitio lento y mejorar la velocidad de carga de la página. Además, también puede probar su tema Hello Elementor optimizado y su alojamiento en la nube de primera clase para llevar su sitio al siguiente nivel.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Botón volver arriba