Le plugin WordPress populaire pour le constructeur de pages Elementor a annoncé une mise à jour qui se concentre sur des chargements de page plus rapides. La mise à jour améliore l’efficacité de la diffusion des fichiers JavaScript et CSS. Ces modifications apportées à Elementor version 3.2 promettent une amélioration des scores Core Web Vitals.

Après l’annonce de l’élémentor:

«La société a optimisé son cycle de développement et créé un plan en cinq étapes qui se concentre sur des domaines de performance spécifiques tels que le chargement optimisé des actifs, les bibliothèques JavaScript / CSS, le JavaScript et le CSS internes optimisés, les processus de backend et de rendu optimisés et un code plus léger. aligné.

Le plan d’Elementor garantit que tous les aspects de la performance, avant et arrière, sont grandement améliorés. « 

Elementor a également introduit un moyen pour les éditeurs de spécifier comment Google Fonts peut se charger plus efficacement:

«Une nouvelle fonctionnalité de chargement de Google Fonts personnalise l’expérience de chargement des utilisateurs et leur permet de changer la façon dont Elementor charge Google Fonts. Les paramètres du tableau de bord Elementor proposent Auto, Swap, Block, Optional et Fallback. « 

Core Web Vitals

Les Core Web Vitals sont des métriques qui peuvent être utilisées pour mesurer l’expérience réelle du site Web pour les utilisateurs réels sur les appareils mobiles. Les mesures sont enregistrées par les utilisateurs de Chrome qui ont choisi de fournir les informations, qui sont ensuite enregistrées sous forme de rapport CrUX (Chrome User Experience).

La publicité

Lisez ci-dessous

Ces données sont utilisées pour générer 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éliore pas les principaux signes vitaux du Web, car les problèmes causés par les principaux signes vitaux du Web sont dans le code du site Web lui-même.

Servir ce code plus rapidement à partir d’un hôte Web rapide ne résoudra pas le code qui doit être téléchargé et rendu sur un appareil mobile.

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

Ce qu’Elementor a annoncé, c’est un effort renouvelé pour servir le code de site Web plus efficacement afin que les éditeurs puissent offrir aux visiteurs de leur site Web 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 entraîner le fonctionnement d’un formulaire de contact et la feuille de style en cascade indique au navigateur les couleurs et les polices à utiliser (ainsi que d’autres données de style visuel).

La publicité

Lisez ci-dessous

Lorsqu’une personne visite une page Web, le navigateur télécharge ces fichiers pour créer (rendre) la page Web. Cependant, les pages Web cesseront de s’afficher à chaque fois qu’un fichier JavaScript ou CSS est trouvé. C’est pourquoi ils sont appelés fichiers de blocage de rendu.

Bien que des tactiques de codage existent pour retarder le téléchargement des fichiers ou le téléchargement parallèle (en même temps que 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 que vous téléchargez. 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 requis pour créer un formulaire de contact.

Cette approche plus efficace pour télécharger JavaScript et CSS est connue sous le nom de chargement conditionnel. Cela signifie les télécharger lorsque vous en avez besoin et ne pas les télécharger lorsque vous n’en avez pas besoin.

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

Elementor est plus efficace maintenant

Ce qu’Elementor a changé, c’est de ne télécharger de nombreux fichiers JavaScript que lorsqu’ils sont nécessaires. C’est ce qu’on appelle le chargement de fichier conditionnel. Elementor m’a confirmé qu’ils prévoyaient de continuer à charger du CSS dans un proche avenir sous certaines conditions.

Selon Elementor:

Les bibliothèques « Lightbox », « Screenful », « Dialog » et « Share Links » sont toutes chargées sous certaines conditions … « 

Elementor a également annoncé:

«Le fichier CSS pour E-Icons a également été divisé en deux bibliothèques distinctes – front-end et back-end – et économise jusqu’à 50 Ko lors du chargement d’une page particulière.»

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

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

«Notre équipe de recherche et développement et notre équipe de référencement travaillent sur ce projet depuis 6 mois pour s’assurer qu’Elementor est entièrement compatible avec le changement à venir de l’algorithme Google de Web Vitals. Nous nous sommes concentrés sur la réduction du nombre d’éléments DOM, le rendu du processus, le chargement d’actifs dynamiques et bien plus encore. « 

La publicité

Lisez ci-dessous

Elementor publie des vidéos sur l’amélioration des vitales Web clés

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

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

«Pour guider les utilisateurs tout au long de cette mise à jour, nous avons créé d’excellents supports pédagogiques, notamment un nouveau cours sur la manière d’améliorer les performances de votre site Web. Cela examinera l’ensemble du processus, car les performances sont basées sur une combinaison de facteurs, pas seulement sur le site Web de votre site Web. « 

La publicité

Lisez ci-dessous

Regarde-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 faire ces mises à jour importantes. L’annonce d’Elementor est un développement passionnant pour les utilisateurs du plugin, et elle met la pression sur le reste de l’écosystème WordPress, des plugins aux créateurs de thèmes, pour qu’il suive le rythme d’Elementor.

Citation

Introduction aux fonctions des chemins de texte et des calques de masque!





Source link

Recent Posts