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. Maintenant, regardons de plus près ce qui rend la création d’un site Divi ultra – rapide si facile. Cadre de module dynamique la fonction cadre de module dynamique améliore considérablement la vitesse du site Web en sélectionnant et en exécutant des fonctions PHP à la demande. Divi Dynamics ne rend que la logique nécessaire pour les modules et les fonctionnalités utilisés sur chaque page: tout le reste est exclu. En d’autres termes, tout ce qui peut être considéré comme \
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. Tout comme Divi gère et charge dynamiquement les formulaires au besoin, Divi fait de même pour toutes les fonctionnalités utilisées sur la page. Au lieu de traiter toutes les fonctionnalités possibles (effets de défilement, animation, options permanentes, options de bord, etc.) sur l’élément Divi, Divi ne traite que des fonctions qui sont réellement utilisées dans le projet. Cette fonction n’a pas
N pour les modules seulement, mais pour tout élément Divi, y compris les sections, les lignes et les colonnes. Pour accélérer le site, nous avons optimisé le javascript de Divi pour le rendre plus concis et modulaire. Cela permet à Divi de charger dynamiquement le javascript au besoin. Divi ne charge et ne traite les fonctions JavaScript (telles que les options collantes) et les bibliothèques JavaScript externes (telles que les menus contextuels zoomés) que si les modules ou les fonctions de la page les nécessitent. La combinaison d’une plus petite taille de fichier javascript de base et d’une bibliothèque JavaScript dynamique améliorera certainement la vitesse du site, car chaque page a moins de code à charger. Les scripts inutilisés seront supprimés. Parce que cette logique anti – expansion est page par page, si la page a une ligne collante, vous n’avez pas à vous soucier du JavaScript collant chargé sur la page sans ligne collante. C’est la beauté du JavaScript dynamique Divi.
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. Voir jquery et jquery migrate si possible, jquery et jquery migrate sont déplacés dans le corps pour supprimer les requêtes de bloc de rendu et accélérer le temps de chargement. Comme le montre la figure suivante, si vous chargez le script jquery à l’avance (dans l’en – tête), il suspend l’analyse HTML jusqu’à ce que le script s’exécute. Cela ralentira le rendu de la page D’autre part, si un plug – in tiers enregistre jquery comme une dépendance, il est signalé au début pour éviter les conflits. Questions
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) Qu’est – ce que ttfb? Le temps au premier octet (ttfb) est le temps qu’il faut à l’utilisateur pour recevoir le premier octet des données du site Web de l’hôte \ serveur. Par conséquent, lorsque l’utilisateur fait une demande http (pour charger votre page Web), ttfb est essentiellement le temps d’attente avant que le navigateur ne reçoive les données. C’est important parce que plus le ttfb est long, plus il faut de temps pour charger la page. Pensez – y comme un fast – food. Le restaurant peut être optimisé pour fournir rapidement de la nourriture. En fait, ils ont peut – être déjà un hamburger pour toi. Mais il faut faire la queue pour passer une commande. Vous pouvez considérer le temps d’attente comme le moment de la première bouchée (voir ce que j’ai fait là – Bas). Ttfb devrait être d’environ 200 millisecondes (selon les données de Google). Mais pour les sites mal gérés et non optimisés, ttfb peut facilement atteindre 2 secondes ou plus. Qu’est – ce qui ralentit la ttfb? Les retards de ttfb sur les sites Divi sont généralement causés par la quantité de contenu dynamique à recevoir. Cela peut être réduit par la mise en cache, l’optimisation de la base de données et le CDN. Trafic sur le serveur à ce moment – là. Il est difficile pour un fournisseur d’hébergement traditionnel (ou partagé) de désactiver ttfb parce que vous partagez des ressources avec d’autres personnes sur le même serveur. Les pointes de trafic réduisent la vitesse de traitement du serveur. Configuration du serveur Web. Un bon fournisseur d’hébergement WordPress peut vous aider à gérer la ttfb de votre site en fournissant une infrastructure d’arrière – plan fiable et en optimisant la configuration de votre serveur Web (les choses sont en fait hors de votre contrôle). Comment accélérer la ttfb du site Divi la ttfb est l’une des clés du site (et
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 Comment le DNS affecte la vitesse du site C
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. Par exemple, vous voudrez peut – être utiliser cloudflare pour le DNS et la sécurité (détection DDOS) et keycdn (ou maxcdn) pour votre CDN. Ça a l’air d’une bonne combinaison. Configurer cloudflare cloudflare est très facile. Vous n’avez pas à vous soucier de changer d’hôte ou de faire quoi que ce soit à l’avance. Tout ce que vous avez à faire est de suivre leur configuration de 5 minutes, en commençant par entrer dans votre domaine. Ils récupéreront automatiquement vos enregistrements DNS actuels. La principale chose que vous devez faire pour compléter la configuration est de changer le serveur de noms par défaut sur votre fournisseur DNS actuel, comme GoDaddy, en un serveur de noms cloudflare. Ainsi, vous pouvez facilement gérer le DNS à partir de son tableau de bord. Oui, votre recherche DNS est plus rapide, votre sécurité est améliorée et votre site Web a un CDN (et ainsi de suite). En parlant de CDN, vous devez utiliser un 5 Utilisation du réseau de distribution de contenu (CDN) Stackpath CDN POP Content Distribution Network (CDN) augmente la vitesse du site à un autre niveau. Comme son nom l’indique, le CDN est un réseau de distribution de contenu. Le réseau se compose de serveurs dans le monde entier qui stockent des fichiers statiques mis en cache (images, vidéos, scripts, etc.) Contenu du site. Ensuite, lorsqu’une personne présente une demande de contenu (pour accéder à votre site Web), le contenu est livré par le serveur (ou POP) le plus proche de la personne. Sans CDN, les fichiers de votre site Web sont accessibles à partir de l’emplacement du serveur (peu importe où votre hôte les stocke), de sorte que plus vous vous éloignez de ce serveur, plus le contenu du site Web est livré à votre navigateur. Pensez à ne pas choisir une pizzeria à 30 miles d’ici quand vous voulez livrer la pizza à la maison. Choisissez celui qui est à 5 miles parce que vous voulez qu’il arrive le plus vite possible (si vous êtes une personne normale comme moi qui aime la pizza). Le CDN fonctionne de la même manière. Puisque vous souhaitez que le site apparaisse dans votre navigateur dès que possible, CDN sera prêt à transférer vos fichiers de site à partir du serveur le plus proche de vous. Ainsi, si vos fichiers de site sont stockés sur un serveur à San Francisco et que quelqu’un à Londres appelle votre site, il peut prendre 1 à 2 secondes pour recevoir des données d’un serveur à des milliers de kilomètres. Mais avec CDN, vous pouvez fournir les mêmes données à partir d’un serveur londonien en moins de la moitié du temps. C’est une grande différence! Ainsi, même si vous ne voyez pas tous les résultats à la maison, vous Accélérez la livraison globale du site. Il existe de nombreuses façons d’obtenir un CDN pour votre site. Beaucoup de sociétés de logement La minimisation réduit les fichiers du site. Réduire au minimum les fichiers du site (CSS, Javascript, HTML) réduit la taille du fichier en supprimant tous les caractères inutiles tels que les espaces et les sauts de page. Cela réduit le temps qu’il faut au navigateur pour charger le contenu de la page. L’agrégation consiste à fusionner les fichiers du site afin de réduire le nombre total de demandes de page et d’accélérer le temps de chargement des visiteurs. Comme indiqué ci – dessus, Divi minimise et combine dynamiquement JavaScript et CSS par défaut. Par conséquent, techniquement, vous n’avez pas à vous soucier d’utiliser des plug – ins tiers pour réduire et combiner davantage le javascript et le CSS de Divi. Cependant, Divi ne minimise pas la sortie HTML. Par conséquent, vous pouvez utiliser des plug – ins tiers pour minimiser (et mettre en cache) l’ensemble du HTML de la page. De plus, presque tous les sites Divi s’appuieront sur des fichiers autres que le sujet Divi (p. ex., des plug – ins ou d’autres fichiers ajoutés au sous – thème) qui bénéficieront de la minimisation et de la combinaison des fichiers CSS et JS. L’une des meilleures façons d’ajouter un minimum de HTML, JS et css pour l’ensemble du site est d’utiliser cloudflare. Cloudflare utilise la réduction automatique pour réduire la taille des fichiers de tout code source sur le site. Il est également livré avec une version gratuite de la configuration standard. Quelques plug – ins fiables pour minimiser les fichiers du site, y compris: auto – optimisation du cache total W3 (lire nos commentaires) W3 super cache (lire nos commentaires) WP rocket (payer) Ces plug – ins doivent être utilisés avec Divi. Mais il n’y a aucun moyen d’évaluer toutes les nuances d’un site Web et de dire qu’il serait meilleur pour tout le monde. Parfois, les plug – ins tiers réduisent automatiquement les fichiers JavaScript d’une manière qui peut causer des erreurs \ problèmes, donc assurez – vous que votre site Web est testé à fond. En général, c’est toujours sûr.
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 L’optimisation de l’image est l’un des principaux coupables de la lenteur du chargement des pages. C’est peut – être parce qu’il est facile de l’ignorer. Après tout, à quel point les images de fond peuvent – elles endommager les pages Web? Vous pourriez être surpris. Seules quelques grandes images qui ne sont pas optimisées pour le Web peuvent avoir des conséquences désastreuses sur la vitesse de chargement des pages. Face à la réalité, votre site peut avoir beaucoup d’images. Il n’est vraiment pas nécessaire d’insister trop sur la nécessité d’optimiser l’image. Chaque site Web devrait. La compression d’images à elle seule permet d’accélérer considérablement votre site, et une plus petite taille d’image permet d’économiser du stockage et de la bande passante (gagnant – gagnant!). Mais vous devriez également envisager d’autres optimisations d’image importantes. En bref, lors de l’optimisation d’une image pour le Web, nous vous recommandons de faire ce qui suit: utiliser le bon type de fichier lorsqu’il s’agit d’images sur le Web, vous devriez vraiment insister sur les types de fichiers imm suivants
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 L’optimisation vidéo est plus difficile que l’optimisation d’image, mais elle n’est certainement pas moins importante que l’optimisation d’image. Les fichiers vidéo peuvent être volumineux, de sorte que les pages peuvent être chargées très rapidement. Si vous dirigez
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 L’utilisation d’un plug – in de haute qualité est un facteur clé du plug – in. En fait, vous pouvez avoir 10 plugins de haute qualité qui ne ralentissent pas votre site comme un mauvais plugin. Dans l’ensemble, assurez – vous de sélectionner les plug – ins qui ont réussi l’épreuve du temps et qui ont de bons commentaires. Et vérifiez toujours l’impact du plug – in sur la performance du site par des tests de vitesse avant et après. Supprimer les plug – ins inutilisés ou périmés en plus d’utiliser des plug – ins de haute qualité, il est également important de supprimer tous les plug – ins inutilisés et \ ou périmés du site. Ils peuvent nuire au rendement du site et présenter de graves risques pour la sécurité. De plus, chaque plug – in (même de haute qualité) ajoutera des ressources supplémentaires, ce qui augmentera le temps de chargement de chaque page. Si vous voulez un site Divi rapide, nous vous recommandons d’utiliser le moins de plug – ins possible. Attention aux erreurs de blocage du rendu Divi n’a pas de ressources pour rendre le blocage
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

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *