En tant qu’agence web à Lille spécialisée dans WordPress, nous suivons de près les évolutions des outils que nous utilisons quotidiennement. La dernière mise à jour d’Elementor, la version 3.25, vient d’être dévoilée et apporte son lot d’améliorations significatives. Cette version se concentre principalement sur l’optimisation des performances, avec un accent particulier sur l’amélioration des styles, du balisage et des requêtes de base de données. Le résultat ? Des expériences de site web plus fluides et plus rapides, particulièrement bénéfiques pour les sites avec des fonctionnalités complexes comme WooCommerce et les carrousels.
Dans cet article, nous allons plonger en profondeur dans les nouveautés de cette version qui promet d’optimiser considérablement les performances de vos sites web.
Sommaire
- Des performances boostées pour une expérience utilisateur améliorée
- WooCommerce : des optimisations spécifiques pour l’e-commerce
- Accessibilité et expérience utilisateur : au cœur des préoccupations
- Respect de la vie privée et conformité aux réglementations
- Nouvelles fonctionnalités et expériences
- Implications pour les développeurs
- Conseils pour les développeurs d’extensions Elementor
Des performances boostées pour une expérience utilisateur améliorée
Optimisation des styles CSS : moins de code, plus de rapidité
Elementor 3.25 poursuit le travail d’optimisation des performances de style initié dans la version 3.24. Cette mise à jour apporte des améliorations notables dans la gestion des fichiers CSS :
- Suppression du fichier frontend.min.css dans Elementor Pro : Ce changement réduit considérablement la quantité de CSS chargé sur chaque page.
- Élimination du fichier global.css : Les styles globaux, qui stockaient les données pour vos paramètres globaux, ont été complètement supprimés.
- Réduction de la taille des styles pour les modules complexes : Les modules comme WooCommerce, les éléments de thème, les carrousels, les formulaires et d’autres avec plusieurs widgets ont vu leur taille de style considérablement réduite.
- Fractionnement des fichiers CSS : Les grands fichiers CSS sont désormais divisés en plusieurs petits morceaux, chargés conditionnellement selon les widgets utilisés sur la page.
Elementor utilise 5 types de fichiers CSS :
- frontend.min.css : règles de réinitialisation, styles de mise en page et styles généraux requis sur toutes les pages.
- widget-{name}.min.css : chaque widget a son propre style.
- global.css : couleurs globales et typographie globale utilisées par tous les widgets.
- post-{id}.css : styles personnalisés des contrôles définis par l’utilisateur sur la page.
- Bibliothèques et fonctionnalités : style pour les icônes, animations, carrousels, dialogues, lightbox, etc.
Optimisation des styles frontend
Dans la version précédente, le fichier frontend avait déjà été considérablement réduit dans la version gratuite d’Elementor. Cette version se concentre sur Elementor Pro.
Le fichier frontend.min.css a été divisé en plusieurs morceaux, chacun étant maintenant chargé uniquement lorsqu’il est utilisé. Cela inclut des morceaux plus petits pour les effets de mouvement, les popups et les animations de widget CTA. Résultat ? Elementor Pro n’a plus besoin du fichier frontend.min.css, qui a donc été supprimé du plugin.
Optimisation des styles globaux
Auparavant, lorsque vous définissiez des couleurs globales et une typographie globale dans le panneau “Paramètres du site”, Elementor stockait ces valeurs sous forme de données de kit. Chaque valeur globale était transformée en une variable CSS, et pour les widgets utilisant ces styles globaux, le sélecteur CSS utilisait simplement ces variables.
Pour rendre les styles globaux disponibles, Elementor générait un fichier global.css séparé. Ce fichier contenait les styles pour tous les widgets et leurs contrôles utilisant des styles globaux. Le problème ? Toutes les pages chargeaient les styles pour tous les widgets, même si ces derniers n’étaient pas utilisés sur la page, augmentant ainsi considérablement le CSS inutilisé.
La version 3.25 optimise considérablement ce mécanisme. Le nouveau mécanisme de style élimine complètement le fichier global.css. À la place, les styles globaux sont ajoutés au fichier post-{id}.css. Cet ajustement tire parti de toutes les optimisations mises en œuvre sur le fichier post-{id}.css. Plus de styles globaux pour les widgets inutilisés, plus de règles CSS en double. Tout est compact et optimisé.
Réduction de la taille des styles des modules
Elementor s’est également concentré sur l’optimisation des styles WooCommerce. Auparavant, les sites Elementor avec des capacités e-commerce utilisaient des widgets Elementor Pro pour WooCommerce qui chargeaient un énorme fichier CSS de 197 Ko.
La nouvelle infrastructure de la version 3.25 permet aux modules avec plusieurs widgets de ne charger que le style appartenant au widget utilisé. Ce nouveau mécanisme de chargement de style garantit qu’Elementor ne charge pas de CSS pour les widgets inutilisés, ce qui se traduit par des temps de chargement plus rapides pour les sites e-commerce et les sites utilisant des sliders et des carrousels Pro.
Une structure HTML allégée pour des pages plus légères
L’expérience “Optimized Markup” introduite dans cette version vise à réduire la taille du DOM en éliminant les balises <div> superflues autour de divers widgets. Concrètement, cela se traduit par :
- Une diminution du nombre d’éléments HTML à traiter par le navigateur.
- Une accélération du rendu et du chargement des pages.
- Une meilleure réactivité, particulièrement bénéfique sur les appareils aux ressources limitées.
Par exemple, la structure des boutons a été simplifiée. Auparavant, chaque bouton avait 3 éléments <div> d’enveloppement différents. Avec l’expérience active, les boutons n’utiliseront que 2 éléments <div> d’enveloppement, éliminant le wrapper .elementor-button-wrapper.
Voici un exemple de la structure avant l’optimisation :
<div class="elementor-button-wrapper">
<a class="elementor-button elementor-button-link elementor-size-sm" href="#">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-icon"> ... </span>
<span class="elementor-button-text"> ... </span>
</span>
</a>
</div>Et voici la structure optimisée :
<a class="elementor-button elementor-button-link elementor-size-sm" href="#">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-icon"> ... </span>
<span class="elementor-button-text"> ... </span>
</span>
</a>Cette expérience affecte 3 widgets Elementor : Button, Paypal Button et Stripe Button. Les prochaines versions supprimeront des éléments HTML supplémentaires afin de réduire davantage la taille du DOM et rendre votre site web plus performant.
Remplacement de JS par CSS
Elementor poursuit la migration des solutions JS personnalisées vers des alternatives CSS prises en charge par tous les navigateurs web. Dans cette version, la solution de défilement fluide dans anchor.js a été remplacée par la déclaration CSS native scroll-behavior: smooth;.
Ce changement réduit la quantité de JS chargé sur les pages, augmentant ainsi les temps de chargement. De plus, Elementor ajoute une fonctionnalité supplémentaire qui n’était pas disponible auparavant : le nouveau défilement fluide respecte la préférence de réduction de mouvement de l’utilisateur, améliorant ainsi l’accessibilité. Il introduit également de nouveaux contrôles pour l'”Anchor Offset”, en plus des “Sticky Offset” et “Effects Offset” existants.
WooCommerce : des optimisations spécifiques pour l’e-commerce
Les sites e-commerce construits avec WooCommerce bénéficient d’améliorations particulières dans cette mise à jour :
Réduction drastique de la taille des fichiers CSS pour WooCommerce
Comme mentionné précédemment, Elementor 3.25 s’attaque au volumineux fichier CSS de 197 Ko précédemment chargé pour les widgets WooCommerce. Désormais, seuls les styles des widgets effectivement utilisés sur la page sont chargés, réduisant considérablement la quantité de CSS inutilisé.
Optimisation des requêtes de base de données
L’utilisation du widget “Loop Grid” pour afficher les produits WooCommerce a été optimisée. Cette amélioration réduit le nombre de requêtes en base de données dupliquées de 77% pour une page affichant 20 produits, passant de 35 à 8 requêtes. Cette optimisation est d’autant plus bénéfique que le nombre de produits affichés est important.
Il est important de noter que l’utilisation du widget Products est toujours plus rapide et efficace en termes de nombre de requêtes et de temps de chargement par rapport au widget Loop Grid. Cependant, de nombreux utilisateurs préfèrent utiliser le Loop Grid car il offre plus de flexibilité de conception, permettant de faire glisser plusieurs widgets comme le titre du produit, la photo du produit, l’ajout au panier, etc.
Accessibilité et expérience utilisateur : au cœur des préoccupations
Respect des préférences de réduction de mouvement
Elementor 3.25 introduit une amélioration significative en matière d’accessibilité en respectant les préférences de réduction de mouvement des utilisateurs. Cette fonctionnalité est particulièrement bénéfique pour les personnes sensibles aux animations et aux effets de mouvement sur les sites web.
Le défilement CSS fluide offre un moyen fluide et visuellement attrayant de naviguer sur une page web, en particulier pour passer d’une section à l’autre ou pour les liens d’ancrage. Bien que cela améliore l’utilisabilité pour beaucoup, cela peut être inconfortable pour les utilisateurs ayant des sensibilités au mouvement. Les systèmes d’exploitation fournissent une préférence de “réduction du mouvement” pour activer la réduction du mouvement et servir moins d’animations ou d’effets.
En respectant le paramètre de réduction du mouvement, les sites web améliorent l’accessibilité et garantissent que leur contenu est convivial pour un public plus large. Cette pratique de conception inclusive aide à créer une expérience plus confortable pour tous les utilisateurs, quelles que soient leurs préférences ou besoins en matière de mouvement.
Elementor respecte les paramètres de réduction de mouvement de l’utilisateur. Au lieu de transitions fluides, la page peut se déplacer instantanément vers la section souhaitée, rendant la navigation plus facile et plus confortable pour ces utilisateurs.
Défilement fluide natif
Comme mentionné précédemment, le système de défilement fluide, auparavant géré par JavaScript, est maintenant remplacé par une solution CSS native (scroll-behavior: smooth;). Ce changement apporte plusieurs avantages :
- Réduction de la quantité de JavaScript chargé, améliorant ainsi les temps de chargement.
- Respect des préférences de réduction de mouvement de l’utilisateur.
- Introduction de nouveaux contrôles pour l'”Anchor Offset”, en plus des contrôles existants pour “Sticky Offset” et “Effects Offset”.
Respect de la vie privée et conformité aux réglementations
Dans un contexte où la protection des données personnelles est primordiale, Elementor 3.25 apporte des modifications importantes :
- Utilisation limitée du stockage local : Elementor n’utilisera plus le stockage local pour stocker des données sur les pages n’utilisant pas de popups.
- Stockage conditionnel pour les popups : Le stockage local ne sera utilisé que lorsque la page utilise effectivement des popups.
- Conformité RGPD : Ces changements visent à se conformer aux réglementations européennes sur la protection des données.
Il est important de noter que pour les pages utilisant des popups, il reste de la responsabilité du propriétaire du site d’obtenir le consentement approprié des utilisateurs avant de stocker ou d’accéder à des informations sur leur appareil.
Nouvelles fonctionnalités et expériences
Fusion de fonctionnalités
Plusieurs fonctionnalités ont atteint leur maturité et ont été intégrées au plugin principal :
- “Display Conditions”
- “Build with AI”
- “Form Submissions”
- “Grid Container”
Les fonctionnalités précédemment intitulées “Flexbox Container” et “Grid Container” ont été fusionnées en une seule fonctionnalité “Container”. De plus, la fonctionnalité “Form Submissions” a été déplacée dans l’onglet Settings > Advanced.
Mises à jour de statut
- La fonctionnalité “Optimized Control Loading” est passée du statut bêta à stable.
- Les fonctionnalités “Editor Top Bar”, “Nested Elements” et “Optimized Control Loading” sont désormais activées par défaut pour tous les sites, nouveaux comme existants.
Implications pour les développeurs
Cette mise à jour apporte également des changements importants pour les développeurs d’extensions Elementor :
Suppression de classes CSS
Elementor 3.25 supprime les classes CSS suivantes :
.elementor-row.elementor-column-wrap
De plus, il est recommandé de remplacer .elementor-hidden-phone par .elementor-hidden-mobile dans les extensions existantes.
Méthodes de widget dépréciées
Les développeurs sont invités à supprimer le préfixe “_” des méthodes suivantes dans leurs widgets :
protected function _register_controls() {}protected function _render() {}protected function _content_template() {}
Suppression du mécanisme de Schemes
Elementor 3.26 supprimera complètement le mécanisme de Schemes du code. Les développeurs d’extensions sont encouragés à migrer vers le système de Globals s’ils ne l’ont pas encore fait.
Compatibilité avec le thème Twenty Fifteen
Le thème “Twenty Fifteen” est l’un des thèmes WordPress par défaut, sorti il y a plus de 8 ans. Afin d’optimiser le code, Elementor 3.25 supprime un CSS de compatibilité pour le thème Twenty Fifteen, qui supprimait la couleur de fond du thème sur les pages utilisant le modèle “Elementor Canvas”.
Si vous souhaitez continuer à utiliser le thème “Twenty Fifteen” avec Elementor, utilisez l’extrait suivant pour résoudre le problème de couleur de fond :
.page-template-elementor_canvas.elementor-page:before { display: none; }Conseils pour les développeurs d’extensions Elementor
En tant qu’agence web spécialisée dans WordPress, nous encourageons vivement les développeurs d’extensions Elementor à prendre en compte les changements suivants pour assurer une compatibilité optimale avec la dernière version :
Mise à jour des sélecteurs CSS
Avec la suppression des classes .elementor-row et .elementor-column-wrap, il est crucial de réviser vos feuilles de style pour vous assurer qu’aucun style ne dépend de ces classes. Remplacez-les par des sélecteurs alternatifs appropriés.
Migration vers les Globals
Si votre extension utilise encore le système de Schemes, il est temps de migrer vers le système de Globals. Elementor fournit une documentation détaillée pour faciliter cette transition. N’oubliez pas que les Schemes seront complètement supprimés dans la version 3.26, il est donc essentiel d’effectuer cette migration dès que possible.
Utilisation de l’outil de détection de code déprécié
Elementor a mis à disposition un outil de détection de code déprécié. Nous recommandons vivement son utilisation pour identifier rapidement les parties de votre code qui nécessitent une mise à jour. Cet outil peut vous faire gagner un temps précieux dans le processus de mise à jour de vos extensions.
Impact sur les performances : des chiffres concrets
Pour illustrer l’impact significatif de ces optimisations, prenons quelques exemples concrets :
Réduction de la taille des fichiers CSS :
- Sur un site utilisant uniquement Elementor, la taille du fichier global.css est passée de 10 Ko à 0 Ko.
- Sur un site utilisant Elementor Pro, la réduction est encore plus impressionnante, passant de 64,6 Ko à 0 Ko.
Optimisation des requêtes WooCommerce :
- Sur une page affichant 20 produits, le nombre de requêtes dupliquées est passé de 35 à seulement 8, soit une réduction de 77%.
Amélioration de la structure DOM :
- La suppression d’une div pour chaque bouton peut sembler minime, mais sur une page contenant de nombreux boutons, cela peut représenter une réduction significative de la taille du DOM.
Ces améliorations, bien que techniques, se traduisent par une expérience utilisateur nettement améliorée : des temps de chargement plus rapides, une navigation plus fluide et une meilleure réactivité globale du site.
Conclusion : Une mise à jour axée sur la performance et l’expérience utilisateur
Elementor 3.25 représente une avancée significative en termes de performances et d’optimisation. Les améliorations apportées aux styles CSS, à la structure HTML et aux requêtes de base de données promettent des sites web plus rapides et plus efficaces, particulièrement bénéfiques pour les sites e-commerce utilisant WooCommerce.
L’accent mis sur l’accessibilité et le respect des préférences utilisateur démontre l’engagement d’Elementor à offrir une expérience web inclusive et respectueuse. Les modifications apportées en matière de respect de la vie privée reflètent également une prise en compte des enjeux réglementaires actuels.
Pour les développeurs, cette mise à jour offre l’opportunité d’optimiser leurs extensions et de les aligner sur les dernières normes d’Elementor. C’est le moment idéal pour revoir et mettre à jour vos extensions afin de tirer pleinement parti de ces nouvelles optimisations.
En tant qu’agence web à Lille spécialisée dans WordPress, nous recommandons vivement à nos clients et à tous les utilisateurs d’Elementor de mettre à jour vers la version 3.25 pour bénéficier de ces améliorations significatives. Cette mise à jour promet non seulement d’améliorer les performances de vos sites web, mais aussi d’enrichir l’expérience de vos visiteurs, contribuant ainsi à l’efficacité globale de votre présence en ligne.
N’oubliez pas, cependant, de toujours effectuer une sauvegarde complète de votre site avant toute mise à jour majeure. Nous recommandons également de tester la mise à jour sur un environnement de staging avant de l’appliquer sur votre site en production.
Enfin, gardez à l’esprit que l’optimisation d’un site web est un processus continu. Bien que cette mise à jour apporte des améliorations significatives, il est toujours important de surveiller régulièrement les performances de votre site et d’effectuer des ajustements si nécessaire.
Chez Promatec Digital, nous restons à votre disposition pour vous accompagner dans la mise à jour de vos sites Elementor et pour optimiser vos performances web. N’hésitez pas à nous contacter pour toute question ou besoin d’assistance concernant cette mise à jour majeure d’Elementor.
Vous avez aimé l'article ? Partagez-le autour de vous !
Vous aimerez aussi...
