Optimisation de la vitesse Divi: expérience de conduite ultime
Divi est plus qu’un générateur de page. Divi met le processus de conception à un niveau entièrement nouveau grâce à un système complet de conception web qui vous permet de concevoir visuellement chaque partie du site. Mais ça ne veut pas dire que Divi doit être lent. Éloigne – toi de ça. L’optimisation intégrée de la vitesse et des performances de Divi permet à votre site Web de se classer facilement parmi les meilleurs scores de Google page speed. Avec des fonctionnalités telles que Dynamic module Framework, Dynamic CSS, Dynamic JavaScript Library, Divi est maintenant à la fois un générateur de page robuste et un thème léger. Mais bien que Divi soit rapide, d’autres facteurs sous – jacents doivent être optimisés. Si elle n’est pas résolue, la vitesse du site Divi sera affectée inutilement.
Dans cet article, nous explorerons ce qui a été fait pour accélérer Divi et ce que nous pouvons faire pour le rendre plus rapide. Voici quelques – uns des thèmes clés que nous allons aborder: WordPress performance et performance Divi intégration de la vitesse et de l’optimisation des performances Divi architecture de modules dynamiques bibliothèque JavaScript dynamique références jquery et jquery migration dynamique CSS Critical CSS Critical Threshold Loading Dynamic inline style Sheets Improving Google Character Loading Désactiver WordPress emotions Delay Gutenberg Block CSS Dynamic icons Native srcset Support for Response images 14 Optimizing Methods for site Speed and Performance Divi # 1 Upgrade host # 2 ttfb Optimization # 3 Optimizing Site Database # 4 Optimizing DNS # 5 Using Content Distribution Network (CDN) # 6 added to the cart Cache # 7 ajouter la minimisation et l’agrégation # 8 activer la compression Gzip # 9 optimisation d’image # 10 optimisation vidéo # 11 construire la séparation de page pour augmenter la vitesse # 12 exécuter avec prudence avec le plug – in # 13
L’est de la vitesse # 14 considérez notre projet de page haute vitesse Divi implémenter la performance de tiers en utilisant Divi et d’autres plugins autres conseils la performance WordPress et la performance Divi ne sont généralement pas les principaux déterminants de la performance du site. Ce n’est qu’une partie du puzzle. Vous devez également considérer les besoins d’optimisation de base du site WordPress. Divi (Divi Topics and \/ or Divi Builder) est situé au – dessus de WordPress (CMS), qui est situé au – dessus de la pile logicielle du serveur, et au – dessus de l’infrastructure gérée. Tout cela doit être correctement ajusté. Pour les débutants, cela inclut un bon hébergement, cache et CDN. Sans ces optimisations sous – jacentes, le site Divi ralentira peu importe comment nous optimisons Divi. Par conséquent, si votre site Divi est lent, vous devez également tenir compte de ces autres défis.
Avec les exigences potentielles d’optimisation du site WordPress, nous devons résoudre les problèmes d’optimisation des performances de Divi. Pour ce faire, il améliore les performances des thèmes Divi et \/ ou Divi Builder, en veillant à ce qu’il fonctionne de manière optimale dans les domaines basés sur WordPress et dans ceux qui travaillent avec wordpress. Une fois que toutes ces sections ont été optimisées, nous pouvons créer avec succès un site Web Divi avec une vitesse et une performance optimales. Dans le reste de ce qui suit, nous commencerons par discuter de l’optimisation intégrée des performances de Divi (quelque chose a déjà été fait pour vous). Ensuite, nous discuterons de la façon d’optimiser davantage le site Divi en répondant à certaines des exigences d’optimisation sous – jacentes (d’autres choses que vous pouvez faire).
Capacité d’optimisation intégrée de la vitesse et des performances de Divi tout d’abord, regardons quelques optimisations intégrées de la vitesse et des performances déjà réalisées par Divi. O ces caractéristiques
L’optimisation accélère Divi de tous les points de vue, ce qui en fait le générateur de page le plus rapide sur le marché. Mais ce n’est pas tout. Divi est construit avec un cadre dynamique qui élimine l’inflation et fournit une base pour Divi qui peut croître avec plus de modules et plus de fonctionnalités sans ajouter d’inflation à votre site. Cela vous donne le meilleur des deux mondes: la puissance d’un grand générateur de page et l’agilité d’un thème léger.
Vous pouvez gérer la fonctionnalité d’optimisation des performances en allant aux options Divi > topics. Dans l’onglet général, sélectionnez le Sous – Tableau des performances.
Par exemple, s’il y a trois modules sur la page, Divi ne traitera que les fonctions requises pour ces trois modules, et non toutes les fonctions de tous les modules, quel que soit le module utilisé. Ces trois fonctions génèrent du Code court \/ html pour le module sur la page sans perdre de temps de traitement.
N pour les modules seulement, mais pour tout élément Divi, y compris les sections, les lignes et les colonnes.
Exemple: la Bibliothèque JavaScript dynamique d’un module image utilisant Lightbox suppose que vous avez une page où le module image a Lightbox activé. Divi pointe dynamiquement vers et exécute la Bibliothèque JS popup agrandie de cette page pour appliquer la fonction popup Lightbox. Si Lightbox est désactivé sur l’image, les bibliothèques JS ne sont pas chargées ou exécutées sur la page.
Des ions. Cela réduit les demandes de blocs de rendu et accélère le temps de chargement. Nous avons également ajouté des options pour limiter le support de polices Google aux navigateurs traditionnels. Cela supprime essentiellement les anciens fichiers de police pour réduire la charge. L’activation de cette option réduira la taille et le temps de chargement des polices Google, mais elle limitera la prise en charge des polices Google par certains navigateurs très anciens. Vous pouvez désactiver cette option pour augmenter le support pour les anciens navigateurs, mais les performances diminuent légèrement. Désactiver les émoticônes WordPress WordPress est livré avec un système d’émoticônes natif, mais cela n’est plus nécessaire en raison du support des navigateurs modernes pour les émoticônes natifs. En fait, les émoticônes locaux semblent beaucoup mieux que la version WordPress. Divi vous permet de désactiver les émoticônes WordPress natifs pour supprimer les ressources inutiles. De plus, il y a moins de ressources pour le rendu, de sorte que les pages sont chargées plus rapidement. Lorsque vous retardez l’utilisation de Divi Builder par Gutenberg Block CSS sur une page, vous pouvez également choisir de ne pas utiliser l’éditeur de blocs WordPress par défaut (Gutenberg). De plus, comme vous n’utilisez pas de blocs pour modéliser une page, vous n’avez pas besoin du rendu CSS de Gutenberg pour empêcher le chargement de la page Divi. Lorsque vous activez Delay Gutenberg Block CSS, Divi Now (par défaut) retarde le chargement de Gutenberg Block CSS sur les pages qui utilisent Divi Builder. Il est toujours chargé au cas où (dans le pied de page), mais ne bloque plus le rendu. Les icônes dynamiques Divi sont maintenant disponibles avec un sous – ensemble de caractères d’icônes qui peuvent être chargés sur demande en fonction des modules et des fonctionnalités que vous utilisez. Cela réduit la taille de police de l’icône de base Divi de 90 KB à 6 KB. L’ensemble complet des icônes n’est chargé que si nécessaire. Cette option
Roulez à grande vitesse. En utilisant l’hébergement partagé traditionnel, vous partagerez toutes les ressources disponibles du serveur avec d’autres personnes. Comme vous partagez, le coût de cet hébergement est faible. L’inconvénient est que vous ne pouvez pas contrôler le trafic que d’autres sites obtiennent sur votre serveur partagé. Par conséquent, vous pouvez facilement être victime d’un chargement très lent ou même d’un site complètement inactif. Il est donc préférable d’avoir une bonne compréhension du trafic que votre hôte partagé peut gérer. Hébergement dédié et hébergement dédié, vous avez votre serveur dédié pour vous seulement. Il n’est pas nécessaire de partager des ressources avec d’autres personnes. Cela signifie que votre site Web aura des temps de chargement plus rapides, plus prévisibles et plus cohérents. Pour les grandes entreprises, il s’agit généralement d’un choix de haut niveau et d’une prime élevée. L’hébergement de serveurs privés virtuels (VPS) est essentiellement une zone intermédiaire entre l’hébergement partagé et l’hébergement privé. Votre espace sur le serveur est \
Tito a été optimisé pour Divi. Cela élimine tous les problèmes d’optimisation de l’environnement d’hébergement Divi 2 temps d’optimisation au premier octet (ttfb)
La page est chargée plus longtemps parce qu’elle doit localiser les données dans la base de données avant de charger la page. En général, pour cette raison, les sites HTML statiques seront plus rapides que les sites WordPress. Une façon de garder le site Divi aussi rapidement que possible est de vous assurer que vous avez une base de données propre. Les fichiers du site WordPress sont organisés en tables dans la base de données et de nouvelles tables et plus de données sont créées chaque fois que de nouvelles données (comme des thèmes et des plugins) sont ajoutées au site. Comme vous pouvez vous y attendre, plus la base de données est confuse, plus il est difficile de trouver des données. Cela ralentit le site. Par conséquent, si vous ajoutez des sujets divisés à votre site après des années d’essais sur d’autres sujets et d’innombrables plug – ins, vous avez probablement déjà stocké des données qui ne sont plus nécessaires. Même si vous désinstallez le plug – in, cela ne signifie pas que toutes les données sont entrées dans la base de données. Le plug – in aime laisser quelques données là – Bas au cas où vous réinstalliez le plug – in. Je sais que ce n’est pas bon. Ces données restantes peuvent causer une confusion inutile et ralentir le site. Tout comme chaque 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. Donc, si vous avez un site Web pendant un certain temps, le nettoyage peut être beaucoup plus rapide. Comment optimiser la base de données du site Divi je recommande l’utilisation de plug – ins. L’optimisation du WP semble être une option fiable. Mais il y a d’autres plugins de base de données WordPress à considérer. Ou, si vous savez ce que vous faites, vous pouvez le faire manuellement dans MySQL à tout moment. En plus de nettoyer la base de données WordPress, vous voudrez peut – être la rendre plus légère en réduisant les données stockées par WordPress. Par exemple, WordPress stocke automatiquement les articles supprimés dans la corbeille pendant 30 jours. Vous voudrez peut – être réduire ce temps à 7 4 optimiser DNS
Une recherche DNS est nécessaire lorsqu’un utilisateur accède à l’URL d’une de vos pages Web. Une fois l’URL saisie (ou cliquée), le FAI du visiteur envoie une requête DNS au serveur de noms pour trouver l’adresse IP associée à votre domaine (chaque domaine \/ site a une adresse IP spécifique). Fondamentalement, une recherche DNS est comme trouver votre nom de domaine dans un carnet d’adresses pour trouver l’adresse IP du domaine. Cependant, lorsqu’un utilisateur accède à une page de votre site Web, la page peut avoir plusieurs champs que vous devez visiter pour récupérer la page. Ainsi, vous pouvez effectuer 3 à 4 recherches de domaine (peut – être plus) sur une seule page chargée. En général, la plupart des fournisseurs de DNS gratuits comme GoDaddy et namehead sont généralement plus lents que vous ne le souhaitez. La meilleure option gratuite pour accélérer la recherche dns en utilisant cloudflare pour l’optimisation DNS (et plus si nécessaire) est probablement cloudflare. Ils ont la performance dns la plus rapide enregistrée sur dnsperf. Com. Ce sera beaucoup plus rapide que GoDaddy et namehead. Si nécessaire, vous pouvez même optimiser cloudftore pour le DNS sans avoir besoin d’autres services tels que CDN ou WAF.
Parce que c’est une performance facile du site. Comme mentionné précédemment, n’hésitez pas à vérifier si la compression Gzip est activée sur votre site et cloudflare fournit la compression brotli pour tous les domaines de son programme gratuit. De nombreux plug – ins de performance WordPress tels que W3 total cache et WP super cache incluent la compression Gzip comme option. Cependant, il ne semble pas nécessaire d’ajouter des plug – ins de performance pour cette optimisation. Une façon courante d’activer la compression Gzip (sur un serveur Apache) est de l’exécuter manuellement en utilisant mod _ Deflate. Tout ce que vous avez à faire est d’accéder à votre site Web (racine) via FTP (assurez – vous que les fichiers cachés sont affichés). Ensuite, copiez et collez un morceau de code au bas du fichier. Htaccess 9 optimisation des images
ITA des données (réduction de la qualité des métadonnées et des images d’une manière qui n’est pas vraiment perçue par l’utilisateur, réduisant ainsi la taille du fichier image). Si vous le pouvez, utilisez l’outil d’optimisation d’image et je vous recommande d’optimiser vos images pour Internet avant de les télécharger sur le site Divi. Pour ce faire, vous pouvez utiliser un éditeur de photos comme Photoshop, qui inclut l’option enregistrer sur le Web. De plus, vous pouvez utiliser des sites tiers gratuits comme tinypng. Com ou compresseur. Je dois compresser l’image avant de la télécharger sur votre site Web. Il y a d’excellents plug – ins pour la compression d’image. Certains plug – ins (comme imaginy) compressent les images déjà utilisées sur votre site et les compressent automatiquement lorsque vous les téléchargez dans la médiathèque WordPress. Gardez à l’esprit que l’utilisation de plug – ins à cette fin peut être coûteuse pour le site lors de la compression de ces images, il est donc recommandé d’effectuer l’optimisation de l’image le plus tôt possible. Voici quelques bons outils et plugins d’optimisation d’image que vous pouvez utiliser: site Web: compresseur. C’est tinypng. Plugin com: Imaginez la compression smoush et l’optimisation d’image Rocket WP pour plus d’informations, voir la comparaison des 6 plugins d’optimisation d’image de qualité. Le support srcset intégré pour l’image de réponse Divi et le support srcset natif sont également intégrés dans Divi. Cela améliore encore l’optimisation de l’image utilisée dans Divi en fournissant des images de taille appropriée pour différents écrans réactifs tels que les tablettes et les téléphones cellulaires. 10 optimisation vidéo
Si vous jouez beaucoup de vidéos sur votre serveur (par exemple, WordPress Media Gallery), vous aurez des problèmes d’espace disque supplémentaires. C’est pourquoi nous vous recommandons souvent d’utiliser des services tiers comme Youtube ou Vimeo pour héberger vos vidéos. Alternativement, vous pouvez envisager de télécharger des médias vidéo sur une plate – forme de stockage comme Amazon S3. Cela vous permettra de vous connecter à ces vidéos à partir du module vidéo de Divi sans ralentir le serveur. Si vous prévoyez accueillir votre propre vidéo, vous devrez certainement réduire la taille de la vidéo afin de la télécharger plus rapidement. Vous pouvez facilement réduire les fichiers vidéo en utilisant des outils gratuits comme Handbrake (facile à utiliser). Pour en savoir plus sur la façon d’utiliser la vidéo dans Divi (p. ex., ajouter une URL vidéo gérée par un tiers à un formulaire vidéo), consultez ce guide final. 11 construire une page à la vitesse ne le fait pas, la vitesse du site dépend de la vitesse à laquelle le contenu de la page est chargé. Il est donc logique de tenir compte de l’optimisation des performances lors de la création de chaque page du site Divi. Il est important de déterminer les principaux objectifs de chaque page que vous créez. Après cela, vous pouvez trouver un équilibre sain entre la vitesse et la conception, en créant une belle page à l’avant tout en restant à l’arrière. Pour des exemples pratiques de la façon d’optimiser le contenu d’une page Divi pour augmenter 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 d’une page: optimiser le contenu au – dessus de la page pour utiliser le CSS critique intégré de Divi. Les presets Divi vous permettent de profiter de la fonctionnalité de style intelligent intégrée de Divi. Cela permettra aux éléments de partager des fragments de code CSS par classe et évitera
Un bloc CSS unique doit être chargé pour chaque. Si possible, limitez le type de formulaire utilisé pour créer la page. En raison du cadre dynamique de Divi, Divi ne gère ni ne charge les modules (et leurs CSS uniques) que vous n’utilisez pas. Par exemple, si vous pouvez obtenir le même résultat en utilisant deux formulaires texte (au lieu des formulaires texte et Blurb), il est préférable de ne pas utiliser le processus, mais de charger inutilement le formulaire Blurb sur la page. Utilisez intelligemment l’animation pour les pages. En raison des propriétés dynamiques de Divi, si vous ne les utilisez pas, Divi ne traitera pas ou ne chargera pas les JS ou CSS nécessaires pour des propriétés telles que les effets de mouvement. Par exemple, si vous utilisez des paramètres d’animation normaux tout au long de la page, vous voudrez 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 Utilisation prudente des plug – ins
Sitegound utilise cloudftore pour la mise en cache, la compression CDN, brotli et aucun autre plug – in. La fonctionnalité de performance intégrée de Divi utilise des styles optimisés d’intelligence du contenu de page (presets Divi) pour réduire les CSS dynamiques générés pour chaque page. Optimisé au – dessus du pli pour assurer la finesse critique du CSS. Utilisez des polices Web sécurisées (Arial) pour éviter de télécharger des polices à partir de serveurs tiers. L’image compressée utilisée n’utilise pas d’animation ou d’effets de mouvement, ce qui limite l’utilisation des icônes pour charger un sous – ensemble de caractères avec des icônes plus petites, y compris les icônes sociales nécessaires. Résultats: la taille du CSS a diminué de 94%. Toutes les ressources du bloc de rendu ont été complètement supprimées et la taille JavaScript de Divi a été réduite de moitié. Aucune ressource inutile n’a été demandée. Le contenu ci – dessus s’affiche immédiatement. Il a obtenu 100% sur le Bureau de Google PageSpeed, 99% sur Google PageSpeed mobile et 100% sur gtmetrix. Que pouvons – nous apprendre des sites d’essai? En fin de compte, Divi vous permet de choisir comment l’utiliser et la vitesse à laquelle vous voulez que le site web fonctionne. Le site de test montre que vous pouvez obtenir des scores de vitesse de page presque parfaits immédiatement. Mais ce n’est pas parce que nous n’utilisons pas tous les outils de conception puissants qui rendent Divi si bon que vous devez avoir peur de les utiliser. Si vous n’utilisez pas de modules ou de fonctionnalités sur la page, Divi ne traitera pas et \/ ou ne chargera pas inutilement l’élément ou son CSS. Cependant, si vous décidez d’inclure un module ou une fonctionnalité, Divi ne traitera et \/ ou ne chargera que les éléments et CSS nécessaires et ne fera rien d’autre. Cela vous donne un cadre léger sur lequel vous pouvez compter lorsque vous décidez de libérer
Diviser pour construire votre propre site. Nous couvrons presque tous les principaux facteurs qui augmentent la vitesse du site Divi \/ wordpress. Mais il y a beaucoup d’autres choses à considérer qui pourraient vous accélérer davantage. Configurer correctement l’url de connexion du sous – thème Divi Edit wordpress pour empêcher ces robots de surcharger le serveur. Ce sera une bonne occasion de créer une page de connexion personnalisée en utilisant Divi. Évitez les appels de service externes inutiles. Certains plug – ins et intégrations nécessitent l’utilisation de fichiers hébergés sur leurs serveurs. Ces appels supplémentaires réduiront la vitesse de chargement de la page. Utilisez le chargement lent d’images et de vidéos pour accélérer le chargement de la page. L’optimisation intégrée des performances à l’aide de Divi et d’autres plug – ins de performance tiers, Divi, accélérera chaque site Divi en éliminant l’expansion qu’aucun plug – in de performance ne peut éliminer. En d’autres termes, en plus de l’optimisation intégrée de Divi, vous pouvez utiliser d’autres plug – ins de performance tiers pour accélérer votre site. Les améliorations de performance Divi ne s’appliquent qu’à Divi et non aux plug – ins tiers, de sorte que les plug – ins de performance peuvent vous apporter des avantages dans des domaines autres que Divi. Par exemple, vous pouvez encore profiter des avantages de la mise en cache des sites Web et de l’utilisation du CDN. Les plug – ins de performance qui gèrent les conflits parce que Divi est optimisé, l’utilisation de plug – ins de performance tiers peut causer des conflits. Il est donc important de mettre à jour le thème Divi à l’avance et de tester soigneusement tous les plug – ins tiers. Nous faisons de notre mieux pour tester l’optimisation intégrée de Divi avec d’autres plug – ins d’optimisation populaires. Mais tous les SF ne peuvent pas être évalués