Comment Elementor priorise et améliore les performances des sites Web

Parlons de la feuille de route des produits d'Elementor pour 2021, en particulier de l'optimisation des performances. Alors que nous continuons à planifier et à développer de nouvelles fonctionnalités intéressantes demandées par notre communauté, cette année, nous nous sommes donné pour mission d'améliorer les performances des sites Web de nos utilisateurs. Dans cet article, j'aimerais partager avec vous certaines des mesures que nous avons déjà prises pour atteindre cet objectif, et parler un peu de ce qui nous attend au cours de l'année à venir.

Les performances des sites Web sont un problème pour les créateurs de sites Web depuis l'aube d'Internet. Étant moi-même créateur de sites Web, je posais toujours des questions telles que :

• « Mon site est-il trop lent ? Est-ce que cela provoque le départ des utilisateurs ou nuit à mon classement Google ? »
• « Devrais-je abandonner une certaine fonctionnalité afin d'améliorer la vitesse du site ? »
• Et bien sûr : « Qu'est-ce qui cause encore mes problèmes de performances ? Je pensais avoir couvert toutes les bases ici ! »

Alors oui, obtenir des performances exceptionnelles d'un site Web a toujours été un défi pour les créateurs Web, quelle que soit la plate-forme ou les outils que nous utilisons. Avec autant de facteurs pertinents affectant les performances, il n'est pas toujours facile d'isoler le vrai problème, et encore moins de trouver une solution. C'est exactement pourquoi nous avons créé ce cours vidéo en cinq parties sur la performance . Dans cette série, nous examinons chaque facteur important pouvant affecter les performances de votre site, qu'il soit lié à Elementor ou non, et vous expliquons comment l'optimiser.

Pour rendre les choses vraiment intéressantes, Google a récemment annoncé que les performances du site Web joueraient désormais officiellement un rôle dans son algorithme de classement. Cela met la question des performances sous le feu des projecteurs, suscitant des inquiétudes parmi les propriétaires de sites Web du monde entier. C'est pourquoi au cours des six derniers mois, nos équipes de R&D et de référencement ont travaillé sans relâche pour s'assurer que les sites Web Elementor traversent cette mise à jour et réussissent avec brio.

En ce qui concerne le mystérieux algorithme de Google, nous savons qu'il faudrait bien plus que notre parole pour que vous vous sentiez en sécurité. Par conséquent, en tant que service à nos utilisateurs et à la communauté des créateurs Web, nous organiserons un webinaire gratuit sur les performances Web avec des experts en référencement de premier plan pour discuter du changement à venir. Cela couvrira non seulement la mise à jour elle-même, mais détaillera également l'impact de ce changement sur votre site Web et ce que vous pouvez faire pour vous préparer. Le webinaire a lieu le 28 avril, alors assurez-vous de réserver votre place .

Cependant, en mettant de côté tous les cours et webinaires, notre objectif principal est de nous assurer que notre produit n'affecte pas négativement les performances de votre site. Cela a été et restera une priorité absolue pour nous. Alors, sans plus tarder, plongeons-nous dans les efforts d'optimisation des performances d'Elementor, tels qu'ils sont définis dans notre feuille de route produit 2021.

Au-delà de l'optimisation de notre cycle de développement de produits, notre vision pour améliorer les performances d'Elementor consiste en une approche en cinq volets. Nous avons déjà apporté des améliorations significatives dans certains de ces domaines, tandis que d'autres seront abordés dans les prochaines versions d'Elementor.

Nous sommes également fiers de dire que la performance est devenue une partie intégrante de notre pipeline de développement et de publication. Chaque version d'Elementor est désormais validée par rapport à une variété de mesures de performances pour garantir qu'aucune nouvelle fonctionnalité, modification ou correctif n'a d'effet négatif sur les sites Web existants construits avec Elementor.

Passons maintenant en revue nos pistes une par une :

Nous améliorons la façon dont Elementor charge les ressources pour garantir qu'il ne charge que ce dont il a besoin sur chaque page. Dans les dernières versions d'Elementor et d'Elementor Pro, nous avons introduit l'expérience de chargement d'actifs optimisé pour améliorer les performances frontales d'un site Web, en accélérant chaque page en ne chargeant que les fonctionnalités nécessaires. Vous pouvez en apprendre plus à ce sujet ici.

Nous avons également ajouté des options de chargement différé à certains widgets et continuerons de le faire à l'avenir. Par exemple, le widget Vidéo inclut une option de chargement différé, vous donnant la possibilité de remplacer le lecteur vidéo complet intégré par une vignette d'image statique. L'image reviendra ensuite à la vidéo complète une fois qu'un visiteur interagit avec elle.

En utilisant ces techniques de chargement paresseux, vous pouvez réduire considérablement la taille de la page et le nombre de requêtes HTTP lors du chargement initial de la page, ce qui entraînera une expérience beaucoup plus rapide pour vos visiteurs.

Depuis que nous avons lancé Elementor il y a près de cinq ans, les navigateurs Web ont beaucoup évolué. Désormais, certaines fonctionnalités qui nécessitaient des bibliothèques externes il y a cinq ans peuvent être implémentées à l'aide de la prise en charge native du navigateur. Cela rend la mise en œuvre beaucoup plus efficace et peut, dans certains cas, réduire considérablement le temps d'exécution de JavaScript.

Un exemple en est la bibliothèque Waypoints qui, dans certains cas, a été remplacée par l'API native Intersection Observer.

Nous visons à réduire l'utilisation de ces types de bibliothèques CSS et JavaScript et à les remplacer par une prise en charge native du navigateur dans la mesure du possible.

Nous prévoyons de continuer à améliorer et à optimiser les JavaScript et CSS internes existants d'Elementor.

Les exemples incluent la possibilité de configurer la méthode de chargement de Google Fonts et la propriété font-display ajoutée à la bibliothèque Font Awesome. Ces améliorations devraient réduire les processus de blocage de rendu pour ces fichiers et fournir une optimisation supplémentaire des fichiers CSS et JS existants.

Dans Elementor 3.0, nous avons amélioré le mécanisme de chargement et de rendu CSS dynamique. Elementor utilisé pour analyser les pages à la recherche d'éléments avec des valeurs dynamiques à chaque chargement de page. À partir d'Elementor 3.0, lorsqu'une page est créée et visitée pour la première fois, Elementor crée un cache de tous les éléments avec des valeurs dynamiques. Ensuite, au lieu d'analyser la page à la recherche d'éléments dynamiques à chaque visite d'une page, la liste est extraite du cache et rendue immédiatement. Cela améliore considérablement les temps de rendu côté serveur et entraîne des améliorations notables. Nous prévoyons de mettre en œuvre des améliorations d'analyse supplémentaires pour Elementor à l'avenir. Vous pouvez en savoir plus à ce sujet dans cet article de blog.

Enfin, nous prévoyons de continuer à améliorer et à réduire la sortie de code générée par Elementor pour réduire la taille du DOM.

Nous avons déjà commencé à apporter ces améliorations dans Elementor 3.0, où nous avons supprimé trois éléments wrapper pour créer un DOM plus petit et simplifier la sortie du code.

Dans Elementor 3.2, nous avons supprimé deux autres éléments pour obtenir des réductions encore plus importantes de la taille du DOM. D'autres réductions sont prévues dans un proche avenir.

Comme vous pouvez le voir, de nouvelles fonctionnalités, améliorations et révisions peuvent être attendues en 2021 et au-delà. Tout cela est fait dans le but de vous aider à continuer à créer des sites Web incroyables avec de meilleures performances. Si vous n'avez pas encore mis à niveau vers la dernière version, assurez-vous de profiter de ces améliorations et d'autres.

Comme vous le savez peut-être, de nombreux facteurs non liés à Elementor affectent les performances de votre site Web WordPress. Ceux-ci incluent l'optimisation des images, l'hébergement Web, les fournisseurs de serveurs, le CDN, etc. Puisque nous visons à permettre à nos utilisateurs de mettre en œuvre une optimisation complète de WordPress, nous avons créé une vaste banque de ressources de didacticiels, de webinaires et d'articles gratuits pour vous aider à en savoir plus sur les performances.

• Nous avons créé un cours vidéo sur les performances . Dans cette série en cinq parties , nous examinons tous les facteurs importants susceptibles d'affecter vos performances et la manière dont vous pouvez les optimiser.

• Le 28 avril, nous organiserons un webinaire sur Core Web Vitals avec des experts SEO de premier plan pour discuter du prochain changement d'algorithme de Google et de son impact sur vos sites Web. Réservez votre place ici.

• Nous avons également publié un article de blog détaillé sur la façon d'accélérer les sites Web WordPress, ainsi que d'autres articles axés sur les performances sur des sujets tels que le choix de l'hébergement Web, les plug-ins de mise en cache, l'exécution de tests de vitesse, l'utilisation de WP Rocket, etc.

Nous continuerons à créer des webinaires, des articles de blog et des vidéos gratuits pour aborder d'autres aspects des performances de WordPress afin de continuer à soutenir la communauté des créateurs Web.