Utiliser Elementor avec WP Rocket

Ce document contient des conseils sur la façon d'utiliser Elementor et WP Rocket sur votre site web.

Elementor et Reporter l'exécution JavaScript

Si vous remarquez que la fonction Reporter l'exécution JavaScript interrompt ou même retarde le chargement de certains modules Elementor, vous pouvez cocher les cases correspondantes dans la section Exclusions en un clic, comme montré ci-dessous :

checking elementor boxes

Le fait de cocher les cases et d'enregistrer les modifications devrait suffire à résoudre les problèmes de mise en page et à charger les éléments immédiatement.

Toutefois, si le problème persiste, il se peut que vous deviez trouver des exclusions personnalisées et les ajouter à la liste des fichiers JavaScript exclus.

Par exemple dans Elementor, si vous avez activé la fonctionnalité Chargement différé des images d’arrière-plan, vous devrez exclure lazyloadRunObserver de l'option Reporter l'exécution JavaScript si vous souhaitez que les images d'arrière-plan se chargent immédiatement.

Effet Sticky de Elementor

Dans certains cas, l'option Chargement différé des fichiers JavaScript peut casser l'effet sticky d'Elementor, empêchant les éléments de rester fixes à l'écran pendant le défilement.

Si cela se produit sur votre site, essayez de définir les éléments suivants dans la zone d'exclusion du Chargement différé des fichiers JavaScript :

/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js
/elementor-pro/assets/lib/sticky/jquery.sticky.min.js

Si cette option est activée, les mêmes exclusions doivent être ajoutées à l'option Reporter l'exécution JavaScript.

L'éditeur de Elementor ne se charge pas

Dans certains cas, les ressources des serveurs ne sont pas suffisantes pour traiter les optimisations de WP Rocket et les modifications faites dans Elementor en même temps.

Cela peut conduire à ce que l'éditeur d'Elementor ne se charge pas, et affiche une page blanche à la place.

Augmenter la mémoire de PHP comme indiqué ici devrait résoudre ce problème.

Les images d'arrière-plan d'Elementor & le LazyLoad

Vous pouvez activer l'option LazyLoad pour les images background CSS pour appliquer le lazyloading aux images d'arrière-plan.

Veuillez noter que l'option expérimentale Lazy Load Background Images d'Elementor ne doit pas être utilisée en même temps que la fonctionnalité LazyLoad for CSS background images de WP Rocket.

Les fichiers post CSS d'Elementor ne seront pas minifiés

Les fichiers CSS des posts Elementor sont automatiquement exclus de la Minification CSS afin d'éviter que le cache ne soit vidé trop fréquemment.

Expérimentations d'Elementor

Elementor propose des options de performance et d'expérimentation sous Elementor > Réglages > Fonctionnalités.

Si vous utilisez la fonctionnalité Chargement différé des images d’arrière-plan, vous devez prendre en compte les éléments suivants :

Vous pouvez utiliser la case Elementor - Lazy Load Background Images dans les Exclusions en un click de l'option Reporter l'exécution JavaScript de WP Rocket pour éviter qu'elle ne soit retardée.
Cette expérimentation n'est pas compatible avec le LazyLoad de WP Rocket pour les images d'arrière-plan CSS. Il est recommandé d'utiliser uniquement l'option de WP Rocket.

Si vous utilisez la fonctionnalité Optimiser le chargement des images, qui est activée par défaut, vous devez tenir compte de ce qui suit :

Cette expérimentation n'est pas compatible avec le champ Images ou iframes exclues dans les réglages de WP Rocket pour désactiver le LazyLoad. Il est recommandé d'utiliser seulement l'option de WP Rocket.

En dehors de cela, il n'y a pas d'autres problèmes connus avec les fonctionnalités de performance ou les expériences d'Elementor.

Purge synchronisée du cache

Les actions suivantes dans Elementor déclencheront l'effacement partiel ou total du cache de WP Rocket :

La Méthode d’impression CSS d'Elementor est réglée sur Fichier externe.
Mise à jour d'un article ou d'une page à partir de l'éditeur Elementor.
Le mode de maintenance d'Elementor est modifié