Le référencement est multiple et chaque facteur d'optimisation dépend des autres.

Vous pouvez créer un contenu de première classe qui engage les utilisateurs et qui est pertinent pour leurs intention de recherche, mais si vos pages se chargent lentement, vos utilisateurs ne pourront jamais lire ce contenu exceptionnel que vous créez pour votre site Web.

Les utilisateurs sont impatients et ils rebondiront s’ils doivent attendre plus de quelques secondes.

Pouvez-vous leur en vouloir, cependant? Pensez à la frustration que vous ressentez lorsque vous devez regarder une roue de chargement tourner, pour ce qui ressemble à une éternité.

C’est l’état d’esprit que nous devons avoir lorsque nous abordons un travail d’optimisation des performances car les améliorations les plus significatives se produiront lorsque vous aborderez les problèmes d’un lieu empathique pour vos utilisateurs.

Comprendre les différentes conditions de navigation des utilisateurs

L’empathie envers les utilisateurs est un excellent point de départ, mais nous devons également l’aider à comprendre comment vos utilisateurs accèdent à votre site Web.

Par exemple, quels appareils et quels navigateurs utilisent-ils pour visiter votre site Web? Avec quel type de connexion Internet naviguent-ils?

Ces différences dans les conditions de navigation peuvent avoir un impact plus important sur les performances que prévu.

Ceci est démontré par les résultats des tests de temps de traitement JavaScript pour la page d'accueil CNN sur différents appareils. de WebPageTest.

L'iPhone 8, qui est un appareil haut de gamme avec un meilleur processeur, a chargé la page d'accueil de CNN en 4 secondes par rapport au Moto G4 qui s'est chargé en 13 secondes.

Toutefois, les résultats ont été encore plus spectaculaires pour l'Alcatel 1X, qui a chargé la même page en 36 secondes.

La performance n’est pas un scénario du «score unique». Il peut varier considérablement en fonction des conditions de navigation de chaque utilisateur.

le Public onglet dans Google Analytics est un excellent endroit pour commencer à fouiller et à faire des recherches sur la manière dont vos utilisateurs accèdent à votre site Web.

Par exemple, vous pouvez voir la division des appareils les plus couramment utilisés sous Public> Mobile> Appareils.

C’est un rapport parmi de nombreux autres. Vous devez donc examiner de plus près votre compte analytique pour mieux comprendre vos utilisateurs et les facteurs susceptibles d’affecter leur expérience sur votre site Web.

L'optimisation des performances centrée sur l'utilisateur est l'avenir

Compte tenu de la nature variable des performances en fonction des conditions de navigation de chaque utilisateur, les spécialistes du marketing peuvent faire beaucoup plus pour améliorer la vitesse d’accélération des sites Web.

L’avenir de la vitesse du site devrait être axé sur l’adaptation des performances en fonction de l’utilisateur et de son environnement de navigation particulier.

Voici trois domaines pouvant être optimisés pour améliorer la façon dont les utilisateurs perçoivent votre site Web:

• Le périphérique de l'utilisateur
• La connexion Internet de l'utilisateur
• Le parcours de l'utilisateur

1. Optimiser les performances en fonction du périphérique de l’utilisateur

Pour garantir à chaque utilisateur une expérience rapide et positive sur votre site Web, il est essentiel de mettre en place un niveau de performances de base qui fonctionne pour le périphérique le plus simple pour lequel vous optimisez.

Deux stratégies de développement Web qui fonctionnent autour de ce concept sont:

• Amélioration progressive
• Dégradation progressive

Amélioration progressive

L’amélioration progressive vise à rendre le contenu principal d’une page accessible, puis à ajouter progressivement des fonctionnalités plus avancées sur le plan technique, en plus des fonctionnalités de l’appareil ou du navigateur de l’utilisateur.

Par exemple, le site Web peut fournir en priorité un contenu propre et accessible au format HTML.

Ensuite, s’il est détecté que les conditions de navigation de l’utilisateur peuvent gérer des fonctionnalités plus complexes, certaines modifications visuelles CSS supplémentaires peuvent être superposées, voire une interactivité plus avancée via JavaScript.

Dégradation progressive

La dégradation gracieuse est fondamentalement l'opposé de l'amélioration progressive.

Le site Web commencera avec l’expérience complète, mais commencera ensuite à retomber sur une expérience progressivement moins complexe en désactivant certains éléments de faible importance si l’appareil de l’utilisateur est incapable de gérer les fonctionnalités les plus avancées.

Ces stratégies Web peuvent être très puissantes car si votre site Web se charge rapidement et fonctionne correctement, même sur le périphérique le plus élémentaire, songez à la vitesse à laquelle il se chargera sur des périphériques haut de gamme.

2. Optimisation des performances en fonction de la connexion Internet de l’utilisateur

La connexion interne est l’un des facteurs les plus inconstants des conditions de navigation d’un utilisateur, en particulier pour les utilisateurs mobiles. Lorsque nous utilisons nos appareils en déplacement, la connectivité Internet fluctue et tombe.

Cependant, il est possible d'optimiser différents niveaux de connectivité Internet afin de garantir aux utilisateurs une bonne expérience de votre site Web sur une connexion 3G ou 2G.

API d'informations réseau

le API d'informations réseau fournit des informations sur l'état de la connexion Internet d'un utilisateur, y compris le type et la force de sa connexion.

Vous pouvez utiliser l’API d’informations réseau pour détecter les modifications de la connexion Internet de l’utilisateur, à l’aide de cet exemple de code:

Vous pouvez également définir des instructions sur ce qui doit se passer si la connexion Internet change et sur la manière dont le contenu d'un site Web doit être adopté.

Comme démontré dans Google I / O 2018, si la connexion d'un utilisateur est 4G, vous pouvez définir le chargement d'une vidéo, car cette connexion serait en mesure de gérer cette expérience riche.

Toutefois, si un utilisateur navigue sur une connexion 2G ou 3G, vous pouvez définir le chargement d’une image statique à la place de la vidéo afin de ne pas trop solliciter la connexion déjà limitée de l’utilisateur.

Dans ce cas, l'utilisateur ne s'attend pas à regarder une vidéo ou une animation et ne sait pas ce qu'il manque. L’important est qu’ils voient le contenu rapidement.

Cela contribue à la perception de la vitesse par l’utilisateur, qui acquiert une expérience rapide plutôt que d’attendre longtemps le chargement d’une vidéo non critique.

3. Optimiser les performances en fonction du parcours de l’utilisateur

Le parcours de l'utilisateur est un moyen de hiérarchiser les ressources les plus importantes à charger le plus rapidement possible.

Lorsqu'un utilisateur est sur une page particulière, où est-il le plus susceptible de cliquer ensuite? Quels liens et quelles ressources seront nécessaires pour la prochaine page du parcours de l’utilisateur?

Là encore, il s'agit d'une autre méthode d'optimisation prioritaire de ce qui est nécessaire plutôt que d'optimiser chaque page sur laquelle un utilisateur pourrait atterrir et toutes les ressources dont il pourrait éventuellement avoir besoin.

Un parcours rapide et homogène d’une page à l’autre contribue grandement à la perception de la vitesse par l’utilisateur.

Conseils de ressources

Laisser le navigateur charger toutes les ressources en même temps peut s'avérer un processus inefficace qui donne plus de temps à l'utilisateur lorsqu'il attend et attend le chargement d'une page.

C'est ici que conseils de ressources peut aider. Les astuces sur les ressources sont des instructions que vous pouvez donner à un navigateur pour l'aider à hiérarchiser les éléments les plus importants à charger en premier.

Précharge

Le préchargement spécifie les ressources de priorité la plus élevée qui ont un impact sur la navigation en cours et doivent être chargées en premier.

Preconnect

Preconnect établit des connexions avec le serveur et d'autres origines plus tôt. Ce processus peut prendre beaucoup de temps pour les utilisateurs ayant une connectivité médiocre.

Prélecture

Prefetch spécifie les liens clés et les ressources qui seront nécessaires dans le cadre de la navigation future ou de la prochaine étape du parcours de l'utilisateur.

Guess.js

Guess.js passe au niveau suivant en ce qui concerne les indicateurs de ressources en automatisant le processus de prélecture de ressources importantes et en hiérarchisant celles qui sont le plus susceptibles d’être nécessaires dans le parcours de l’utilisateur.

Il utilise les données de Google Analytics pour analyser la manière dont les utilisateurs naviguent sur votre site Web, à l'aide d'indicateurs tels que les consultations de page, les chemins de page précédents et les exits.

Il utilise ensuite l’apprentissage automatique pour modéliser les prédictions de ce que la page suivante est le plus susceptible d’être dans le parcours d’un utilisateur à partir d’une page donnée.

Il prélève ensuite les pages qu'un utilisateur est susceptible de visiter lors de la prochaine étape de son parcours sur votre site. Cela signifie que la page suivante aura déjà été chargée au moment où l'utilisateur cliquera dessus, offrant une expérience de navigation rapide et transparente.

Les méthodes d'optimisation mentionnées dans cet article nécessiteront un travail de développement.

Si vous avez aimé l'apparence de l'un d'entre eux lors de la lecture, assurez-vous de vous asseoir avec votre agence de développement ou votre équipe d'ingénierie pour discuter de ce qui sera possible pour votre site Web du point de vue de la mise en œuvre.

En conclusion

Nous devons cesser de supposer que tout le monde accède à nos sites Web dans des conditions optimales.

Chaque utilisateur aura son propre environnement de navigation. C'est pourquoi nous devons redoubler d'efforts pour adapter nos efforts d'optimisation des performances à nos utilisateurs et aux différentes variables qui constituent leur expérience de navigation, telles que leur appareil et leur connexion Internet.

Faire cela n’est pas facile, cependant. Ce n’est certainement pas quelque chose que le référencement ou le marketing devraient essayer de résoudre seuls.

Nous devons passer plus de temps à discuter avec les développeurs et à en apprendre davantage sur les dernières technologies et méthodes disponibles pour l'optimisation des performances centrée sur l'utilisateur.

Plus de ressources:

---

Crédits d'image

L'image sélectionnée: Unsplash
Toutes les captures d'écran prises par l'auteur, mai 2019