Création site Web 100% Gratuit

Chez nous, vous ne payez que nos abonnements de maintenance, la création de votre site est offerte.
*Offre valable jusqu’à fin novembre 2022

Manuel Core Web Vitals 2022

Sep 1, 2022

article de blog

Comment améliorer Core Web Vitals ?

Cumulative Layout Shift (CLS) Spécifier des tailles de blocs spécifiques Images via l’attribut de chargement différé Supprimer le chargement Ajax et JavaScript Utiliser des outils de développement pour améliorer les performances La vitesse de chargement des pages était importante avant la nouvelle mise à jour Core Web Vitals de l’été 2021, mais maintenant Google s’y attache encore plus. Plus un site web se charge rapidement, plus il est facile pour l’utilisateur d’interagir avec lui. S’il est lent, les utilisateurs sont plus susceptibles de chercher d’autres propriétés web pour acheter, commander des services ou lire des informations. Les recherches de Google le confirment : 50 % des utilisateurs n’attendent pas plus de 2 secondes pour que les pages se chargent. S’il atteint 3 secondes, 30 % des utilisateurs abandonnent le site. 6 secondes signifient un taux de rebond allant jusqu’à 100. En outre, 79 % des utilisateurs ne se rendront plus sur le portail web. Autre fait important : sur les sites dont les pages se chargent rapidement, les utilisateurs voient jusqu’à 25 % de publicités en plus, ce qui se répercute sur les revenus. Un retard d’une seconde dans le chargement réduit la conversion de 7 %. Nous pouvons en conclure que le marketing ne fonctionne pas avec les sites lents. Selon le nouvel algorithme de recherche, le temps optimal de réponse d’une page est de 2,5 secondes. Pour améliorer les performances du site et Core Web Vitals : appliquer des plugins de mise en cache à WordPress . Cela permettra de réduire le temps de traitement et donc d’accélérer le site. Les 5 principaux plugins : WP Rocket, WP Super Cache, W3 Total Cache, Batcache, WP Fastest Cache. Réduire le nombre de demandes adressées au serveur. Moins il y en a, plus le site est rapide. Utilisez l’attribut defer pour les scripts JS externes. Cela permettra au navigateur de charger le script en arrière-plan et de l’exécuter après traitement. Cela permet d’éviter que la page ne soit bloquée au cours du processus. Loading= »lazy » pour les images. Optimiser la vitesse de chargement des médias avec cette méthode est une astuce pratique lorsqu’il y a beaucoup d’éléments graphiques sur le site. Mettre en œuvre la mise en cache de Nginx. Il génère la page une fois et stocke le résultat en mémoire. Lorsque l’utilisateur demande à nouveau les mêmes informations, la version sauvegardée s’affiche. C’est plus rapide que de générer la page à partir de zéro. Pensez également à HTTP/3 pour crypter tout le trafic et indiquer aux moteurs de recherche que votre site est digne de confiance. Utilisez un CDN pour un transfert rapide des données. Les sociétés d’hébergement CDN sont équipées de serveurs supplémentaires qui mettent en cache tout ou partie des données, en plus des serveurs habituels. Cela vous permet de répartir uniformément la charge sur les serveurs qui reçoivent un grand nombre de demandes, ainsi que d’augmenter la vitesse de transfert des informations nécessaires à l’utilisateur final. N’oubliez pas Cloudflare pour un chargement plus rapide des sites grâce à la technologie CDN et sa meilleure protection contre les attaques DDoS. Ce dernier fonctionne comme suit : les informations passent d’abord par un filtre spécial de Cloudflare puis, déjà filtrées des demandes suspectes, elles atteignent le site. N’oubliez pas Gulp pour automatiser la plupart des processus frontaux. Appliquez Webpack. Ce constructeur de modules permettra non seulement d’accélérer les solutions JavaScript, mais aussi de réduire le nombre de bogues. Divisez les styles en fichiers – cela accélère le site. Comment faire ? Créez un fichier pour les styles qui sont utilisés sur chaque page. Par exemple, les styles pour : en-tête, pied de page, menu, texte. Puis des fichiers pour chaque page suivante comme style-category, style-product, style-home. Vous pouvez désormais les inclure séparément sur la page où ils sont appliqués. Tout ce qui précède contribuera à rendre votre site rapide et agréable pour l’utilisateur, et donc meilleur aux « yeux » du moteur de recherche.

Le décalage cumulatif de mise en page analyse le décalage cumulatif de mise en page. De nombreuses personnes ont été confrontées à la situation où le texte se déplace et se perd pendant la lecture. C’est très ennuyeux. CLS indique la zone décalée sous forme de pourcentage, par exemple 10 %. Si le texte est déplacé davantage, la valeur passera à 12%. Le décalage du contenu est causé par l’ajout dynamique d’éléments DOM sur le contenu existant, ou par le chargement asynchrone de JS&CSS. Les causes courantes sont les vidéos ou les images de taille inconnue, les différentes polices de caractères et les widgets de tiers qui redimensionnent. Le problème peut être exacerbé lorsque le site est en mode test. Le contenu se comporte souvent différemment du développement car les fichiers sont mis en cache dans le navigateur et les appels d’API sont exécutés localement et s’exécutent si rapidement que la latence est imperceptible. Le score cumulé de décalage de mise en page (CLS) permet de résoudre ce problème. Il mesure la fréquence des échecs pour les utilisateurs réels. Avec CLS, vous pouvez évaluer l’expérience globale de l’utilisateur et comprendre dans quelle mesure le site est utilisable. La tâche de Cumulative Layout Shift est de mesurer la stabilité visuelle de la page, car elle affecte la perception. Plus le score CLS est faible, plus le score de stabilité visuelle est élevé. Pour l’instant, Layout Shift est disponible lorsque l’API est activée. Si vous utilisez Chrome 76 ou une version plus récente, utilisez la ligne de commande pour l’exécuter, où vous devez écrire : -enable-blink-features=LayoutInstabilityAPI.

Pour rendre le site Web convivial, il est important de charger le contenu correctement. Par exemple, il faut un certain temps pour que le curseur s’initialise avant que la bibliothèque ou d’autres fichiers soient chargés. De ce fait, le contenu sera constamment modifié, ce qui ne rend pas la ressource présentable. Pour éviter cela, vous devriez créer un slider simulé et ensuite télécharger des photos. Avec CLS, vous pouvez définir un décalage de mise en page (fenêtre de session). Il s’agit de changements individuels se produisant en succession rapide, avec un intervalle de moins d’une seconde entre chaque changement. La durée totale est de 5 secondes. Auparavant, le CLS mesurait le nombre total de changements de disposition au cours d’une vie. La mise à niveau permet d’offrir à l’utilisateur le plus grand confort possible. Il est important que la valeur du CLS ne dépasse pas 0,1.

Le chargement paresseux est un moyen de retarder le chargement des images. Cela ne se produit pas immédiatement avec la page, mais lorsque l’utilisateur a fait défiler la page jusqu’à une image particulière (celle-ci est automatiquement rechargée). Cette fonction est mise en œuvre en utilisant AJAX et JavaScript. Convient aux balises img et iframe. L’attribut src indique la source. En webp, les images occupent moins de mémoire. Pour télécharger dans ce format, supprimez le préchargement, après quoi la mise en page sera modifiée. Vous pouvez refaire l’arrière-plan et procéder à d’autres ajustements. Par exemple : img src= »the-highest-mountain-in-Europe.png » loading= »lazy » alt= »beautiful mountains » width= »200″ height= »200″ Depuis Chrome 76, l’utilisateur peut utiliser le chargement différé des diapositives et des images sans devoir écrire de code ou utiliser une bibliothèque JavaScript. La fonction de chargement différé est prise en charge par presque tous les navigateurs populaires basés sur Chromium, notamment : Edge, Chrome, Opera et Firefox. Une implémentation pour Safari est en cours de développement. Les navigateurs qui ne prennent pas en charge le « chargement paresseux » l’ignorent tout simplement, sans effets secondaires. Selon la communauté de recherche web HTTP Archive, les vidéos et les images sont le contenu le plus demandé pour la plupart des ressources. En moyenne, les sites envoient environ 4,7 Mo de contenu aux appareils mobiles et aux ordinateurs, de sorte que la possibilité de retarder le téléchargement est très importante. Il existe deux façons de mettre en œuvre cette fonction : l’API Intersection Observer. Traitement avec redimensionnement, orientation et autres paramètres. Les deux comprennent un chargement différé. Les développeurs ont créé des bibliothèques tierces pour une meilleure utilisation. Mais comme le chargement paresseux est pris en charge par le navigateur, ils ne sont pas nécessaires. Même si JavaScript est désactivé, le chargement paresseux fonctionne.

JavaScript affecte les performances et le trafic d’un site web. Personne n’a envie de rester sur une page dont le chargement prend du temps. Pour qu’un site web fonctionne correctement, il est important de s’assurer que le langage dynamique ne le ralentit pas. Le JavaScript tiers fait référence à des scripts créés (alimentés par des serveurs tiers) et utilisés à des fins diverses : réseaux sociaux, lecteurs vidéo, services de chat, cadres publicitaires, scripts d’analyse. Conseils utiles pour améliorer les performances de JavaScript : Utilisez les mécanismes de mise en cache du navigateur. Il existe deux options : JavaScript-API Cache ou plain HTTP cache. Optimiser le code pour l’environnement dans lequel il sera exécuté. Supprimer le code JS inutilisé. Utilisez la mémoire avec parcimonie. Utiliser un mécanisme de chargement différé pour les scripts mineurs. Utilisez des crawlers web pour les calculs lourds. Si un élément DOM est utilisé plusieurs fois, stockez le lien dans une variable. Limitez au maximum les variables globales. Examinez les performances des applications. Pour JavaScript, appliquez les optimisations de code qui sont appropriées pour les programmes dans d’autres langages. Il est important de trouver un équilibre entre la lisibilité et l’optimisation du code. Il doit être convivial pour les humains et les moteurs de recherche.

Le panneau Performance affiche la chronologie de l’exécution du code JavaScript, de la charge de la mémoire et de l’utilisation du réseau. Des données sur l’exécution du code et le cycle vital des pages sont à la disposition de l’utilisateur. Les performances vous permettent d’analyser l’exécution de morceaux de code individuels, de sélectionner une période de temps spécifique et de voir quels processus étaient en cours d’exécution à ce moment-là. Fonctions spéciales : Analyse des événements qui se sont produits après le chargement de la page.Affichage des FPS, de l’utilisation du CPU, des demandes de réseau Aperçu.Pour voir les détails, il suffit de cliquer dans l’ouverture de l’événement.Changer le zoom de la ligne de temps, ce qui simplifie l’analyse. Il est important de s’assurer que les composants de la page à charger restent en place pendant le chargement. Tableau de codes pour le navigateur Chrome : Allez dans le panneau « Réseau ». Activez « Afficher l’application », sélectionnez le mode plein écran. Pour ouvrir DevTools, cliquez sur la combinaison : Control + Shift + J (ou Command + Option + J sur un Mac). Cliquez sur l’onglet « Réseau », rechargez la page. Le volet « Réseau » affiche les actifs chargés à partir de la navigation d’origine.

La relation de Google avec la mise à jour de l’expérience utilisateur 2022

Pour comprendre comment fonctionnent les mises à jour 2022 de Google, nous utilisons la vidéo de Dan Taylor, responsable de l’agence Salt basée au Royaume-Uni. L’expérience utilisateur comprend de nombreux facteurs : convivialité, navigation, vitesse de chargement des pages, accessibilité du contenu, etc. Avec la mise à jour 2022, Google veut atteindre l’utilisateur encore plus qu’avant. L’idée est que les internautes reviennent plus souvent sur le moteur de recherche, pour effectuer des recherches complémentaires, pour lire et pour cliquer sur les liens publicitaires de Google. Avant la naissance de JavaScript, l’algorithme de Google était assez simple : il indexait la page, l’explorait et l’évaluait. Il y a maintenant un processus de rendu, qui est un mécanisme d’exploration secondaire. Le classement est effectué sur la base des mécanismes de classement précédents. Dans le processus de rendu web, il est important de prendre en compte le contenu du site, la mise en page, le nombre de fenêtres publicitaires. La page doit être bien optimisée et remplie d’un contenu de premier ordre.

Sortez-le

Les développeurs frontaux et dorsaux, ainsi que les spécialistes du référencement, devraient surveiller régulièrement Core Web Vitals à l’aide des outils mentionnés dans le matériel. Si de mauvaises mesures sont détectées, des changements doivent être effectués immédiatement. Tout cela aidera le site à rester en tête du classement des moteurs de recherche.

29 des meilleurs outils SEO pour auditer et surveiller votre site Web en 2022

L’objectif du marketing est de générer du trafic et des prospects qualifiés via le site Web de l’entreprise. C’est pourquoi, en tant que spécialistes du marketing, nous devons comprendre exactement ce que nous pouvons …

Besoin de plus de visiteurs sur votre site Web ? Revenez à l’essentiel

Lorsque vous entendez le terme « SEO » ou « optimisation pour les moteurs de recherche », pour qui pensez-vous que cela implique que vous devriez optimiser votre site ? Eh bien, je vais vous donner un indice : ce n’est pas pour les moteurs …

Demander l’indexation Google pour être trouvé plus rapidement

Lors de l’indexation, les moteurs de recherche comme Google enregistrent les pages web dans leur répertoire. Seul ce qui se trouve dans ce répertoire est affiché aux utilisateurs dans dans la recherche Google. …

Votre site 100% Gratuit

Profitez de votre création de site gratuite 👍
* Offre limitée jusqu’à fin Novembre

Vous souhaitez poster un commentaire ?

0 commentaires