Comment créer la page Divi la plus rapide : Optimiser votre contenu Divi pour la vitesse

Avec la nouvelle mise à jour des performances de Divi, une tonne de possibilités pour augmenter les scores de vitesse de page. Aujourd'hui, nous partageons quelques conseils et astuces pratiques que vous devez garder à l'esprit lorsque vous créez une page Divi à partir de zéro. Il s'agit de recommandations et non de règles immuables. Cela se résumera toujours aux objectifs principaux de votre page. Parfois, vous vous retrouverez à sacrifier une certaine vitesse pour la conception et vice versa. Nous pensons qu'il s'agit de trouver un équilibre sain entre les deux, mais en utilisant les conseils ci-dessous, vous pouvez certainement améliorer la vitesse de votre page Divi.

Plongeons-y !

Abonnez-vous à notre chaîne Youtube

1. Optimiser le contenu au-dessus du pli

L'une des nouvelles fonctionnalités de performances qui ont été ajoutées à Divi s'appelle Critical CSS. En bref, Critical CSS dans Divi détecte automatiquement quel CSS doit être chargé immédiatement, appelé CSS au-dessus de la ligne de flottaison, et retarde le chargement du reste du CSS de la page. Cela aide déjà à améliorer automatiquement la vitesse de la page, sans que vous ayez à faire des efforts. Mais si vous voulez aller plus loin, vous pouvez également décider d'optimiser le contenu au-dessus de la ligne de flottaison.

Concept de héros à 4 modules

Il peut être tentant de partager autant d'informations que possible avec vos visiteurs, à première vue, mais c'est exactement ce que vous devriez éviter chez un héros. Plus votre contenu est direct, à la fois en termes de style et de visuel, mieux c'est. C'est pourquoi limiter le nombre de modules que vous utilisez au-dessus du pli vous aidera à booster la vitesse de votre page Divi. De préférence, vous utiliseriez :

• Titre
• Paragraphe
• Bouton

Cependant, dans de nombreux cas, vous voudrez également inclure une image quelconque. Si vous le faites, essayez d'éviter d'utiliser l'image comme arrière-plan et utilisez-la plutôt comme module. L'utiliser comme module à l'intérieur d'un conteneur particulier avec une largeur maximale vous aidera à utiliser des dimensions d'image plus petites, ce qui vous aidera à accélérer votre site. Cela nous amène au concept de héros à 4 modules :

• Titre
• Paragraphe
• Bouton
• Image optimisée

Utilisez Fullscreen Hero ou divisez le contenu en plusieurs sections pour une détection automatique précise

Il y a une raison pour laquelle les conceptions de héros en plein écran sont populaires. Non seulement ils rendent votre conception plus respirante, mais ils aident également avec le CSS critique. Si vous choisissez d'opter pour un héros en plein écran, vous décidez que c'est la seule chose qui apparaît au-dessus du pli, quelle que soit la taille d'écran que vous utilisez. Pour créer un héros en plein écran dans Divi, n'oubliez pas d'attribuer une hauteur minimale de « 100vh » dans les paramètres de la section. En attribuant une hauteur minimale ; vous vous assurez que la section couvre toute la hauteur du navigateur. Vous pouvez placer n'importe quoi à l'intérieur de la section pour faire partie de la conception de votre héros à partir de ce moment. Ou, vous pouvez également utiliser l'en-tête plein écran intégré de Divi.

Alternativement, si vous ne souhaitez pas suivre la route des héros en plein écran, vous pouvez décider de diviser ce qui se trouve au-dessus du pli en plusieurs sections. Divi détectera automatiquement ce qui apparaît au-dessus du pli au niveau d' une section. Cela signifie que si vous créez une grande section qui apparaît en partie au-dessus du pli et en partie en dessous du pli, le CSS de la section entière et le CSS des éléments de cette section seront chargés. Diviser les sections en plusieurs sections vous aidera à éviter que trop d'éléments soient traités comme s'ils étaient au-dessus du pli.

Évitez les animations dans Hero pour éviter les retards

Tout ce qui se trouve au-dessus du pli qui peut entraîner un retard dans le temps de chargement est bon à éviter. Cela inclut les animations. Ceci, cependant, ne signifie pas que vous devriez l'éviter complètement. Vous pouvez facilement utiliser des animations en bas de la page et/ou limiter les animations que vous utilisez à l'intérieur de votre héros. Trouver un bon équilibre est la clé.

Modifier le contenu au-dessus du pli sur tablette et mobile

La dernière chose qu'il est important de mentionner concernant Critical CSS est la modification de votre conception sur des écrans de plus petite taille. Il est important de vous assurer que votre contenu au-dessus de la ligne de flottaison est optimisé pour différentes tailles d'écran. Il s'agit de peaufiner la conception afin que vous puissiez atteindre un excellent score de vitesse de page sur ordinateur et mobile. Vous pouvez, par exemple, masquer l'intégralité de l'image du héros sur mobile pour augmenter la vitesse de votre page sur des écrans plus petits.

2. Utiliser des styles intelligents

Comment fonctionnent les styles intelligents

Avec la nouvelle mise à jour des performances, Divi a été optimisé en réduisant les styles en double. Pour activer les styles intelligents, vous devrez plonger dans le monde des préréglages Divi. Les préréglages vous permettent essentiellement de partager des styles avec différents éléments sans avoir à affecter un bloc de styles unique à chaque élément stylisé de la même manière.

Utilisation de 1 ou 2 préréglages pour les sections et les rangées

Les sections et les lignes sont deux types d'éléments qui semblent souvent être oubliés lorsque nous parlons de préréglages. Tout comme les modules, vous pouvez affecter des préréglages aux sections et aux lignes. Non seulement cela vous aidera à limiter le CSS généré, mais cela vous aidera également à maintenir la cohérence de la conception au niveau de la page. Supposons, par exemple, que vous souhaitiez utiliser systématiquement un rembourrage supérieur et inférieur de 100 pixels pour chaque section, pour créer un rythme vertical, il n'y a aucune raison pour que vous ne puissiez pas bénéficier des préréglages Divi dans le processus. Créez un nouveau préréglage pour une section qui utilise ces valeurs de remplissage et attribuez-le à chaque nouvelle section que vous ajoutez ou faites-en le préréglage de section par défaut.

Vous pouvez également configurer un préréglage de rangée avec une largeur et une largeur maximale de votre choix et faire en sorte que ce soit la norme. Jouez avec ces préréglages et découvrez comment ils facilitent non seulement votre processus de conception, mais vous aident également à améliorer les scores de vitesse de page.

Utiliser des préréglages pour les modules

Bien sûr, vous voudrez également utiliser des styles intelligents pour les modules. Dans l'exemple ci-dessous, vous remarquerez que l'apparence générale de chaque module est similaire. La création d'un préréglage pour le module Blurb vous aidera à garder le fichier CSS de votre page petit.

Remplacer un préréglage ou non ?

Mais vous ne devriez pas créer un nouveau préréglage pour chaque petit changement. Dans l'exemple ci-dessus, par exemple, vous pouvez remarquer que les deux derniers modules Blurb ont une couleur de texte différente. Vous pouvez créer un nouveau préréglage pour cela, en dupliquant l'ancien, ou vous pouvez décider de remplacer le préréglage. Dans ce cas, il est plus logique de simplement remplacer la couleur du texte (ce qui conduit à une ligne supplémentaire de code CSS) plutôt que de créer un nouveau préréglage et d'ajouter plusieurs lignes de code CSS.

3. Associer les choix de conception à la vitesse

Limitez la sélection de modules que vous souhaitez utiliser (modules dynamiques)

Lorsque vous sélectionnez les modules que vous souhaitez utiliser pour la page que vous créez, il est bon de garder à l'esprit qu'ils seront chargés dynamiquement. Cela signifie que si vous n'utilisez pas un certain module, cela n'aura aucun effet sur la vitesse de votre page. Vous voudrez considérer chaque module que vous ajoutez et voir s'il en vaut la peine. Cependant, dans un scénario idéal, vous vous assurerez que le reste de votre contenu Divi est suffisamment optimisé pour que vous n'ayez pas à sacrifier des modules.

Trouvez le LCP de votre conception et optimisez-le

Une autre chose qui peut vous aider à améliorer la vitesse de votre page est de trouver votre plus grande peinture de contenu et de l'optimiser. En bref, votre LCP est le plus grand élément de votre page qui aide à déterminer votre score de vitesse de page. Vous pouvez en savoir plus à ce sujet ici. En vous assurant que le LCP de votre conception est optimisé, vous pouvez réduire considérablement le temps de chargement de votre page.

Choisir un style d'animation (fonctionnalités dynamiques)

Tout comme nous avons des modules dynamiques, nous avons également des fonctionnalités dynamiques. Cela signifie que si vous n'utilisez pas du tout une certaine fonctionnalité sur votre page, elle ne sera pas chargée, ce qui entraîne une vitesse de page plus élevée. Pour cette raison particulière, il est important de vous assurer de choisir un style d'animation et de vous y tenir. Vous pouvez, par exemple, choisir d'utiliser des effets de mouvement et concentrer toute l'animation sur votre page autour de cette fonctionnalité. Ou vous pouvez opter pour des paramètres d'animation réguliers et suivre cet itinéraire. Non seulement cela vous permet de créer une page légère, mais cela renforce également la prévisibilité, ce qui, du point de vue de l'expérience utilisateur, est généralement une bonne chose.

Appariement de polices : s'en tenir à 1 ou 2 familles de polices

Nous vous recommandons également de vous en tenir à un maximum de 2 familles de polices pour les pages que vous concevez. Ce faisant, vous limitez le nombre de polices qui doivent être chargées avant d'entrer dans la page.

4. Optimisation manuelle

Contenu réactif : réduisez la taille des images sur mobile

Une autre chose qui vous aidera à augmenter les scores de vitesse des pages mobiles est l'utilisation de contenu réactif dans Divi. C'est probablement l'une des fonctionnalités qui peut vous aider à améliorer au mieux vos scores sur des écrans plus petits. Bien que cela demande beaucoup plus d'efforts, cela en vaut vraiment la peine. Réduisez les dimensions/taille de votre image grâce à un logiciel de retouche d'image et utilisez ces images plus petites sur mobile, par opposition à celles que vous affichez sur le bureau. Cela réduira considérablement la taille de vos fichiers image et entraînera une vitesse de page plus élevée sur mobile.

Types de fichiers et compression

Assurez-vous de vous en tenir au JPEG autant que possible, car ceux-ci ont tendance à avoir une taille de fichier inférieure. Le format PNG n'a généralement de sens que si vous avez besoin de transparence dans votre image pour élever le design, mais même dans ce cas, vous pouvez essayer de trouver une alternative pour que le design fonctionne. Évitez également les types de fichiers encore plus lourds, tels que GIF. Quant à la vidéo, c'est généralement interdit, surtout si vous voulez qu'elle soit lue en arrière-plan. Et bien sûr, assurez-vous de compresser les fichiers que vous utilisez, avant même de les télécharger dans votre médiathèque WordPress.

Dans les coulisses

Tous les conseils ci-dessus peuvent vous aider à améliorer la vitesse des pages, mais il est toutefois important de mentionner que vous devez vous occuper des meilleures pratiques d'optimisation de site Web en dehors de Divi. Vous pouvez trouver plus d'informations techniques en consultant ce guide ultime.

Créer des pages rapides avec Divi, plus facilement que jamais

Nous pouvons facilement conclure qu'il existe un grand chevauchement entre les fonctionnalités de performance de Divi et la façon dont vous gérez la création de votre site Web. Divi s'occupe du côté partiel, vous pouvez donc vous concentrer sur les meilleures pratiques frontend qui sont nécessaires pour tout rassembler dans un site Web beau et rapide. S'il existe des bonnes pratiques qui ont bien fonctionné pour vous, n'hésitez pas à les partager dans la section commentaires ci-dessous pour poursuivre la conversation !