Elementor et les perfs, c’est tout pourri.
– Un utilisateur random sur X
C’est pas faux. Du moins nativement (m’enfin, quand tu vois les perfs de tous les sites qui sortent de Webflow ou Figma… 😁).
Voyez-vous, les devs d’Elementor le savent eux aussi.
Et c’est pourquoi, depuis maintenant quelques mises à jour, ils font tout leur possible pour améliorer ses performances.
Avec la mise à jour 3.25, ils ont intégré une tonne de nouvelles optimisations. Au menu :
Amélioration des ressources CSS primordiales : Les fichiers CSS sont désormais plus légers et fragmentés en petits morceaux, qui ne se chargent que lorsque c’est nécessaire. Exit les fichiers lourds comme frontend.min.css
et global.css
(oui oui), l’idée est d’alléger au maximum le site.

Enfin ! J’attendais avec impatience cette optimisation. Elle est là ! À titre d’info, même avec des plugins d’optimisations avancés, certains de ces fichiers se chargeaient tout de même avec du CSS non utilisé.
Optimisation des styles globaux : Les styles globaux sont directement intégrés dans les fichiers spécifiques aux pages (comme post-{id}.css). Résultat, on se débarrasse des styles inutilisés, ce qui optimise le rendu de chaque page.
Optimisation du DOM : Grâce à une nouvelle expérimentation de balisage optimisé, les balises HTML inutiles sont éliminées. Résultat : un DOM plus léger et des performances globales améliorées.
Et franchement, ça fait plaisir. Car le DOM que générait Elementor était parfois exécrablement lourd.
Migration du JavaScript vers le CSS : Certaines fonctionnalités JavaScript, comme le défilement fluide, sont remplacées par des solutions CSS natives. Cela permet de réduire le code JS sur les pages et, en bonus, améliore l’accessibilité.
Eh oui ! Il est désormais possible de créer des « drop-down » en CSS. Ce qui fait du JS chargé en moins. Hélas, pour l’instant, ça ne concerne que le « scroll-behavior: smooth; ». Je pense qu’à l’avenir, un paquet de fonctionnalités réservés au JS sera remplaçable par du CSS. Et c’est super pour nos perfs.
Côté WooCommerce :
Réduction des styles pour WooCommerce : Les fichiers CSS associés à des modules comme WooCommerce sont également allégés. Seuls les styles strictement nécessaires pour chaque widget sont chargés, ce qui accélère le temps de chargement des boutiques en ligne.
Optimisation des requêtes WooCommerce : La gestion des produits WooCommerce via le widget Loop Grid a été optimisée pour limiter les requêtes redondantes. Moins de requêtes, c’est plus de rapidité et une meilleure expérience utilisateur.
En fait, avant, Elementor faisait énormément de requêtes en BDD pour afficher les produits (35 contre 8 à présent). C’est d’ailleurs pourquoi le Widget « Product » était plus rapide. Il ne me reste plus qu’à benchamrker ça pour voir si c’est toujours le cas.
Comptez sur moi pour vous publier un comparatif avant/après ces prochaines semaines dans le Club.
Vous pouvez vous rendre sur l’article original ici : https://developers.elementor.com/