Cómo mejorar el rendimiento de su sitio Divi

Actualizado el 09/09/2021 | Publicado el 31/03/2018 | 20 comentarios

Mejorar el rendimiento de un sitio web de WordPress es crucial. En un mundo en el que todo el mundo tiene prisa -yo primero-, nadie tiene tiempo que perder con el tiempo de carga de un sitio web. Aunque una entrada del blog parezca interesante, nos volvemos exigentes y queremos leerla enseguida, ¡si es que no lo hacemos nunca!

¿Te reconoces ahí? Es el "efecto móvil": estoy en una parada de autobús, me sobran dos minutos así que leo sobre el tema... llega el autobús y la página sigue cargando. Lástima, será para otro momento o nunca, porque cuando me subo al autobús, me llega un tuit u otra notificación y ya me he olvidado de este gran artículo en este blog súper lento....

Esto es lo que sucede cuando su sitio web es demasiado lento. En este artículo, veremos cómo mejorar el rendimiento de un sitio web de WordPress...

Esta es una pregunta que me hizo Sophie por correo electrónico. De hecho, la verdadera pregunta era: "¿Cómo podemos aligerar los archivos DIVI? Porque en términos de velocidad, no es genial. ¿Podemos deshacernos de los archivos JS inútiles, por ejemplo? »

Antes de responder a esta pregunta, repasemos algunos puntos clave...

¿Cuáles son las ventajas de tener un sitio web de éxito?

Puede parecer una pregunta tonta, pero muchos diseñadores web priorizan la funcionalidad y la estética sobre el rendimiento. Suele ser la última rueda del vagón (junto con la accesibilidad, lo que es una pena). Sin embargo, tiene mucho que ganar si mejora el rendimiento de su sitio:

👉 En primer lugar, los motores de búsqueda, como Google, dan prioridad a los resultados de búsqueda de los sitios web de mayor rendimiento. Para mejorar la experiencia del usuario, Google sugiere con mayor facilidad los sitios de carga rápida en sus primeras páginas de resultados. Del mismo modo, los sitios web de carga lenta no se clasificarán tan bien como otros. Por eso Google ha creado el proyecto AMP.

👉 En segundo lugar, un sitio web con un rendimiento rápido mejora en gran medida la experiencia del usuario. Aquella famosa historia pictórica que les conté al principio de este artículo no es una leyenda. Es real: al usuario de Internet no le gusta esperar ni una fracción de segundo de más y no dudará en abandonar su sitio y buscar otro que satisfaga su necesidad.

👉 Por último, como diseñador de páginas web, te debes a ti mismo proponer páginas web que funcionen, ya que son un testimonio de tus habilidades y conocimientos. Imagina que quieres promocionar tu portafolio pero sólo ofrece ejemplos de sitios web lentos, ¿crees que el cliente potencial querrá confiarte su proyecto?

¿Por qué mejorar el rendimiento de un sitio de WordPress?

Algunas personas dicen que "WordPress es lento", pero antes de culpar a este CMS, es importante entender cómo funciona y por qué esto puede afectar a la velocidad de carga de la página.

Para funcionar, un sitio de WordPress necesita una base de datos MySQL en la que se almacena el contenido de las páginas, las entradas y las distintas configuraciones, mientras que los archivos se almacenan en un servidor (tema Divi, plugins e imágenes).

Cada vez que un usuario solicita mostrar una URL (un artículo o una página), se realiza una consulta a la base de datos para mostrar el contenido enlazado.

Por esta razón, se dice que WordPress (y otros CMS) se cargan más lentamente que un sitio web estático y requieren un poco más de atención en términos de rendimiento.

¿Cómo probar la velocidad de una página web?

¿Ha probado ya el rendimiento de su sitio web? ¿Sabe que existen herramientas online gratuitas que le darán una estimación del peso/rendimiento/velocidad de su sitio? Aquí están:

Basta con copiar y pegar la URL de su sitio (o del sitio de su vecino) para comprobar su rendimiento.

Un pequeño consejo: haz una captura de pantalla durante tu primera prueba. De esta manera, después de haber tomado medidas correctivas para mejorar el rendimiento de su sitio web, puede volver a hacer una prueba y ver su progreso.

¿Es Divi un tema rápido?

Señoras y señores, a partir de agosto de 2021, puedo responder claramente a esta pregunta: ¡SÍ, Divi se ha convertido en un tema rápido y de rendimiento optimizado para su sitio!

Los desarrolladores de ElegantThemes han centrado sus esfuerzos últimamente y han hecho un gran trabajo para mejorar el rendimiento de su sitio con Divi!

performance theme divi rapide
De hecho, ciertamente había trabajo que hacer en este lado... Pero ahora es posible obtener una A / 100% en las pruebas de rendimiento con Divi...

Le invito especialmente a descubrir la Ficha de rendimiento de Divi en la web oficial. Entre otras cosas, esto es lo que ha cambiado:

  • Si su página utiliza sólo 5 de los Más de 50 módulos DiviDivi sólo maneja las funciones necesarias para estos 5 módulos e ignora el resto.
  • El CSS de Divi está dividido en cientos de pequeños componentes y el CSS no utilizado nunca se carga.
  • El JavaScript de Divi es ligero porque se eliminan todos los scripts no utilizados.
  • Divi identifica el CSS necesario para estilizar el contenido por encima de la línea de flotación, y lleva todo lo demás por debajo de la misma.
  • Divi ahora es compatible con la caché de fuentes de Google.
  • Ahora Divi carga jQuery y otros archivos JavaScript de forma asíncrona cuando no son necesarios en la cabecera.
  • Y así sucesivamente.

Cuando te digo que Divi hizo un gran trabajo! Aquí hay incluso una comparación de rendimiento de varios temas + constructor:

comparaison performance theme
Comparación del rendimiento de 5 temas + Constructores
Tema + ConstructorÍndice de velocidadVer las pruebas
Divi + Divi Builer320msPrueba aquí
Astra + Gutenberg320msPrueba aquí
Kadence + Beaver Builder400msPrueba aquí
Hola + Elementor520msPrueba aquí
Avada + Fuision Builder520msPrueba aquí

La versión 4.10 de Divi, lanzada el 18 de agosto de 2021, hizo oficiales estas importantes mejoras de rendimiento... Puedes ver el vídeo oficial o ir directamente a lea el artículo para saber más.

Supongo que la mejora del rendimiento de Divi era necesaria debido a la evolución de Google y estos Core Web Vitals.

Por cierto, ¿has encontrado una mejora para tus sitios Divi?

⚠️ Nota: si tienes un plugin de caché como WP Rocket, puedes encontrar algunos errores de visualización por ejemplo, desde esta actualización. Esto es normal, el código de Divi se ha actualizado para mejorar la velocidad de carga de su sitio, pero es posible que tenga que revisar algunas de las opciones que ofrece su plugin de caché.

Por último, debes saber que Divi está optimizado para la velocidad de carga y si ves que tu sitio es siempre lento, es porque cada sitio es diferente: añades plugins, fuentes, imágenes, vídeos... Y ¡boom! Tu sitio se vuelve lento... ¡Y no todo es culpa del tema 😩 ! A menudo, o en parte, la culpa es nuestra, ¡nosotros los usuarios! Si no seguimos las buenas prácticas, un sitio de WordPress puede convertirse en un verdadero caracol 🐌 !

Pero no te preocupes, ya veremos lo que se puede hacer en el resto de este artículo...

¿Lo sabías? Puede probar Divi de forma gratuita visitando en esta página y haciendo clic en "PRUEBA GRATUITA

¿Cómo mejorar el rendimiento de un sitio WordPress / Divi?

En su correo electrónico, Sophie me preguntaba si era posible eliminar archivos de Divi que no nos sirvieran y, por lo que sé, no podemos realizar esta acción de forma "limpia".

De hecho, en cierto modo, podríamos hacerlo pero tendría consecuencias: una vez que modifiquemos un tema, los cambios realizados desaparecerán cuando hagamos la siguiente actualización del tema.

Por ello, WordPress nos permite crear un tema hijo. Sin embargo, este tema hijo nos permite añadir FUNCIONALIDADES pero no nos permite eliminar ARCHIVOS. Por lo tanto, un tema hijo se utiliza para "sobrecargar" y no para "descargar".

Para mejorar el rendimiento de un sitio Divi (o cualquier tipo de sitio WordPress), deberá realizar una serie de acciones y elecciones:

Nota: estas mejoras pueden aplicarse a cualquier sitio de WordPress, incluso a los que no utilizan el tema Divi.

1 - Elija un buen anfitrión

Creo que este paso es muy importante. Aunque algunos usuarios apuestan por lo "gratuito" y lo "low cost", si valoras tu sitio o blog, no es aquí donde debes recortar gastos.

Una mala solución de alojamiento es uno de los primeros puntos en los que falta rendimiento. Por mi parte, aconsejo a mis clientes que utilicen sólo 3 empresas de alojamiento:

  • OVH: aunque este host experimenta a veces averías temporales en algunos de sus servidores, sigue siendo una apuesta segura y aprecio mucho la calidad del soporte telefónico que siempre proporciona una solución al problema. Cuidado, recomiendo no suscribir nunca la oferta de "primer precio".
  • WP SERVER : un alojamiento superior que sólo se ocupa de los sitios de WordPress, que tiene una seguridad avanzada, un uso ultra-intuitivo y un rendimiento de alto nivel. Aprecio especialmente la calidad del soporte, muy reactivo: el pequeño botón de "chat en vivo" nunca me hizo esperar más de un minuto (descubrir el servidor WP).
  • O2SWITCH : es una alternativa a los otros dos hosts.

Estos tres proveedores son franceses, lo que es una verdadera ventaja cuando tienes que tratar con ellos... En general, aconsejo a mis clientes que eviten otros alojamientos.

2 - Configurar correctamente su alojamiento

Incluso si estas configuraciones están estrechamente relacionadas con las opciones ofrecidas por el host, asegúrese de que ha elegido la última versión de PHP : PHP 7. Esto no es nuevo, pero la versión 7 mejora considerablemente el rendimiento de un sitio web.

3 - Optimice sus imágenes para la web

Las fotos y las imágenes son el talón de Aquiles de WordPress. Los usuarios quieren mostrar muchos de ellos, en sliders, en carruseles, los quieren en alta definición, etc... ¡y entonces es DRAMA!

Las imágenes son una de las primeras causas de lentitud en la carga de un sitio. Por ello, le aconsejo que les preste especial atención.

Améliorer la performance de Divi avec Imagify
Ejemplo de cómo mejorar el rendimiento de un sitio de WordPress utilizando el plugin Imagify en una sola imagen

Tendrás que procesar las imágenes primero, antes de subirlas a tu sitio - te lo cuento todo en este artículo completo dedicado a la optimización de imágenes para WordPress - pero también tendrá que tomar medidas después de la descarga utilizando un plugin de compresión como Imagify. Este plugin es mágico y reduce el peso de cada una de tus imágenes a la mitad.

4 - Utilizar un plugin de caché

Supongo que no hay ningún secreto, si realmente quieres aumentar el rendimiento de tu sitio con Divi (o cualquier otro tema de WordPress), tendrás que considerar la instalación y configuración de un plugin de caché.

Un plugin de caché permite crear una copia estática de la página o artículo de su sitio y almacenarla en el navegador del usuario, eliminando así la necesidad de acudir a la base de datos para recuperar el contenido solicitado.

Como resultado, esta página almacenada en la caché del navegador del usuario se propondrá de nuevo -cuando el usuario visite su sitio en el futuro- en sólo una fracción de segundo en lugar de tener que ir y venir a la base de datos. Excepción hecha si el usuario borra su historial de navegación...

Los plugins de caché son a veces difíciles de configurar y pueden "romper" su sitio. No te preocupes, simplemente desmarca algunas opciones y todo volverá a la normalidad. Por mi parte, utilizo la extensión WP Rocket (plugin premium en francés) pero es los freemiums existen.

5 - Utilice una CDN si es necesario

El principio de una CDN (Content Delivery Network) es proporcionar datos a sus usuarios desde un servidor más cercano. Cuando un usuario introduce una URL para ver su sitio, los datos deben viajar desde su ubicación hasta su servidor y luego volver a su ubicación para ver la página solicitada. La distancia física entre estos dos puntos puede tener un efecto en el tiempo de carga de la página. Esto significa que los usuarios cercanos a su servidor podrán ver su sitio más rápidamente.

Nota 1: no todos los sitios necesitan una CDN, pero debería considerar esta opción si tiene muchos recursos en sus páginas, como imágenes, hojas de estilo, vídeos, etc., y si el tráfico es importante y su alojamiento no le acompaña.

Nota 2: la configuración de una CDN sólo funcionará si ya ha configurado un plugin de caché.

6 - Cuidado con los plugins

Cuando descubres WordPress por primera vez, puedes dejarte llevar, al principio, e instalar cualquier cosa y todo como un plugin. Es súper adictivo y es gratis, en la mayoría de los casos. Así que tendemos a añadirlos involuntariamente.

Los plugins pueden ser una fuente de ralentización de su sitio. En realidad, no es el número de extensiones instaladas lo que marca la diferencia, sino la calidad del código de cada plugin, las peticiones que hace y los archivos que incorpora.

Si haces una prueba de rendimiento de tu sitio con una de las herramientas que mencioné al principio del artículo, podrás comprobar qué consultas son las más largas.

Dependiendo de los resultados, puedes/debes tomar una decisión sobre ciertos plugins... ¿Realmente necesitas ese plugin que se ve súper bien en tus imágenes pero que agrega muchos archivos que plagan la experiencia del usuario? ¿Realmente necesitas mostrar tus últimas fotos de Instagram o las noticias de Facebook?

7 - Los Embedded: no siempre son amigos

Los embeds son archivos incrustados en tus páginas o entradas de WordPress. Los hay de todo tipo, como vídeos de YouTube/Vimeo, tweets, tableros de Pinterest, mapas de Google.

Si miras el código y el tiempo de carga de tus páginas, podrás comprobar qué recursos tardan más y ralentizan la carga de tu sitio.

Améliorer la performande de Divi en évitant les embeds
Este es un ejemplo de latencia debido a un mapa de Google

También en este caso tendrás que tomar decisiones: ¿realmente necesitas un mapa de Google en tu página de inicio? ¿No debería insertarlo en la página de contacto, por ejemplo, que es una página menos visitada que la de inicio? O mejor aún, ¿por qué no sustituir el mapa de Google por una llamada a la acción que lleve al enlace del mapa en línea?

8 - ¡La policía también juega!

¿Sabía que las fuentes que elige tienen un impacto en el tiempo de carga de su sitio de WordPress?

Una fuente es una colección de glifos que contiene mucha información, algunos de los cuales tienen metadatos adicionales.

Les polices peuvent ralentir le chargement d'un site
Ejemplo de un blog que utiliza fuentes especiales: las fuentes pueden ralentizar la carga de las páginas de un sitio

Imagínese entonces el impacto de utilizar varias fuentes en la misma página, especialmente si esas fuentes son complejas.

Conclusión sobre el rendimiento de un sitio Divi

Para terminar, quería volver al tema Divi y su rendimiento. Es obvio que la elección del tema tendrá una consecuencia en la carga de su sitio. Pero has visto que también hay una historia de rendimiento del servidor, y una buena gestión de la imagen.

Hubo un tiempo en que el tema Divi tenía algunos problemas de lentitud, efectivamente, pero una importante actualización de agosto de 2017 ha corregido muchos problemas, por no hablar de Divi 4.10, que ha puesto a Divi en la cima de la lista de temas rápidos de WordPress, como se ha explicado anteriormente en este artículo. Esta es una de las ventajas de elija un tema que se mantiene y mejora regularmente.

Por lo tanto, si su sitio que utiliza el tema Divi es muy lento, se recomienda comprobar los 8 puntos enumerados anteriormente y ver si algunos parámetros pueden ser mejorados. Pero sobre todo, aquí están los 4 criterios más importantes en los que debes esforzarte absolutamente (sin ninguna concesión):

  • la elección de un buen anfitrión
  • la optimización de sus imágenes
  • el almacenamiento en caché de su sitio
  • la eliminación de los plugins que ralentizan la carga del sitio

Aquí tienes 😉

performance divi site
perfomance theme divi
How to speed your Divi website ?

2.780 palabras

11

A ti también te debería gustar:

Comment personnaliser le curseur de la souris sur votre site ?

¿Cómo personalizar el cursor del ratón en su sitio?

¿Desea un sitio personalizado hasta el último detalle? Tengo un tutorial rápido y fácil para ayudarle a personalizar el cursor del ratón en su sitio. De este modo, cuando sus visitantes pasen por encima de un enlace, el cursor estará totalmente personalizado.

20 Commentaires

  1. sophie

    Merci beaucoup pour cet article et d’avoir répondu à mes questions. A moi de jouer maintenant !
    Bon week-end

    Sophie

  2. Tilto

    Je me pose la question a propos du plug in de cache. Sachant que divi peur compter les java et css, est-ce redessine en plus ? si oui que faut il configurer ou pas pour ne pas faire un calcul double ?

  3. Lycia

    Salut Tilto.
    Je ne sais pas si tu parle de la minification ? Pour ma part, je ne fais pas les choses en double te j’utilise simplement les options proposées par WP Rocket. Est-ce que cela répond à ta question ?

  4. David

    Bonjour,
    Merci pour cet article qui apporte quelques billes supplémentaires pour gérer la performance d’un site DIVI.

    A ce sujet, je me demandais si 1 article remplis de DIV n’était pas complexe à lire pour un robot et si toutes ces DIV à répétitions n’alourdissaient pas la page avec, pour conséquence, un ralentissement du chargement ? D’après votre expérience, est-ce que cela pourrait être le cas ?

  5. Lycia

    Bonjour David, je ne pense pas que du HTML puisse alourdir le temps de chargement. Par contre ça peut être néfaste pour le SEO car il existe des balises plus pertinentes. Ce qui fait le plus de mal c’est le poids des images. IMAGIFY est très bien pour les alléger. J’avais écrit un article sur WPFORMATION qui explique comment s’en servir, si ça vous intéresse. Faites un test de poids d’une de vos pages et regardez dans l’audit ce qu’ils préconisent. Ça peut venir d’autres choses.

  6. Vincent

    Je confirme pour la version PHP. Je suis passé de PHP5.quelquechose à PHP7, le gain est énorme.
    PS: étonnement dans cet article, les liens externes que tu fais, ne sont pas en nofollow.

  7. Lycia

    Hello Vincent. Je met en nofollow uniquement les liens d’affiliation puisque c’est ce que Google recommande. Pour les autres liens, ils sont toujours en follow.

  8. Frank Gav

    Merci beaucoup!

  9. Lycia Diaz

    Merci Frank !

  10. sandrine

    Bonjour Lycia ! Merci beaucoup ! Pour la mise en cache j’ai testé W3 Total cache mais il semble qu’il soit incompatible avec DIVI avez vous un puglin à me conseiller parmi les freemiums ?

  11. Lycia Diaz

    Salut Sandrine,
    Es-tu sûre que Divi n’est pas compatible avec W3 Total Cache ? Ça me parait bizarre (mais pourquoi pas après tout…). Y’a peut-être un conflit ailleurs ?
    Par contre, je ne peux pas te conseiller de plugin de cache gratuit ou freemium car je n’ai toujours utilisé que WP Rocket (premium).

  12. sandrine

    Merci de ta réponse Lycia, oui je te confirme qu’il était responsable d’un problème d’affichage au niveau de l’entête du site. j’ai personnalisé le css pour le menu et ça ne passait pas du tout. Je l’ai probablement mal configuré mais il est assez complexe. Aux regard des forums je n’ai pas été la seule a rencontrer des difficultés en voulant associer Divi à WP3TC. J’apprécie WP Rocket et le trouve super efficace mais les personnes que j’assiste n’ont pas de buget : du free du free du free… j’ai testé WP super cache. Pas de problème si ce n’est que sur GTmetrix le site apparait toujours comme si je n’avais pas activé la mise en cache. Idem si j’autorise la mise en cache via htacces. étrange. je vais bien finir par trouver. merci en tout cas

  13. Lycia Diaz

    OK Sandrine, je comprends…
    Mais il faut aussi que les gens comprennent que quand c’est gratuit, tu en as parfois pour ton argent.
    Il y a un proverbe qui dit « je n’ai pas les moyens de m’acheter du pas cher »… Et oui, quand tu construis une maison avec des matériaux à bas coût, il est fortement probable que dans 2 ans, tu doives tout rénover. Au final, ça t’aura coûté le double. Alors que si tu avais mis les moyens au départ, tu serais tranquille pour les 15 ou 20 prochaines années. C’est pareil dans le web… Et c’est ça qu’il faut faire comprendre aux clients. Sachant qu’un freelance ou un dev facturera plus cher pour « réparer » que pour « créer ». Bref, j’espère que tu arriveras à régler ce problème de cache. Mais il me semble que WP Super Cache a bonne presse ? À voir…

  14. sandrine

    Merci Lycia; Tu prêches une convaincue ! Problème résolu je suis passé à comet., Gtmetrix a apprécié, encore faible à mon goût sur pingdom mais on avance.
    A bientôt

  15. Lycia Diaz

    Merci Sandrine !

  16. Cedlannoy

    Super ! Par conte j’ai toujours un doute sur la taille du style.css plus de 600k c’est beaucoup quand même !

  17. Grégoire

    Hello,

    L’un des grands axes d’amélioration du temps de téléchargement d’un site, c’est les images. Cela représente souvent plus de 60% du poids de la page.
    On peut conseiller alors de faire du lazyloading et d’essayer de mettre en place le webP sur son site.

  18. didouche

    Bonjour, j’ai de gros probléme avec mon site, il bug, il est lent, j’aimerais bien que quelqu’un puisse m’aider, voici un de mes liens: https://transponyx.com/ . Merci!

  19. Lycia Diaz

    Salut Didouche !
    Met une extension de cache (WP Rocket par exemple) et vérifie chez ton hébergeur quelle est la version PHP qui est utilisée. Tu devrais avoir au moins la version 7.3 de PHP. Cela peut vraiment faire la différence !

  20. Clic Monkey

    Bonjour, votre article est très complet et très pertinent.

    Souvent le problème sur WordPress provient des modules. Il y a une forte communauté donc il y a un module pour tout. Cependant l’ajout de module est à modérer pour optimiser le temps de chargement mais aussi pour des contraintes de sécurité.

    Par contre s’il y a un module que nous recommandons c’est bien WP Rocket.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto