Optimisation de la vitesse Divi : le guide ultime

Divi n'est pas n'importe quel constructeur de pages. Divi porte le processus de conception à un tout autre niveau avec un système de conception Web complet qui vous permet de concevoir visuellement chaque partie de votre site Web. Mais cela ne signifie pas que Divi doit être lent. Loin de là.

Les fonctionnalités intégrées d'optimisation de la vitesse et des performances de Divi peuvent facilement placer votre site en tête de liste des scores Google PageSpeed. Avec des fonctionnalités telles que Dynamic Module Framework, Dynamic CSS, Dynamic JavaScript Libraries, etc., Divi est désormais à la fois un constructeur de pages robuste et un thème léger. Mais aussi rapide que soit Divi, il existe d'autres facteurs sous-jacents qui nécessitent une optimisation. Et s'il n'est pas abordé, la vitesse de votre site Divi en souffrira inutilement.

Dans cet article, nous allons explorer ce qui a déjà été fait pour accélérer Divi et ce que nous pouvons faire pour le rendre encore plus rapide. Voici quelques sujets clés que nous aborderons :

• Performances WordPress vs performances Divi
• Fonctionnalités intégrées d'optimisation de la vitesse et des performances de Divi
• Cadre de module dynamique
• Bibliothèques JavaScript dynamiques
• Différer jQuery et jQuery Migrate
• CSS dynamique
• CSS critique
• Hauteur du seuil critique
• Charger la feuille de style dynamique en ligne
• Améliorer le chargement des polices Google
• Désactiver les émoticônes WordPress
• Différer Gutenberg Bloc CSS
• Icônes dynamiques
• Prise en charge native de Srcset pour les images réactives
• 14 choses que vous pouvez faire pour optimiser la vitesse et les performances de votre site Web Divi
• #1 Améliorez votre hébergement
• #2 Optimisation TTFB
• #3 Optimisez la base de données de votre site
• #4 Optimisez votre DNS
• #5 Utilisez un réseau de diffusion de contenu (CDN)
• #6 Ajouter la mise en cache
• #7 Ajouter la minification et l'agrégation
• #8 Activer la compression Gzip
• #9 Optimisation des images
• #10 Optimisation vidéo
• #11 Construisez votre page Divi pour la vitesse
• #12 Utilisez les plugins avec précaution et parcimonie
• #13 Effectuer des tests de vitesse
• #14 Considérez notre plan de page haute vitesse Divi
• Utilisation de Divi et d'autres plugins de performance tiers
• Autres conseils

Performances WordPress vs performances Divi

Divi n'est souvent pas le principal facteur déterminant de la performance de votre site web. C'est juste une pièce du puzzle. Vous devez également prendre en compte les besoins d'optimisation sous-jacents d'un site WordPress en général. Divi (le thème Divi et/ou le Divi Builder) repose sur WordPress (le CMS), qui repose sur une pile de logiciels serveur, qui repose sur une infrastructure d'hébergement. Toutes ces choses doivent être réglées correctement. Pour commencer, ceux-ci incluent des éléments tels qu'un bon hébergement, une mise en cache et un CDN. Sans ces optimisations sous-jacentes en place, un site Divi sera plus lent, quelle que soit la qualité de l'optimisation de Divi. Donc, si votre site Web Divi est très lent, vous devez également prendre en compte ces autres pièces du puzzle.

Avec les besoins d'optimisation sous-jacents d'un site WordPress en place, nous devons aborder l'optimisation des performances de Divi. Cela se fait en améliorant les performances du thème Divi et/ou du Divi Builder, en veillant à ce qu'il fonctionne de manière optimale dans les domaines où il s'appuie sur WordPress et dans les domaines où il fonctionne au sein de WordPress. Une fois toutes ces pièces optimisées, nous pouvons réussir à créer un site Web Divi avec une vitesse et des performances optimales.

Dans la suite de l'article ci-dessous, nous aborderons dans un premier temps l'optimisation des performances intégrée de Divi (le truc déjà fait pour vous). Ensuite, nous verrons comment optimiser davantage votre site Divi en répondant à certains besoins d'optimisation sous-jacents (choses supplémentaires que vous pouvez faire).

Fonctionnalités intégrées d'optimisation de la vitesse et des performances de Divi

Tout d'abord, jetons un coup d'œil à certaines des optimisations de vitesse et de performances intégrées que Divi a déjà. Ces fonctionnalités d'optimisation accélèrent Divi sous tous les angles, ce qui en fait peut-être le constructeur de pages le plus rapide du marché. Mais ce n'est pas tout. Divi est construit avec un cadre dynamique qui élimine les ballonnements et fournit une base sur laquelle Divi peut se développer avec plus de modules et plus de fonctionnalités sans jamais ajouter de ballonnements à votre site Web. Cela vous donne le meilleur des deux mondes : la puissance d'un constructeur de pages expansif avec l'agilité d'un thème léger.

Les fonctionnalités d'optimisation des performances peuvent être gérées en accédant à Divi > Options du thème. Sous l'onglet Général, sélectionnez le sous-onglet Performances.

Examinons maintenant de plus près les fonctionnalités qui facilitent la création d'un site Web Divi ultra-rapide.

Cadre de module dynamique

La fonctionnalité Dynamic Module Framework augmente la vitesse du site de manière puissante en sélectionnant et en exécutant des fonctions PHP à la demande. Divi traite la logique nécessaire pour rendre uniquement les modules et les fonctionnalités utilisés sur chaque page à la volée – tout le reste est coupé de l'équation. En d'autres termes, tout ce qui pourrait être considéré comme du « ballonnement » est effacé du back-end.

Modules à la demande

Par exemple, si vous avez 3 modules sur une page, Divi ne traitera que les fonctions nécessaires pour ces 3 modules au lieu de traiter toutes les fonctions pour tous les modules quel que soit celui qui est utilisé. Ces 3 fonctions rendront le shortcode/HTML de ce module sur la page sans perte de temps de traitement.

Fonctionnalités à la demande

Tout comme Divi traite et charge dynamiquement les modules à la demande, Divi fait de même pour toutes les fonctionnalités utilisées sur une page. Au lieu de traiter les fonctions pour toutes les fonctionnalités possibles qui pourraient être utilisées sur Divi Element (effets de défilement, animations, option collante, options de bordure, etc.), Divi ne traite que les fonctions de fonctionnalité qui sont réellement utilisées sur un élément. Cette fonctionnalité ne s'applique pas uniquement aux modules, mais à tout élément Divi, y compris la section, les lignes et les colonnes.

Bibliothèques Javascript dynamiques

Pour augmenter la vitesse du site, nous avons optimisé le JavaScript de Divi pour qu'il soit plus concis et modularisé. Cela permet à Divi de charger JavaScript à la demande de manière dynamique. Divi chargera et traitera les fonctions JavaScript (comme Sticky Options) ainsi que les bibliothèques JavaScript externes (comme Magnific Popup) uniquement lorsqu'elles sont nécessaires aux modules ou aux fonctionnalités d'une page.

La taille plus petite du fichier Javascript de base combinée aux bibliothèques JavaScript dynamiques augmentera certainement la vitesse du site simplement parce qu'il y a moins de code à traiter pour chaque chargement de page. Les scripts inutilisés sont supprimés. Et, parce que cette logique anti-ballonnement se produit sur une base par page, si vous avez une ligne collante sur une page, vous n'aurez pas à vous soucier du chargement de ce Sticky JavaScript sur une page qui ne l'a pas. C'est la beauté du JavaScript dynamique de Divi.

Exemple : Bibliothèque JavaScript dynamique pour un module d'image utilisant Lightbox

Disons que vous avez une page avec un module d'image avec lightbox activé. Divi pointera et exécutera dynamiquement la bibliothèque Magnific Popup JS pour cette page afin d'appliquer cette fonctionnalité de popup lightbox. Si lightbox est désactivé sur l'image, la bibliothèque JS n'est pas chargée ou exécutée sur la page.

Différer jQuery et jQuery Migrate

Lorsque cela est possible, jQuery et jQuery Migrate seront déplacés vers le corps pour supprimer une demande de blocage de rendu et accélérer les temps de chargement. Comme le montre l'illustration ci-dessous, si le script jQuery est chargé tôt (dans l'en-tête), il suspendra l'analyse du code HTML jusqu'à ce que le script soit exécuté. Cela ralentira le rendu de votre page

Seulement d'un autre côté, si un plugin tiers enregistre jQuery en tant que dépendance, il sera remis à la tête pour éviter les conflits. Cette option peut être désactivée si elle pose des problèmes.

CSS dynamique

Dynamic CSS applique la même logique anti-ballonnement (utilisée dans le framework de module dynamique) à la feuille de style de Divi. Comme vous pouvez l'imaginer, la feuille de style principale de Divi serait assez grande compte tenu de toutes les fonctionnalités dont elle dispose. Mais le chargement d'une grande feuille de style sur chaque page entraîne un gonflement inutile et des temps de chargement de page plus lents.

Avec le CSS dynamique, le CSS de Divi est décomposé en centaines de petits composants. Sur chaque page, ces composants CSS sont combinés pour former une feuille de style unique qui contient uniquement les éléments nécessaires pour styliser cette page particulière en fonction des modules, des fonctionnalités de module et des options de mise en page de thème que vous utilisez.

Cela résout le problème de gonflement CSS car il n'existe plus. Il n'y a pas de ballonnement car aucun autre CSS n'est chargé. Sans Dynamic CSS, la feuille de style de Divi serait d'environ 900ko et elle serait chargée sur toutes les pages quel que soit le contenu. Désormais, si vous n'avez besoin que de 80 Ko de CSS pour la page, Dynamic CSS élimine les 800 + Ko dont vous n'avez pas besoin pour charger la page. Cela signifie que votre page se charge encore plus rapidement.

CSS critique

Le système Critical CSS de Divi augmente la vitesse du site en identifiant le CSS nécessaire pour styliser le contenu au-dessus du pli et en différant tout le reste. Étant donné que seuls les styles critiques sont nécessaires lors du premier chargement de la page et que les actifs bloquant le rendu jouent un rôle si important dans la vitesse de la page, la capacité de Divi à séparer automatiquement les styles critiques et non critiques lui confère un énorme avantage par rapport aux autres thèmes et constructeurs WordPress. . Une fois que Divi a fini de traiter son CSS, il ne reste presque plus rien dans l'en-tête du site Web, ce qui signifie que le contenu s'affiche immédiatement, et c'est pourquoi Google attribue aux sites Web Divi des scores aussi élevés dès le départ.

Par exemple, si votre contenu au-dessus de la ligne de flottaison se compose d'un titre, d'un paragraphe, d'un bouton et d'une image, seul le CSS correspondant à ces éléments sera chargé dès que vos visiteurs chargeront la page. Le reste du CSS sera chargé aussi, bien sûr, mais pas à la première interaction. C'est ce qu'on appelle le CSS non critique.

Pour une explication plus complète du fonctionnement de cette fonctionnalité et de son utilisation, consultez nos articles sur Comment la fonctionnalité CSS critique de Divi augmente la vitesse du site et comment créer la page Divi la plus rapide.

Hauteur du seuil critique

L'option Hauteur de seuil critique est liée à Critical CSS.

Lorsque Critical CSS est activé, Divi détermine un "seuil au-dessus du pli" et diffère tous les styles pour les éléments en dessous du pli. Cependant, ce seuil n'est qu'une estimation et peut varier selon les appareils. L'augmentation de la hauteur du seuil différera moins de styles, ce qui entraînera des temps de chargement légèrement plus lents mais moins de chances que des décalages de mise en page cumulatifs (CLS) se produisent. Si vous rencontrez des problèmes CLS, vous pouvez augmenter la hauteur du seuil.

Charger la feuille de style dynamique en ligne

L'option Charger la feuille de style dynamique en ligne est l'optimisation CSS finale qui supprime toutes les demandes CSS bloquant le rendu.

Grâce à Dynamic CSS, la feuille de style Divi de base est désormais suffisamment petite pour pouvoir être chargée en ligne sur la page réelle ! Le chargement de ce CSS en ligne supprime une demande de blocage de rendu et améliore les scores Google PageSpeed. Lorsque les options Critical CSS, Dynamic CSS et Load Dynamic In-Line Stylesheet sont activées, toutes les demandes CSS bloquant le rendu sont supprimées .

Améliorer le chargement des polices Google

L'option Améliorer le chargement des polices Google permet la mise en cache des polices Google et les charge en ligne dans l'en-tête. Cela réduit les demandes de blocage de rendu et accélère les temps de chargement.

Nous avons également ajouté l'option Limiter la prise en charge des polices Google pour les navigateurs hérités.

Cela supprime essentiellement les fichiers de polices hérités pour réduire la charge utile. L'activation de cette option réduira la taille des polices Google et améliorera les temps de chargement, cependant, cela limitera la prise en charge des polices Google dans certains très anciens navigateurs. Vous pouvez désactiver cette option pour augmenter la prise en charge des navigateurs plus anciens tout en réduisant légèrement les performances.

Désactiver les émoticônes WordPress

WordPress est livré avec un système d'emoji natif, mais ce n'est vraiment plus nécessaire en raison de la prise en charge native des emoji dans les navigateurs modernes. En fait, les emojis natifs sont bien meilleurs que la version WordPress. Divi vous donne la possibilité de désactiver les emojis WordPress natifs, ce qui supprime les ressources inutiles. Et avoir moins de ressources pour afficher les résultats dans des chargements de page plus rapides.

Différer Gutenberg Bloc CSS

Lorsque vous utilisez le Divi Builder sur une page, vous choisissez également de ne pas utiliser l'éditeur de blocs WordPress par défaut (Gutenberg). Et puisque vous n'allez pas utiliser de blocs pour styliser votre page, vous n'avez pas besoin que le rendu CSS Gutenberg bloque le chargement de votre page Divi. Avec l'option Defer Gutenberg Block CSS activée, Divi chargera désormais (par défaut) paresseux le CSS du bloc Gutenberg sur les pages où vous utilisez le Divi Builder à la place. Il se chargera toujours au cas où (dans le pied de page), mais il ne bloquera plus le rendu.

Icônes dynamiques

Divi est désormais livré avec des sous-ensembles de polices d'icônes qui sont chargés à la demande en fonction des modules et des fonctionnalités que vous utilisez. Cela réduit la taille de la police de base de l'icône de Divi de 90 Ko à 6 Ko. L'ensemble d'icônes complet n'est chargé qu'en cas de besoin. Cette option est désactivée par défaut si vous utilisez un thème enfant ou un module Divi personnalisé. Si votre thème enfant ou module Divi tiers utilise le jeu d'icônes Divi complet, cette option doit rester désactivée.

Il existe trois sous-ensembles de polices d'icônes qui sont utilisés en fonction des besoins d'une page.

• Base – ce sous-ensemble comprend toutes les icônes utilisées par défaut dans le thème Divi et ses modules.
• Social - ce sous-ensemble comprend toutes les icônes de base ainsi que toutes les icônes sociales, qui se chargent lorsqu'un module de suivi des médias sociaux est utilisé.
• Tout – il s'agit de l'ensemble d'icônes qui est utilisé lorsque vous utilisez le sélecteur d'icônes dans un module Divi pour sélectionner une icône personnalisée.

Voici un exemple du sous-ensemble de polices d'icônes sociales chargé dynamiquement en raison d'un module de suivi des médias sociaux existant sur la page.

Si vous avez besoin d'accéder à l'intégralité de la police d'icônes sur toutes les pages (par exemple, si vous utilisez notre police d'icônes dans votre thème enfant), vous pouvez désactiver cette option et charger l'intégralité de la bibliothèque de polices d'icônes sur toutes les pages.

Prise en charge native de Srcset pour les images réactives

Divi inclut la prise en charge native de SRCSET pour toutes les images Divi, ce qui signifie que Divi rendra automatiquement vos images réactives et fournira l'image parfaitement dimensionnée à chaque appareil. Étant donné que les images plus petites sont transmises à des appareils plus petits, cela peut considérablement améliorer les vitesses de chargement et ne nécessite aucun travail supplémentaire de votre part.

14 choses que vous pouvez faire pour optimiser la vitesse et les performances de votre site Web Divi

L'optimisation de la vitesse continue de jouer un rôle crucial dans l'expérience utilisateur de votre site Web, ainsi que dans son optimisation pour les moteurs de recherche (SEO). Ainsi, afin que votre site Divi fonctionne bien pour les visiteurs et Google, vous souhaiterez aborder les domaines en dehors de Divi qui optimisent davantage votre site pour la vitesse.

Voici 14 choses que vous pouvez faire pour optimiser la vitesse et les performances de votre site Web Divi…

#1 Améliorez votre hébergement

Si vous êtes vraiment sérieux au sujet de la vitesse (et des performances) de votre site Web, cela commence par choisir un bon fournisseur d'hébergement. En fait, vous pouvez tout faire pour optimiser la vitesse de votre site Web tout en ayant un site lent à cause de votre hébergeur. Et les très bons hébergeurs feront beaucoup de ces optimisations de vitesse pour vous afin que vous n'ayez pas à vous en soucier. Donc, si vous avez un site Divi lent, votre première étape consiste à envisager de mettre à niveau votre hébergement.

Utiliser l'hébergement optimisé Divi

Si vous souhaitez un site Web Divi rapide, il est logique de choisir un hébergeur optimisé non seulement pour WordPress mais également pour Divi. Donc, si vous recherchez un excellent hébergement WordPress qui fonctionne parfaitement avec Divi et est livré avec une installation automatique de Divi, alors Divi Hosting est une excellente nouvelle solution pour vous. Nous nous sommes associés à certains de nos hébergeurs WordPress préférés (Pressable, Flywheel et SiteGround) pour offrir aux clients Divi un moyen simple de créer des sites Web Divi rapides, soutenus par une infrastructure d'hébergement moderne qui répond à toutes les exigences de Divi, et pris en charge par les principaux professionnels de WordPress. .

Pourquoi choisir l'hébergement Divi ?

En fin de compte, chaque utilisateur de Divi doit faire un choix concernant l'hébergement. Faire le mauvais choix peut conduire à beaucoup de chagrin. Nous voulons rendre ce choix facile. Voici quelques éléments qui rendent Divi Hosting unique :

• Lorsque vous créez votre site Web, Divi s'installe automatiquement.
• Votre nouveau site Web est automatiquement connecté à votre compte Elegant Themes et configuré avec votre clé de licence afin que vous puissiez obtenir des mises à jour et de l'assistance.
• Votre environnement d'hébergement sera configuré pour répondre à tous les paramètres PHP recommandés par Divi dès le départ. Aucun ajustement n'est nécessaire.
• Votre site Web sera alimenté par une infrastructure d'hébergement rapide et moderne, ce qui signifie des temps de chargement rapides et des outils modernes tels que la mise en cache automatique et les CDN.
• Vous serez hébergé par une entreprise qui connaît WordPress de fond en comble.
• Vous serez hébergé par l'un de nos partenaires, ce qui signifie qu'ils s'engagent à assurer une excellente expérience Divi sur leurs systèmes.

Il existe de nombreuses options d'hébergement, et elles ne sont pas toutes égales. Nous aidons chaque jour nos clients à faire face aux problèmes de compatibilité liés à l'hébergement qui peuvent être incroyablement frustrants. Tout le monde a besoin d'un hébergement pour utiliser Divi, et votre expérience d'hébergement n'a pas besoin d'être difficile. Pour en savoir plus, découvrez comment l'hébergement Divi est la meilleure solution d'hébergement pour Divi.

Trouver la bonne solution d'hébergement pour votre site Divi

Avez-vous besoin d'utiliser Divi Hosting pour avoir un site Web Divi rapide ? Absolument pas. Il existe d'autres excellentes solutions d'hébergement et Divi fonctionnera toujours très bien sur des environnements d'hébergement de qualité. Mais parce que l'hébergement joue un rôle crucial dans l'optimisation de la vitesse et des performances, vous devez prendre le temps nécessaire pour trouver la bonne solution d'hébergement pour votre site Divi.

Il existe de nombreuses sociétés d’hébergement géniales et moins géniales. Et chacun propose généralement plusieurs solutions et services d'hébergement. Ainsi, trouver le bon peut être écrasant. Vous trouverez ci-dessous quelques informations utiles sur les types d'hébergement les plus courants à prendre en compte pour trouver la bonne solution d'hébergement pour votre site Divi.

Hébergement traditionnel (partagé) (non recommandé)

C'est de loin le type d'hébergement le plus populaire pour les utilisateurs de WordPress, en grande partie parce qu'il est le plus abordable. Mais malheureusement, c'est la pire option pour l'optimisation de la vitesse. Avec l'hébergement mutualisé traditionnel, 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 faible. Mais l'inconvénient est que vous ne pouvez pas contrôler la quantité de trafic que ces autres sites reçoivent sur votre serveur partagé. 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 en panne. Il vaut donc mieux avoir une bonne idée du trafic que votre hébergement mutualisé peut gérer.

Hébergement dédié

Avec l'hébergement dédié, vous disposez de votre propre serveur dédié rien que pour vous. Pas besoin de partager des ressources avec quelqu'un d'autre. 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é.

Hébergement VPS

L'hébergement Virtual Private Server (VPS) est fondamentalement un juste milieu entre l'hébergement partagé et l'hébergement dédié. Votre espace serveur est « privé », ce qui signifie qu'il est complètement séparé de tout le monde (un peu comme une communauté fermée pour les fichiers de votre site). Ainsi, les fichiers de votre site ne sont pas exposés aux autres sur le serveur. Contrairement à l'hébergement partagé, un VPS dispose d'un nombre dédié de ressources système (ou de puissance) à votre disposition pour garantir que votre site obtient toujours ce dont il a besoin pour fournir des temps de chargement rapides de manière cohérente. Ainsi, 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 bricolage suffisamment avertis en technologie pour gérer les choses eux-mêmes. Pour plus d'informations, voici une comparaison des performances entre l'hébergement VPS et l'hébergement partagé.

Hébergement Cloud

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. Essentiellement, 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. Vous n'avez donc pas à vous soucier des pics de trafic comme vous le feriez avec un hébergement mutualisé. L'hébergement cloud est extrêmement flexible et évolutif selon 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'un nombre dédié (ou limité) de ressources à extraire qui peuvent ou non s'épuiser. L'hébergement cloud, d'autre part, est capable de garder vos ressources disponibles sans être épuisées car il peut toujours tirer 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).

Hébergement WordPress géré

L'hébergement WordPress géré fait généralement référence à l'hébergement partagé géré par des experts WordPress. Cela coûte généralement un peu plus cher que l'hébergement mutualisé traditionnel, mais si vous voulez un site Divi plus rapide, l'hébergement WordPress géré peut en valoir la peine. Ce n'est pas aussi « privé » qu'un VPS ou aussi puissant qu'un environnement d'hébergement 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 livrés avec de nombreuses fonctionnalités intégrées intéressantes et pratiques telles que les environnements de mise en scène en un clic, la mise en cache du site, le déploiement de CDN en un clic, les sauvegardes automatiques, les SSL, etc. Ils sont parfaits pour ceux d'entre nous qui ne veulent pas compter sur (ou gérer) un tas de plugins pour l'optimisation de la vitesse, la sécurité et la gestion de base.

En fait, Divi Hosting est un hébergement WordPress géré optimisé pour Divi. Cela élimine tous les maux de tête liés à l'optimisation de votre environnement d'hébergement pour votre site Divi.

#2 Optimiser le temps jusqu'au premier octet (TTFB)

Qu'est-ce que le TTFB ?

Le temps jusqu'au premier octet (TTFB) est le temps qu'il faut à l'utilisateur pour recevoir le premier octet des données du site Web de votre hôte/serveur. Ainsi, lorsqu'un utilisateur fait une requête HTTP (charge votre page Web), le TTFB sera essentiellement cette période d'attente avant que des données ne soient reçues par le navigateur. Ceci est important car plus le TTFB est long, plus le chargement de la page est long.

Pensez-y comme à un fast-food. Le restaurant peut être optimisé pour livrer votre nourriture rapidement. En fait, ils ont peut-être déjà un hamburger qui vous attend. Mais il faut quand même faire la queue pour commander. Cette période d'attente est ce que vous pouvez considérer comme le moment de la première bouchée (voir ce que j'ai fait là-bas).

Le TTFB devrait être d'environ 200 ms (selon Google). Mais pour les sites qui sont sur un hébergement médiocre et qui n'ont pas été optimisés, le TTFB peut facilement durer 2 secondes ou plus.

Quelles sont les causes d'un TTFB lent ?

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çue. 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 traditionnels (ou partagés) rendent difficile la suppression de ce TTFB 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.
• Votre configuration de serveur Web . Un bon fournisseur d'hébergement WordPress peut vous aider avec le TTFB de votre site en fournissant une infrastructure back-end solide et en optimisant la configuration de votre serveur Web (des choses hors de votre contrôle).

Comment accélérer le TTFB de votre site Divi

TTFB est l'un des Web Vitals (avec FCP, LCP et CLS) que Google utilise pour déterminer le classement de votre site. Il est donc important de l'optimiser. La bonne nouvelle est que TTFB peut être optimisé. Voici quelques conseils clés que vous pouvez utiliser pour réduire le TTFB.

• Mettez à niveau votre hébergement . Le moyen le plus efficace de booster votre TTFB est de simplement mettre à niveau votre hébergement. Payer un peu plus pour un hébergement géré pour WordPress ou Divi Hosting aura le plus grand impact sur TTFB dès le départ.
• Utilisez un CDN . Cela permettra aux visiteurs de charger les données de votre site à partir d'un serveur le plus proche d'eux afin que vous puissiez réduire la latence et réduire le TTFB.
• Supprimez les plugins ou thèmes inutiles . Les plugins et les thèmes (surtout ceux obsolètes) peuvent ralentir le serveur de votre site et les temps de chargement (y compris TTFB). Il est donc préférable de n'utiliser que des plugins (ou thèmes) de qualité essentielle et de supprimer les autres.
• Implémenter la mise en cache . Divi a une mise en cache intégrée pour fournir Divi JS et CSS. Mais la mise en cache de votre site Web dans son ensemble, en plus d'utiliser un CDN, réduira le TTFB.

Utilisez Cloudflare pour booster le TTFB

Une façon d'obtenir un coup de pouce rapide sur le TTFB de votre site est d'utiliser Cloudflare. La mise en cache et le CDN disponibles sur leur forfait gratuit vont certainement booster le TTFB. Vous pouvez également profiter de l'optimisation automatique de la plate-forme de Cloudflare qui a été testée pour montrer une réduction de 72 % du TTFB.

Pour en savoir plus, consultez notre article complet sur TTFB et comment optimiser votre site Web pour cela.

#3 Optimisez la base de données de votre site

Pourquoi le site WordPress a besoin de bases de données propres

Contrairement aux sites HTML statiques, WordPress est un CMS dynamique qui utilise PHP pour récupérer les données stockées dans une base de données MySQL afin d'afficher ces données sur une page Web. Cela facilite la gestion de votre site, 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. En général, les sites Web HTML statiques seront plus rapides que les sites Web WordPress pour cette raison.

Une façon de garder un site Divi aussi rapide que possible est de vous assurer d'avoir une base de données propre. 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), vous créez de nouvelles tables et plus de données. Comme vous vous en doutez, plus votre base de données est désordonnée, plus il sera difficile de trouver les données. Cela conduit à un site Web plus lent.

Ainsi, si vous avez ajouté le thème Divi à votre site Web après des années d'essai d'autres thèmes et d'innombrables plugins, il y a de fortes chances que vous ayez des données stockées dont vous n'avez plus besoin. Même si vous désinstallez un plugin, cela ne signifie pas que toutes les données sont parties dans la base de données. Les plugins aiment y laisser des données au cas où vous réinstalleriez le plugin. Pas cool, je sais. Ces données restantes peuvent entraîner un encombrement inutile et ralentir votre site.

Tout comme tout humain a besoin d'une organisation pour travailler plus efficacement, chaque site WordPress (Divi ou non) a besoin d'une base de données propre pour charger les pages plus rapidement. Donc, si vous avez votre site Web depuis un certain temps, le nettoyer peut considérablement accélérer les choses.

Comment optimiser la base de données de votre site Divi

Je suggère d'utiliser un plugin pour cela. WP Optimize semble être une option crédible. Mais il existe d'autres plugins de base de données WordPress à considérer.

Ou si vous savez ce que vous faites, vous pouvez toujours le faire manuellement dans MySQL.

En plus de nettoyer votre base de données WordPress, vous voudrez peut-être rendre WordPress encore plus léger 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.

#4 Optimisez votre DNS

Comment le DNS affecte la vitesse du site

La toute première chose qui doit se produire lorsqu'un utilisateur visite l'URL de l'une de vos pages Web 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). En substance, une recherche DNS revient à rechercher votre nom de domaine dans un annuaire téléphonique pour trouver l'adresse IP de ce domaine.

Mais 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 un seul chargement de page (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 vous ne l'aimerez probablement.

Utilisation de Cloudflare pour l'optimisation DNS (et plus si vous le souhaitez)

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. Ce sera nettement plus rapide 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 le DNS et la sécurité (détection DDOS) et KeyCDN (ou MaxCDN) pour votre CDN. Cela semble être une excellente combinaison.

Configuration de Cloudflare

Cloudflare est vraiment 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.

La principale chose que vous devrez faire pour terminer la configuration est de remplacer les serveurs de noms par défaut de votre fournisseur DNS actuel (comme GoDaddy) par les serveurs de noms de Cloudflare.

Ensuite, vous pouvez 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 plus encore).

En parlant de CDN, vous devez absolument en utiliser un.

#5 Utilisez un réseau de diffusion de contenu (CDN)

PoP CDN StackPath

Un réseau de diffusion de contenu (CDN) porte la vitesse du site à un autre niveau. Comme son nom l'indique, un CDN est un réseau de diffusion de contenu. Le réseau se compose de serveurs du monde entier qui stockent des fichiers statiques mis en cache (images, vidéos, scripts, etc.) du contenu de votre site Web. Ensuite, lorsqu'une personne envoie une demande pour ce contenu (en visitant votre site Web), le serveur (ou PoP) le plus proche de la personne fournira le contenu. Sans CDN, les fichiers de votre site Web sont accessibles à partir d'un emplacement de serveur (où que votre hôte stocke ces fichiers), donc plus vous êtes éloigné de ce serveur, plus il sera lent de fournir le contenu de ce site Web à votre navigateur.

Pensez-y, lorsque vous voulez une pizza livrée chez vous, vous ne choisissez pas la pizzeria à 30 miles. Vous choisissez celui à 5 miles de distance parce que vous voulez qu'il soit livré le plus tôt possible (si vous êtes un humain normal qui aime la pizza autant que moi). Un CDN fonctionne de manière similaire. Puisque vous souhaitez que le site Web apparaisse dans votre navigateur dès que possible, un CDN aura les fichiers de votre site prêts à être livrés à partir du serveur le plus proche de votre emplacement. Ainsi, si les fichiers de votre site sont stockés sur un serveur à San Francisco et que quelqu'un à Londres accède à 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 ces mêmes données depuis 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 livraison de votre site Web dans le monde entier.

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 StackPath (anciennement 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 :

• Cloudflare CDN : En plus de l'optimisation DNS (mentionnée ci-dessus), Cloudflare propose un CDN mondial rapide et sécurisé qui met en cache le contenu statique et le fournit rapidement aux utilisateurs. Ceci est inclus dans leur plan gratuit, ce qui est génial pour la plupart des sites.
• KeyCDN (vous pouvez même utiliser le plugin WordPress CDN Enabler pour intégrer KeyCDN ; cette configuration fonctionnerait également bien avec Cache Enabler)
• StackPath (anciennement MaxCDN)
• Amazon Cloudfront
• Sucuri

Il existe des plugins de mise en cache comme WP Total Cache ou CDN Enabler qui incluent une option pour intégrer automatiquement plusieurs fournisseurs CDN, ce qui est assez pratique.

Voici quelques plugins prenant en charge le CDN :

• Cache le plus rapide de WP
• Fusée WP
• Optimisation automatique
• Cache total W3
• WP Super Cache
• Activateur CDN

#6 Ajouter la mise en cache

Il existe quatre principaux types de mise en cache qui peuvent être implémentés pour accélérer votre site.

• Mise en cache des pages – 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 pouvant être mis en cache par le navigateur et pendant combien de temps. Seuls certains plugins peuvent le faire, il peut donc être préférable de le faire manuellement pour plus de contrôle. Cela aidera à prendre en charge cette métrique « Leverage Browser Caching » lors des tests de vitesse.
• CDN Caching – Sert les pages/fichiers de sites 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és que PHP initie 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 mise en cache du code PHP compilé utilisé pour afficher votre site Web.

Divi effectue la mise en cache lors de la diffusion des fichiers JS et CSS de Divi dans les coulisses. Mais c'est principalement pour les fichiers de thème Divi pour une meilleure fonctionnalité de Divi Builder.

Il est toujours nécessaire d'utiliser la mise en cache pour votre site Web dans son ensemble. La plupart des sites ont plusieurs plugins qui viennent avec leurs propres fichiers CSS qui peuvent devoir être combinés, minimisés et mis en cache. Vous pouvez donc certainement profiter d'une solution tierce pour servir des versions HTML statiques en cache de toutes vos pages.

Le CDN de Cloudflare est un excellent moyen d'ajouter de la mise en cache à votre site Divi. Il stocke une copie du contenu du site Web (ressources statiques) géographiquement plus proche des visiteurs afin de réduire la charge de page et la latence. L'APO de Cloudflare pour WordPress semble être une solution encore plus ciblée pour la mise en cache de pages Web et de polices tierces pour un site WordPress/Divi à l'aide de leur plugin WordPress.

Les plugins de mise en cache populaires incluent :

• Fusée WP
• Cache Enabler (lire notre critique)
• W3 Total Cache (lire notre critique)
• W3 Super Cache (lire notre critique)
• Comet Cache (lire notre critique)
• Cache le plus rapide de WP

Astuce : Chaque fois que la mise en cache des pages est activée sur votre site à l'aide d'un plugin, vous devez vous assurer et supprimer (ou effacer) le cache chaque fois que vous apportez des modifications à votre site Web pour vous assurer que vous et vos visiteurs recevez la dernière version de votre placer.

#7 Ajouter la minification et l'agrégation de sites Web

La minification rend les fichiers de votre site plus petits. La réduction des fichiers de votre site (CSS, JavaScript, HTML) supprime tous ces caractères inutiles (comme les espaces et les sauts de page) afin que la taille du fichier diminue. Cela réduit le temps nécessaire au navigateur pour charger le contenu d'une page.

L'agrégation consiste à combiner les fichiers du site pour réduire le nombre total de demandes sur la page et accélérer les temps de chargement pour vos visiteurs.

Comme mentionné précédemment, Divi minimise et combine dynamiquement Javascript et CSS par défaut. Donc, techniquement, vous n'avez pas à vous soucier d'utiliser un plugin tiers pour réduire et combiner davantage 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 au thème enfant) qui bénéficieront de la réduction et de la combinaison des fichiers CSS et JS.

L'un des meilleurs moyens d'ajouter de la minification au code HTML, JS et CSS de l'ensemble de votre site consiste à utiliser Cloudflare. Cloudflare utilise Auto Minify pour réduire la taille de fichier de tout le code source de votre site Web. De plus, il est livré en standard avec la version gratuite.

Voici quelques plugins crédibles qui minimiseront les fichiers de votre site :

• Optimisation automatique
• W3 Total Cache (lire notre critique)
• W3 Super Cache (lire notre critique)
• WP Rocket (payant)

Ces plugins devraient fonctionner avec Divi. Mais il n'y a aucun moyen d'évaluer toutes les nuances d'un site Web pour dire que celui-ci fonctionnera le mieux pour tout le monde. Parfois, des plugins tiers réduisent automatiquement les fichiers JavaScript d'une manière qui peut provoquer des erreurs/problèmes, alors assurez-vous de tester soigneusement votre site Web. En général, il est toujours sûr de réduire les fichiers CSS. Mais soyez prudent avec ces fichiers JavaScript.

Et s'il y a un conflit, vous devrez peut-être désactiver les options intégrées de Divi et laisser le plugin tiers gérer les choses.

Et si vous ne voulez pas compter sur un tiers pour cela, vous pouvez toujours le faire manuellement. Pour plus d'informations sur la façon de procéder, consultez cet article complet sur la façon de réduire les CSS, HTML et JavaScript de votre site Web.

#8 Activer la compression GZIP

Comment la compression Gzip aide à accélérer votre site Divi

Activer la compression Gzip sur votre site Divi peut vous donner un gros boost de vitesse (jusqu'à 70% dans certains cas). Si vous êtes habitué à créer des fichiers compressés (ou compressés) sur votre ordinateur, vous avez déjà une compréhension de base du fonctionnement de la compression Gzip. Nous créons des fichiers zip (ou dossiers) pour réduire le contenu du fichier (ou dossier). Pourquoi? Ainsi, nous pouvons charger et télécharger le fichier beaucoup plus rapidement ! 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 qu'il puisse être servi au client beaucoup plus rapidement. Cela peut vraiment augmenter la vitesse de chargement des pages.

C'est l'un de ces domaines dans lequel vous pouvez améliorer la vitesse de Divi même sur une nouvelle installation. Étant donné que Divi minimise déjà de toute façon les fichiers du thème principal, la compression Gzip ou Brotli rendra ces fichiers beaucoup plus petits que la minimisation ne le pourrait jamais.

La compression Gzip est l'algorithme de compression le plus largement utilisé, mais il semble que la compression Brotli soit l'algorithme de nouvelle génération qui cherche à réduire la taille des fichiers pour un transfert de données plus rapide. Il est utilisé par des sociétés d'hébergement comme SiteGround et également par Cloudflare.

Comment activer la compression Gzip sur votre site Divi

Certains hébergeurs activeront automatiquement la compression gzip car c'est une évidence pour les performances du site. N'hésitez pas à vérifier si la compression Gzip est activée sur votre site

Comme déjà mentionné, Cloudflare fournit la compression Brotli pour tous les domaines de leur forfait gratuit.

De nombreux plugins de performances WordPress (comme W3 Total Cache et WP Super Cache) incluront la compression Gzip en option. Cependant, il semble inutile d'ajouter un plugin de performance pour cette seule optimisation.

Un moyen courant d'activer la compression Gzip (sur les serveurs Apache) consiste à le faire manuellement à l'aide de mod_deflate. Et tout ce que vous avez à faire est d'accéder à votre site Web (la racine) via FTP (assurez-vous d'afficher les fichiers cachés). Copiez et collez ensuite un bloc de code en bas de votre fichier .htaccess.

#9 Optimisation des images

L'optimisation des images est l'un des principaux responsables des vitesses de chargement lentes des pages. Cela est probablement dû à la facilité à ignorer. 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. 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. Et avouons-le, votre site aura probablement beaucoup d'images.

On n'insistera jamais assez sur la nécessité essentielle de l'optimisation de l'image. Chaque site Web devrait le faire. La compression d'image à elle seule peut rendre votre site sensiblement plus rapide et les tailles d'image plus petites permettront d'économiser de l'espace de stockage et de la bande passante (gagnant-gagnant !). Mais il existe d'autres optimisations d'image importantes auxquelles vous devriez également penser.

En bref, vous voudrez faire ce qui suit lors de l'optimisation de votre image pour le Web :

Utilisez le bon type de fichier

En ce qui concerne les images sur le Web, vous devez vraiment vous en tenir aux types de fichiers image suivants :

• JPG – Cela devrait être votre type de fichier de prédilection pour la plupart des images/photographies que vous utilisez sur votre site, car vous pouvez obtenir de superbes images avec une taille de fichier plus petite que les PNG ou les GIF. Évitez d'utiliser le format PNG pour des choses comme des images d'arrière-plan ou des photographies, sauf si vous avez besoin d'un arrière-plan transparent.
• PNG – Utilisez des PNG pour les images qui nécessitent un arrière-plan transparent. JPG ne prend pas en charge la transparence.
• SVG - Il s'agit d'un format vectoriel qui fournit des détails extrêmement précis à l'aide de code HTML. Les SVG sont parfaits pour les logos, les icônes et autres animations vectorielles.

Redimensionnez et recadrez vos images

Vous ne voulez jamais que votre image soit plus grande qu'elle ne devrait l'être. Par exemple, si vous ajoutez un logo dans les options de thème de Divi, dans la plupart des cas, vous n'en aurez besoin que d'une largeur de 100px. Ne téléchargez donc pas un logo d'une largeur de 5000px et forcez Divi à redimensionner cette image pour vous. 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 savoir quelle doit être la taille de ces images dans la structure des colonnes de Divi. Ce guide ultime peut vous aider à vous orienter dans la bonne direction. (Cependant, de nouvelles structures de colonnes ont été ajoutées depuis cette publication, nous essaierons donc de les mettre à jour bientôt).

Compresser la taille du fichier

Vous voudrez réduire la taille de votre fichier image jusqu'au point où vous remarquerez une baisse de qualité. Cela se fait par compression d'image. La plupart des éditeurs de photos, des plugins et des sites comme tinypng.com compressent les images à l'aide d'une compression sans perte (qui réduit le fichier image sans perte de qualité d'image) et d'une compression intelligente avec perte (qui diminue 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).

Tirez parti des outils d'optimisation d'image

Si vous le pouvez, je vous suggère d'optimiser vos images pour Internet avant de les télécharger sur votre site Divi. Cela peut être fait via des éditeurs de photos tels que Photoshop, qui incluent 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.

Il existe d'excellents plugins qui effectueront la compression d'images pour vous. Certains plugins (comme Imagify) compressent les images déjà utilisées sur votre site et compressent automatiquement les images lorsque vous les téléchargez dans votre médiathèque WordPress. Gardez à l'esprit que l'utilisation d'un plugin pour cela peut être éprouvante pour votre site lors de la compression de ces images, il est donc préférable de faire une optimisation d'image à l'avance si possible.

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

• Sites Internet:
  • Compressor.io
  • Tinypng.com
• Plugins :
  • Imaginer
  • Compression et optimisation d'images Smush
  • fusée WP

Pour plus d'informations, consultez un comparatif sur 6 plugins d'optimisation d'image de qualité.

Prise en charge SRCSET intégrée de Divi

Les images réactives avec prise en charge native de SRCSET sont également intégrées à Divi. Cela améliore encore l'optimisation des images utilisées dans Divi en fournissant des images à l'échelle qui sont de la bonne taille pour différents affichages réactifs (comme une tablette et un téléphone).

#10 Optimisation vidéo

L'optimisation vidéo est un peu plus difficile que l'optimisation d'image, mais certainement pas moins importante. Les fichiers vidéo peuvent être volumineux et donc extrêmement contraignants pour la vitesse de chargement des pages. Et si vous hébergez beaucoup de vidéos sur votre serveur (dans la galerie média WordPress par exemple), vous vous heurterez au problème supplémentaire d'espace disque. C'est pourquoi il est souvent recommandé d'utiliser des services tiers (comme YouTube ou Vimeo) pour héberger vos vidéos pour vous. Ou, vous pouvez envisager de décharger votre contenu multimédia vidéo sur une plate-forme de stockage comme 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.

Si vous envisagez d'auto-héberger vos vidéos, vous devrez certainement réduire la taille de la vidéo pour un chargement plus rapide. Vous pouvez facilement réduire les fichiers vidéo à l'aide d'un outil gratuit comme Handbrake (qui est facile à utiliser).

Pour plus d'informations sur l'utilisation de la vidéo dans Divi (comme l'ajout d'une URL de vidéo hébergée par un tiers à un module vidéo), consultez ce guide ultime.

#11 Construisez votre page Divi pour la vitesse

Quand il s'agit de ne pas le faire, la vitesse d'un site Web est déterminée par la vitesse à laquelle il charge le contenu d'une page. Il est donc logique de créer chacune des pages de votre site Web Divi en pensant à l'optimisation des performances. L'important est d'identifier l'objectif principal pour chaque page que vous créez. Après cela, vous pouvez trouver un équilibre sain entre vitesse et conception pour créer une page qui a l'air incroyable sur le front-end, tout en restant maigre sur le backend. Pour un exemple pratique d'optimisation du contenu de la page Divi pour la vitesse, consultez notre article sur la façon de créer la page Divi la plus rapide.

Voici quelques conseils clés à garder à l'esprit lors de la création de votre page :

• Optimisez le contenu au-dessus de la ligne de flottaison pour qu'il fonctionne avec le CSS critique intégré de Divi.
• Utilisez les préréglages Divi pour profiter de la fonction de styles intelligents intégrée de Divi . Cela permettra aux éléments de partager des extraits de code CSS basés sur des classes et d'éviter d'avoir à charger un bloc CSS unique pour chacun.
• Dans la mesure du possible, limitez les types de modules que vous utilisez pour créer la page . En raison du framework dynamique de Divi, Divi ne traitera ni ne chargera les modules (et leur CSS unique) que vous n'utilisez pas. Par exemple, si vous pouvez utiliser deux modules de texte (au lieu d'un module de texte et d'un module de présentation) pour les mêmes résultats, il est préférable de ne pas utiliser inutilement le traitement et le chargement du module de présentation sur la page.
• Soyez intelligent sur l'utilisation de l'animation pour votre page . En raison des fonctionnalités dynamiques de Divi, Divi ne traitera ni ne chargera le JS ou le CSS nécessaire pour des fonctionnalités telles que les effets de mouvement si vous ne les utilisez pas. Par exemple, si vous utilisez les paramètres d'animation habituels dans toute votre page, vous souhaiterez peut-être éviter d'utiliser des effets de mouvement pour un seul élément. Au lieu de cela, gardez le style d'animation cohérent et profitez d'un chargement de page plus rapide.

#12 Utilisez les plugins avec précaution et parcimonie

Utiliser des plugins de qualité

La qualité est le facteur clé lorsqu'il s'agit de plugins. En fait, vous pouvez avoir 10 plugins de qualité qui ne ralentiront pas votre site autant qu'un mauvais. En général, assurez-vous de choisir des plugins qui ont résisté à l'épreuve du temps et qui ont d'excellentes critiques. Et testez toujours comment un plugin affecte les performances de votre site Web avec des tests de vitesse avant et après pour être sûr.

Supprimer les plugins inutilisés ou obsolètes

En plus d'utiliser des plugins de qualité, il est également important que vous supprimiez tous les plugins inutilisés et/ou obsolètes de votre site. Ils peuvent nuire aux performances de votre site Web et constituer un risque grave pour la sécurité. De plus, chaque plugin (même ceux de qualité) ajoutera des ressources supplémentaires qui ajouteront du temps à chaque chargement de page. Si vous voulez un site Divi rapide, vous voudrez utiliser le moins de plugins possible.

Attention aux erreurs bloquant le rendu

Divi n'a pas d'actifs bloquant le rendu, ce qui signifie que vos styles et scripts bloquant le rendu proviennent de plugins. S'il existe de gros scripts bloquant le rendu qui nuisent à votre vitesse, vous pouvez envisager de vous éloigner de ces plugins.

#13 Effectuer des tests de vitesse

Vous ne liriez probablement pas cet article si vous n'aviez pas effectué au moins un test de vitesse sur votre site Web. Et à juste titre, il est important de savoir à quelle vitesse vos pages se chargent pour les visiteurs. Effectuer un test de vitesse est l'une des choses les plus faciles 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 endroits pour commencer :

• GTMetrics
• Informations sur les pages Google
• Outils de développement Chrome
• Lighthouse (disponible pour les outils de développement Chrome)

Les résultats de ces tests sont ce qui pousse nombre d'entre nous à commencer à optimiser notre site Divi pour des temps de chargement plus rapides. Ils 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.

La meilleure façon d'utiliser ces outils de test de vitesse en ligne pour votre site Divi WordPress est d'effectuer d'abord un test sur une page avant de procéder à des optimisations. Ensuite, vous pouvez l'utiliser comme base pour comparer les futurs tests au fur et à mesure que vous apportez des modifications. Après chaque optimisation que vous effectuez, vous pouvez voir si votre score s'améliore.

Par exemple, vous remarquerez peut-être que l'utilisation d'un plugin de mise en cache fonctionnera mieux qu'un autre. N'ayez pas peur de tester plusieurs plugins pour de meilleures performances.

Voici un guide d'optimisation WordPress utile de GTMetrix qui vous sera utile.

Au fur et à mesure que vous implémentez les optimisations de vitesse sur votre site, vous devriez constater des améliorations dans les domaines suivants :

• Temps jusqu'au premier octet (TTFB)
• Première peinture de contenu (FCP)
• Time to Interactive (TTI) - mesure quand la page est prête pour l'interaction de l'utilisateur.
• Indice de vitesse (SI) - mesure la vitesse à laquelle votre page est visuellement complète au-dessus de la ligne de flottaison
• Temps de blocage total (TBT) - Similaire au délai de première entrée (FID) vital pour le Web de Google, qui correspond à la durée entre le moment où un utilisateur interagit pour la première fois avec votre site et le moment où son navigateur répond à cette action.
• La plus grande peinture de contenu – mesure le temps qu'il faut pour que le plus grand élément de contenu (comme une image) soit visible pour les utilisateurs.
• Décalage cumulatif de la mise en page - mesure le décalage (ou le déplacement) inattendu de la mise en page lorsqu'un utilisateur charge une page.

Pour plus d'informations, consultez notre article sur la façon d'améliorer le score de vitesse de votre page Google.

L'objectif est la vitesse, pas la perfection

Il peut être facile de s'enliser dans le test de votre site Web et son optimisation à la perfection. Mais aucun site Web ne sera parfait. Vous pouvez même constater que l'amélioration de certaines notes de performance 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. Comme cet article, ils ne sont qu'un guide pour vous aider à améliorer les performances et la vitesse de votre site Web.

#14 Considérez notre plan de page haute vitesse Divi

Dans ce site Web de test que nous avons créé, il a été facile de créer un site Web Divi qui a obtenu 100 sur Google PageSpeed ​​Desktop, 99 sur Google PageSpeed ​​Mobile et 100 % sur GTmetrix. Ce plan de site Web permet aux développeurs de faire l'expérience directe de l'optimisation de la vitesse intégrée de Divi sur un site réel. Cela peut également servir de bon exemple sur la façon d'optimiser le contenu de votre page Divi pour la vitesse.

Ce site de test a été optimisé comme suit :

• Hébergé sur SiteGround
• CloudFlare utilisé pour la mise en cache, le CDN, la compression Brotli
• Aucun plugin supplémentaire n'a été utilisé.
• Fonctionnalités de performance intégrées de Divi d'occasion
• Contenu de la page optimisé
  • Utilisation de styles intelligents (préréglages Divi) pour réduire le CSS dynamique généré pour chaque page.
  • Optimisé au-dessus du pli pour s'assurer que le CSS critique était maigre.
  • Utilisation d'une police sécurisée pour le Web (Arial) pour éviter d'avoir à télécharger une police à partir d'un serveur tiers.
  • Images compressées utilisées
  • N'a pas utilisé d'effets d'animation ou de mouvement
  • Limité l'utilisation d'icônes pour charger un sous-ensemble de polices d'icônes plus petit qui inclut les icônes sociales nécessaires.

Le résultat:

• La taille CSS a été réduite de 94%.
• Tous les éléments bloquant le rendu ont été complètement éliminés et la taille JavaScript de Divi a été réduite de moitié.
• Il n'y a pas de demandes de ressources inutiles.
• Au-dessus de la ligne de flottaison, le contenu apparaît tout de suite.
• 100 % sur Google PageSpeed ​​Desktop, 99 % sur Google PageSpeed ​​Mobile
• A obtenu 100% sur GTmetrix.

Que pouvons-nous apprendre pour le site de test ?

En fin de compte, Divi vous donne le pouvoir de choisir comment vous voulez l'utiliser et à quelle vitesse vous voulez que votre site Web soit. Le site de test montre que vous pouvez obtenir des scores de vitesse de page presque parfaits dès la sortie de la boîte. Mais, ce n'est pas parce que nous n'avons pas utilisé tous les outils de conception puissants qui rendent Divi si génial que vous devez avoir peur de les utiliser. Si vous n'utilisez pas de module ou de fonctionnalité sur une page, Divi ne traitera pas et/ou ne chargera pas l'élément ou son CSS inutilement. Mais si vous décidez d'inclure un module ou une fonctionnalité, Divi veillera à ne traiter et/ou à charger que les éléments et le CSS nécessaires et rien de plus. Cela vous donne un cadre léger sur lequel s'appuyer, sans avoir à vous soucier du gonflement du Web lorsque vous décidez de libérer la puissance de Divi pour créer votre site.

Autres conseils

Nous avons à peu près couvert tous les principaux facteurs qui contribuent à des sites Web Divi/WordPress plus rapides. Mais il y a beaucoup plus de choses à considérer qui pourraient améliorer encore plus votre vitesse.

• Avoir une configuration correcte du thème enfant Divi
• Changer votre URL de connexion WordPress pour empêcher ces robots de surcharger votre serveur. Ce serait une bonne occasion de créer une page de connexion personnalisée avec Divi.
• É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 des pages.
• Incorporez le chargement paresseux pour les images et les vidéos pour une meilleure vitesse de chargement des pages.

Utilisation de Divi et d'autres plugins de performance tiers

Les optimisations de performances intégrées de Divi accéléreront chaque site Divi car elles éliminent le gonflement qui ne peut être éliminé avec aucun plugin de performance. Cela dit, vous pouvez utiliser des plugins de performances tiers supplémentaires pour augmenter la vitesse de votre site en plus des optimisations intégrées de Divi. Les améliorations des performances de Divi ne s'appliquent qu'à Divi et non aux plugins tiers, vos plugins de performances peuvent donc vous être utiles dans d'autres domaines en dehors de Divi. Par exemple, vous pouvez toujours bénéficier de la mise en cache de votre site Web et de l'utilisation d'un CDN.

Gérer les plug-ins de performances conflictuels

Étant donné que Divi est déjà optimisé, l'utilisation d'un plugin de performance tiers peut provoquer un conflit. Il est donc important de garder votre thème Divi à jour et de tester minutieusement tous les plugins tiers au préalable. Nous faisons de notre mieux pour tester les optimisations intégrées de Divi avec d'autres plugins d'optimisation populaires. Mais il n'y a aucun moyen d'évaluer toutes les nuances d'un site Web pour dire que celui-ci fonctionnera le mieux pour tout le monde ou que les conflits ne se produiront pas.

Par exemple, des plugins tiers peuvent automatiquement réduire ou déplacer les fichiers JavaScript d'une manière qui peut provoquer des erreurs/problèmes, alors assurez-vous de tester votre site Web de manière approfondie.

Et s'il y a un conflit, vous devrez peut-être désactiver les options intégrées de Divi et laisser le plugin tiers gérer les choses. N'hésitez pas à contacter notre équipe d'assistance pour obtenir de l'aide sur tout problème que vous pourriez rencontrer. Nous sommes heureux de vous aider à le régler.

Dernières pensées

Divi est plus rapide que jamais. Avec des 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 reste encore beaucoup à faire pour que votre site Divi fonctionne le plus rapidement possible. Les optimisations de vitesse et de performances incluses dans cet article 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 vous pouvez faire gratuitement !

Je suis sûr qu'il existe des tonnes de suggestions et de ressources qui n'ont pas été mentionnées, alors n'hésitez pas à les partager avec nous dans les commentaires.

Je suis dans l'attente de votre réponse.

À votre santé!

Image en vedette via Sammby / shutterstock.com