Reprendre la maintenance d’un site Elementor construit par quelqu’un d’autre réserve souvent des surprises. Pas parce qu’Elementor serait mal conçu, mais parce que la facilité de l’éditeur visuel encourage des raccourcis qui s’accumulent silencieusement pendant des mois. Sur la dizaine de sites repris par l’agence ces derniers trimestres, les mêmes anti-patterns reviennent avec une régularité frappante.
Aucun de ces problèmes ne casse le site du jour au lendemain. C’est justement ce qui les rend dangereux : ils dégradent la performance et la maintenabilité par petites touches, jusqu’à ce qu’une refonte de charte ou un audit Core Web Vitals révèle l’ampleur des dégâts.
L’imbrication en poupées russes
Le symptôme le plus fréquent : une section qui contient une colonne, qui contient une autre section, qui contient encore une colonne, sur quatre ou cinq niveaux, pour obtenir un espacement ou un alignement qui aurait pu se régler avec un simple réglage de padding. Chaque niveau de section ajoute des balises div et des classes CSS générées automatiquement, et le DOM final gonfle bien au-delà de ce que la mise en page visible justifierait.
Sur un site repris récemment, la page d’accueil comptait plus de 340 éléments dans le DOM pour un rendu visuel qui aurait tenu en une centaine avec une structure propre. Le navigateur doit calculer le style et la mise en page de chacun de ces éléments à chaque rendu, ce qui pèse directement sur le temps de rendu initial, en particulier sur mobile.
La collection d’addons pour un widget chacun
Deuxième habitude coûteuse : installer une extension complète d’addons Elementor — souvent plusieurs dizaines de widgets — pour n’en utiliser qu’un ou deux sur tout le site. Chaque extension de ce type charge ses propres feuilles de style et scripts, parfois sur toutes les pages du site plutôt que seulement là où le widget concerné apparaît, selon la qualité de son intégration.
Le site mentionné plus haut chargeait six extensions d’addons différentes pour, au total, sept widgets utilisés sur l’ensemble du site : un compte à rebours, un widget d’avis clients, une grille de logos et quatre variantes de boutons qui existaient déjà nativement dans Elementor. Le poids cumulé de ces bibliothèques JavaScript sur chaque page dépassait 400 Ko avant même le contenu réel.
Comment le repérer
Un onglet Réseau du navigateur, filtré sur les fichiers .js et .css provenant du dossier wp-content/plugins/, suffit à lister rapidement les extensions actives et leur poids. Croiser cette liste avec les widgets réellement posés sur les pages (visibles dans l’éditeur Elementor via le panneau de navigation) permet de décider lesquelles désinstaller sans risque.
Les widgets HTML bricolés
Troisième anti-pattern classique : recourir systématiquement au widget HTML personnalisé pour coller du code trouvé ailleurs, plutôt que d’utiliser les widgets natifs ou de créer un widget maison propre. Ce raccourci fonctionne à court terme, mais il sort le contenu du système de style d’Elementor : plus de synchronisation avec les couleurs et polices globales, plus de réglages responsives visuels, et un contenu invisible pour quiconque n’ouvre pas le code.
Sur un site client, la totalité des tableaux de tarifs avait été codée en HTML brut dans des widgets séparés sur chaque page, avec des couleurs en dur qui ne correspondaient plus à la nouvelle charte graphique depuis la dernière refonte. Corriger cela a demandé de reprendre onze fichiers HTML à la main, alors qu’un widget natif avec une couleur globale aurait suffi à tout mettre à jour en un seul réglage.
Les styles locaux qui empilent les exceptions
Dernier travers observé presque systématiquement : au lieu de définir un style par défaut au niveau du thème (dans Site Settings) puis de ne surcharger qu’à la marge, chaque widget reçoit son propre réglage de couleur, de police et d’espacement en local. Résultat, aucune cohérence garantie entre deux pages, et une refonte de charte qui nécessite de repasser sur chaque widget un par un plutôt que de changer une seule valeur globale.
- Vérifier dans Site Settings si des couleurs et polices globales existent et sont réellement utilisées par les widgets.
- Repérer les widgets qui définissent une couleur en hexadécimal plutôt que via le sélecteur de couleur globale.
- Prioriser la correction sur les éléments répétés (boutons, titres de section) avant les cas isolés.
Conseil maison : avant de reprendre la maintenance d’un site Elementor, passer une heure à explorer trois pages représentatives dans l’éditeur suffit généralement à évaluer l’ampleur du travail de nettoyage à prévoir, avant même de discuter tarif avec le client.
Pour aller plus loin
Aucun de ces anti-patterns n’est une fatalité liée à Elementor lui-même : ce sont des habitudes de construction qui se corrigent avec de la discipline et un peu de méthode. La bonne nouvelle, c’est qu’ils sont détectables rapidement avec les bons réflexes — inspecter le DOM, lister les extensions actives, vérifier l’usage des styles globaux — avant même de commencer à corriger quoi que ce soit. Un audit de dix minutes avant de commencer une refonte évite bien des mauvaises surprises en cours de projet.
