Mejorar el rendimiento de un sitio de WordPress es esencial. En un mundo donde todos tienen prisa - yo el primero - nadie tiene tiempo de perder con el tiempo para cargar un sitio web. Incluso si el artículo del blog parece interesante, nos volvemos exigentes y queremos léalo de inmediato¡Si no nunca!
¿Te reconoces? Es "el efecto móvil". Estoy en una parada de autobús, tengo dos minutos para perder así que estoy documentando... el autobús llega y la página sigue cargando. Bueno, será por próxima vez o nunca porque me suba al autobús, tengo un tweet u otra notificación y ya he olvidado este gran artículo en este blog súper lento ...
Esto es lo que pasa cuando su sitio web es demasiado lento. En este artículo veremos cómo mejorar el rendimiento de un sitio de WordPress...
Esta es una pregunta que Sophie hizo por correo electrónico. De hecho, la verdadera pregunta era: "¿Cómo puedo aclarar los archivos DIVI? Porque con prisa, no es genial. ¿Podemos deshacernos de archivos JS innecesarios por ejemplo?"
Antes de responder a esta pregunta, volvamos a algunos puntos clave...
¿Cuáles son los beneficios de tener un sitio web exitoso?
Es una pregunta que puede parecer un poco tonto, pero muchos creadores del sitio favorecen la funcionalidad y la estética sobre el rendimiento. Es a menudo la última rueda del entrenador (con accesibilidad y es una vergüenza). Sin embargo, tienes tanto que ganar mejorar el rendimiento de su sitio :
Primero, los motores de búsqueda como Google priorizan los resultados de búsqueda de sitios web eficientes y rápidosPara mejorar la experiencia del usuario, Google sugiere más fácilmente sitios de carga rápida en sus primeras páginas de resultados. Así como sitios web de carga lenta no será tan bien clasificado como otros. Es por esta razón que Google creó el proyecto AMP.
Segundo, sitio web eficiente y rápido mejora mucho la experiencia del usuario. Esta famosa historia que te conté al principio del artículo no es una leyenda. Es real: al usuario de Internet no le gusta esperar incluso una fracción de un segundo demasiado y no vacila en dejar su sitio y buscar otro para satisfacer su necesidad.
Por último, como diseñador de sitios web, usted tiene que ofrecer sitios web de alto rendimiento porque son testimonio de sus habilidades y conocimientos. Imagínese si quiere promover su cartera pero sólo ofrece ejemplos de sitios lentos, ¿cree que el prospecto querrá confiarle con su proyecto?
¿Por qué mejorar el rendimiento de un sitio de WordPress?
Algunos dicen que "WordPress es lento", pero antes de acusar a este CMS, es importante entender cómo funciona y por qué esto puede afectar al velocidad de carga de página.
Para trabajar, un sitio de WordPress necesita una base de datos MySQL en la que almacena el contenido de páginas, artículos y varios ajustes, 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 hace una consulta en una base de datos para mostrar el contenido relacionado.
Es por esta razón que se dice que WordPress (como los otros CMS además) carga más lentamente que un sitio web estático y que requiere un poco más de atención en términos de rendimiento.
¿Cómo probar la velocidad de una página web?
¿Alguna vez ha probado el rendimiento de su sitio? ¿Sabes que hay herramientas gratuitas en línea que te darán una estimación de la Peso / rendimiento / velocidad de su sitio? Aquí están:
Simplemente copiar y pegar la URL de su sitio (o vecino) para comprobar su rendimiento.
Sugerencia: haga una captura de pantalla durante su primera prueba. Así, después de realizar acciones correctivas para mejorar el rendimiento de su sitio web, puede volver a probar y ver su progreso.
¿Es Divi un tema rápido?
Damas y caballeros, desde agosto de 2021, puedo responder claramente a esta pregunta: Sí, Divi se ha convertido en un tema rápido, optimizado para el rendimiento de su sitio !
Los desarrolladores de ElegantThemes han concentrado sus esfuerzos recientemente y han hecho mucho trabajo para mejorar rendimiento de su sitio con Divi !
Te invito especialmente a descubrir el El archivo de rendimiento de Divi en el sitio web oficial. Entre otras cosas, esto ha cambiado:
- Si su página utiliza sólo 5 del Módulos 50+ Divi, Divi sólo maneja las funciones necesarias para estos 5 módulos e ignora el resto.
- El CSS de Divi se divide en cientos de pequeños componentes y CSS no utilizado nunca se cargan.
- Divi JavaScript es ligero porque todos los scripts no utilizados se eliminan.
- Divi identifica el CSS necesario para estilizar el contenido por encima de la línea de flotación, e informa todo lo demás por debajo de esta línea.
- Divi ahora soporta el caché de Google fuentes.
- Ahora, Divi carga jQuery y otros archivos JavaScript de forma asincrónica cuando no se requieren en el encabezado.
- Etc.
¡Cuando te digo, Divi hizo un gran trabajo! Aquí está incluso una comparación de rendimiento de varios temas + constructor :
| Tema + Constructor | Índice de velocidad | Ver evidencia |
|---|---|---|
| Divi + Divi Builder | 320ms | Prueba aquí |
| Astra + Gutenberg | 320ms | Prueba aquí |
| Kadence + Beaver Builder | 400ms | Prueba aquí |
| Hola + Elementor | 520ms | Prueba aquí |
| Avada + Fuision Builder | 520ms | Prueba aquí |
Versión 4.10 de Divi publicada el 18 de agosto de 2021, que formalizó estos importantes mejoras en el desempeño de Divi... Puedes ver el video oficial o ir directamente a el artículo para aprender más.
Supongo que la mejora del rendimiento de Divi fue necesaria después de la evolución de Google y estos Vitales Web Core.
Además, ¿encontraste alguna mejora para tus sitios Divi?
⚠️ Nota: Si tiene un plugin de caché como WP Rocket, puede encontrar algunos errores de visualización, por ejemplo, desde esta actualización. Es normal, el código de Divi ha sido actualizado a mejorar la velocidad de carga de su sitio pero tal vez usted necesitará revisar algunas opciones ofrecidas por su plugin de caché.
Finalmente, sabe que Divi está optimizado para la velocidad de carga y si encuentras que tu el sitio es siempre lentoEsto se debe a que cada sitio es diferente: agrega plugins, fuentes, imágenes, videos... ¡Y boom! Su sitio se vuelve lento... Y no siempre es culpa del tema 😩 ¡Oye! Es a menudo, o en parte, nuestra culpa, nosotros los usuarios! Si no seguimos buenas prácticas, un sitio de WordPress puede convertirse en un verdadero caracol!
Pero, no te preocupes, veremos qué podemos hacer en el resto de este artículo...
¿Lo sabías? Puedes probar Divi gratis visitando en esta página y haciendo clic en "Pruébalo GRATIS"
¿Cómo mejorar el rendimiento de un sitio WordPress/Divi?
En su correo electrónico, Sophie me preguntó si era posible eliminar archivos de Divi que serían inútiles para nosotros y para mi conocimiento, no podemos realizar esta acción de una manera "limpia".
De hecho, de alguna manera, podríamos hacerlo, pero tendría consecuencias: si cambiamos un tema, los cambios que se han hecho desaparecerán tan pronto como hagamos la próxima actualización del tema.
Eso es bueno por esta razón que WordPress nos permite crear un tema infantil. Sin embargo, este tema infantil nos permite para añadir FUNCIONALITIES pero no nos permite eliminar FILES. Por lo tanto, un tema infantil se utiliza para "sobrecargar" y no "descargar".
Para mejorar el rendimiento de un sitio Divi (o todos los tipos de sitios de WordPress), entonces tendrá que llevar a cabo una serie de acciones y opciones:
NB: Estas mejoras se pueden aplicar a todos los sitios de WordPress, incluso aquellos que no utilizan el tema Divi.
1 - Elija un buen anfitrión
Creo que es un paso crucial. Aunque algunos usuarios sólo juran por "libre" y "bajo costo", si te importa su sitio o blog, no es en este punto que necesitas guardar.
Una mala solución de alojamiento es uno de los primeros puntos en los que falta rendimiento. Por mi parte, aconsejo a mis clientes sólo 3 compañías de alojamiento:
- OVH: Aunque este host a veces encuentra algunas descomposiciones temporales en algunos de sus servidores, sigue siendo un valor seguro y agradezco enormemente la calidad del soporte telefónico que siempre trae una solución al problema. Tenga cuidado, recomiendo nunca suscribirse a la oferta "primer premio".
- WP SERVER: un hospedaje superior que sólo se ocupa de los sitios de WordPress, que tiene seguridad avanzada, uso ultra-intuitivo y rendimiento de alto nivel. Aprecio particularmente la calidad del soporte muy reactivo: el pequeño botón de "gato vivo" nunca me hizo esperar más de un minuto (descubrir WP Server).
- O2SWITCH: Es una alternativa a los otros dos anfitriones.
Estos tres proveedores son franceses, que es realmente un "plus" cuando tenemos que intercambiar con ellos... En general, aconsejo a mis clientes que huyan de otras compañías de alojamiento.
2 - Configure su alojamiento bien
Incluso si estas configuraciones están estrechamente vinculadas a las opciones del host, asegúrese de haber elegido la última versión de PHP: PHP 7. Esto no es nuevo pero la versión 7 mejora mucho el rendimiento de un sitio web.
3 - Optimize your images for the Web
Les photos et les images sont le talon d’Achille de WordPress. Les utilisateurs ont envie d'en afficher beaucoup, dans des sliders, dans des carrousels, ils les veulent en haute définition etc... et là c'est le DRAME !
Les images sont l'une des premières causes de lenteur dans le chargement d'un site. Je vous conseille donc d'y prêter une attention toute particulière.
Vous devrez d'abord traiter les images en amont, antes de descargar au sein de votre site - je vous dit tout dans cet article complet dédié à l'optimisation des images pour WordPress - mais vous devrez également actuar después de descargar usando un plugin de compresión como Imágenes. Este plugin es mágico y todavía te reduce a la mitad del peso de cada una de tus imágenes.
4 - Use un plugin de caché
Je crois qu'il n'y a pas de secret, si vous voulez vraiment aumentar el rendimiento de su sitio con Divi (o cualquier otro tema de WordPress), tendrá que considerar la instalación y configuración de un plugin de caché.
Uno Cache plugin permet de créer une copie statique de la page ou de l'article de votre site et la stocke dans le navigateur de l'internaute, supprimant ainsi l'étape d'aller en base de données pour récupérer le contenu demandé.
De ce fait, cette page stockée dans le cache du navigateur de l'internaute lui sera proposée à nouveau - lors d'un futur passage sur votre site - en une fraction de seconde seulement au lieu de faire un aller-retour en base de données. Exception faite si l'utilisateur efface son historique de navigation...
El plugins de cache sont quelquefois difficiles à configurer et peuvent "casser" votre site. Ne vous inquiétez pas, il suffira de décocher certaines options pour que tout rentre dans l'ordre. Pour ma part, j'utilise l'extension WP Rocket (plugin premium en francés) freemiums exist.
5 - Posible uso del CDN
Le principe d'un CDN (Content Delivery Network) est de fournir des données à vos utilisateurs à partir d'une source de serveur plus proche. Lorsqu'un utilisateur saisit une URL pour afficher votre site, les données doivent voyager de leur emplacement à votre serveur, puis retourner à leur emplacement pour en afficher la page demandée. La distance physique entre ces deux points peut avoir un effet sur le temps de chargement de la page. Ainsi, les internautes proches de votre serveur pourront voir votre site plus rapidement.
NB 1 : pas tous les sites ont besoin d'un CDN mais vous devriez songer à cette option si vous avez de nombreuses ressources sur vos pages comme des images, des feuilles de styles, des vidéos etc. et si le trafic est important et que votre hébergement ne suit pas.
NB 2 : la mise en place d'un CDN ne fonctionnera que si vous avez déjà paramétré un plugin de cache.
6 - Cuidado con los plugins
Lorsqu'on découvre WordPress, on peut s'emballer, au début, et installer tout et n'importe quoi comme plugin. C'est super addictif et en plus c'est gratuit, dans la plupart des cas. Alors on a tendance à en ajouter intempestivement.
Los plugins pueden ser una fuente de ralentización de su sitio. Ce n'est pas vraiment le nombre d'extensions installées qui fait la différence mais plutôt la qualité du code de chaque plugin, les requêtes qu'il effectue et les fichiers qu'il embarque.
Si vous fait un test de performance de votre site avec l'un des outils dont je vous parlais en début d'article, vous allez pouvoir vérifier quelles sont les requêtes qui sont les plus longues.
Selon les résultats, vous pourrez/devrez prendre une décision au sujet de certains plugins... Avez-vous vraiment besoin de ce plugin qui fait un effet super sympa sur vos images mais qui ajoute des tas de fichiers qui plombent l'expérience utilisateur ? Avez-vous vraiment besoin d'afficher vos dernières photos Instagram ou votre fil d'actualité Facebook ?
7 - Embeds: no siempre amigos
Embeds son archivos incrustados en sus páginas de WordPress o artículos. Hay todo tipo de videos como YouTube/Viméo, tweets, tarjetas Pinterest, Google maps.
Si observa el código y el tiempo de carga de sus páginas, puede comprobar qué recursos tardan más tiempo y desaceleran la carga de su sitio.
En este caso también tendrá que tomar decisiones: avez-vous vraiment besoin d'une Google Map sur votre page d'accueil ? Ne devriez-vous pas plutôt l'insérer dans la page contact par exemple, qui est une page moins visitée que l'accueil ? Ou mieux encore, pourquoi ne pas remplacer la Google Map par un Call-to-Action qui mène au lien de la Map en ligne ?
8 - ¡La policía también está jugando!
Savez-vous que les polices d'écriture que vous choisissez ont une conséquence sur le temps de chargement de votre site WordPress ?
Una fuente es una colección de glifos que contienen mucha información, algunos de los cuales tienen metadatos adicionales.
Imaginez alors l'impact qu'aura l'utilisation de plusieurs fontes sur une même page, surtout si ces polices sont complexes.
Conclusión sobre el desempeño de un sitio Divi
En conclusión, quería volver a la tema Divi y su rendimiento. C'est évident que la elección del tema tendrá una consecuencia en la carga de su sitio. Mais vous avez vu qu'il y a aussi une histoire de performance du serveur, et une bonne gestion des images.
Hubo un momento en el que Tema Divi tenía algunos problemas de lentitud, de hecho, pero une grosse mise à jour datant d'août 2017 corregido muchos problemas sin olvidar la versión 4.10 de Divi que totalmente proyectado Divi en la parte superior del ranking de temas de WordPress rápido, comme expliqué plus tôt dans cet article. C'est un des avantages à optar por un tema que se mantiene y mejora regularmente.
Así que si su sitio utilizando el tema Divi es muy lentoSe recomienda revisar los 8 puntos enumerados anteriormente y si se podrían mejorar ciertos parámetros. Pero sobre todo, estos son los 4 criterios más importantes sobre los cuales usted debe hacer un esfuerzo (sin ninguna concesión):
- le choix d'un bon hébergeur
- l'optimisation de vos images
- caché su sitio
- l'élimination des plugins qui plombent le chargement du site
Aquí vamos.
Merci beaucoup pour cet article et d’avoir répondu à mes questions. A moi de jouer maintenant !
Bon week-end
Sophie
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 ?
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 ?
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 ?
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.
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.
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.
Merci beaucoup!
Merci Frank !
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 ?
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).
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
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…
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
Merci Sandrine !
Super ! Par conte j’ai toujours un doute sur la taille du style.css plus de 600k c’est beaucoup quand même !
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.
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!
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 !
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.