¿Cómo mejorar eficazmente la velocidad del sitio web de Elementor?

Elementor editor es un editor de sitios web de Wordpress, después de que el backend del sitio web está habilitado, puede parecer para abrir el editor de Elementor más lento, lag, no se puede abrir. Como se muestra en la siguiente imagen:

Aquí hay 9 maneras de solucionar problemas de velocidad con el editor Elementor proporcionados en este post.

1. Activar la función Elementor

Inicie sesión en su panel de Wordspress y vaya a Elementor → Ajustes y, a continuación, active Imágenes de fondo de carga perezosa, Iconos de fuentes en línea:

Iconos de fuentes en línea
Carga iconos de fuentes (como Font Awesome y eicons) en línea como SVG en lugar de cargar toda la biblioteca. De este modo se reducen las solicitudes de CSS y los problemas de bloqueo de renderizado de CSS.

Retraso en la carga de las imágenes de fondo
Utiliza el plugin de optimización con la clase de ayuda "lazy-bg" para retrasar la carga de las imágenes de fondo. Esto hace que la carga de imágenes de fondo sea más fácil y eficiente.

Optimización de la salida DOM
Reduzca el tamaño del DOM y mejore el rendimiento eliminando div wrappers innecesarios como elementor-inner, elementor-row y elementor-column-wrap.

Mejora de la carga de recursos
Reduzca la carga de JavaScript en su sitio cargando lightboxes, bibliotecas de pantalla completa, bibliotecas de diálogos y bibliotecas de enlaces compartidos sólo cuando sea necesario.

Mejora de la carga de CSS
Carga sólo el CSS del widget y las animaciones que están en uso y las carga al mismo tiempo, reduciendo la cantidad de CSS y recursos que bloquean la renderización en tu sitio.

Desactivar el intercambio de datos
Compartir datos con los desarrolladores de plugins requiere algunos recursos del servidor. Por lo tanto, se recomienda desactivar esta función en todos los plugins.

2,Cambia el método de impresión CSS a "archivo externo".

Aunque hay pros y contras en este enfoque, el uso de archivos CSS externos suele ser mejor porque cada archivo CSS externo se puede almacenar en caché y no aumentan el tamaño del HTML. Es recomendable que pruebes los resultados en tu propio sitio, pero yo suelo recomendar el uso de archivos externos.

3,Inhabilitar las fuentes predeterminadas de Google

En los próximos pasos, precargaremos sólo las fuentes que necesites y utilizaremos el formato woff2 localmente.

existeAvanzadoDesactivar Google Fonts Font Awesome en

existeGeneralDesactivar Font Awesome en

Cuando cambies la configuración de fuentes/CSS, regenera los datos en la configuración de herramientas de CSS y CSS Elementor y, a continuación, prueba los resultados en un gráfico de cascada (por ejemplo, GTmetrix o Chrome Developer Tools).

4,Configura la carga de fuentes de Google en "Intercambiar".

Establezca la carga de Google Fonts en "intercambiar" garantiza que el texto permanezca visible durante la carga de la fuente web. Sin embargo, Font Awesome recomienda utilizar font-display: blockporque hace que la carga de iconos no se bloquee. También es posible cambiar el fuente-display Atributos.

Para añadir font-display: swapSi no puede encontrar la ubicación, busque el archivo CSS de la fuente o utilice el localizador de cadenas para buscar la ubicación de la fuente. Si no puede encontrar la ubicación, simplemente establezca el parámetro font-display: swap Basta con añadirlo al código CSS de la fuente.

Desactivar wp-block-library de Gutenberg

Dado que se utiliza Elementor, Gutenberg se puede desactivar y añadirá archivos CSS adicionales al sitio (/wp-includes/css/dist/block-library/style.min.css). Es posibleUtilización de Asset CleanUp plug-in (componente de software)Cancelar la cola CSS de la Biblioteca de Bloques de Gutenberg::

Desactivar el editor Gutenberg
Gutenberg puede desactivarse mediante el plugin Disable Gutenberg o el Script Manager en Perfmatters. Si Gutenberg solo se utiliza en determinadas partes de tu sitio web, ambas opciones te permiten controlar dónde se carga, optimizando así el rendimiento del sitio web.

5,Utilizar transform + translate en las animaciones

La animación no es exactamente recomendable, pero es posible utilizar transformar para evitar cambios de diseño (CLS).

Estos efectos pueden conseguirse utilizando el plugin Happy Addons, en el que las transformaciones CSS permiten cambiar la anchura y la altura de la animación, y las traducciones CSS desplazan los elementos sin que cambie el diseño. Esto mejora la estabilidad de la página al tiempo que mantiene la animación.

6,Desactivar los plug-ins no utilizados

Asegúrese de controlar el número de plugins utilizados en su sitio de WordPress. Demasiados plugins provocan un backend muy lento y difícil de manejar.

A continuación se ofrecen algunas recomendaciones:

1. Limitar el número de plug-insIntenta mantener el número de plug-ins en 15 o menos.
2. Evite los plugins con funciones duplicadas: Utilice un solo plugin para la misma funcionalidad, por ejemplo, para el plugin SEO, elija instalar uno de SEO Yoast, Rank Math o All in One SEO.
3. Evitar la duplicación de funcionesEvite instalar plugins con funciones duplicadas si ya dispone de un plugin con todas las funciones.
4. Desactivar los plug-ins no utilizados: Desactive siempre los complementos que no pueda utilizar.

Si algunos plugins sólo son necesarios en determinadas páginas o entradas, puedes utilizar Perfmatters o Asset CleanUp para desinstalarlos y reducir CSS y JavaScript.

Estos son los pasos para utilizar Perfmatters:

1. Activar el Gestor de Guiones: Vaya a Ajustes → Perfmatters → Complementos → Gestor de scripts para activar el Gestor de scripts.
2. Activar el modo de pruebaHabilite el modo de prueba en la configuración del Gestor de scripts para poder probar el Gestor de scripts sin romper el sitio. Al publicar los cambios, recuerdeDesactivar el modo de prueba.

Visualice el Gestor de Script y desinstale los plugins no utilizados (todas las ubicaciones excepto páginas, entradas, URL actual, expresiones regulares, etc.).

7,Uso de imágenes WebP

Para optimizar tus imágenes, debes tener en cuenta tres cosas:

1. Controlar el tamaño de la imagenAsegúrese de que el tamaño de la imagen es inferior a 200 KB.
2. Añadir atributos AltAñadir atributos Alt a las imágenes para la optimización SEO.
3. Uso del formato WebP: El formato WebP es el mejor, ya que reduce el tamaño del archivo y mantiene una alta calidad.

Se recomienda procesar localmente las imágenes en formato WebP antes de subirlas a un sitio WordPress. Existen varias Plugin optimizador de imágenesEsto puede resolverse y reduce automáticamente la imagen a un tamaño lo suficientemente pequeño como para que no afecte al rendimiento del sitio ni pierda demasiada calidad o resolución.

8,Utilizar un tema ligero

Elegir un tema ligero es una de las formas eficaces de mejorar la velocidad de tu sitio web. Estas son algunas de las ventajas de elegir un tema ligero y la importancia de evitar el uso de demasiados subtemas:

1. Estructura de código sencilla: Los temas ligeros suelen emplear un código limpio que evita la redundancia excesiva y las funciones innecesarias. Esto hace que la página se cargue más rápido y reduce el consumo innecesario de recursos.
2. Rendimiento optimizadoEl tema Ligero se centra en la optimización del rendimiento, incluyendo la compresión sensible de CSS y JavaScript, la carga retardada y la minimización de las peticiones HTTP. Esto ayuda a reducir la carga del servidor y a aumentar la velocidad de carga de las páginas.
3. Evite demasiados subtemasDemasiados temas hijo pueden aumentar la complejidad de la página y reducir el rendimiento. El uso de demasiados subtemas también puede introducir código y estilos innecesarios, aumentando el tiempo de carga de la página. Por lo tanto, intenta evitar utilizar demasiados subtemas al mismo tiempo en un mismo sitio web.
4. Fácil mantenimientoLos temas ligeros suelen ser más fáciles de mantener porque tienen una estructura de código más sencilla y clara. Esto ayuda a reducir los problemas que puedan surgir durante las actualizaciones y personalizaciones del tema y mejora la estabilidad del sitio.
5. diseño sensibleMuchos temas ligeros se centran en el diseño responsive para que el sitio web proporcione una gran experiencia de usuario en diferentes dispositivos. Esto ayuda a atraer más visitantes y a impulsar el posicionamiento SEO de tu sitio web.

A la hora de elegir un tema ligero, debes seleccionar el tema ligero adecuado en función de las necesidades y los objetivos de rendimiento de tu sitio web para asegurarte de que funciona bien en todos los aspectos.

9,Aumente la velocidad con las CDN

Las CDN ayudan a que las páginas web se carguen más rápido almacenando el contenido estático de un sitio web, como imágenes y vídeos, en servidores de todo el mundo. La ventaja de esto es que, independientemente de dónde se encuentre el visitante, podrá obtener el contenido del servidor más cercano, lo que reduce los tiempos de espera y hace que los sitios web se carguen más rápido. Estos son los pasos para configurar Cloudflare CDN:

Cree una cuenta de Cloudflare:

1. Visite CloudflareVisite el sitio web oficial de Cloudflare Cloudflare y crea una cuenta gratuita.
2. Añada su sitio webSiga las instrucciones para añadir su sitio web y completar la configuración del dominio.

Modificar la configuración de la resolución de nombres de dominio:

1. Acceder al registrador de dominiosConéctese al registrador de su nombre de dominio y busque la configuración de resolución del nombre de dominio.
2. Modificar servidores de nombresCambie los Nameservers de su dominio a los proporcionados por Cloudflare para que su tráfico sea enrutado y optimizado a través de Cloudflare.

Seleccione Configuración CDN:

1. Inicie sesión en su cuenta de Cloudflare: Seleccione su sitio web.
2. Activar "Auto Minify"En la pestaña Velocidad, active la opción Reducir automáticamente para reducir el tamaño de los archivos CSS, JavaScript y HTML para mejorar la velocidad de carga.
3. Activar "Rocket Loader"En la pestaña Velocidad, active Rocket Loader para retrasar la carga de JavaScript y optimizar la carga de la página.

Habilitar HTTPS:

1. Seleccione el modo SSLEn la pestaña Criptografía, seleccione "Completo (estricto)" como modo SSL para garantizar que su sitio transmite datos cifrados a través de HTTPS.

Configura la caché:

1. Activar "Cachear todo"En la pestaña "Caché", activa "Cachear todo" para almacenar en caché toda la página y mejorar la velocidad de carga.
2. Establecer el tiempo de caducidad de la caché: Asegúrese de que los nuevos contenidos se actualizan a su debido tiempo.

Configurar cortafuegos y seguridad:

1. Activación del cortafuegos de aplicaciones web (WAF)En la pestaña Firewall, active WAF para proteger su sitio de ataques maliciosos.
2. Configuración de parámetros de seguridad adicionalesPor ejemplo, gestión de bots y listas negras de IP.

Seguimiento y análisis:

1. Activación de la herramienta de análisis de Cloudflare: En la pestaña Analytics, supervise el rendimiento y el tráfico del sitio.

Pruebas y optimización:

1. Probar la velocidad de carga del sitio web: Garantice un aumento notable del rendimiento con Cloudflare CDN.
2. Optimización basada en los resultados de las pruebasPor ejemplo, comprimir imágenes, combinar archivos CSS y JavaScript, etc.

Resumen:

Al abrir el editor de Elementor se producen problemas como lag, por lo que necesitas mejorar la velocidad y el rendimiento de tu sitio web. Entre las medidas clave se incluyen el uso de la aceleración CDN de Cloudflare, la elección de un tema ligero, la optimización de las imágenes para el formato WebP, la desactivación de los plugins que no se utilizan y la configuración adecuada de Elementor y CSS.Estas optimizaciones no solo reducirán los tiempos de carga de la página, sino que también mejorarán la experiencia del usuario y el posicionamiento SEO. Supervisar y optimizar regularmente su sitio web para asegurarse de que siempre está en las mejores condiciones es clave para mantener un sitio web de alto rendimiento.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres