Thème Divi

Dans cette documentation

Options Performance de Divi 4.10

Divi 4.10 a introduit diverses fonctionnalités de performance. Voici les compatibilités avec WP Rocket 3.9.3 :

  • L’option Supprimer les ressources CSS inutilisées est compatible avec l’option CSS Critique de Divi
  • Les options Chargement différé des fichiers JavaScript et Reporter l'exécution JavaScript de WP Rocket sont compatibles avec Enqueue jQuery Compatibility Script de Divi.
  • Vous pouvez définir ces exclusions de compatibilité dans l'option de WP Rocket Reporter l'exécution JavaScript afin de charger les éléments animés de Divi sans interaction.
  • Aucun problème n'a été signalé avec d'autres fonctionnalités de Divi telles que Defer jQuery et jQuery Migrate, Disable WordPress Emojis et Defer additional third party scripts, cependant, il est recommandé de les désactiver et d'utiliser uniquement les fonctionnalités de WP Rocket pour éviter d'avoir des optimisations dupliquées.
  • Si vous remarquez des problèmes de mise en page, vous devriez essayer d'exclure le fichier CSS dynamique de Divi des fichiers CSS combinés de WP Rocket. Cela ne s'applique que lorsque la combinaison de paramètres suivante est respectée :   
    • L'option Combiner les fichiers CSS de WP Rocket est activée.
    • L'option Supprimer les ressources CSS inutilisées de WP Rocket est désactivée.
    • L'option Chargement de la feuille de style dynamique en ligne de Divi est activée.

Split testing - Divi Leads

Le module de split testing de Divi, appelé Divi Leads, n'est pas compatible avec la mise en cache car il repose sur PHP, qui n'est pas disponible sur une page mise en cache.

Le module Blog disparaît

Le module Blog de DIVI n'est pas compatible avec l'option  Optimiser le chargement du CSS. Pour le résoudre, vous pouvez :

Ou

  • Exclure la principale feuille de style de Divi de l'option Optimiser le chargement du CSS :
    Exclure des fichiers de l'option Optimiser le chargement du CSS
  • Normalement le chemin du fichier est le suivant : /wp-content/themes/Divi/style.css mais si vous utilisez un thème enfant il sera différent.
  • Si vous avez également activé Combiner les fichiers CSS dans WP Rocket, vous devez exclure le même fichier de cette option :

Minifier / Combiner CSS/JS - Static File Generation

Si vous utilisez Divi 3.26.8 ou une version ultérieure, il n'est pas nécessaire d'appliquer les changements décrits dans ce paragraphe.

Pour les anciennes versions de Divi (< 3.26.8), l'effacement du cache des fichiers CSS statiques de Divi n'est pas synchronisé avec celui de WP Rocket. Cela peut entraîner des problèmes de style cassé pour les articles ou des pages.

Divi a ses propres options pour minifier et combiner les fichiers CSS et JS, qui se trouvent dans Divi > Options du Thème > Général. Dans les versions antérieures de Divi, celles-ci étaient appelées Static File Generation.

Ces options doivent être désactivées afin de permettre à WP Rocket de gérer la minification et la combinaison avec nos paramètres d'optimisation de fichiers. 

Vous devriez aussi désactiver l’option Static CSS File Generation, Divi > Theme Options > Builder > Advanced.

Module vidéo

Le module vidéo Divi n'est pas compatible avec l'option Remplacer l'iframe Youtube par une image d'aperçu (sous-option d'Activer sur les iframes et vidéos). Cette option sera automatiquement désactivée et grisée lors de l'utilisation de Divi ou d'un thème enfant de Divi.

Slider Module + LazyLoad

Si vous utilisez le Slider Module, les images peuvent être déplacées de leur emplacement d'origine si le Lazyload est activé.

Pour l'instant, la seule solution est de  désactiver le LazyLoad sur les pages et articles en question. Étant donné que Divi n'utilise pas de filtres pour appeler les éléments du Slider Module, nous ne pouvons pas "hooker" afin d'insérer l'attribut data-no-lazy = "1" sur l'attribut img.

Bien que non recommandé, vous pouvez réparer manuellement ceci en modifiant un fichier du thème directement.

Pour les versions antécédentes à Divi 4

Localisez la ligne 612 de Divi/includes/builder/module/SliderItem.php et modifiez ceci *:

? sprintf( '<div><img src="%1$s" alt="%2$s"  data-no-lazy="1"/></div>',

Gardez à l'esprit que ceci n'est pas recommandé car vous perdrez le changement après la mise à jour du thème.

[*  Merci à Elephantmark pour le fix! ]

Pour la version Divi 4+

Localisez la ligne 895 de Divi/includes/builder/module/SliderItem.php et modifiez comme ceci :

if ( $multi_view->has_value( 'image' ) ) {
			$image_html = $multi_view->render_element( array(
				'tag'      => 'img',
				'attrs'    => array(
					'src' => '{{image}}',
					'alt' => esc_attr( $image_alt ),
					'data-no-lazy' => '1',
				),
				'required' => 'image',
			) );

Icônes de police manquantes sur IE 11

Dans quelques rares cas, vous ne voyez pas les icônes sur votre site lors de la navigation avec Internet Explorer 11. Vous pouvez résoudre ceci en installant ce petit plugin d’aide :

📥  Télécharger (.zip): WP Rocket | Remove ETag
Développeurs : vous trouverez le code de ce plugin sur GitHub.

Attention ! Les développeurs du thème mettent à jour leur code régulièrement et cela peut affecter les fichiers qu'il est nécessaire d'exclure. Si cette solution ne fonctionne pas pour vous,  dites-le nous !

Vidage du cache synchronisé

Divi déclenche le cache partiel ou complet de WP Rocket dans des scénarios tels que :

  • enregistrer un message
  • enregistrement de la mise en page du modèle
  • activation/désactivation du CSS statique;

Avertissement! Lorsque les développeurs de thèmes mettent à jour leur code, cela peut affecter les fichiers à exclure. Si ces solutions ne fonctionnent pas pour vous, Faites le nous savoir!

Cela a-t-il répondu à votre question ? Merci pour votre retour :) Une erreur est survenue lors de l’envoi de votre retour. Veuillez réessayer plus tard.