Ce que la nouvelle mise à jour de l'expérience de la page de Google signifie pour les images sur votre site Web

Il est facile d'oublier que, en tant que moteur de recherche, Google ne compare pas seulement les mots clés pour générer des résultats de recherche. Google sait que si les gens n'apprécient pas leur expérience sur une page Web, ils ne resteront pas sur la page assez longtemps pour consommer le contenu - quelle que soit sa pertinence.

En conséquence, Google a expérimenté les moyens d'analyser l'expérience utilisateur des pages Web à l'aide de mesures quantifiables. En les prise en compte dans son classement des moteurs de recherche, on espère fournir aux utilisateurs non seulement un contenu excellent et pertinent, mais aussi des expériences utilisateur impressionnantes.

La mise à jour de l'expérience de la page qui sera bientôt lancée de Google est une étape majeure dans cette direction. Les propriétaires de sites Web avec des sites Web lourds de l'image doivent être particulièrement vigilants pour s'adapter à ces changements ou risquer de tomber au bord du chemin. Dans cet article, nous parlerons de tout ce que vous devez savoir concernant cette mise à jour et comment vous pouvez en profiter pleinement.

Remarque: Google a présenté ses plans d'expérience en page en mai 2020 et a annoncé en novembre 2020 qu'il commencera à se déployer en mai 2021. Cependant, Google a depuis retardé leurs plans pour un déploiement progressif à partir de la mi-juin 2021.

Quelques antécédents

Avant d'entrer dans la dernière itération des modifications dans la façon dont Google facteurs l'expérience des utilisateurs dans les mesures dans les classements des moteurs de recherche, obtenons un certain contexte. En avril 2020, Google a fait le plus grand nombre de choses dans ce sens en introduisant une nouvelle initiative: Core Web Vitals.

Core Web Vitals (CWV) a été introduit pour aider les développeurs Web à relever les défis d'essayer d'optimiser pour les classements des moteurs de recherche en utilisant des mesures testables - quelque chose de difficile à faire avec une chose très subjective comme l'expérience utilisateur.

Pour ce faire, Google a identifié trois mesures clés (ce qu'elle appelle les «mesures de performances centrées sur l'utilisateur»). Ce sont:

1. LCP (plus grande peinture contente): le plus grand élément au-dessus du pli lorsqu'une page Web se charge initialement. En règle générale, il s'agit d'une grande image ou d'une en-tête en vedette. À quelle vitesse l'élément de contenu le plus grand joue un rôle énorme dans la vitesse à laquelle l'utilisateur perçoit la vitesse de chargement globale de la page.
2. FID (premier délai d'entrée): Le temps nécessaire entre le moment où un utilisateur interagit pour la première fois avec la page et lorsque le thread principal est gratuit pour que le navigateur traite l'événement. Cela peut cliquer / taper sur un bouton, un lien ou interagir avec tout autre élément dynamique. Les retards lorsque l'interaction avec une page peut évidemment être frustrant pour les utilisateurs, c'est pourquoi le maintien de FID bas est crucial.
3. Shift de mise en page cumulatif (CLS): Cela calcule la stabilité visuelle d'une page lorsque elle se charge pour la première fois. L'algorithme prend en compte la taille des éléments et la distance qu'elles déplacent la fenêtre. Les pages qui se chargent avec une instabilité élevée peuvent provoquer des erreurs par les utilisateurs, ce qui conduit également à des situations frustrantes.

Ces mesures sont évoluées à partir de plus rudimentaires qui sont utilisées depuis un certain temps, comme SI (index de vitesse), FCP (première peinture contente), TTI (temps à interactif), etc.

La raison pour laquelle cela est important est que les images peuvent jouer un rôle important dans la façon dont le score CWVS de votre site Web. Par exemple, le LCP est le plus souvent une image ci-dessus ou, à tout le moins, devra rivaliser avec une image à charger en premier. Les images qui ne sont pas correctement utilisées peuvent également avoir un impact négatif sur les CL. Les images à chargement lent peuvent également avoir un impact sur le FID en ajoutant d'autres retards au rendu global de la page.

De plus, cela est venu à l'arrière de la concentration renouvelée de Google sur l'indexation d'abord mobile. Ainsi, non seulement ces mesures sont importantes pour votre site Web, mais vous devez également vous assurer que vos pages marquent bien sur les appareils mobiles.

Qu'est-ce qui va changer? Expérience de page pour la recherche Google

Il est clair que, en général, Google privilégie de plus en plus l'expérience utilisateur en ce qui concerne le classement des moteurs de recherche. Ce qui nous amène à la dernière mise à jour - Google prévoit désormais d'incorporer l'expérience de la page en tant que facteur de classement, en commençant par un déploiement anticipé à la mi-juin 2021.

Alors, quelle est l'expérience de la page? En bref, c'est un signal de classement qui combine des données à partir d'un certain nombre de mesures pour essayer de déterminer à quel point l'expérience utilisateur d'une page Web est bonne ou mauvaise. Il se compose des facteurs suivants:

• Core Web Vitals: Utilisation du même site Web de base inchangé. Google a établi des lignes directrices et recommandé les classements que vous pouvez trouver ici. Vous avez besoin d'une «bonne» «bonne» note CWV pour vous qualifier pour un «bon» score d'expérience de page.
• Utilisabilité mobile: une URL ne doit avoir aucune erreur de convivialité mobile pour se qualifier pour un «bon» score d'expérience de page.
• Problèmes de sécurité: tous les problèmes de sécurité signalés disqualifieront les sites Web.
• HTTPS: Les pages doivent être servies via HTTPS pour se qualifier.
• Expérience publicitaire: les mesures à quelle mesure les annonces affectent négativement l'expérience utilisateur sur votre page Web, par exemple, en étant intrusive, distrayante, etc.

Dans le cadre de ce changement, Google a annoncé son intention d'inclure un indicateur visuel ou un badge qui met en évidence les pages Web qui ont passé ses critères d'expérience de page. Cela sera similaire aux badges précédents que le moteur de recherche a utilisés pour promouvoir AMP (pages mobiles accélérés) ou pages adaptées aux mobiles.

Cette reconnaissance officielle donnera aux pages Web très performantes un avantage énorme dans l'arène hautement compétitive qu'est les SERP de Google. Ce signal visuel augmentera sans aucun doute les CTR et le trafic organique, en particulier pour les sites qui se classent déjà bien. Cette fonctionnalité peut baisser dès que le mois de mai, si elle passe sa phase d'essai actuelle.

Une autre bonne nouvelle pour les utilisateurs non-AMP est que toutes les pages deviendront désormais éligibles pour les meilleurs histoires dans le navigateur et l'application Google News. Bien que Google déclare que les pages peuvent se qualifier pour les meilleurs histoires «indépendamment de son statut de score de traits Web Vitals ou de page», il est difficile d'imaginer que cela ne jouait pas de rôle pour l'admissibilité maintenant ou en baisse.

Clé à retenir: Qu'est-ce que cela signifie pour les images sur votre site Web?

Google a noté une augmentation de 70% de l'utilisation des consommateurs de leur phare et de leurs outils de perspicacité de pages, montrant que les propriétaires de sites Web rattrapent l'importance d'optimiser leurs pages. Cela signifie que les normes ne deviendront de plus en plus élevées que lorsque vous êtes en concurrence avec d'autres sites Web pour les classements des moteurs de recherche.

Google a réaffirmé que, malgré ces changements, le contenu est toujours roi . Cependant, le contenu est plus que le texte de vos pages, et le contenu vraiment engageant et convivial se compose également de médias réfléchis, dont la majorité sera probablement des images.

Avec la page proposée des badges d'expérience et les meilleurs histoires d'éligibilité à gagner, les enjeux n'ont jamais été plus élevés pour se classer très bien avec l'algorithme de recherche Google . Vous avez besoin de tous les avantages que vous pouvez obtenir. Et, comme je suis sur le point de le montrer, l'optimisation de vos actifs d'image peut avoir un effet tangible sur le score bien en fonction de ces mesures.

Que pouvez-vous faire pour suivre?

Avant de proposer ma solution pour vous aider à optimiser les actifs d'image pour les vitaux du Web de base, examinons pourquoi les images sont souvent préjudiciables aux performances:

• Les images gonflent la taille globale des pages de votre site Web, surtout si les images ne sont pas optimisées (c'est-à-dire non compressées, pas correctement dimensionnées, etc.)
• Les images doivent être sensibles à différents appareils. Vous avez besoin de tailles d'images beaucoup plus petites pour maintenir la même qualité visuelle sur des écrans plus petits.
• Différents contextes (navigateurs, OSS, etc.) ont différents formats pour rendre optimalement des images. Cependant, la plupart des images sont toujours utilisées au format .jpg / .png.
• Les propriétaires de sites Web ne connaissent pas toujours les meilleures pratiques associées à l'utilisation d'images sur les pages de sites Web, comme toujours en spécifiant explicitement les attributs de largeur / hauteur.

En utilisant des méthodes conventionnelles, il peut prendre beaucoup de sang, de transpiration et de larmes pour résoudre ces problèmes. La plupart des solutions, telles que l'édition manuellement des images et la syntaxe réactive du codage dur, ont des problèmes inhérents à l'évolutivité, la capacité de mettre à jour / s'adapter facilement aux modifications et de bloquer votre pipeline de développement.

Pour optimiser vos actifs d'image, en particulier en mettant l'accent sur l'amélioration des CWV, vous devez:

• Réduire les charges utiles de l'image
• Mettre en œuvre une mise en cache efficace
• Accélérer la livraison
• Transformez les images en formats optimaux de nouvelle génération
• S'assurer que les images sont réactives
• Implémentez la logique d'exécution pour appliquer le paramètre optimal dans différents contextes

Heureusement, il existe une classe d'outils conçus spécifiquement pour résoudre ces défis et fournir ces solutions - Image CDNS. En particulier, je veux me concentrer sur l'image de l'image qui a systématiquement surpassé les autres CDN sur les tests de performance de la page que j'ai effectués.

ImageEngine est un CDN d'image intelligent et conscient de l'appareil que vous pouvez utiliser pour servir les images de votre site Web (y compris les GIF). ImageEngine utilise la détection des périphériques WURFL pour analyser le contexte que les pages de votre site Web sont accessibles (Appareil, taille d'écran, DPI, OS, navigateur, etc.) et optimiser vos actifs d'image en conséquence. Sur la base de ces critères, il peut optimiser les images en les redimensionnant intelligemment, en les reformatant et en les comprimant.

Il s'agit d'une solution complètement automatique, set-it-and-inforge-it qui nécessite peu ou pas d'intervention une fois qu'il est configuré. Le CDN a plus de 20 POP mondiaux avec la logique intégrée dans les serveurs Edge pour plus rapidement dans différentes régions. ImageGine prétend atteindre des rapports de cache-hit de 98% ainsi que de réduire les charges utiles de l'image de 75%.

Test étape par étape Comment utiliser ImageEngine pour améliorer l'expérience de la page

Pour illustrer la différence en utilisant une image CDN comme ImageEngine peut faire, je vais vous montrer un test pratique.

Tout d'abord, jetons un coup d'œil à la façon dont une page avec une quantité massive de scores de contenu d'image à l'aide de Pagespeed Insights. C'est une page simple, mais se compose d'un grand nombre d'images de haute qualité avec des éléments interactifs, tels que des boutons et des liens ainsi que du texte.

Le FID est unique car il s'appuie sur les données des interactions réelles que les utilisateurs ont avec votre site Web. En conséquence, le FID ne peut être collecté que «sur le terrain». Si vous avez un site Web avec suffisamment de trafic, vous pouvez obtenir le FID en générant un rapport d'expérience de page dans la console Google.

Cependant, pour les résultats du laboratoire, des outils tels que les phares ou les informations de Pagespeed, nous pouvons supposer l'impact du blocage des ressources en examinant TTI et TBT.

Oh, oui, et je me concentrerai également sur les résultats d'un audit mobile pour plusieurs raisons:

1. Google eux-mêmes privilégie les signaux mobiles et l'indexation d'abord mobile
2. L'optimisation des pages Web et des actifs d'images est souvent le plus difficile pour les appareils mobiles / réactivité générale
3. Il offre la possibilité de montrer l'amélioration maximale qu'une image CDN peut fournir

Dans cet esprit, voici les résultats de notre page:

Donc, comme vous pouvez le voir, nous avons quelques problèmes. Utilisé, PagesPeed Insights signale les deux CWV présents, LCP et CLS. Comme vous pouvez le voir, en raison de l'énorme charge utile de l'image (environ 35 Mo), nous avons un LCP ridicule de près d'une minute.

En raison de la disposition simple et du fait que j'ai explicitement donné des attributs de largeur et de hauteur d'images, notre page était stable avec un 0 CLS. Cependant, il est important de réaliser que les images de chargement lente peuvent également avoir un impact sur la stabilité perçue de vos pages. Ainsi, même si vous ne pouvez pas améliorer directement les CL, plus les éléments importants tels que les images se chargent, meilleur est l'expérience globale pour les utilisateurs du monde réel.

TTI et TBT étaient également sous-parts. Il faudra au moins deux secondes à partir du moment où le premier élément apparaît sur la page jusqu'au moment où la page peut commencer à devenir interactive.

Comme vous pouvez le voir sur les opportunités d'amélioration et de diagnostic, presque tous les problèmes étaient liés à l'image:

Configuration de l'image Engine et tester les résultats

OK, alors maintenant, il est temps d'ajouter ImageEngine dans le mix et de voir comment il améliore les mesures de performances sur la même longueur d'onde.

La configuration de l'image de l'image sur presque n'importe quel site Web est relativement simple. Tout d'abord, allez sur ImageEngine.io et inscrivez-vous pour un essai gratuit. Suivez simplement le processus d'inscription simple en 3 étapes où vous devrez:

1. Fournissez le site Web que vous souhaitez optimiser,
2. L'emplacement Web où vos images sont stockées, puis
3. Copiez l'adresse de livraison que l'image d'image vous attribue.

Ce dernier sera dans le format de {String aléatoire} .cdn.imgeng.in mais peut être mis à jour à partir du tableau de bord Imagengine.

Pour servir des images via ce domaine, revenez simplement au balisage de votre site Web et mettez à jour les attributs SRC . Par exemple:

Depuis:

 <img  src="%E2%80%9Dmywebsite.com/images/header-image.jpg%E2%80%9D" alt="Ce que la nouvelle mise à jour de l'expérience de la page de Google signifie pour les images sur votre site Web" >

À:

 <img  src="%E2%80%9Dmyimages.cdn.imgeng.in/images/header-image.jpg%E2%80%9D" alt="Ce que la nouvelle mise à jour de l'expérience de la page de Google signifie pour les images sur votre site Web" >

C'est tout ce que vous devez faire. ImageEngine tirera désormais automatiquement vos images et les optimisera dynamiquement pour de meilleurs résultats lorsque les visiteurs consultent les pages de votre site Web. Vous pouvez consulter les guides d'intégration officiels dans la documentation sur la façon d'utiliser ImageEngine avec Magento, Shopify, Drupal, etc. Il existe également un plugin WordPress officiel.

Voici les résultats de ma page de test d'image de l'image une fois qu'il est configuré:

Comme vous pouvez le voir, les résultats sont presque impeccables. Toutes les mesures ont été améliorées, score dans le vert - même l'indice de vitesse et le LCP qui ont été significativement affectés par les grandes images.

En conséquence, il n'y avait plus de possibilités d'amélioration. Et, comme vous pouvez le voir, ImageEngine a réduit la charge utile de la page totale à 968 Ko, réduisant le contenu de l'image d'environ 90%:

Conclusion

Dans une certaine mesure, c'est plus outre la même chose de Google qui a toujours déménagé dans une direction mobile et utilisant une liste croissante de mesures à affiner la meilleure «expérience de page» possible pour ses utilisateurs de moteurs de recherche. En plus de réaffirmer leur mouvement dans ce sens, Google a déclaré qu'ils continueraient de tester et de réviser leur liste de signaux.

D'autres mesures qui peuvent être surfacées dans leurs outils, telles que TTFB, TTI, FCP, TBT, ou éventuellement des métriques entièrement nouvelles peuvent jouer un rôle encore plus important dans les futures mises à jour.

La recherche de solutions qui vous aident à marquer fortement pour ces mesures maintenant et à l'avenir est la clé pour rester en avance dans cet environnement hautement compétitif. Bien que l'optimisation de l'image ne soit qu'une facette, elle peut avoir des implications majeures, en particulier pour les sites lourds de l'image.

Un CDN d'image comme ImageEngine peut résoudre presque tous les problèmes liés au contenu de l'image, avec un minimum de temps et d'efforts ainsi que de la preuve future de votre site Web par rapport aux futures mises à jour.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!