How to improve the performance of its Divi site

Improving the performance of a WordPress site is essential. In a world where everyone is in a hurry - me the first - no one has time to lose with the time to load a website. Even if the blog article seems interesting, we become demanding and we want read it right awayIf not never!

Do you recognize yourself? It's "the mobile effect." I'm at a bus stop, I've got two minutes to lose so I'm documenting myself... the bus arrives and the page is still loading. Well, it'll be for the next time or never because I get on the bus, I get a tweet or another notification and I've already forgotten this great article on this super slow blog...

This is what happens when your website is too slow. In this article we will see how to improve the performance of a WordPress site...

This is a question that was asked by Sophie by email. In fact, the real question was: "how can I lighten DIVI files? Because in a hurry, he's not great. Can we get rid of unnecessary JS files for example?"

Before we answer this question, let's go back to some key points...

What are the benefits of having a successful website?

It's a question that may seem a bit silly, yet many site creators favour functionality and aesthetics over performance. It is often the last wheel of the coach (with accessibility and it is a shame). Yet you have so much to gain in improving the performance of your site :

First, search engines such as Google prioritize search results from efficient and fast websites. To improve the user experience, Google more easily suggests quick-loading sites in its first results pages. Just as slow-loading websites will not be as well classified as others. It is for this reason that Google created the AMP project.

Second, efficient and fast website greatly improves the user experience. This famous story I told you at the beginning of the article is not a legend. It's real: the Internet user doesn't like to wait even for a fraction of a second too much and will not hesitate to leave your site and look for another one to meet his or her need.

Finally, as a website designer, you have to offer high-performance websites because they are testimony to your skills and know-how. Imagine if you want to promote your portfolio but it only offers examples of slow sites, do you think the prospect will want to entrust you with its project?

Why improve the performance of a WordPress site?

Some say that "WordPress is slow," but before accusing this CMS, it is important to understand how it works and why this can affect the page loading speed.

To work, a WordPress site needs a MySQL database in which it stores the contents of pages, articles and various settings while the files are stored on a server (Divi theme, plugins and images).

Each time a user requests to display a URL (an article or a page), a query is made in a database to display the related content.

It is for this reason that it is said that WordPress (like the other CMSs besides) loads more slowly than a static website and that it requires a little more attention in terms of performance.

How to test the speed of a web page?

Have you ever tested the performance of your site? Do you know that there are free online tools that will give you an estimate of the Weight / performance / speed from your site? Here they are:

• Pingdom Website Speed Test
• GT Metrix
• PageSpeed Insights

Just copy and paste the URL of your site (or neighbour's) to check its performance.

Tip: make a screenshot during your first test. Thus, after performing corrective actions to improve the performance of your website, you can retest and see your progress.

Is Divi a quick theme?

Ladies and gentlemen, since August 2021, I can clearly answer this question: YES, Divi has become a fast theme, optimized for the performance of your site !

Les développeurs d'ElegantThemes ont concentré leurs efforts dernièrement et ont accompli un gros travail pour améliorer la performance of your site with Divi !

I invite you especially to discover the Divi's performance file on the official website. Among other things, this has changed:

• Si votre page n'utilise que 5 des 50+ Divi modules, Divi only handles the functions required for these 5 modules and ignores the rest.
• Divi's CSS is divided into hundreds of small components and unused CSS are never loaded.
• Divi JavaScript is light because all unused scripts are deleted.
• Divi identifies the CSS needed to stylize the content above the flotation line, and reports everything else below this line.
• Divi now supports the cache of Google fonts.
• Maintenant, Divi charge jQuery et d'autres fichiers JavaScript de manière asynchrone lorsqu'ils ne sont pas nécessaires dans l'en-tête.
• Etc.

When I tell you, Divi did a great job! Here is even a performance comparison of several themes + builder :

Theme + Builder	Speed Index	See evidence
Divi + Divi Builder	320ms	Test here
Astra + Gutenberg	320ms	Test here
Kadence + Beaver Builder	400ms	Test here
Hello + Elementor	520ms	Test here
Avada + Fuision Builder	520ms	Test here

C'est la version 4.10 de Divi sortie le 18 août 2021 qui a officialisé ces major improvements in the performance of Divi... Vous pouvez visionner la vidéo officielle ou vous rendre directement sur l'article pour en savoir davantage.

Je suppose que l'amélioration de la performance de Divi était nécessaire suite à l'évolution de Google and these Core Web Vitals.

D'ailleurs, avez-vous trouvé une amélioration pour vos sites Divi ?

⚠️ Notez : si vous avez un plugin de cache comme WP Rocket, il est possible que vous rencontriez quelques erreurs d'affichage par exemple, depuis cette mise à jour. C'est normal, le code de Divi a été mis à jour pour improve the loading speed of your site but maybe you will need to review some options offered by your cache plugin.

Finally, know that Divi is optimized for loading speed and if you find that your site is always slow, c'est parce que chaque site est différent : vous ajoutez des plugins, des polices, des images, des vidéos... Et boom ! Votre site devient lent... Et ce n'est pas tout le temps la faute du thème 😩 ! C'est souvent, ou en partie, notre faute, nous les utilisateurs ! If we don't follow good practices, a WordPress site can become a real snail!

Mais, ne vous inquiétez pas, on va voir ce qu'il est possible de faire dans la suite de cet article...

Did you know that? You can test Divi for free by visiting on this page and by clicking on "TRY IT FOR FREE"

How to improve the performance of a WordPress/Divi site?

Dans son mail, Sophie me demandait si c'était possible de supprimer des fichiers de Divi qui nous seraient inutiles et à ma connaissance, nous ne pouvons pas effectuer cette action de manière "propre".

En fait, d'une certaine manière, nous pourrions le faire mais cela aurait des conséquences : dès lors que l'on modifie un thème, les modifications qui ont été apportées disparaitront dès que nous effectuerons la prochaine mise à jour du thème.

C'est bien pour cette raison que WordPress nous permet de create a child theme. However, this child theme allows us to d'ajouter des FONCTIONNALITÉS mais ne nous permet pas de supprimer des FICHIERS. Un thème enfant sert donc à "surcharger" et non à "décharger".

For améliorer la performance d'un site Divi (ou tous types de sites WordPress), vous devrez alors procéder à une série d'actions et de choix :

NB : ces améliorations peuvent être appliquées à tous sites WordPress, même ceux n'utilisant pas le thème Divi.

1 - Choose a good host

Je pense que cette étape est primordiale. Bien que certains utilisateurs ne jurent que par le "gratuit" et le "low-cost", si vous tenez à votre site ou à votre blog, ce n'est pas sur ce point que vous devez effectuer des économies.

Une mauvaise solution d'hébergement est l'un des premiers points où la performance fait défaut. Pour ma part, je conseille à mes clients seulement 3 hébergeurs :

• OVH: même si cet hébergeur rencontre parfois quelques pannes temporaires sur certains de ses serveurs, il reste une valeur sûre et j'apprécie énormément la qualité du support téléphonique qui apporte toujours une solution au problème. Attention, je préconise de ne jamais souscrire à l'offre "premier prix".
• WP SERVER: un hébergement au top qui ne s'occupe que de sites WordPress, qui a une sécurité avancé, une utilisation ultra-intuitive et une performance high-level. J’apprécie notamment la qualité du support très réactif : le petit bouton de "live chat" ne m'a jamais fait attendre plus d'une minute (discover WP Server).
• O2SWITCH: c'est une alternative aux deux autres hébergeurs.

Ces trois fournisseurs sont français, ce qui est vraiment un "plus" lorsque l'on doit échanger avec eux... En général, je conseille à mes clients de fuir les autres hébergeurs.

2 - Configure your accommodation well

Même si ces configurations sont étroitement liées aux options proposées par l'hébergeur, assurez-vous que vous avez choisi la dernière version de PHP : PHP 7. Ce n'est pas nouveau mais la version 7 améliore considérablement la performance d'un site 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, before downloading 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 act after downloading using a compression plugin like Imagify. This plugin is magical and still reduces you by half the weight of each of your images.

4 - Use a cache plugin

Je crois qu'il n'y a pas de secret, si vous voulez vraiment increase the performance of your site with Divi (or any other WordPress theme), you will have to consider installing and setting a cache plugin.

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

The cache plugins 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 in French) freemiums exist.

5 - Possible use of 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 - Beware of 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.

Plugins can be a source of slowing down your site. 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: not always friends

Embeds are files embedded in your WordPress pages or articles. There are all kinds of videos like YouTube/Viméo, tweets, Pinterest cards, Google maps.

If you look at the code and the loading time of your pages, you can check which resources take the most time and slow down the loading of your site.

In this case too you will have to make choices: 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 - The police are playing too!

Savez-vous que les polices d'écriture que vous choisissez ont une conséquence sur le temps de chargement de votre site WordPress ?

A font is a collection of glyphs that contain many information, some of which have additional metadata.

Imaginez alors l'impact qu'aura l'utilisation de plusieurs fontes sur une même page, surtout si ces polices sont complexes.

Conclusion on the performance of a Divi site

In conclusion, I wanted to go back to the theme Divi and its performance. C'est évident que the choice of theme will have a consequence on the loading of your site. Mais vous avez vu qu'il y a aussi une histoire de performance du serveur, et une bonne gestion des images.

There was a time when the Theme Divi had some problems of slowness, indeed, but une grosse mise à jour datant d'août 2017 corrected many problems without forgetting the version 4.10 of Divi that totally projected Divi at the top of the ranking of quick WordPress themes, comme expliqué plus tôt dans cet article. C'est un des avantages à opt for a theme which is maintained and improved regularly.

So if your site using the theme Divi is very slowIt is recommended that the 8 points listed above be checked and whether certain parameters could be improved. But above all, these are the 4 most important criteria on which you must make an effort (without any concessions):

• le choix d'un bon hébergeur
• l'optimisation de vos images
• cache your site
• l'élimination des plugins qui plombent le chargement du site

Here we go.