5 conseils pour créer les sites Web les plus rapides dans Divi 5 (Public Alpha)

Divi 5 est le résultat d’années d’efforts pour créer la meilleure expérience WordPress. L'optimisation de chaque interaction et aspect de Visual Builder et du front-end en a joué un rôle majeur. En fin de compte, vous pourrez profiter de ces améliorations, mais il existe des moyens de vous appuyer sur Divi 5 pour obtenir les meilleurs résultats.

Cet article explorera les avantages en termes de performances intégrés à Divi 5 et comment vous pouvez utiliser pleinement ces optimisations pour créer les sites Web les plus rapides possibles.

Apprenez-en plus sur la Divi 5 Public Alpha et comment la télécharger.

Téléchargez l'Alpha de Divi 5 Essayez la démo de Divi 5 Devenez un testeur de bugs de Divi 5

Divi 5 est conçu pour être rapide

Divi 5 a été entièrement réécrit, avec les performances comme priorité absolue. Contrairement à Divi 4, qui a été construit avec des codes courts, Divi 5 utilise une structure plus moderne, basée sur des blocs. Ce changement à lui seul a considérablement réduit le temps passé à traiter le contenu et à charger les pages. Ce nouveau framework nous a également permis de réduire considérablement le chargement HTML, ce qui signifie que vos pages se chargent plus rapidement, notamment sur les mises en page longues et complexes.

De plus, Divi 5 inclut une structure de fichiers JavaScript beaucoup plus petite et plus efficace. Tous les scripts sont extraits et mis en file d'attente uniquement en cas de besoin, ce qui signifie qu'un code inutile ne ralentit pas les performances de votre site Web. Apprenez-en davantage sur les améliorations de performances de Divi 5.

Toutes ces améliorations rendent Divi 5 plus rapide dès la sortie de la boîte, mais vous pouvez suivre plusieurs étapes pour rendre vos sites encore plus rapides.

5 conseils pour créer les sites Web Divi 5 les plus rapides

Créer un site Web incroyablement rapide avec Divi devient désormais plus simple. Tout cela est dû aux augmentations spectaculaires des performances de Divi 5 et aux fonctionnalités intégrées qui facilitent la création de sites Web performants. Nous sommes convaincus de tirer le meilleur parti de Divi et de reprendre du terrain.

1. Réduisez le nombre de types de modules sur une page

L’un des plus grands avantages de la reconstruction de Divi 5 est qu’elle ne charge pas inutilement des ressources inutiles. Cela se remarque particulièrement avec les modules Divi, chaque module ajoutant ses propres styles et scripts uniques à une page. Plus votre utilisation des types de modules est diversifiée, plus de ressources sont nécessaires pour afficher la page. Maintenant, ce n’est pas très grave, mais si vous êtes soucieux des performances, c’est quelque chose d’important à retenir (cela s’applique à tout constructeur de site Web ou de page).

Vue du module d'insertion de Divi 5

Pour rationaliser les ressources et accélérer votre site, concentrez-vous sur l'utilisation d'un nombre limité de types de modules de base sur une page donnée. Un excellent moyen de mettre en œuvre cette stratégie consiste à utiliser la bibliothèque Divi et Divi Cloud. Vous pouvez facilement réutiliser des éléments prédéfinis en enregistrant des modules, sections et mises en page individuels. Cela garantit que les mêmes styles et modules sont appliqués de manière cohérente, réduisant ainsi le risque de gonfler la page avec des variations inutiles.

L'enregistrement des lignes/sections/modules vous permet de réutiliser facilement ces éléments (avec les mêmes paramètres de style) ailleurs sur votre page ou votre site Web.

Se souvenir des modules que vous avez déjà utilisés sur une page semble pouvoir vous limiter, mais il existe plusieurs façons de concevoir une page. L'exemple ci-dessous montre deux façons de créer la même chose avec des dispositions de modules différentes. Selon que le module Blurb est déjà utilisé ou non sur la page, vous pouvez choisir de concevoir cette partie de la page avec lui ou en la morcelant.

Utilisation de 3 modules séparés (à gauche) ou d'un module Blurb (à droite). Le choix peut dépendre des modules que vous avez déjà utilisés.

Ne vous inquiétez pas trop à ce sujet. Si votre page nécessite un certain élément, vous devez le créer. Mais lorsque vous disposez de plusieurs façons de créer quelque chose, vous pouvez facilement utiliser des modules déjà utilisés sur la page afin de ne pas charger de ressources supplémentaires.

2. Utilisez les préréglages globaux pour réduire les CSS

L’un des moyens les plus efficaces d’améliorer les performances de votre site Web dans Divi 5 consiste à utiliser les préréglages. Lorsque vous appliquez des préréglages à un élément, Divi 5 génère moins de CSS car il utilise un système basé sur les classes qui partage les styles sur plusieurs éléments. Lorsque plusieurs éléments utilisent les mêmes styles, votre page génère moins de CSS pour le même niveau de conception.

La création de préréglages globaux pour les modules fréquemment utilisés, tels que les boutons, les en-têtes et les sections, élimine le besoin d'ajuster manuellement les styles pour chaque nouvelle instance. Cela réduit considérablement la quantité totale de CSS personnalisé généré, sans parler du temps nécessaire pour styliser votre site Web.

Voici quelques idées sur la façon dont vous pouvez commencer à utiliser les préréglages dans votre flux de conception :

• Préréglage de ligne : vous pouvez ajouter des paramètres tels que la structure des colonnes, la largeur de la gouttière, le remplissage et les styles d'arrière-plan à un préréglage de ligne. Cela permet de maintenir un espacement et des styles visuels cohérents pour les lignes de votre site.
• Préréglage de section : les préréglages de section vous permettent de définir les couleurs d'arrière-plan, les dégradés ou les images, le remplissage et l'espacement, ainsi que les paramètres de visibilité tels que les conditions d'affichage ou le CSS personnalisé pour des appareils spécifiques.
• Préréglage de module (par exemple, module de boutons) : un préréglage de module vous permet d'ajouter des paramètres tels que les styles de texte des boutons, les couleurs, les effets de survol, le rayon de la bordure, les ombres et l'alignement. Cela garantit que les boutons de votre site Web sont cohérents et correspondent à votre thème de conception. Vous pouvez créer plusieurs variantes, mais l’utilisation des mêmes préréglages sur une seule page augmentera les économies de style.

3. Évitez le contenu Divi 4 pour améliorer les performances

Si vous souhaitez obtenir les meilleures performances de Divi 5, vous aurez besoin que chaque page soit entièrement migrée. Depuis que nous avons lancé Divi 5 en tant qu'alpha publique, il manque quelques fonctionnalités qui seront disponibles d'ici peu (même si la plupart de ce à quoi vous vous attendez est déjà là). Si votre page utilise un élément que Divi 5 ne prend pas encore en charge, cette page ne pourra pas être entièrement migrée vers D5. Dans ces événements, le framework Divi 4 est chargé pour ces pages (pour une compatibilité ascendante), ce qui signifie que la page fonctionne toujours mais ne bénéficie pas des avantages de la vitesse des pages de Divi 5.

Exemple de Divi 5 Migrator détectant du contenu D4 non pris en charge

Pour profiter pleinement des optimisations de Divi 5, utilisez l'outil de migration intégré pour analyser votre site Web à la recherche de contenu Divi 4. Le migrateur mettra en évidence tous les modules, modèles ou plugins qui ne sont pas encore pris en charge dans Divi 5.

Si vous souhaitez utiliser pleinement Divi 5 dès maintenant, vous devrez convertir ou remplacer ces éléments par des éléments compatibles Divi 5. Si vous n'êtes pas pressé, vous pouvez attendre les mises à jour successives de Divi 5 Public Alpha, qui pourront apporter plus de compatibilité pour les éléments actuellement affichés comme non pris en charge. En savoir plus sur la migration Divi 5.

4. Limiter les animations et les effets, en particulier au-dessus de la ligne de flottaison

Les animations et les effets peuvent améliorer la conception d'un site Web, mais ils ajouteront certainement un temps de chargement supplémentaire, en particulier pour le contenu situé au-dessus de la ligne de flottaison. Cette zone est cruciale pour la performance perçue puisque c'est la première chose que voient les utilisateurs. Des temps de chargement plus lents ici peuvent avoir un impact négatif à la fois sur l'expérience utilisateur et sur les éléments essentiels du Web de votre site Web, en particulier des mesures telles que Largest Contentful Paint (LCP) et Cumulative Layout Shift (CLS).

Limitez ou éliminez les animations et les effets dans votre section héros et tout autre contenu au-dessus de la ligne de flottaison pour améliorer les performances de votre site. Concentrez-vous plutôt sur la fourniture d’éléments de page statiques et légers qui se chargent rapidement.

Si vous devez utiliser des animations, assurez-vous qu'elles sont minimes et n'interféreront pas avec le chargement initial de la page. L’utilisation des préréglages de module est un excellent moyen de garantir une utilisation cohérente de l’animation entre les modules (et donc de ne pas charger inutilement des styles d’animation supplémentaires).

5. Utilisez des vignettes cliquables pour les vidéos intégrées

L'intégration de vidéos directement à partir de plateformes comme YouTube peut ralentir le temps de chargement de votre page en raison des scripts et des ressources supplémentaires requis par ces intégrations. Au lieu d'intégrer directement la vidéo, utilisez une vignette cliquable qui ouvre la vidéo dans une lightbox ou un nouvel onglet. De cette façon, la vidéo et ses ressources associées ne se chargeront pas tant que l'utilisateur n'interagira pas avec elles, réduisant ainsi le temps de chargement initial de votre page.

Le module vidéo de Divi rend cela vraiment simple. Sous l'onglet « Contenu », vous verrez une zone d'options intitulée « Superpositions ». Vous pouvez ensuite ajouter une image optimisée en superposition ou en générer une automatiquement à partir de la vidéo YouTube elle-même.

Cette technique évite les requêtes inutiles lors du premier chargement de la page, ce qui permet à votre site Web de fonctionner plus rapidement. C'est un moyen simple d'améliorer les performances des pages tout en fournissant du contenu vidéo.

Récapitulatif : 5 astuces pour des sites Divi 5 plus rapides

• Réduisez le nombre de types de modules : réduisez le nombre de modules différents sur une page pour rationaliser le chargement des ressources.
• Utiliser les préréglages globaux : appliquez des préréglages pour réduire les CSS personnalisés et créer des conceptions cohérentes.
• Migrer entièrement vers Divi 5 : utilisez le Divi 5 Migrator pour analyser et remplacer tout contenu Divi 4 non pris en charge.
• Limiter les animations : réduisez les animations et les effets, en particulier dans la section des héros, pour un chargement initial plus rapide.
• Utilisez des vignettes cliquables pour les vidéos : remplacez les vidéos intégrées par des vignettes cliquables pour éviter de charger des scripts inutiles.

Conclusion

Divi 5 apporte de nombreuses améliorations de performances intégrées, le rendant nativement plus rapide que les anciennes versions de Divi. Son élimination des codes courts, sa construction sur de meilleures technologies (plus récentes) et ses fonctionnalités axées sur les performances contribuent toutes à une expérience utilisateur plus fluide et plus rapide. Vous devez également utiliser les meilleures pratiques standard telles que l'optimisation des images, l'utilisation d'un hôte rapide et fiable, l'utilisation d'un CDN ou d'une mise en cache périphérique et l'élimination des fichiers/codes inutilisés.

Pour résumer ce que nous avons couvert, vous pouvez améliorer considérablement les performances de votre site Web en réduisant le nombre de types de modules sur chaque page, en tirant parti des préréglages globaux, en garantissant que votre contenu est entièrement migré depuis Divi 4, en minimisant les animations et en utilisant des vignettes d'images pour les vidéos. Ces petits ajustements vous aident à profiter pleinement de l’architecture optimisée de Divi 5, garantissant que vos sites Web ont fière allure et se chargent à des vitesses fulgurantes.

N'oubliez pas que même si Divi 5 est conçu dans un souci de rapidité, la façon dont vous créez et structurez vos pages joue toujours un rôle essentiel dans l'optimisation de ces performances.

Téléchargez la démo de Divi 5 Alpha Essayez la démo de Divi 5

Aidez-nous à rendre Divi 5 encore meilleur en participant au processus de bug-testing ! Vos commentaires nous aideront à affiner Divi 5 et à résoudre les problèmes dès le début du processus de développement.

Devenez un testeur de bugs Divi 5