Comment optimiser votre site Web pour les utilisateurs mobiles ?

Avez-vous vérifié si votre site est bien adapté à la navigation sur mobile ?

Étiez-vous au courant que Google a mis en place une nouvelle approche nommée "Mobile-First" ?

Un nombre croissant d'utilisateurs se détournent des ordinateurs traditionnels pour explorer le web et effectuer leurs achats, préférant l'usage de leurs appareils mobiles.

Le responsive web design a permis de créer des sites fonctionnant de manière équivalente sur toutes les plateformes. Cependant, même avec cette approche, le design réactif ne représente qu'une partie des stratégies d'optimisation de l'expérience utilisateur pour mobile.

Si vous recherchez une optimisation performante, il est essentiel d'explorer des alternatives.

C'est pourquoi l'accent est mis sur la conception de votre site comme une expérience mobile prioritaire. En d'autres termes, le mobile-first signifie que votre conception et votre contenu sont optimisés en premier lieu pour les utilisateurs mobiles.

Cependant, cet article ne porte pas sur la création d'un site entièrement nouveau. Nous allons plutôt examiner certains principes de conception fondamentaux axés sur le mobile, en nous concentrant sur les aspects techniques pour améliorer l'expérience utilisateur de vos visiteurs mobiles.

#1 : Concevoir en gardant le mobile à l'esprit

Le web est principalement conçu pour les utilisateurs d'ordinateurs de bureau. Les technologies web les plus avancées s'affichent de manière optimale sur un grand écran. Mais les smartphones et autres appareils mobiles sont désormais incontournables, et il est temps de s'adapter à la conception mobile prioritaire.

Au-delà d'un design responsive, quels éléments de conception devez-vous intégrer dans vos créations web axées sur le mobile ?

Priorisation. Les écrans de mobiles ont un espace d'affichage limité. De plus, ils affichent le contenu verticalement, contrairement à la structure horizontale des ordinateurs de bureau. Il est donc crucial de concevoir en priorisant. Quels éléments sont essentiels pour les utilisateurs ? Les boutons d'appel à l'action sont-ils facilement visibles sur mobile ?
Contenu d'abord, couleur ensuite. La conception mobile offre des possibilités créatives, mais certainement pas de la même manière que la conception pour ordinateur. Priorisez donc le contenu. Assurez-vous que votre texte et autres éléments de contenu soient lisibles et accessibles. Un écran de mobile pardonne beaucoup moins les éléments visuels perturbants.
Navigation simple. Sur mobile, on ne peut pas simplement cliquer n'importe où pour revenir à la page d'accueil. À moins, bien sûr, d'avoir prévu ce type de navigation. Et vous devriez. Testez les widgets de type "Scroll-to-Top" et les en-têtes collants transparents chaque fois que c'est possible.

Le meilleur moyen de vérifier que votre approche est correcte est d'utiliser votre propre téléphone (je le fais tout le temps !) et de visiter votre site. Analysez attentivement le rendu et la fluidité de l'ensemble.

Si vous êtes dans un café ou que vous attendez un vol à l'aéroport, demandez poliment à quelqu'un de tester votre site. Ensuite, écoutez attentivement leurs commentaires. Vous serez souvent surpris de la façon dont les gens perçoivent l'expérience utilisateur de votre site web.

#2 : Optimisation des ressources : images, icônes, etc.

A quelle fréquence utilisez-vous des visuels par préférence personnelle plutôt que pour améliorer l'expérience utilisateur ? Cela arrive souvent, et si vous voulez faire preuve de créativité, il est important de comprendre comment fonctionne l'optimisation des médias.

Les éléments visuels tels que les photos, les illustrations, les icônes et les vidéos sont les plus grands consommateurs de bande passante sur les pages web.

La taille moyenne des pages web en 2018, classée par secteurs et pays, montre l'importance de cet aspect.

Bien qu'il n'y ait pas de taille de page web standard que tout le monde doit respecter, il est logique qu'une taille de page plus petite se traduise par des temps de chargement plus rapides.

Alors, comment réduire les Ko, voire les Mo supplémentaires de votre contenu visuel ?

Redimensionnez vos images. Cela semble basique, n'est-ce pas ? Pourtant, je ne compte plus le nombre de fois où j'ai visité des sites mobiles affichant des images de 1980 x 1200 en arrière-plan. Les images en taille réelle devraient être proposées comme alternatives lorsque cela est nécessaire. Le redimensionnement peut réduire la taille totale d'une image jusqu'à 80 %, selon les dimensions requises. Pour les appareils mobiles, il n'y a aucune raison de dépasser une largeur maximale de 600 à 700 pixels.
Réduisez la taille des fichiers avec la compression. La compression/optimisation d'image consiste à utiliser un logiciel pour réduire le nombre de couleurs présentes dans une image. Cela peut être effectué sans compromettre la qualité de l'image, tout en diminuant significativement la taille du fichier. Si vous avez besoin d'aide pour compresser vos images, consultez notre liste d'outils de compression d'image.
Explorez les formats de fichiers alternatifs. Tout le monde connaît les formats PNG et JPEG. Ce sont les standards de facto pour les images sur le web. Mais la situation évolue. Les technologies les plus récentes et performantes en matière de diffusion d'images numériques se concentrent sur WebP et les formats de fichiers SVG. Les SVG, par exemple, peuvent automatiquement s'adapter à la taille de l'écran, réduisant le nombre de ressources nécessaires pour charger certains éléments visuels.

L'optimisation de l'expérience utilisateur pour le mobile-first exige une attention constante. Une conception impulsive peut nuire à long terme. Une approche réfléchie vous permet de concevoir en pensant aux utilisateurs mobiles dès le départ.

Important : Conformément au concept de design mobile intuitif, il n'est pas nécessaire de réutiliser les mêmes éléments visuels sur vos designs mobiles. Éliminer certaines images d'arrière-plan et les remplacer par des fonds colorés, sur mobile, n'aura pas d'impact négatif sur l'expérience utilisateur. Cherchez constamment des moyens d'économiser la moindre quantité de bande passante.

#3 : Préchargement et chargement paresseux

Est-il vraiment nécessaire de charger toutes les ressources multimédias sur des pages longues à lire ? Et est-ce qu'il serait bénéfique de préparer le rendu des pages externes avant que les utilisateurs ne les consultent ?

Commençons par les préchargeurs, aussi appelés astuces de navigateur.

Les préchargeurs permettent à une page d'informer le navigateur des opportunités de navigation potentielles. Par exemple, un utilisateur peut visiter la page B à partir de la page A.

Grâce au préchargement, l'utilisateur peut préparer le rendu de la page B avant de cliquer sur le lien de navigation de la page A.

Notez que le préchargement ne fonctionne pas toujours et que la décision finale appartient au navigateur. Des facteurs tels que le type d'appareil et la bande passante sont pris en compte individuellement.

Quels sont les types de préchargeurs les plus courants ?

Prélecture (prefetch). Ce type suggère qu'une URL spécifique est susceptible d'être le prochain choix de navigation. Si le navigateur accepte cette requête, il mettra automatiquement en cache les ressources importantes de la page, accélérant ainsi le chargement de la page suivante.
Prérendu (prerender). Contrairement à la prélecture qui ne récupère que certaines ressources, le prérendu met en cache la page entière. Tout le contenu rendu est stocké dans la mémoire de l'appareil de l'utilisateur.
DNS-Prefetch. La prélecture DNS résout le DNS spécifié, et rien d'autre. Si un utilisateur effectue un "parcours" particulier sur votre site, vous réduisez ainsi le temps de navigation.
Préconnexion (preconnect). Similaire à la prélecture DNS, mais établit également des connexions et des protocoles TCP et TLS.

Quels sont les exemples de code pour les préchargeurs ?

<link rel="dns-prefetch" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com">

<link rel="preconnect" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com">

<link rel="prefetch" href="folder/script.js" as="script">

<link rel="prerender" href="customURL.com/preview.html">

Étant donné que les préchargeurs utilisent des balises HTML dynamiques, vous pouvez précharger des éléments comme Google Fonts ou créer un script personnalisé pour précharger des ressources JavaScript dans WordPress.

Au fait, si vous utilisez WordPress, WP Rocket peut vous aider à optimiser votre site.

Maintenant que vous en savez plus sur les préchargeurs, parlons de l'autre sujet crucial : le chargement paresseux.

Qu'est-ce que le chargement paresseux ?

Lorsque vous visitez une nouvelle page web, qu'il s'agisse d'un article de blog ou d'un site statique, le navigateur télécharge tout le contenu de la page, puis l'affiche. Dans la plupart des cas, vous êtes obligé de télécharger la page entière sans pouvoir voir au-delà du contenu initialement visible.

Avec le chargement paresseux, le navigateur est invité à charger (rendre) le contenu qui se trouve uniquement dans la fenêtre d'affichage de l'utilisateur. Ainsi, si des photos ou des vidéos volumineuses sont ajoutées à une page, ces fichiers ne s'afficheront que lorsque la fenêtre de votre navigateur atteindra cette partie du site.

Et si vous craignez des problèmes de référencement, n'ayez crainte. Yoast a confirmé que Google prend en compte les pages qui utilisent le chargement paresseux et le considère comme un signal d'amélioration des performances.

Je recommande d'utiliser la bibliothèque Layzr.js : un chargement paresseux simple et efficace pour vos images ! Le script est également activé sur la page d'accueil du projet, vous pouvez donc le voir fonctionner en direct. Les utilisateurs de WordPress trouveront des dizaines de plugins de chargement paresseux dans le répertoire public des plugins.

#4 : Mise en cache web

La mise en cache web repose sur le principe de la copie d'une version d'une page, qui peut ensuite être affichée à l'utilisateur à tout moment. Les pages sont mises en cache lors de la première visite sur le site web. Lorsqu'un nouvel utilisateur tente d'accéder à cette page, au lieu de diffuser la version en direct, le serveur web affiche la version mise en cache.

L'objectif de tout type de mise en cache est d'améliorer les performances du site web et de réduire les ressources principales nécessaires. Selon votre solution de mise en cache, vous pouvez configurer des intervalles personnalisés et d'autres événements basés sur des déclencheurs.

Parmi les solutions de mise en cache web les plus populaires, on trouve Varnish, Squid et Memcached. Mais il existe de nombreuses autres options, en particulier si vous êtes un utilisateur de WordPress.

Vous pouvez également envisager de vous abonner à un CDN.

Qu'est-ce qu'un CDN (Content Delivery Network) ?

Un réseau de diffusion de contenu utilise un ensemble mondial de serveurs distribués pour fournir une diffusion de contenu rapide. Un CDN peut transférer rapidement tous types de contenus populaires : vidéos, photos, JavaScript, etc. De nos jours, la majorité du trafic web passe par une forme de CDN.

Il est important de savoir que les réseaux de diffusion de contenu sont plus efficaces lorsqu'ils sont utilisés sur un site web à forte demande. Si vous n'avez que quelques milliers de visiteurs par mois, il sera difficile de constater des améliorations notables. Néanmoins, un CDN est une excellente solution pour améliorer les temps de chargement de votre site, réduire les coûts de bande passante, accroître la disponibilité du contenu et renforcer la sécurité générale.

Si vous n'avez jamais utilisé de CDN, je vous recommande d'essayer Cloudflare. Ils proposent une offre gratuite, et c'est une excellente plateforme pour commencer à apprendre. Si Cloudflare ne répond pas à vos attentes, consultez notre article sur les meilleurs fournisseurs de CDN gratuits du marché.

#5 : AMP (Pages mobiles accélérées)

Le projet AMP de Google est l'optimisation mobile par excellence ! En substance, AMP réduit vos pages à l'essentiel pour offrir une expérience de chargement ultra rapide, tout en donnant la priorité à la lisibilité du contenu. Étant donné l'importance de la vitesse de page, pouvez-vous vous permettre de refuser des temps de chargement quasi instantanés ?

Toutes ces expressions à la mode sont séduisantes, mais comment fonctionne AMP ?

AMP est une page HTML simple avec certaines limites quant au type de contenu qui peut être affiché. Cela permet des temps de chargement beaucoup plus rapides et des performances globales accrues grâce à la limitation de l'exécution des scripts, entre autres.

JavaScript, par exemple, ne fonctionne pas avec AMP. À moins, bien sûr, que vous n'utilisiez la bibliothèque AMP JS disponible sur GitHub. L'utilisation de la bibliothèque JS peut permettre d'obtenir certains résultats, comme contourner les bloqueurs de publicités, mais si vous voulez des performances optimales, l'AMP pur est la solution.

Études de cas intéressantes pour AMP :

#6 : Tester avant de valider

De nos jours, il n'y a aucune raison de ne pas disposer d'un environnement de staging distinct pour votre projet. La plupart des plateformes d'hébergement cloud proposent des environnements de staging par défaut. Vérifiez donc auprès de votre fournisseur si vous y avez accès.

Qu'est-ce qu'un environnement de staging ?

La façon la plus simple de l'expliquer est de se référer à votre site web actuel.

Ce site est ce que l'on appelle un site de production : une version en temps réel de tout le code, des scripts et du contenu sur lesquels repose votre site. Un environnement de staging dans ce contexte est une copie de votre site de production. Un site fictif, si vous préférez. Dans cet environnement de staging, vous pouvez apporter des modifications ou ajouter de nouvelles fonctionnalités sans perturber votre site en ligne.

Je pense souvent au message d'Ashley Harpp, Ne perdez pas de temps : testez les changements avant de valider.

Sa remarque sur la façon dont nous évitons de faire certaines choses est un excellent exemple de notre réticence à assumer nos responsabilités lorsque nous commettons une erreur. Cependant, le message d'Ashley inclut également des liens vers des outils utiles pour mettre en place un environnement de staging local.

Les tests ne sont pas aussi intimidants qu'il n'y paraît. En revanche, c'est vraiment effrayant d'effacer accidentellement toute votre base de données sur un serveur de production !

Conclusion

Optimiser votre site web pour une expérience mobile fluide n'est pas si difficile. Tout ce dont vous avez besoin, c'est un peu de détermination et d'appliquer les méthodes décrites dans cet article. Vous connaissez probablement déjà des concepts tels que la mise en cache de contenu et le chargement différé, mais qu'en est-il des environnements de staging ou des préchargeurs ?

J'espère que cet article a mis en lumière l'état actuel de l'optimisation des sites web pour mobiles.