Guide ultime pour optimiser Divi sur WordPress (édition 2021)

Blair2004 Tutoriels WordPress Feb 18, 2021

Deux est sans aucun doute l'un des thèmes WordPress les plus populaires de nos jours. Il est livré avec un puissant générateur de page, que vous pouvez utiliser pour créer presque n'importe quel type de conception pour n'importe quel type de site Web (littéralement). Cet énorme avantage a un inconvénient. Comme Divi a un tas de fonctionnalités, ces fonctionnalités ont un poids. Et pour ceux qui ne veulent pas l'admettre, il est important d'envisager d'optimiser Divi, surtout si vous souhaitez offrir la meilleure expérience à vos visiteurs.

S'il est vrai que Divi reçoit de fréquentes performances, celles-ci ne sont pas toujours suffisantes et c'est plus vrai pour ceux qui ont plus qu'un simple blog "Hello World".

Dans ce tutoriel, nous allons explorer ce que nous pouvons faire pour accélérer les chargements de divi (alors qu'il s'agit déjà d'un thème WordPress rapide prenant en compte les fonctionnalités disponibles). Voici quelques sujets clés que nous aborderons:

  • Comment optimiser la base de données
  • Comment optimiser le DNS
  • Comment choisir un bon hébergement
  • Comment optimiser le temps de premier octet
  • Comment mettre en cache votre site Web WordPress
  • Comment effectuer une minification
  • Comment activer la compression Gzip
  • Quel CDN pouvez-vous utiliser
  • Comment optimiser vos images
  • Comment optimiser vos vidéos
  • Comment effectuer des tests de vitesse sur Divi
  • Autres conseils

Pourquoi devez-vous avoir un site Web rapide?

Ce n'est plus un secret pour personne. Les sites Web rapides convertissent mieux que les sites Web lents. Il existe une énorme corrélation entre la vitesse de votre site Web et votre taux de rebond. Plus précisément, voici pourquoi c'est aujourd'hui un must:

Télécharger Divi le meilleur thème WordPress

Le thème WordPress le plus populaire au monde et le constructeur ultime de la page WordPress

Télécharger divi
  • Réduisez le taux de rebond - Vous avez besoin de garder vos visiteurs? Rendez votre site Web ultra-rapide.
  • Augmenter la conversion - Si vous souhaitez que votre visiteur voie votre boutique ou votre formulaire, votre site Web doit se charger rapidement avant de disparaître.
  • SEO – Google Might Rank You Higher (might because it's Pas toujours le cas).
  • Crédibilité - les sites Web lents créent une mauvaise première impression pour vos visiteurs.

À quelle vitesse un site Web doit-il se charger?

Sur la base de diverses études, un site Web devrait se charger en 3 secondes ou moins. En général, un bon objectif est que vos pages Web se chargent en 3 secondes ou moins. Bien qu'il semble que la plupart des clients s'attendent à ce que ce soit 2 secondes ou moins ces jours-ci. Mais évidemment, chaque site Web et page Web est différent.

Trucs et astuces pour accélérer le chargement de Divi

Nous allons maintenant explorer tous les trucs et astuces que vous pouvez appliquer tout de suite sur votre site Divi et voir des changements significatifs sur les performances. Certaines de ces techniques s'appliquent également à tous les autres thèmes WordPress, vous êtes donc peut-être déjà familiarisé avec les thèses.

Commençons.

Comment optimiser la base de données

WordPress est un CMS dynamique qui interagit avec la base de données MySQL pour stocker et récupérer des données (publication, pages, métadonnées, etc.). Cette façon de travailler facilite la gestion de votre site Web, mais l'inconvénient est que le chargement des pages prend plus de temps car il doit localiser les données dans la base de données avant de charger la page. Pour un site Web HTML statique, il n'est pas nécessaire de rechercher du contenu dynamique, car il ne change pas de manière dynamique. C'est pourquoi les sites Web HTML statiques seront plus rapides que les sites Web WordPress.

Une façon de garder un site Divi (ou n'importe quel site WordPress) aussi vite que possible est de s'assurer d'optimiser votre base de données. Les fichiers du site WordPress sont organisés dans votre base de données par tables et chaque fois que vous ajoutez de nouvelles données à votre site (comme des thèmes et des plugins), cela crée de nouvelles tables et de nouvelles données. Comme vous vous en doutez, plus votre base de données est gonflée, plus il sera difficile de trouver les données. Cela conduit à un site Web plus lent.

Maintenant, si vous bloguez depuis de nombreuses années, vous avez peut-être essayé de nombreux thèmes et plugins. Cela a finalement amené votre base de données à conserver les données dont elle n'a pas besoin. Même si vous désinstallez un plugin, cela ne signifie pas que toutes les données créées par ce plugin sont également effacées. Certains plugins conservent certaines données, au cas où vous réinstallez le plugin, ou si le développeur a oublié d'ajouter une mesure de désinstallation appropriée. De toute évidence, ce n'est pas bon et juste pour votre base de données. Ces données restantes peuvent entraîner un encombrement inutile et ralentir votre site.

Tout comme toute organisation humaine a besoin de travailler plus efficacement, chaque site WordPress (Divi ou non) a besoin d'une base de données propre pour charger les pages plus rapidement. C'est pourquoi si vous avez votre site Web depuis un moment maintenant, vous devriez certainement envisager d'optimiser votre base de données.

Il existe de nombreux plugins qui peuvent vous aider, mais vous pouvez certainement essayer WP Optimiser, ce qui semble être une option crédible. Mais il existe d'autres Astuces à considérer également.

En plus d'optimiser votre base de données WordPress, vous voudrez peut-être alléger WordPress encore en réduisant les données qu'il stocke. Par exemple, WordPress conservera automatiquement les éléments supprimés dans la corbeille pendant 30 jours. Vous voudrez peut-être réduire cette période à 7.

Comment optimiser le DNS

L'une des premières choses qui se produisent lorsque votre site Web est sur le point d'être consulté est une recherche DNS. Dès que l'URL est saisie (ou cliquée), le FAI du visiteur envoie une requête DNS aux serveurs de noms pour trouver l'adresse IP associée à votre domaine (chaque domaine / site Web a une adresse IP spécifique). Plus clairement, une recherche DNS revient à rechercher votre nom de domaine dans un annuaire téléphonique pour trouver l'adresse IP de ce domaine.

Cependant, lorsqu'un utilisateur visite une page de votre site, la page peut avoir plusieurs domaines auxquels il faut accéder pour afficher la page. Vous pourriez donc effectuer 3 ou 4 recherches de domaine sur une seule page de chargement (peut-être plus).

De manière générale, la plupart des fournisseurs DNS gratuits comme Godaddy et Namecheap seront généralement plus lents que les autres.

La meilleure option gratuite qui augmentera votre vitesse de recherche DNS est probablement Cloudflare. Ils ont les performances DNS les plus rapides enregistrées sur DNSPerf.com. Ils sont nettement plus rapides que GoDaddy et Namecheap. Et vous pouvez même optimiser Cloudflare pour qu'il soit utilisé pour DNS sans leurs autres services (comme CDN ou WAF) si vous le souhaitez.

Par exemple, vous pouvez utiliser Cloudflare pour DNS et sécurité (détection DDOS) et KeyCDN (ou MaxCDN) pour votre CDN. C'est aussi une excellente combinaison.

Setup Cloudflare

Cloudflare est facile à configurer. Vous n'avez pas à vous soucier de changer d'hébergement ou quoi que ce soit au préalable. Tout ce que vous avez à faire est de parcourir leur configuration de 5 minutes qui commence par la saisie de votre domaine.

Ils récupéreront automatiquement vos enregistrements DNS actuels.

Une des choses que vous devrez faire pour terminer votre configuration est de changer les serveurs de noms par défaut de votre fournisseur DNS actuel (comme GoDaddy) en serveurs de noms Cloudflare.

À partir de maintenant, vous pourrez gérer facilement votre DNS à partir de leur tableau de bord.

Et juste comme ça, vous avez une augmentation de la vitesse de recherche DNS, plus de sécurité et un CDN pour votre site Web et gratuitement.

Comment choisir un bon hébergement

Au préalable, l'une des premières choses à considérer lors de votre voyage d'optimisation de site Web est de choisir un hébergement qui fonctionne bien pour votre site Web WordPress. Il y a quelques mois, Elegantheme sortait une offre de partenariat Avec des fournisseurs d'hébergement populaires qui fonctionne bien avec WordPress. Ces fournisseurs sont reconnus pour fournir un meilleur service pour Divi et l'intégration avec le tableau de bord Elegantthemes est transparente. Vous n'avez qu'à choisir parmi ces fournisseurs celui que vous choisirez pour votre site Web.

Maintenant, rien ne vous oblige à utiliser ces fournisseurs car il existe de nombreuses autres solutions disponibles qui fonctionnent bien pour WordPress et Divi également. Décomposons-le ensuite en considérant le type d'hébergement disponible.

Types of Hosting

Shared Hosting

C'est de loin le type d'hébergement le plus populaire pour les utilisateurs de WordPress / Divi. Mais malheureusement, c'est la pire option pour avoir un site Web rapide. Avec l'hébergement mutualisé, vous partagerez toutes les ressources disponibles d'un serveur avec d'autres. Parce que vous partagez, le coût de ce type d'hébergement est généralement très faible. Cependant, l’inconvénient est que vous ne pouvez pas contrôler le trafic généré par ces autres sites et la façon dont leur site Web peut potentiellement affecter les performances du serveur, puis affecter les performances de votre site Web. Ainsi, vous pouvez facilement être la proie de périodes de temps de chargement extrêmement lents et même de périodes où votre site est complètement indisponible. Vous feriez donc mieux d'avoir une bonne idée de Le trafic que votre hébergement partagé peut gérer.

VPS Hosting

L'hébergement Virtual Private Server (VPS) est essentiellement un juste milieu entre l'hébergement partagé et dédié. Votre espace serveur est «privé», ce qui signifie qu'il est complètement séparé des autres. Ainsi, les fichiers de votre site ne sont pas exposés à d’autres personnes sur le serveur. Contrairement à l'hébergement partagé, un VPS dispose d'une quantité dédiée de ressources système à votre disposition pour vous assurer que votre site obtient toujours ce dont il a besoin pour offrir des temps de chargement rapides de manière cohérente. Techniquement, vous n'aurez pas à vous soucier des pics de trafic d'autres sites Web affectant la vitesse de votre site.

Mais, à moins que vous n'ayez un VPS géré, ce type d'hébergement est principalement destiné aux types de bricoleurs suffisamment avertis pour gérer les choses eux-mêmes.

Cloud Hosting

Avec l'hébergement cloud, vous avez accès à un réseau de serveurs (dans le cloud) au lieu d'un seul serveur physique. Cela vous permet d'extraire toutes les ressources dont vous avez besoin de ce réseau de serveurs selon vos besoins. Plus simplement, vous disposez d'une partition virtuelle de l'espace serveur qui s'appuie sur la puissance et les ressources de l'ensemble du réseau de serveurs. Il n'y a donc pas lieu de s'inquiéter des pics de trafic comme vous le feriez pour l'hébergement mutualisé. L'hébergement cloud est extrêmement flexible et évolutif pour vos besoins.

L'une des principales différences entre l'hébergement cloud et l'hébergement VPS est que l'hébergement VPS dispose d'une quantité dédiée (parfois limitée) de ressources à extraire qui peuvent ou non s'épuiser. L'hébergement cloud, quant à lui, est capable de maintenir vos ressources disponibles sans s'épuiser car il peut toujours extraire des autres serveurs du cloud. En théorie, l'hébergement cloud offre des vitesses élevées plus cohérentes et plus fiables. Donc, si vous êtes sérieux au sujet de la vitesse, l'hébergement cloud est une excellente option (peut-être même la meilleure).

Dedicated Hosting

Avec l'hébergement dédié, vous disposez de votre propre serveur dédié rien que pour vous. Il n'est pas nécessaire de partager des ressources avec qui que ce soit. Cela signifie que vous aurez des temps de chargement rapides plus prévisibles et cohérents pour votre site Web. Ceci est généralement proposé comme une option de premier plan pour les grandes entreprises à un coût élevé (évidemment). Vous envisagerez de l'utiliser si vous pouvez vous permettre le coût dont il hérite.

Managed WordPress Hosting

L'hébergement WordPress géré fait généralement référence à l'hébergement partagé géré par des experts WordPress. Ici, ce n'est pas privé en tant que VPS ou aussi puissant qu'un serveur dédié. Mais cela aide à maximiser la vitesse de votre environnement partagé en faisant faire le travail par des experts WordPress. Ils le font bien car ils adaptent leurs services et configurent leurs serveurs strictement pour les sites WordPress. Et beaucoup d'entre eux sont dotés de nombreuses fonctionnalités intégrées pratiques et intéressantes telles que les environnements de préparation en un clic, la mise en cache du site, le déploiement CDN en un clic, les sauvegardes automatiques, les SSL, etc. Ils sont parfaits pour ceux qui ne souhaitent pas gérer eux-mêmes ces tâches manuellement.

Other Hosting Provider To Consider

Il existe de nombreuses sociétés d'hébergement WordPress. Et si cela est possible, vous voudrez éviter l'hébergement mutualisé traditionnel (non géré) si vous êtes sérieux au sujet de l'optimisation de la vitesse. Mais si vous avez un site simple et que vous n'êtes pas prêt à payer l'argent supplémentaire pour la gestion, Siteground semble être l'un des meilleurs pour l'hébergement mutualisé.

Pour l'instant, voici une liste rapide d'hôtes à considérer pour un site Web Divi plus rapide.

  • Kins - se spécialise dans l'hébergement WP géré
  • SiteGround - propose un hébergement partagé.
  • Cloudways - se spécialise dans l'hébergement cloud géré basé sur SSD
  • WPEngine - spécialisé dans l'hébergement WP géré
  • Volant - se spécialise dans l'hébergement WP géré

Ce ne sont pas tous les fournisseurs possibles disponibles, mais avec ceux-ci, vous aurez un site Web WordPress rapide.

Comment optimiser le temps de premier octet

Le Time to First Byte (TTFB) est le temps nécessaire à l'utilisateur pour recevoir le premier octet de données de site Web de votre serveur. Cela signifie que lorsqu'un utilisateur tente d'accéder à votre site Web, le TTFB sera essentiellement cette période d'attente avant que des données ne soient reçues par le navigateur.

Le TTFB est généralement d'environ 200 ms. Mais pour les sites dont l'hébergement est médiocre et qui n'ont pas été optimisés, le TTFB peut facilement durer 2 secondes ou plus.

Le retard TTFB sur votre site Divi est généralement causé par les éléments suivants:

  • La quantité de contenu dynamique qui doit être reçu. Cela peut être réduit avec la mise en cache, l'optimisation de la base de données et un CDN.
  • La quantité de trafic que votre serveur connaît à ce moment-là. Les fournisseurs d'hébergement mutualisé ne peuvent pas avoir un TTFB faible car vous partagez des ressources avec d'autres sur le même serveur. Les pics de trafic réduiront la vitesse de traitement de votre serveur.
  • La configuration de votre serveur Web. Un bon fournisseur d'hébergement WordPress peut vous aider avec le TTFB de votre site en fournissant une infrastructure backend solide et en optimisant la configuration de votre serveur Web (les choses sont quasiment hors de votre contrôle).

En bref, si vous voulez un coup de pouce rapide dans TTFB, obtenez un meilleur hébergement et suivez le reste des étapes ci-dessous.

Comment mettre en cache votre site Web WordPress

Il existe quatre principaux types de mise en cache qui peuvent être mis en œuvre pour accélérer votre site WordPress.

  • Mise en cache de page - Ce processus stocke les versions HTML statiques mises en cache de votre page pour une livraison rapide.
  • Mise en cache du navigateur - Cela vous donne plus de contrôle sur le contenu qui peut être mis en cache par le navigateur et pendant combien de temps. Seuls certains plugins peuvent le faire, vous devriez donc envisager de le faire manuellement pour plus de contrôle. Cela aidera à prendre en charge les métriques «Leverage Browser Caching» lors des tests de vitesse.
  • CDN Caching - Sert les pages / fichiers de site Web mis en cache à partir d'un CDN le plus proche de vos utilisateurs.
  • Mise en cache d'objets - La mise en cache d'objets met en cache les résultats de requêtes répétées que PHP lance pour récupérer les données de la base de données et les servir à l'utilisateur. Ceci est différent de la mise en cache de bytecode qui stocke une version en cache du code PHP compilé utilisé pour afficher votre site Web.

Divi effectue la mise en cache pour servir les fichiers JS et CSS statiques de Divi en arrière-plan. Mais c'est principalement pour les fichiers de thème Divi pour une meilleure fonctionnalité Divi Builder.

Vous devez toujours utiliser la mise en cache pour optimiser l'ensemble de votre site Web WordPress. La plupart des sites ont plusieurs plugins qui sont livrés avec leurs propres fichiers CSS qui peuvent devoir être combinés, réduits et mis en cache. Vous pouvez donc profiter d'un plugin tiers pour servir des versions HTML statiques mises en cache de toutes vos pages.

Les plugins de mise en cache populaires incluent:

  • WP Super Cache
  • Cache total W3
  • WP Rocket
  • Activateur de cache 
  • Cache de comète
  • Cache WP le plus rapide

Comment effectuer une minification

La minification réduit la taille des fichiers de votre site. La réduction des fichiers de votre site (CSS, JavaScript, HTML) supprime toutes ces choses inutiles (comme les espaces et les sauts de page) afin que la taille du fichier diminue. Cela réduira le temps nécessaire au navigateur pour télécharger cet actif.

L'agrégation signifie combiner les fichiers du site pour réduire le nombre total de requêtes sur la page et accélérer les temps de chargement de vos visiteurs. Mais, cela signifie également servir des fichiers plus volumineux à vos utilisateurs, vous devez vous assurer de servir un fichier de 1 Mo de CSS par exemple, et envisager de le fractionner en petits morceaux.

Comme mentionné précédemment, Divi minimise et combine les fichiers Javascript et CSS qui sont utilisés par défaut par le thème Divi. Donc, techniquement, vous n'avez pas à vous soucier d'utiliser un plugin tiers pour réduire et combiner davantage les fichiers Javascript et CSS de Divi. Cependant, Divi ne minimise pas la sortie HTML. Vous pouvez donc bénéficier d'un plugin tiers pour minifier (et mettre en cache) l'intégralité du HTML d'une page.

De plus, presque tous les sites Divi dépendront de fichiers en dehors du thème Divi (comme des plugins ou d'autres fichiers ajoutés par le thème enfant) qui bénéficieront de la réduction et de la combinaison des fichiers CSS et JS. Cela peut facilement être géré par un plugin.

Certains plugins appropriés qui réduiront les fichiers de votre site comprennent:

  • Cache total W3
  • C'était auto-amélioré
  • WP Super Cache
  • WP Rocket (premium)

Un de ces plugins devrait fonctionner avec Divi. Mais il n'y a aucun moyen d'évaluer toutes les nuances d'un site Web pour dire celui qui fonctionnera le mieux pour tout le monde. Parfois, des plugins tiers réduisent automatiquement les fichiers JavaScript d'une manière qui peut causer des erreurs / problèmes, vous devez alors vous assurer d'effectuer un test approfondi sur tout votre site Web pour vous assurer que rien n'est cassé. S'il est prudent de réduire le CSS, ce n'est pas toujours le cas pour JavaScript.

Parfois, vous serez confronté à des conflits entre vos solutions de minimisation. Vous devez alors vous assurer de ne laisser qu'un seul gérer cela. De plus, l'installation de plus de plugins pour la minification apportera plutôt plus de problèmes que de solutions, utilisez simplement une solution à la fois.

Comment activer la compression Gzip

La compression Gzip est parfois plus efficace que la minification car elle peut réduire la taille de la page jusqu'à 70%.

Activer la compression Gzip sur votre site Divi peut vous donner un gros coup de pouce en vitesse. Si vous êtes familiarisé avec la création de fichiers compressés (ou zippés) sur votre ordinateur, vous avez déjà une compréhension de base du fonctionnement de la compression Gzip. L'idée est que lorsqu'un ensemble de fichiers est compressé en un seul fichier, il peut être téléchargé et téléchargé plus facilement! La compression Gzip fait la même chose pour votre site Web. Il indique au serveur de compresser tous les fichiers qu'il peut en versions plus petites afin de pouvoir les servir au client beaucoup plus rapidement. Cela peut vraiment augmenter la vitesse de chargement des pages.

C'est l'un de ces domaines où vous pouvez améliorer la vitesse de Divi même sur une nouvelle installation du thème. Étant donné que Divi réduit déjà les fichiers de thème de base de toute façon, la compression Gzip rendra ces fichiers encore plus petits. La compression Gzip rendra vos fichiers beaucoup plus petits que la minification ne le pourrait jamais.

Voici quelques plugins prenant en charge la compression Gzip:

  • WP Rocket
  • Cache total W3
  • Cache WP le plus rapide

Et certains fournisseurs d'hébergement activeront automatiquement la compression gzip, car c'est une évidence pour les performances du site. N'hésitez pas au Vérifier si la compression Gzip est activée sur votre site.

Quel CDN pouvez-vous utiliser

Un réseau de diffusion de contenu (CDN) élève la vitesse du site à un autre niveau. Comme son nom l'indique, un CDN est un réseau qui vise à fournir du contenu plus rapidement aux utilisateurs. Le réseau se compose de serveurs du monde entier qui stockent les fichiers statiques mis en cache (images, vidéos, css, js, etc.) de votre site Web. Ensuite, lorsqu'une personne accède à votre site Web, le serveur (ou PoP) le plus proche de la personne fournira le contenu, au lieu d'atteindre votre serveur si celui-ci est éloigné de l'utilisateur. Sans CDN, les fichiers de votre site Web sont accessibles à partir d'un emplacement de serveur (où que votre hôte stocke ces fichiers), de sorte que plus vous êtes éloigné de ce serveur, plus il sera lent à fournir ce contenu de site Web à votre navigateur.

Étant donné que vous souhaitez que le site Web apparaisse dans votre navigateur dès que possible, un CDN disposera des fichiers de votre site prêts à être livrés à partir du serveur le plus proche de votre emplacement. Donc, si les fichiers de votre site sont stockés sur un serveur à San Francisco et que quelqu'un à Londres récupère votre site, cela peut prendre 1 ou 2 secondes pour recevoir ces données d'un serveur à des milliers de kilomètres. Mais avec un CDN, vous pouvez fournir les mêmes données à partir d'un serveur à Londres en deux fois moins de temps. C’est une grande différence!

Ainsi, même si vous ne voyez pas toute l'étendue des résultats chez vous, vous accélérez la diffusion de votre site Web partout dans le monde.

Il existe de nombreuses façons d'obtenir un CDN pour votre site. De nombreuses sociétés d'hébergement incluront une option pour déployer un CDN avec leur service. Et il existe des plates-formes réseau telles que Cloudflare et MaxCDN qui offrent des capacités CDN ainsi que d'autres fonctionnalités de performance et de sécurité.

Voici quelques plates-formes CDN crédibles à considérer:

  • CléCDN
  • Cloudflare
  • MaxCDN
  • Amazon Cloudfront
  • Les jus

Certains des plugins utilisés pour la mise en cache incluent déjà une option pour intégrer automatiquement plusieurs fournisseurs de CDN, ce qui est assez pratique.

Voici quelques plugins prenant en charge CDN:

  • Cache WP le plus rapide
  • WP Rocket
  • C'était auto-amélioré
  • Cache total W3
  • WP Super Cache
  • Activateur CDN

Comment optimiser les images

L'optimisation de l'image est l'un des principaux responsables de la lenteur des pages de chargement. La raison en est que beaucoup de gens ignorent probablement à quel point les grandes images sont nocives pour la vitesse d'un site Web. Après tout, combien de dégâts une image d'arrière-plan peut-elle causer à une page Web? Eh bien, vous pourriez être surpris. Seules quelques grandes images qui n'ont pas été optimisées pour le Web pourraient avoir des ramifications catastrophiques sur la vitesse de chargement des pages.

Chaque site Web devrait le faire. La compression d'image seule peut rendre votre site sensiblement plus rapide et les plus petites tailles d'image permettront d'économiser de l'espace de stockage et de la bande passante. Mais il y a d'autres optimisations d'image importantes auxquelles vous devriez également penser.

En bref, voici ce que vous devez prendre en compte pour optimiser vos images:

Use the Right File Type

Lorsque vous envisagez d'utiliser des images pour le Web, vous devez vraiment vous en tenir aux types de fichiers image suivants:

  • JPG - Ce format doit être utilisé pour les images colorées. Habituellement, c'est un match parfait pour la photographie. Si alors offrir une meilleure compression que PNG, sauf si vous souhaitez utiliser des images avec un fond transparent.
  • PNG - Utilisez des PNG pour les images nécessitant un arrière-plan transparent. Ce format peut également être utilisé pour les images qui ont moins de couleurs possibles. C'est alors un bon format pour les images d'infographie et les logos.
  • SVG - Il s'agit d'un format vectoriel qui fournit des détails extrêmement nets à l'aide de code HTML. Les SVG sont parfaits pour les logos, icônes et autres animations vectorielles.

Resize and Crop Your Images

Votre image doit être assez grande. Si votre site Web a une largeur de corps de 800 px maximum, il n'est pas nécessaire d'avoir des images de 1 200 px. Le résultat peut sembler similaire sur le front-end, mais cette grande taille tue le temps de chargement de votre page.

Lorsque vous téléchargez des images sur votre page à l’aide de Divi, il est utile de connaître la taille de ces images dans la structure de colonnes de Divi.

Compress Your Images

Vous voudrez réduire la taille de votre fichier image au point où vous remarquerez une baisse de qualité. Cela se fait par compression d'image. Les éditeurs de photos, plugins et sites populaires comme tinypng.com compressent les images à l'aide de la compression sans perte (qui réduit le fichier image sans perdre de qualité d'image) et de la compression intelligente avec perte (qui réduit la taille du fichier image en réduisant les métadonnées et la qualité de l'image dans un manière qui n'est pas vraiment perceptible par l'utilisateur).

Optimize Your Images For Internet

L'optimisation de l'image pour Internet peut être effectuée via des éditeurs de photos comme Photoshop, qui comprend une option «Enregistrer pour le Web». De plus, vous pouvez utiliser un site tiers gratuit comme TinyPNG.com ou Compressor.io pour compresser l'image avant de la télécharger sur votre site.

Evidemment, WordPress propose à travers ses plugins un moyen d'optimiser vos images. Certains plugins (comme Imagify) compresseront les images déjà utilisées sur votre site et compresseront automatiquement les images lorsque vous les téléchargez dans votre bibliothèque multimédia WordPress.

Voici quelques excellents outils et plugins d'optimisation d'image que vous pouvez utiliser:

Sites Internet:

  • Compressor.io
  • Tinypng.com

Plugins:

  • Compression et optimisation d'image Smush
  • Imaginer
  • Fusée WP

Divi’s Built-in SRCSET support

Le support Images réactives avec SRCSET natif est également intégré à Divi. Avec cette fonctionnalité, votre image sera utilisée en fonction de la taille de l'appareil (qu'il s'agisse d'un téléphone, d'une tablette ou d'un bureau).

Comment optimiser vos vidéos

L'optimisation vidéo est un peu plus difficile que l'optimisation d'image, mais certainement pas moins importante. La vidéo peut être volumineuse et avoir un impact significatif sur la vitesse de la page. Si vous hébergez beaucoup de vidéos sur votre serveur, vous découvrirez peut-être assez tôt que vous avez un autre problème d'espace disque avec une augmentation de l'utilisation de la bande passante. C'est pourquoi il est souvent recommandé d'utiliser des services tiers (comme Youtube ou Vimeo) pour héberger vos vidéos à votre place. Vous pouvez également envisager de décharger votre contenu multimédia vidéo sur une plate-forme de stockage telle que Amazon S3. Cela vous permettra de créer un lien vers ces vidéos depuis le module vidéo de Divi sans qu’elles aient à ralentir votre serveur.

Vous pouvez facilement réduire les fichiers vidéo en utilisant un outil gratuit comme Frein à main, qui est facile à utiliser.

Comment effectuer des tests de vitesse sur Divi

Vous avez peut-être fait un test sur la vitesse de votre site Web, dont les résultats pourraient vous avoir conduit à cet article. C'est en fait une étape importante au début de votre optimisation, pour savoir quel est le score actuel et à la fin de l'optimisation, pour comparer quelles sont les différences avec le nouveau score. Effectuer un test de vitesse est l'une des choses les plus simples que vous puissiez faire. Il existe des tonnes de sites Web qui le feront pour vous gratuitement. Et les mesures qu'ils fournissent seront inestimables pour identifier les moyens d'optimiser davantage votre site pour de meilleures performances.

Voici quelques bons points de départ:

  • GTMetrix
  • Pingdom
  • Google Page Insights

Les résultats fournissent une ventilation utile des performances de votre page Web dans divers domaines. Ensuite, vous pouvez utiliser leurs recommandations comme liste de contrôle pour optimiser votre site.

Lorsque vous implémentez les optimisations de vitesse sur votre site, vous devriez voir des améliorations dans les domaines suivants:

  • Temps de chargement complet / temps de chargement
  • Taille totale de la page (des choses comme la minification, l'optimisation de l'image avec l'aide de cela)
  • Demandes
  • Scores PageSpeed ​​/ YSlow
  • Servir des images à l'échelle
  • Optimiser les images
  • Tirez parti de la mise en cache du navigateur
  • Minifier CSS / HTML
  • Activer la compression gzip
  • Faites moins de requêtes HTTP
  • Ajouter des en-têtes Expires

You Aim Decent Speed Not Impossible Speed

Il peut être facile de s'embourber en testant votre site Web et en l'optimisant à la perfection. Mais aucun site Web ne peut être parfait. Vous pouvez même constater que l'amélioration de certaines performances des tests de vitesse peut en fait ralentir le temps de chargement de votre page. C'est parce que même ces tests de vitesse ne sont pas parfaits non plus.

Comment éviter un conflit possible entre Divi et d'autres plugins d'optimisation

Chaque fois que vous déployez un plugin tiers pour la minification et la mise en cache, vous pouvez rencontrer certains conflits. Par exemple, vous pouvez constater qu’un module Divi ne s’affiche pas correctement ou que certains fichiers JavaScript ne s’affichent pas correctement.

Pour éviter ces types de conflits, vous pouvez désactiver la fonction d’optimisation intégrée de Divi et laisser le plugin tiers le gérer pour vous. Les trois options que vous voudrez désactiver sont:

  • Génération de fichiers CSS statiques
  • Réduire et combiner des fichiers Javascript
  • Réduire et combiner des fichiers CSS

Vous pouvez désactiver les options pour réduire et combiner les fichiers Javascript et CSS en allant dans Options du thème> onglet Général.

Vous pouvez désactiver l'option de génération de fichier CSS statique sous Options du thème> Générateur> Avancé.

Autres trucs et astuces

Nous avons à peu près couvert tous les principaux facteurs qui contribuent à accélérer les sites Web Divi / WordPress. Il y a cependant des choses importantes que vous pouvez encore faire.

  • Hébergement à jour avec la version PHP récente
  • Changer votre URL de connexion WordPress pour empêcher ces bots de surcharger votre serveur
  • Éviter les appels inutiles aux services externes. Certains plugins et intégrations nécessitent que vous utilisiez des fichiers hébergés sur leurs serveurs. Ces appels supplémentaires ralentiront le chargement de la page.
  • Incorporez le chargement différé pour les images et les vidéos pour une meilleure vitesse de chargement de la page.

Dernières pensées

Avec l'optimisation récente sur Deux, c'est plus rapide qu'avant. Avec les mises à niveau de performances intégrées, vos installations Divi standard ont des chargements de page plus rapides sur le front-end, un administrateur WordPress plus rapide sur le backend et un Divi Builder plus rapide pour éditer et concevoir votre site. C'est un bon début, mais il y a encore beaucoup à faire pour que votre site Divi fonctionne le plus vite possible.

Les optimisations de vitesse et de performances incluses dans ce guide augmenteront certainement la vitesse de votre site. Pour la plupart, ces optimisations s'appliqueraient à n'importe quel site / thème WordPress, pas seulement à Divi. Et il est surprenant de voir combien de choses simples que vous pouvez faire sont gratuites!