La mise à jour d’Elementor adresse les éléments vitaux Web de base

Le plugin populaire de création de pages WordPress Elementor a annoncé une mise à jour visant à accélérer le chargement des pages. La mise à jour introduit une efficacité améliorée dans la façon dont les fichiers JavaScript et CSS sont livrés. Ces changements dans la version 3.2 d’Elementor promettent de améliorer les scores Core Web Vitals.

Selon l’annonce de l’Elementor:

«La société a optimisé son cycle de développement et créé un plan à cinq pistes axé sur des domaines de performances spécifiques tels que le chargement d’actifs optimisé, les bibliothèques JavaScript / CSS, l’optimisation du JavaScript et du CSS internes, l’optimisation des processus de backend et de rendu et une sortie de code plus mince.

Le plan d’Elementor garantit que tous les aspects de la performance reçoivent des améliorations significatives, à l’avant comme à l’arrière. »

Elementor a également introduit un moyen pour les éditeurs d’indiquer comment charger plus efficacement les polices Google:

«Une nouvelle fonctionnalité de chargement de polices Google personnalise l’expérience de chargement des utilisateurs, leur permettant de modifier la façon dont Elementor charge les polices Google. Les paramètres du tableau de bord Elementor proposent des options automatiques, d’échange, de blocage, facultatives et de secours. »

Vitaux Web de base

Les Core Web Vitals sont des métriques conçues pour mesurer le Web expérience de la page pour les utilisateurs réels sur les appareils mobiles. Les mesures sont collectées par les utilisateurs de Chrome qui ont choisi de fournir les informations qui sont ensuite collectées sous forme de rapport sur l’expérience utilisateur Chrome (CrUX).

Ce sont ces données qui sont utilisées pour créer les scores Core Web Vitals pour les sites Web qui deviendront à leur tour un signal de classement en juin 2021.

L’hébergement d’un site Web sur un serveur rapide n’améliorera pas les scores de base de Web Vitals, car les problèmes qui ont un impact négatif sur les scores de base de Web Vitals sont liés à la façon dont le site est codé.

Fournir plus rapidement du code non optimisé à partir d’un hôte Web rapide ne résoudra pas le goulot d’étranglement causé par ce code non optimisé qui doit être téléchargé et rendu sur un appareil mobile.

C’est pourquoi il est important pour les créateurs de modèles de sites Web et de création de pages de rendre le code sur lequel leurs utilisateurs s’appuient plus efficace.

Ce qu’Elementor a annoncé, c’est son effort renouvelé pour fournir le code de la page Web plus efficacement pour aider les éditeurs à offrir aux visiteurs de leur site une meilleure expérience utilisateur et aider les éditeurs à mieux se classer.

Pourquoi JavaScript et CSS peuvent être problématiques

JavaScript et les feuilles de style en cascade (CSS) sont des fichiers qui fournissent respectivement des fonctionnalités et un style visuel aux pages Web. Un fichier JavaScript peut faire fonctionner un formulaire de contact et la feuille de style en cascade indique au navigateur les couleurs et les polices à utiliser (entre autres données liées au style visuel).

Lorsqu’une personne visite une page Web, le navigateur télécharge ces fichiers afin de créer (rendre) la page Web. Mais le rendu de la page Web s’arrêtera chaque fois qu’il rencontrera un fichier JavaScript ou CSS. C’est pourquoi ils sont appelés fichiers de blocage de rendu.

Bien qu’il existe des tactiques de codage pour retarder le téléchargement des fichiers ou pour les télécharger en parallèle (simultanément avec d’autres fichiers), ces fichiers doivent encore être activés (pour ainsi dire) afin de terminer le rendu de la page Web.

L’approche idéale est de minimiser le nombre de fichiers à télécharger. La meilleure approche consiste à télécharger la quantité minimale absolue de JavaScript et de CSS nécessaire pour créer une page Web donnée.

Par exemple, si une page Web ne contient pas de formulaire de contact, il n’est pas nécessaire de télécharger les fichiers nécessaires pour créer un formulaire de contact.

Cette approche plus efficace pour télécharger JavaScript et CSS s’appelle le chargement conditionnel. Cela signifie les télécharger quand ils sont nécessaires et ne pas les télécharger s’ils ne sont pas nécessaires.

Et cela fait partie de ce qu’Elementor a annoncé.

Elementor est maintenant plus efficace

Ce qu’Elementor a changé, c’est de télécharger de nombreux fichiers JavaScript uniquement lorsqu’ils sont nécessaires. C’est ce qu’on appelle le chargement conditionnel des fichiers. Elementor m’a confirmé qu’ils prévoyaient également de commencer le chargement conditionnel de CSS dans un proche avenir.

Selon Elementor:

«Les bibliothèques de liens Lightbox, Screenful, Dialog et Share sont toutes chargées de manière conditionnelle…»

Elementor a également annoncé:

«Le fichier CSS e-icons a également été divisé en deux bibliothèques distinctes – frontend et backend – économisant jusqu’à 50 Ko sur un chargement de page donné.»

Une autre amélioration est que le CSS qui n’affecte que les visiteurs du site qui sont des éditeurs ne sera pas chargé automatiquement pour tous les utilisateurs. Cela signifie que si un visiteur du site n’est pas un éditeur, son navigateur téléchargera moins de fichiers pour rendre la page Web rendue, économisant ainsi 17 kilo-octets.

L’équipe Elementor a partagé ceci avec moi:

«Notre équipe R&D et notre équipe SEO travaillent sur ce projet depuis 6 mois, s’assurant qu’Elementor est entièrement compatible avec le prochain changement d’algorithme de Google Web Vitals. Nous nous sommes concentrés sur la réduction du nombre d’éléments DOM, l’optimisation du processus de rendu, le chargement dynamique des ressources et bien plus encore. »

Elementor publie des vidéos pour améliorer Core Web Vitals

Capture d’écran de la vidéo d’optimisation d’Elementor Core Web Vitals

En plus des changements de code, Elementor a franchi une étape supplémentaire pour fournir des cours YouTube pour les aider à mieux comprendre les meilleures pratiques pour la création de sites offrant une expérience utilisateur plus rapide.

«Pour guider les gens tout au long de cette mise à jour, nous avons créé d’excellents supports pédagogiques, notamment un nouveau cours sur l’amélioration des performances de votre site Web. Cela examinera l’ensemble du processus, car les performances sont basées sur une combinaison de facteurs, et pas seulement sur la plate-forme de création de site Web de votre choix. »

Regarder le Cours d’optimisation Elementor sur YouTube ici.

Elementor prend l’initiative

Il est encourageant de voir de plus en plus d’entreprises se mobiliser pour apporter ces mises à jour importantes. L’annonce d’Elementor est un développement passionnant pour les utilisateurs du plugin et met la pression sur le reste de l’écosystème WordPress, des plugins aux fabricants de thèmes, pour suivre Elementor.

Citation

Présentation des fonctionnalités de chemin de texte et de calque de masque!