« Elementor est lent » est l'une des affirmations les plus tenaces dans l'univers WordPress. Elle n'est pas complètement fausse et pourtant elle induit en erreur. Un page builder produit plus de balisage que du code écrit à la main — cela a un coût. Mais ce qui rend réellement lentes les pages Elementor en pratique, ce sont presque toujours d'autres choses, et celles-là se corrigent.
Les trois valeurs dont il est question
Depuis quelques années, Google mesure trois indicateurs qui forment ensemble les Core Web Vitals.
LCP (Largest Contentful Paint) — le moment où le plus grand élément visible est chargé. Le plus souvent l'image du hero ou le grand titre. Objectif : moins de 2,5 secondes.
INP (Interaction to Next Paint) — la rapidité avec laquelle la page réagit à une action. Il a remplacé l'ancienne valeur FID. Objectif : moins de 200 millisecondes.
CLS (Cumulative Layout Shift) — l'ampleur des sauts du contenu pendant le chargement. Tout le monde connaît la situation : on veut toucher un lien et, au dernier moment, une image vient s'intercaler. Objectif : moins de 0,1.
Un point important pour bien situer les choses : Google évalue à partir des données de terrain de visiteurs réels, pas à partir du résultat d'un test isolé. Une bonne valeur dans l'outil de test avec de mauvaises données de terrain signifie que vos visiteurs vivent une autre page que vous.
LCP : presque toujours l'image du hero
Dans neuf projets Elementor sur dix que j'examine, la grande image tout en haut est la raison d'un mauvais LCP.
La taille. Une photo sortie directement de l'appareil fait volontiers 4000 pixels de large et plusieurs mégaoctets. Elle est affichée sur 1600 pixels. Redimensionnez-la avant l'envoi à la taille réellement nécessaire.
Le format. WebP au lieu de JPEG économise typiquement un tiers à qualité égale. Il existe des extensions qui s'en chargent automatiquement.
Pas de lazy loading pour l'image du hero. Cela semble contradictoire, mais c'est décisif : le chargement différé est prévu pour les images qui ne deviennent visibles qu'au défilement. Si vous l'appliquez à l'image tout en haut, vous retardez précisément l'élément qui détermine le LCP. Dans Elementor, vous le désactivez dans le widget Image.
Les images d'arrière-plan avec discernement. Une image posée en arrière-plan de conteneur est chargée plus tard qu'un véritable widget Image. Pour l'élément le plus haut de la page, le widget Image est le meilleur choix.
CLS : réserver la place
Les sauts de mise en page apparaissent quand un élément réclame après coup une place qui n'avait pas été prévue. Trois causes couvrent presque tout.
Des images sans dimensions fixes. Le navigateur ne sait qu'au chargement quelle sera la hauteur de l'image et pousse vers le bas tout ce qui suit. Donnez aux images une largeur et une hauteur, ou un rapport d'aspect fixe.
Des polices qui se chargent après coup. Le texte apparaît d'abord dans une police de substitution et saute au moment du changement. Des polices hébergées en propre avec une stratégie de chargement adaptée règlent le problème — et sont de toute façon le meilleur choix sur le plan de la protection des données, voir Elementor conforme au RGPD.
Les bandeaux qui apparaissent en haut. Une bannière cookies ou un bandeau d'information qui pousse le contenu vers le bas est un coup sûr pour le CLS. Placez-le au-dessus du contenu plutôt que devant lui.
INP : moins, c'est mieux
La valeur de réactivité souffre d'un excès de JavaScript. Sur les pages Elementor, les suspects habituels sont : les sliders et carrousels, les compteurs animés, les effets de mouvement au défilement, les vidéos intégrées et les scripts externes comme les fenêtres de chat ou le tracking.
La mesure la plus efficace est aussi la moins populaire : utilisez-en moins. Un slider de cinq images que presque personne ne regarde au-delà de la première coûte du temps de chargement sans contrepartie.
Pour les vidéos intégrées, la règle est la suivante : ne les intégrez pas directement, affichez d'abord une image d'aperçu et chargez la vidéo au clic. Elementor propose une option pour cela dans le widget Vidéo.
Ce qu'Elementor apporte lui-même
Sous Elementor → Réglages → Fonctionnalités, vous trouvez plusieurs interrupteurs qui aident sensiblement :
Le chargement optimisé du CSS ne charge que les styles nécessaires à la page au lieu d'un gros fichier commun. Le chargement amélioré des assets et l'option permettant d'écarter les bibliothèques d'icônes inutilisées vont dans la même direction.
Activez ces options une par une et vérifiez la page ensuite. Dans de rares cas, il manque un style qui venait d'une extension tierce.
La manière de faire le ménage au-delà de cela est décrite dans Supprimer le ballast d'Elementor.
Ce que Pro y change : rien
Pour qu'aucune fausse attente ne naisse ici — la version Pro ne rend pas votre page plus rapide. Elle apporte des fonctions, pas de la vitesse. Qui utilise davantage de widgets grâce à Pro devient plutôt plus lent.
Elementor Pro : utile pour le Theme Builder, les formulaires et les popups — pas pour le temps de chargement. Cela fait partie d'une évaluation honnête. Découvrir Elementor Pro
L'ordre dans lequel je procède
D'abord les images, ensuite le cache, puis les polices, puis les scripts. Dans cet ordre, parce qu'il est trié par rendement décroissant. Sur la plupart des sites, les deux premières étapes suffisent à faire passer la valeur du rouge au vert.
Mesurez avant et après, sinon vous optimisez à l'aveugle. Et mesurez sur mobile — c'est là que les valeurs sont les plus mauvaises et c'est là que se joue l'évaluation.
J'ai rassemblé d'autres leviers dans Optimiser la performance d'Elementor. Si vous préférez passer tout cela en revue une fois sur votre propre site, nous le faisons dans ma formation Elementor.
Tags