Points clés du réseau central: Guide de l’autorité du réseau Optimisation WordPress
Google évalue l’expérience de la page dans le processus de classement du site, et utilise des informations importantes sur le site de base pour mesurer l’expérience de la page. Ce n’est pas nouveau. Cependant, Google continue d’améliorer constamment les informations importantes sur le site afin de mesurer votre attitude à l’égard du site. Si vous lancez un site Web sur WordPress, continuez à lire. Dans cet article, je vais expliquer quels changements vous devriez apporter au site WordPress pour optimiser ses principaux points Web. Qu’est – ce qui est essentiel pour le Web de base? Cartographie maximale du contenu (LCP) premier délai d’entrée (fid) décalage cumulatif de la mise en page (CLS) importance des principaux outils d’information sur le Web pour mesurer l’information essentielle optimisation de l’expérience utilisateur optimisation de la mise en page riche en contenu optimisation du premier délai d’entrée optimisation du décalage cumulatif de la Mise en page sommaire qu’est – ce que l’information essentielle sur le Web? Les éléments clés du réseau de base se composent de trois éléments clés spécifiques du réseau que Google considère appropriés pour évaluer l’expérience des utilisateurs du Web.
Ces indicateurs devraient être mesurés par les propriétaires de sites Web et, le cas échéant, améliorés. Chacun des trois principaux composants Web vitals représente un aspect distinct de l’expérience utilisateur. Google a essayé de fournir les meilleurs résultats aux utilisateurs et a constamment testé divers facteurs qui peuvent être utilisés pour mesurer l’expérience client sur le Web. C’est un processus continu. Actuellement, Google se concentre sur trois aspects de l’expérience utilisateur: le chargement, l’interactivité et la stabilité visuelle. Les principales caractéristiques de la page Web sont: le plus grand contenu de peinture: LCP mesure la performance de chargement de la page Web. Le LCP idéal doit être inférieur à 2,5 secondes. Premier délai d’entrée: fid mesure l’interactivité de la page. Le fid idéal devrait être inférieur à 100 Ms. déplacement cumulatif de la disposition: le CLS mesure la stabilité de la page Web. Le CLS idéal devrait:
Moins de 0,1. Maximum content Drawing (LCP) LCP mesure la performance de chargement de la page.
Nous ne parlons pas de la vitesse de chargement de la page, mais de la vitesse perçue de la page. Cela signifie que l’utilisateur a l’impression que la page est chargée. La page entière peut être chargée plus longtemps; Le LCP ne le mesure pas. Il mesure le temps nécessaire pour charger le premier élément le plus sensible de la page. La page charge les éléments par élément en plusieurs phases. Par conséquent, le contenu principal en haut de la page doit être chargé rapidement. Plus tôt cela se produira, mieux ce sera. Le LCP ne doit pas dépasser 2,5 secondes.
La première entrée retardée fid mesure la première impression de l’utilisateur sur le site. De même, nous ne parlons pas de la vitesse à laquelle les pages sont chargées, mais de la vitesse à laquelle les utilisateurs interagissent avec les pages. Cette mesure essentielle du Web capture la première impression de l’utilisateur sur la page lorsque le navigateur est capable de répondre à l’interaction. L’interaction peut se produire lorsque l’utilisateur clique sur un lien, clique sur un bouton ou utilise un formulaire personnalisé. Combien de temps faut – il pour qu’un lien devienne cliquable? Si l’utilisateur remplit le formulaire et doit attendre le chargement de la page suivante parce que le navigateur est occupé à charger le reste de la page, le FID est élevé.
Cela crée de la frustration lorsque l’utilisateur entre l’information et souhaite passer à la page suivante.
Et votre page \/ site Web pour obtenir des informations essentielles sur le Web. Pour ce faire, il faut d’abord mesurer les paramètres importants.
Outils pour mesurer les réseaux importants Google offre une gamme d’outils pour mesurer les informations importantes sur les réseaux de base. Tous les outils populaires de Google peuvent vous aider à trouver des problèmes avec vos pages. Cependant, vous pouvez effectuer deux types de tests. Les outils de laboratoire aident à effectuer des essais dans des conditions de laboratoire. Il montre comment les utilisateurs potentiels verront votre page et vous permet d’optimiser la page en configurant l’environnement de test. Les outils sur place vous aident en fournissant des détails sur la façon dont les utilisateurs réels peuvent expérimenter le site. Comme Chrome Browser recueille les données des utilisateurs et les représente, Google recommande de modifier la page.
Voici cinq outils faciles à utiliser pour contrôler votre page Web: Lighthouse page speed Insights Search console Vitality Web extension. Dev Faro Lighthouse est un outil de contrôle de site Google qui aide les développeurs à identifier les problèmes et les opportunités et à améliorer l’expérience utilisateur de la page. Il fournit de l’information sur divers aspects de la qualité de l’expérience utilisateur, comme le rendement et l’accessibilité, mais il est fourni dans un environnement de laboratoire. Avec de nouvelles mises à jour, Lighthouse 6.0 introduit de nouveaux paramètres, contrôles et scores de performance pour les pages Web.
Parmi les nouveaux indicateurs ajoutés, deux sont le plus grand rendu de contenu (LCP) et le décalage cumulatif de mise en page (CLS). Le troisième indicateur est le temps total de blocage (TBT). Le TBT est une alternative au FID dans des conditions de laboratoire. Ces trois indicateurs ont également été pris en compte dans le calcul de la note de rendement du phare. Comment utiliser le phare: Étape 1: ouvrir la page sur Chrome Étape 2: ouvrir l’outil de développement Chrome Étape 3: cliquez sur l’onglet phare. À partir de là, vous pouvez produire un rapport sur le phare. Vous pouvez également installer
Core Web vitals and other Web vitals page speed Insight: Comparing Laboratory and Field Performance of the Core Web vitals Search console: Checking the Performance of the site Hot pages vitals web Extensions: Measure the main Web vitals of the page by clicking on the Web once. Dev: pour obtenir une liste prioritaire des paramètres importants et un guide d’optimisation de page, optimiser l’expérience utilisateur Étape 1: identifier les pages problématiques dans la console de recherche la première étape consiste à examiner les problèmes que vous voyez dans la console de recherche Google. Ouvrez le rapport des éléments essentiels du Web pour trouver les pages qui nécessitent une attention et des améliorations urgentes. Au fait, ce sont vos pages clés. Étape 2: analyse de la page à l’aide de PageSpeed Insights vous pouvez ouvrir le rapport PageSpeed Insights à partir du tableau de bord de la console de recherche. Cliquez sur l’URL et un panneau défilera de droite. Lorsque vous cliquez sur PageSpeed Insight, vous êtes dirigé vers le rapport dans le nouvel onglet. Lisez le rapport et découvrez la cause du problème. Étape 3: utilisez Lighthouse pour obtenir des données de page plus spécifiques. Page speed et Lighthouse donnent les mêmes conseils et rapports; Cependant, il y a d’autres caractéristiques du phare. Il est donc conseillé de consulter la page Lighthouse pour en savoir plus. Étape 4: prioriser avec le Web. Dev vous recevrez de nombreux conseils pour améliorer l’expérience Web des utilisateurs; Cependant, vous devez donner la priorité aux changements à apporter. Cela peut se faire sur le Web. Développer \/ mesurer, ou vous pouvez le faire manuellement. Consultez votre site Web. Le développeur obtient une liste des priorités recommandées. Étape 5: résolvez vos problèmes de site maintenant, un par un. Tous les tests que vous avez effectués vous ont fourni suffisamment de données et de conseils, et vous savez maintenant ce qui doit être fait. Il est temps d’agir. Optimiser le rendu plus r
Livery Network est un vaste réseau de serveurs répartis dans le monde entier. CDN enregistre votre contenu sur le serveur à côté de l’utilisateur, et lorsque l’utilisateur ouvre à nouveau la page, le navigateur récupère la page du serveur CDN au lieu du serveur Web. De cette façon, le navigateur n’a pas besoin de recevoir une réponse d’un serveur distant, mais il peut le faire par le serveur le plus proche. Par conséquent, le temps de latence est réduit et le temps de réponse global du serveur est amélioré. Il y a beaucoup de CDN gratuits dans ce monde. Cloudstore en fait partie. CDN: cloudstore Akamai sucuri keycdn cdn77 ressources de cache que vous pouvez utiliser si la page Web est statique et qu’aucune modification périodique n’est apportée à la page, le stockage de répliques localement peut grandement accélérer le chargement. Les navigateurs n’ont pas besoin d’envoyer des requêtes à chaque fois pour récupérer les mêmes ressources, et les charger à partir de la mémoire locale est plus rapide. De nombreux plugins de cache WordPress sont disponibles gratuitement. Best WordPress cache plug – in: W3 total cache le cache le plus rapide WP supercache WP Rocket Comet Case Pre – Establish Third Party Connection pages contain items not only Loaded from one Domain but also from Multiple Domains. Dans ce cas, vous devriez dire au navigateur que la page contient des éléments qui vous obligent à vous connecter à une application tierce. Les navigateurs modernes font mieux pour prévoir les connexions de tiers, mais la situation serait différente si je leur avais dit à l’avance. Il suffit d’ajouter rel = preconnect au lien pour dire au navigateur que votre page sera connectée à un autre domaine et que l’effet sera meilleur si le navigateur démarre le processus dès que possible. JavaScript et CSS Block render le navigateur doit analyser le code avant de rendre la page
Dpress a une page pleine d’images. Grandes images, carrousels, bannières, annonces, etc. Les images sont souvent une partie importante de toute page Web. De plus, elles sont essentielles à la construction de mises en page interactives et attrayantes. Vous pouvez prendre les mesures suivantes pour optimiser et compresser l’image. Si ce n’est pas nécessaire, n’utilisez pas d’images (ou d’images de haute qualité) et Conservez le contenu textuel. Convertir des images en format Web (jpeg200 ou webp) en utilisant des images compressées avec un plug – in WordPress (smoush ou shortpixel) implémenter des images CDN compresser des fichiers texte en utilisant des images de réponse activer la compression Gzip sur les sites WordPress peut réduire considérablement la taille des fichiers, ce qui signifie des transferts de fichiers plus rapides et des téléchargements à partir du serveur. La compression des ressources améliorera le temps de chargement et le LCP. Si la compression Gzip est activée, contactez votre fournisseur d’hébergement. La plupart des sociétés d’hébergement permettent la compression par défaut ou fournissent une configuration simple. Comme serverguy, nos hôtes WordPress sont optimisés pour la vitesse. Donc vous n’avez pas à vous soucier de la compression Gzip. Cependant, si vous souhaitez compresser des fichiers texte, suivez nos instructions pour activer la compression Gzip. Service adaptatif le service adaptatif consiste à comprendre l’état de l’appareil et du réseau de l’utilisateur, puis à s’y adapter. Par exemple, si l’utilisateur utilise 4G, téléchargez d’abord l’image, puis la vidéo. Mais si cette personne utilise le wifi et que la vitesse du réseau est élevée, téléchargez d’abord la vidéo. L’encodage est similaire aux attributs utiles que vous pouvez utiliser si (navigateur.connection & & navigateur.connection.effecttype) {if (navigateur.connection.effecttype = = ‘wifi’) {\/ \/ load Video} ou {\/ \/ load image}}}}: navigateur. Contact Type valide
Type de connexion de navigation valide. Contact Enregistrer les données: active \/ désactive le navigateur enregistrer les données. Concurrence matérielle: nombre de noyaux de navigateur de processeurs. Mémoire du périphérique: la mémoire du périphérique cache les ressources en utilisant le Worker de service le Worker de service est le script que le navigateur charge en arrière – plan. Ces fournisseurs de services peuvent être utilisés pour mettre en cache des ressources afin qu’elles soient desservies par un navigateur plutôt que par un serveur. L’utilisation d’un fournisseur de services pour mettre en cache les ressources critiques peut accélérer le chargement du site. Vous n’avez pas besoin de créer un gestionnaire de service personnalisé, et il y a des bibliothèques comme workbox qui simplifient les tâches. Rendu client de nombreux éléments du site WordPress utilisent le rendu client. Par exemple, lorsque vous vous inscrivez à n’importe quel site Web, votre mot de passe est demandé deux fois. Si les mots de passe sont différents dans les deux cases, affichez un signal d’avertissement avant de cliquer sur envoyer. C’est un exemple de rendu client parce que le serveur n’a pas à faire quoi que ce soit avec cette fonctionnalité. De même, de nombreuses fonctions et options sont utilisées pour le rendu côté client. Bien que utile, Si JavaScript est impliqué, il affecte LCP. Vous devez faire quelques optimisations pour minimiser l’impact du rendu client sur le temps LCP du site WordPress. Minimiser les JS critiques si le contenu d’une page Web dépend fortement du chargement Javascript, la taille du paquet JS doit être réduite autant que possible. Vous pouvez le faire: minimiser la latence JavaScript non utilisée JavaScript minimiser le remplissage polygonal non utilisé utiliser le pré – rendu le pré – rendu est une technique plus facile pour améliorer le LCP du site WordPress. Où un fichier HTML statique est généré sur un navigateur sans en – tête. Vous pouvez ensuite combiner ces fichiers avec le rendu
(En milliers de dollars des États – Unis) Le temps optimal pour optimiser le premier fid de retard d’entrée est de 100 millisecondes. De plus, selon Google Chrome, les retards sont également ennuyeux pour les utilisateurs. Fid doit être inférieur à 100 millisecondes et vous devriez optimiser le site WordPress pour cela. Le JavaScript lourd est la principale raison du mauvais fid et peut être réduit en optimisant JS. Conseils pour obtenir le meilleur fid: interrompre la page d’optimisation des tâches longues pour une utilisation interactive avec le travailleur Web réduire le temps d’exécution JavaScript interrompre la partie du Code des tâches longues qui bloque le fil principal pendant 50 MS ou plus peut être considérée comme une tâche longue. Après avoir réduit JavaScript sur les blogs WordPress, vous devriez chercher ces longues tâches. Vous pouvez les diviser en plusieurs tâches et leur permettre de fonctionner asynchrone. Vous pouvez trouver de longues tâches dans les outils de développement de chrome. Allez dans le panneau performance.
Créez un script ire en arrière – plan en utilisant les travailleurs Web. Par exemple, le déplacement d’une opération non – ui vers un rôle de travail distinct peut réduire la charge de travail du fil principal et, en bout de ligne, améliorer le fid. Vous pouvez trouver le travailleur Web à utiliser dans de nombreuses bibliothèques. Le travail de comlink workway réduit le temps d’exécution JavaScript décrit ci – dessus, qui est essentiel pour obtenir un meilleur fid. La meilleure façon de réduire le temps d’exécution des JS est de réduire le nombre de JS à exécuter. Cela accélérera l’ensemble du processus et permettra aux navigateurs de répondre plus rapidement aux interactions avec les utilisateurs. Comment réduire le nombre de JS sur la page: rafraîchir le javascript inutilisé minimiser le remplissage de polygones inutilisés rafraîchir le javascript inutilisé lorsque le navigateur rencontre le javascript, stocker tout le Code et prioriser le téléchargement, l’analyse, la compilation et l’exécution du JavaScript. C’est pourquoi vous ne devriez charger que les JS nécessaires à la page. Vous trouverez les JS inutilisés dans l’onglet couverture du panneau des développeurs Chrome. Il y a deux façons de réduire le javascript inutilisé. Méthode 1: déchiffrer le Code: diviser les grands codes en petits blocs et les charger conditionnellement (lentement). Tous les navigateurs modernes prennent en charge la syntaxe d’importation dynamique. Méthode 2: async ou defer: utilisez les balises async et defer pour tous les scripts tiers indésirables, comme le contenu au – dessus de l’effondrement. Minimiser les mises à jour de polyfill inutilisées introduit de nouvelles fonctionnalités HTML et JS pour faciliter le développement. Mais le problème est que le navigateur n’implémente pas ces changements très rapidement. Pour résoudre ce problème, les développeurs utilisent polyfill pour les fonctionnalités qui ne sont pas prises en charge par le navigateur. Cependant, polyfill a ses inconvénients et a ajouté du thé
FID est cassé. La meilleure solution consiste à réduire au minimum le nombre de polyfills inutilisés ou à ne les utiliser que si nécessaire. Mais ce n’est pas une tâche facile. Pour en savoir plus sur l’optimisation du remplissage des polygones, lisez cet article. Pour une bonne expérience utilisateur, le site WordPress devrait avoir un score CLS inférieur à 0,1. Les changements de mise en page peuvent distraire l’utilisateur et provoquer l’utilisateur à quitter la page. Une note CLS inférieure à 1 est essentielle, sinon l’expérience utilisateur peut être mauvaise. Vous pouvez optimiser la page pour obtenir les meilleurs scores CLS. Les raisons courantes d’un mauvais CLS sont les annonces d’images sans taille, l’intégration et l’injection de contenu dynamique iframe les images sans taille avec des attributs de largeur et de longueur augmentent les scores CLS. Lorsque la page est chargée de haut en bas, laissez un espace vide sur la page si aucune taille d’image (longueur et largeur) n’est spécifiée. Au début, les développeurs ont ajouté des attributs de longueur et de largeur aux balises d’image, mais ces balises sont en pixels. Par exemple: La taille des pixels est spécifiée et le navigateur laisse de l’espace pour l’image, quelle que soit la taille de l’image. L’image doit s’étendre sur une zone de 640 x 360 pixels. Mais la conception réactive a suivi, et les développeurs ont cessé d’écrire des attributs de largeur et de longueur. Au lieu de cela, ils ont commencé à utiliser css pour redimensionner l’image en fonction de l’affichage de l’appareil. Exemple: IMG {largeur: 100%; \/ * ou largeur maximale: 100%; * \/ hauteur: automatique;} Cette approche est réalisable, mais elle a aussi des aspects négatifs. Ce n’est qu’après le téléchargement de l’image que le navigateur peut connaître la taille de l’image. Lorsque l’image est chargée, le contenu de la page se réattribue. L’écran apparaît soudainement et l’utilisateur perd sa position sur la page
Ou YouTube, Google Maps, Twitter, etc. Le navigateur ne peut pas connaître ces tailles intégrées. Premièrement, l’intégration est dynamique et peut être modifiée. WordPress ne peut pas voir les tailles intégrées et ne peut pas les réserver. Enfin, ils seront chargés, ce qui aura une incidence sur la mise en page de la page. La meilleure solution à ce problème est de calculer à l’avance la taille de l’intégration et de laisser un substituant sur la page. Cependant, pour ce faire, vous avez besoin d’un développeur Web. Vérifiez les articulations après le chargement et vérifiez le réglage de la taille un substituant de la même taille injecte dynamiquement du contenu en plus de la publicité, il y a trop de contenu, et le Webmaster essaie souvent de pousser en l’insérant en haut du contenu chargé. Une bannière de service, un formulaire, une politique de confidentialité mise à jour qui interrompt souvent l’expérience de la page. Autre exemple: Abonnez – vous à notre newsletter! En ce qui concerne l’installation d’applications Natives, nous acceptons toujours les notifications gdpr de commande. La solution est la même. Si vous téléchargez du contenu, laissez suffisamment d’espace sur la page pour ne pas affecter la mise en page de la page. Résumé