La mise à jour d'Elementor adresse les principales fonctionnalités Web Vitals

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 promettent d’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 performance 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. plan garantit que tous les aspects des performances bénéficient d’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 mesures conçues pour mesurer l’expérience réelle de la page Web 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 dans le rapport sur l’expérience utilisateur de Chrome (CrUX). Le tournant deviendra un signal de classement en juin 2021.Héberger un site Web sur un serveur rapide n’améliorera pas les scores de base des web vitals car les problèmes qui causent les core web vitals sont dans le code du site lui-même. l’hôte ne corrigera pas le code qui doit être téléchargé et rendu sur un appareil mobile.C’est pourquoi il est important pour les fabricants de modèles de sites Web et les constructeurs de pages de rendre le code sur lequel leurs utilisateurs s’appuient plus efficace. 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 (parmi d’autres données liées au style visuel). 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 compléter 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 le minimum absolu 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 contact Cette approche plus efficace pour télécharger JavaScript et CSS est appelée 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. Cela s’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 éléments et bien plus encore. »

Elementor publie des cours pour améliorer les éléments essentiels du Web

En plus des changements de code, Elementor a pris une mesure supplémentaire pour fournir des cours YouTube pour les aider à mieux comprendre les meilleures pratiques pour créer des sites qui offrent 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, y compris 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. »Regardez les cours d’optimisation Elementor sur YouTube ici.

Elementor prend l’initiative

Il est très 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 qu’il suive ses innovations.

Tags: ,