Utiliser Divi avec WP Rocket

Ce document contient toutes les informations nécessaires à l'utilisation du thème Divi avec WP Rocket.

Option Performance de Divi

Divi inclut certaines fonctionnalités de Performance : Divi  > Options > Performance.

En général, il est recommandé de n'utiliser les options de WP Rocket que pour éviter d'avoir des optimisations dupliquées sur un site. Par conséquent, vous devez désactiver les options suivantes de Divi :

  • CSS Dynamique
  • CSS Critique
  • Disable WordPress Emojis
  • Improve Google Fonts Loading
  • Defer jQuery and jQuery Migrate
    • Enqueue jQuery Compatibility Script
    • Defer additional third party scripts

Divi et l'option Reporter l'exécution JavaScript

Vous pouvez cocher les cases Divi dans la section Exclusions en un click de l'option Reporter l’exécution du JavaScript de WP Rocket afin de charger les éléments de Divi sans interaction, comme indiqué ci-dessous :

checking divi exclusions boxes

Le fait de cocher les cases et d'enregistrer les modifications devrait suffire à charger les éléments immédiatement et à résoudre les problèmes. Cependant, il est également possible que vous deviez trouver des exclusions personnalisées et les ajouter à la zone Fichiers JavaScript exclus.

En outre, l'option CSS critique de Divi peut provoquer un Flash Of Unstyled Content (FOUC) pour lequel ce correctif est utilisé. Ce correctif n'est pas l'approche officielle de Divi, et lorsque l'option Reporter l'exécution JavaScript est activée, il provoquera un flash blanc sur le site.

Si possible, vous devriez utiliser Supprimer les ressources CSS inutilisées de WP Rocket et désactiver 'option CSS critique de Divi pour éviter le problème FOUC d'origine. Mais si vous souhaitez conserver le CSS critique de Divi avec le correctif externe, veuillez définir cette exclusion à l'aide de la case Exclure les fichiers JavaScript dans l'option Reporter l'exécution JavaScript.

Divi et Supprimer les ressources CSS inutilisées

Lorsque vous mettez à jour un template Divi, et que la fonctionnalité Supprimer les ressources CSS inutilisées est active, WP Rocket affichera l'avertissement suivant sur les pages du tableau de bord de WordPress, vous recommandant d'effacer le CSS utilisé et un bouton pour cela.

WP Rocket : Votre template Divi a été mis à jour. Effacez le CSS utilisé si la mise en page, la conception ou les styles CSS ont été modifiés.

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;

Les images ne s'affichent pas lorsque le LazyLoad est actif

Si les images ne s'affichent pas ou ne s'affichent qu'après actualisation de la page, veuillez utiliser la même solution que celle décrite dans ce guide :
Les images sont de taille incorrecte lorsque le LazyLoad est actif

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.