How to improve the performance of your Divi site

Updated on 09/09/2021 | Published on 31/03/2018 | 20 comments

Improving the performance of a WordPress website is crucial. In a world where everyone is in a hurry - me first - no one has time to waste with the loading time of a website. Even if a blog post looks interesting, we become demanding and want to read it right away, if not ever!

Do you recognise yourself there? It's the "mobile effect": I'm at a bus stop, I've got two minutes to spare so I read up on it... the bus arrives and the page is still loading. Too bad, it'll be for another time or never, because when 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 website...

This is a question that was asked to me by email by Sophie. In fact, the real question was: "How can we lighten the DIVI files? Because in terms of speed, it's not great. Can we get rid of useless JS files for example? »

Before answering this question, let's go over a few key points...

What are the advantages of having a successful website?

This may seem like a silly question, but many web designers prioritise functionality and aesthetics over performance. It is often the last wheel of the carriage (along with accessibility, which is a shame). Yet you have so much to gain by improving the performance of your site:

👉 Firstly, search engines such as Google prioritise search results from fast performing websites. In order to improve the user experience, Google more readily suggests fast-loading sites in its first pages of results. Similarly, slow-loading websites will not be ranked as highly as others. This is why Google has created the AMP project.

👉 Secondly, a fast performing website greatly improves the user experience. That famous pictorial story I told you at the beginning of this article is not a legend. It's real: the Internet user doesn't like to wait even a fraction of a second too long and won't hesitate to leave your site and look for another one to meet their need.

👉 Finally, as a web designer, you owe it to yourself to propose performing websites as they are a testimony of your skills and know-how. Imagine if you want to promote your portfolio but it only offers examples of slow websites, do you think the prospect will want to entrust you with their project?

Why improve the performance of a WordPress site?

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

To function, a WordPress site needs a MySQL database in which it stores the content of pages, posts 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 database query is performed to display the linked content.

For this reason, WordPress (and other CMSes for that matter) are said to load more slowly than a static website and require a little more attention in terms of performance.

How to test the speed of a web page?

Have you already 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 of your site? Here they are:

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

A little tip: take a screenshot during your first test. This way, after you have taken corrective actions to improve the performance of your website, you can redo a test and see your progress.

Is Divi a fast theme?

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

The developers at ElegantThemes have been focusing their efforts lately and have done a lot of work to improve the performance of your site with Divi!

performance theme divi rapide
Indeed, there was certainly work to be done on this side... But it is now possible to get an A / 100% in performance tests with Divi...

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

  • If your page uses only 5 of the 50+ Divi modulesDivi only handles the functions needed for these 5 modules and ignores the rest.
  • Divi's CSS is divided into hundreds of small components and unused CSS is never loaded.
  • Divi's JavaScript is lightweight because all unused scripts are removed.
  • Divi identifies the CSS needed to style content above the waterline, and carries everything else below the waterline.
  • Divi now supports Google font caching.
  • Now Divi loads jQuery and other JavaScript files asynchronously when they are not needed in the header.
  • And so on.

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

comparaison performance theme
Performance comparison of 5 themes + Builders
Theme + BuilderSpeed IndexSee the evidence
Divi + Divi Builer320msTest here
Astra + Gutenberg320msTest here
Kadence + Beaver Builder400msTest here
Hello + Elementor520msTest here
Avada + Fuision Builder520msTest here

Divi version 4.10 released on August 18, 2021 made these major performance improvementsofficial... You can watch the official video or go directly to read the article to find out more.

I guess the performance improvement of Divi was necessary due to the evolution of Google and these Core Web Vitals.

By the way, have you found an improvement for your Divi sites?

⚠️ Note: if you have a caching plugin like WP Rocket, you may encounter some display errors for example, since this update. This is normal, Divi's code has been updated to improve the loading speed of your site but you may need to review some of the options offered by your caching plugin.

Finally, know that Divi is optimized for loading speed and if you find that your site is always slow, it's because every site is different: you add plugins, fonts, images, videos... And boom! Your site becomes slow... And it's not all the theme's fault 😩 ! It's often, or partly, our fault, we the users! If we don't follow good practices, a WordPress site can become a real snail 🐌 !

But don't worry, we'll see what can be done in the rest of this article...

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

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

In her email, Sophie asked me if it was possible to delete files from Divi that would be useless to us and as far as I know, we can't perform this action in a "clean" way.

In fact, in a way, we could do that but it would have consequences: once we modify a theme, the changes that were made will disappear when we do the next theme update.

This is why WordPress allows us to create a child theme. However, this child theme allows us to add FUNCTIONALITIES but does not allow us to delete FILES. A child theme is therefore used to "overload" and not to "unload".

To improve the performance of a Divi site (or any type of WordPress site), you will need to make a series of actions and choices:

Note: these improvements can be applied to any WordPress site, even those not using the Divi theme.

1 - Choose a good host

I think this step is very important. Although some users swear by "free" and "low-cost", if you value your site or blog, this is not where you should cut corners.

A bad hosting solution is one of the first points where performance is lacking. For my part, I advise my clients to use only 3 hosting companies:

  • OVH: even if this host sometimes experiences temporary breakdowns on some of its servers, it remains a safe bet and I greatly appreciate the quality of telephone support that always provides a solution to the problem. Be careful, I recommend never to subscribe to the "first price" offer.
  • WP SERVER : a top hosting that only deals with WordPress sites, that has an advanced security, an ultra-intuitive use and a high-level performance. I particularly appreciate the quality of the very reactive support: the small "live chat" button never made me wait more than a minute (discover WP Server).
  • O2SWITCH : it is an alternative to the two other hosts.

These three providers are French, which is a real plus when you have to deal with them... In general, I advise my clients to avoid other hosts.

2 - Configure your hosting properly

Even if these configurations are closely related to the options offered by the host, make sure you have chosen the latest version of PHP : PHP 7. This is not new, but version 7 considerably improves the performance of a website.

3 - Optimize your images for the Web

Photos and images are the Achilles heel of WordPress. Users want to display a lot of them, in sliders, in carousels, they want them in high definition etc... and then it's DRAMA!

Images are one of the first causes of slowness in the loading of a site. I therefore advise you to pay special attention to them.

Améliorer la performance de Divi avec Imagify
Example of how to improve the performance of a WordPress site using the Imagify plugin on a single image

You'll need to process the images first, before uploading them to your site - I tell you all about it in this full article dedicated to image optimization for WordPress - but you will also need to take action after the download using a compression plugin like Imagify. This plugin is magic and reduces the weight of each of your images by half.

4 - Use a cache plugin

I guess there's no secret, if you really want to increase the performance of your site with Divi (or any other WordPress theme), you'll have to consider installing and setting up a caching plugin.

A cache plugin allows you to create a static copy of the page or article on your site and store it in the user's browser, thus eliminating the need to go to the database to retrieve the requested content.

As a result, this page stored in the user's browser cache will be proposed again - when the user visits your site in the future - in just a fraction of a second instead of having to go back and forth to the database. Exception made if the user deletes his browsing history...

Caching plugins are sometimes difficult to configure and can "break" your site. Don't worry, just uncheck some options and everything will be back to normal. For my part, I use the extension WP Rocket (premium plugin in French) but it is freemiums exist.

5 - Use a CDN if necessary

The principle of a CDN (Content Delivery Network) is to deliver data to your users from a closer server source. When a user enters a URL to view your site, the data must travel from their location to your server and then back to their location to view the requested page. The physical distance between these two points can have an effect on page load time. This means that users near your server will be able to view your site faster.

NB 1: not all sites need a CDN but you should consider this option if you have a lot of resources on your pages such as images, stylesheets, videos etc. and if the traffic is important and your hosting does not follow.

NB 2: setting up a CDN will only work if you have already set up a cache plugin.

6 - Beware of plugins

When you first discover WordPress, you can get carried away, at first, and install anything and everything as a plugin. It's super addictive and it's free, in most cases. So we tend to add them unintentionally.

Plugins can be a source of slowing down your site. It's not really the number of extensions installed that makes the difference but rather the quality of the code of each plugin, the requests it makes and the files it embeds.

If you do a performance test of your site with one of the tools I mentioned at the beginning of the article, you will be able to check which queries are the longest.

Depending on the results, you can/will make a decision about certain plugins... Do you really need that plugin that looks super cool on your images but adds lots of files that plague the user experience? Do you really need to display your latest Instagram photos or Facebook news feed?

7 - The Embeds: not always friends

Embeds are files embedded in your WordPress pages or posts. There are all kinds of them like YouTube / Vimeo videos, tweets, Pinterest boards, Google maps.

If you look at the code and the loading time of your pages, you will be able to check which resources take the longest and slow down the loading of your site.

Améliorer la performande de Divi en évitant les embeds
Here is an example of latency due to a Google Map

In this case too you will have to make choices: do you really need a Google Map on your homepage? Shouldn't you rather insert it in the contact page for example, which is a less visited page than the home page? Or better yet, why not replace the Google Map with a Call-to-Action that leads to the online map link?

8 - The police also play!

Did you know that the fonts you choose have an impact on the loading time of your WordPress site?

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

Les polices peuvent ralentir le chargement d'un site
Example of a blog using special fonts: fonts can slow down the loading of the pages of a site

Imagine then the impact of using multiple fonts on the same page, especially if those fonts are complex.

Conclusion on the performance of a Divi site

To conclude, I wanted to come back to the Divi theme and its performance. It's obvious that the choice of theme will have a consequence on the loading of your site. But you have seen that there is also a story of server performance, and good image management.

There was a time when the Divi theme had some slowness issues, indeed, but a major update from August 2017 has fixed many problems, not to mention Divi 4.10, which has put Divi right at the top of the list of fast WordPress themes, as explained earlier in this article. This is one of the advantages to choose a theme which is maintained and improved regularly.

So if your site using the Divi theme is very slow, it is recommended to check the 8 points listed above and see if some parameters could be improved. But above all, here are the 4 most important criteria on which you should absolutely make an effort (without any concession):

  • the choice of a good host
  • the optimization of your images
  • caching of your site
  • the elimination of plugins that slow down the loading of the site

Here you go 😉

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

2,780 words

11

You should like it too:

Comment personnaliser le curseur de la souris sur votre site ?

How to customise the mouse cursor on your site?

Do you want a site that is customised down to the last detail? I have a quick and easy tutorial to help you customise the mouse cursor on your site. This way, when your visitors hover over a link, the cursor is fully customised!

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.

Pin It on Pinterest

Shares
Share This