Avez-vous vérifié que votre site est adapté aux mobiles ?
Saviez-vous que Google a introduit une nouvelle politique appelée Mobile-First ?
De plus en plus d’internautes délaissent les ordinateurs de bureau pour naviguer et faire des achats à l’aide de leurs appareils mobiles.
Le responsive web design a permis de créer des sites qui fonctionnent sur toutes les plateformes de la même manière. Mais même dans ce cas, le responsive design n’est qu’une fraction des stratégies d’optimisation de l’interface utilisateur pour les mobiles.
Si vous souhaitez une véritable optimisation des performances, vous devrez également envisager d’autres solutions.
C’est la raison pour laquelle l’accent est mis sur la construction de votre site en tant qu’expérience mobile d’abord. En termes simples, mobile-first signifie que votre conception et votre contenu sont d’abord optimisés pour les utilisateurs mobiles.
Cela étant dit, ce billet n’a pas pour but de concevoir un site entièrement nouveau. Nous allons plutôt nous pencher sur certains principes fondamentaux de la conception “mobile-first”. Et nous passerons un peu de temps à nous concentrer sur les aspects techniques afin d’optimiser l’expérience utilisateur pour vos utilisateurs mobiles.
Concevoir avec le mobile en tête
Le web est construit en grande partie sur le principe de servir les utilisateurs d’ordinateurs de bureau. Le vrai web, les vraies avancées technologiques, s’affichent mieux sur un bel écran plein. Mais les smartphones et autres appareils mobiles existent et il est temps de commencer à s’adapter au concept de conception “mobile-first”.
Outre la conception réactive, qui relève du bon sens, quels autres éléments de conception devriez-vous mettre en œuvre dans vos conceptions web “mobile-first” ?
- Hiérarchisation. Les écrans mobiles sont limités à l’espace d’affichage disponible. De plus, les écrans mobiles présentent le contenu de manière verticale, alors que la structure horizontale des ordinateurs de bureau est beaucoup plus large. Cela signifie que vous devez concevoir votre site en établissant des priorités. Quels sont les éléments les plus importants pour les utilisateurs ? S’il y a des boutons CTA, l’utilisateur mobile peut-il les voir facilement ?
- Le contenu d’abord. La couleur ensuite. Vous pouvez faire des choses intéressantes avec le design mobile, mais certainement pas dans le cadre du design de bureau. Privilégiez donc le contenu d’abord. Faites en sorte que votre texte et les autres parties du contenu soient facilement lisibles et accessibles. Un écran mobile pardonne beaucoup moins les éléments visuels gênants.
- Navigation aisée. Sur un appareil mobile, il n’est pas possible de cliquer n’importe où pour revenir à la page d’accueil. À moins, bien sûr, que vous n’ayez prévu ce type de navigation à l’avance. Et vous devriez le faire. Expérimentez les widgets “Scroll-to-Top”, mais aussi les en-têtes autocollants transparents dans la mesure du possible.
La meilleure façon de vérifier si vous faites bien les choses est d’utiliser votre téléphone(je le fais tout le temps !) et de visiter votre site. Examinez minutieusement la façon dont les choses se sentent et s’articulent.
Si vous êtes assis dans un café ou si vous attendez un vol dans un aéroport, donnez un coup d’épaule à quelqu’un et demandez-lui poliment de vérifier votre site pour vous. Ensuite, asseyez-vous et écoutez ses commentaires. La plupart du temps, vous serez surpris de la façon dont les gens perçoivent l’expérience utilisateur de votre site web.
Optimisation des ressources
Combien de fois vous arrive-t-il d’utiliser des éléments visuels pour des raisons de préférence personnelle et non d’expérience utilisateur ? Cela arrive, et si vous voulez faire preuve de créativité, il est bon 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 gros consommateurs de bande passante sur les pages web.
Bien qu’il n’y ait pas de taille de page web fixe que tout le monde doive respecter, le bon sens veut qu’une taille de page web plus petite équivaut à des temps de chargement plus rapides.
Alors, comment pouvez-vous réduire la taille de votre contenu visuel de quelques Ko, voire de quelques Mo ?
- Redimensionnez vos images. Cela semble simple, n’est-ce pas ? Je ne compte plus le nombre de fois où j’ai navigué sur un site mobile pour voir des images de 1980 x 1200 se charger en arrière-plan. Au lieu de cela, vous devriez fournir des photos en taille réelle sous forme de liens alternatifs, le cas échéant. Le redimensionnement peut réduire jusqu’à 80 % la taille totale de l’image, en fonction des dimensions requises. Pour les appareils mobiles, cependant, il n’y a jamais de raison de dépasser la fourchette de 600-700 px au maximum.
- Réduisez la taille des fichiers grâce à la compression. La compression/optimisation des images consiste à utiliser un logiciel tiers pour réduire le nombre de couleurs présentes dans une image. Cette opération peut être effectuée à un degré tel que vos photos ne perdent pas leur qualité intrinsèque, mais que leur taille de fichier peut être réduite de manière drastique. Si vous avez besoin d’aide pour compresser des images, vous pouvez consulter notre liste complète d’outils de compression d’images.
- Explorez d’autres formats de fichier. Tout le monde a entendu parler des formats de fichier PNG et JPEG. Après tout, ce sont les normes d’image de facto sur le web. Mais cela ne durera pas longtemps. Les formats de fichiers WebP et SVG constituent la technologie la plus récente et la plus performante en matière de diffusion d’images numériques. Les SVG, par exemple, peuvent s’adapter automatiquement à la taille de l’écran, ce qui réduit le nombre de ressources nécessaires pour charger des composants visuels spécifiques.
L’optimisation de l’expérience utilisateur pour le mobile-first n’est qu’une question d’attention. Concevoir sur un coup de tête signifie que vous ne tenez pas compte des effets à long terme de vos décisions. En revanche, une approche réfléchie vous permet de concevoir en pensant aux utilisateurs mobiles dès le départ.
Perspicacité : Conformément au concept de conception mobile intuitive, vous n’êtes pas obligé de réutiliser les mêmes éléments visuels dans vos conceptions mobiles. Éliminer quelques images d’arrière-plan et les remplacer par des arrière-plans de couleur – sur mobile – ne nuira pas à l’expérience de l’utilisateur. Cherchez toujours à économiser la moindre bande passante.
Préchargement et chargement paresseux
Est-il nécessaire de charger toutes les ressources multimédias sur les pages qui prennent beaucoup de temps à lire ? Est-il utile de rendre les pages externes avant que les utilisateurs ne les visitent ?
Examinons tout d’abord les préchargeurs, également connus sous le nom de ” browser hints“.
Les préchargeurs permettent à une page d’indiquer au navigateur les possibilités de navigation qui s’offrent à elle. Par exemple, un utilisateur peut visiter la page B à partir de la page A.
Grâce au préchargement, l’utilisateur peut afficher la page B avant de cliquer sur le lien de navigation de la page A.
Gardez à l’esprit que le préchargement ne fonctionne pas toujours et que c’est au navigateur de prendre la décision finale. 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 ?
- Prefetch. Ce type de préchargeur suggère qu’une URL spécifique est la plus susceptible d’être le prochain choix de navigation. Si le navigateur accède à la demande, il met automatiquement en cache les ressources importantes de la page, ce qui accélère le chargement de la page suivante.
- Prerender. Alors que le type de requête ci-dessus 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. Le DNS prefetch résout le DNS spécifié et rien d’autre. Par conséquent, si un utilisateur effectue un “virage” spécifique sur votre site, vous réduisez essentiellement le temps nécessaire à la navigation.
- Preconnect. Identique à la précédente, mais établit également des connexions et des échanges avec les connexions TCP et TLS.
Quels sont les exemples de code pour les préchargeurs ?
<link rel="dns-prefetch" href="customURL.com">
<link rel="preconnect" href="customURL.com">
<link rel="prefetch" href="folder/script.js" as="script">
<link rel="prerender" href="customURL.com/preview.html">Comme les préchargeurs utilisent des balises HTML dynamiques, vous pouvez précharger du contenu comme les polices Google ou créer un script personnalisé pour précharger des ressources JavaScript dans WordPress.
Si vous utilisez WordPress, WP Rocket peut vous aider à dynamiser votre site.
Maintenant que vous en savez plus sur les préchargeurs, parlons de l’autre sujet d’actualité : le chargement paresseux.
Qu’est-ce que le chargement paresseux ?
Chaque fois que vous visitez une nouvelle page web, qu’il s’agisse d’un article de blog ou d’un site statique, le navigateur récupère l’intégralité du contenu de la page et le sert ensuite en tant qu’expérience de navigation native. Dans la plupart des cas, vous êtes contraint de télécharger l’intégralité de la page sans voir plus loin que le haut de la page.
En revanche, avec le chargement paresseux, le navigateur est invité à charger (rendre) le contenu qui se trouve uniquement dans la fenêtre de visualisation de l’utilisateur. Ainsi, si des photos ou des vidéos sensibles à la taille sont ajoutées à une page donnée, ces fichiers ne s’afficheront que lorsque l’écran de votre navigateur atteindra cette partie du site.
Et si vous craignez des problèmes de référencement, ne vous inquiétez pas. Yoast a confirmé que Google rend bien les pages qui utilisent le chargement paresseux et qu’il le considère comme un autre signal d’amélioration des performances.
Je vous recommande d’utiliser la bibliothèque Layzr.js – un chargement paresseux simple et efficace pour vos images ! Le script est activé sur la page d’accueil du projet, ce qui vous permet de le voir fonctionner en temps réel. Les utilisateurs de WordPress peuvent trouver des dizaines de plugins de chargement paresseux dans le répertoire public de plugins.
Mise en cache sur le web
La mise en cache des pages web est basée sur le concept de la copie d’une version d’une page, qui peut ensuite être présentée à l’utilisateur à tout moment. Les pages sont mises en cache lors de la première visite sur la page d’un site web. Lorsqu’un nouvel utilisateur tente d’accéder à cette page, le serveur web affiche la version mise en cache au lieu de la version en direct.
L’objectif de tout type de mise en cache est d’améliorer les performances du site web et de réduire les ressources nécessaires en arrière-plan. En fonction de votre solution de mise en cache, vous pouvez configurer des intervalles personnalisés et d’autres événements basés sur des déclencheurs.
Varnish, Squid et Memcached comptent parmi les noms les plus populaires dans le domaine de la mise en cache sur le web. Mais soyez assuré qu’il existe de nombreuses autres solutions sur le marché, 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 une grappe mondiale de serveurs distribués pour fournir une diffusion de contenu incroyablement rapide. Un CDN peut transférer rapidement tous les types de contenus populaires sur le web : vidéo, photo, JavaScript, etc. De nos jours, la majeure partie du trafic sur le web passe par un CDN sous une forme ou une autre.
Ce qu’il faut retenir à propos des réseaux de diffusion de contenu, c’est qu’ils fonctionnent mieux lorsqu’ils sont utilisés sur un site web à forte demande. Ainsi, si vous ne recevez que quelques milliers de visiteurs par mois, il peut s’avérer 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 web, réduire le coût de la bande passante, augmenter la disponibilité du contenu et renforcer la sécurité globale.
Si vous n’avez pas d’expérience préalable avec les CDN, nous vous recommandons d’essayer Cloudflare – ils fournissent un plan gratuit pour toujours, et c’est une excellente plateforme pour commencer à apprendre. Et si Cloudflare ne répond pas à vos attentes, consultez notre article sur les meilleurs fournisseurs de CDN gratuits du marché.
AMP (Accelerated Mobile Pages)
Le projet AMP de Google est l’optimisation mobile aux stéroïdes ! En gros, AMP réduit vos pages à l’essentiel pour offrir une expérience de chargement ultra-rapide, mais aussi pour faire de la lisibilité du contenu une priorité. Compte tenu de l’importance de la vitesse des pages, avez-vous le courage de refuser des temps de chargement quasi instantanés ?
D’accord, tous ces mots à la mode semblent géniaux, mais comment fonctionne AMP ?
Le format AMP est une page HTML sans aucune restriction quant au type de contenu qui peut être affiché. Cela se traduit par des temps de chargement et des performances globales beaucoup plus rapides en raison des limites imposées à l’exécution des scripts et autres.
JavaScript, par exemple, ne fonctionne pas avec AMP. Sauf, bien sûr, si vous utilisez la bibliothèque AMP JS disponible sur GitHub. L’utilisation de la bibliothèque JS vous permet d’obtenir certains résultats, comme éviter les bloqueurs de publicité, mais si vous voulez de vraies performances, c’est AMP brut qu’il faut utiliser.
Études de cas intéressantes sur l’AMP :
- Terra augmente l’audience mobile grâce à AMP
- Times of India multiplie par 1,5 ses revenus
- Fastcommerce augmente les conversions de ses clients en construisant des sites AMP
Testez avant de vous engager
De nos jours, il n’y a plus d’excuse pour ne pas avoir un environnement de test séparé pour votre projet. La plupart des plateformes d’hébergement en nuage proposent des environnements de test par défaut, alors vérifiez auprès de votre fournisseur si vous avez accès à l’un d’entre eux.
Qu’est-ce qu’un environnement de préparation ?
La façon la plus rapide d’expliquer cela est de regarder votre site web actuel.
Ce site est ce que vous appelez un site de production – une version en temps réel de tous les codes, scripts et contenus sur lesquels votre site est basé. Dans ce contexte, un environnement de mise en scène est une copie de votre site de production. Un site factice, en quelque sorte. Dans cet environnement, vous pouvez apporter des modifications ou ajouter de nouvelles fonctionnalités sans perturber votre site de production.
Je repense toujours à l’article d’Ashley Harpp intitulé ” Don’t waste time – Test changes before committing” (Ne perdez pas de temps – Testez les changements avant de les valider).
Son point de vue sur la façon dont nous nous “trompons” pour éviter certaines choses est un excellent exemple de la façon dont nous ne voulons pas assumer la responsabilité lorsque nous commettons une erreur. Néanmoins, l’article d’Ashley contient également des liens vers des outils utiles pour la mise en place d’un environnement local de mise en scène.
Les tests ne sont pas aussi effrayants qu’ils en ont l’air. Mais c’est vraiment effrayant lorsque vous supprimez accidentellement toute votre base de données sur un serveur de production !
Déployer des balises de données structurées
Le balisage des données structurées est communément appelé balisage de schéma. Il s’agit d’une sorte de métadonnées qui offrent plus d’informations et de détails sur le contenu de votre site web. L’ajout de ce balisage de données structurées permettra à votre site web mobile d’être mieux référencé par les moteurs de recherche. Ainsi, les moteurs de recherche comprendront mieux la signification de votre contenu.
En outre, le balisage de données structurées annote certains composants du site web à l’aide d’un format normalisé, tel que JSON-LD, Microdata ou RDFa.
Ces données contiennent des informations sur les produits, les critiques, les évaluations, les prix, les dates, les lieux des événements, etc. En fin de compte, les moteurs de recherche extrairont ces données lors de l’analyse de votre page et les utiliseront pour mettre en évidence des extraits riches dans les SERP.
Pour appliquer le balisage des données structurées, vous pouvez utiliser divers outils de génération de balisage de schéma. Grâce à cet outil, vous pouvez facilement appliquer un balisage de données structurées à votre site web. Vous pouvez choisir le meilleur type de schéma pour votre contenu et créer les extraits de code nécessaires.
Après avoir ajouté le balisage de données structurées au code HTML de votre site web, utilisez l’outil de test des données structurées de Google pour vous assurer qu’il est correct.
Mettez en œuvre l’option de recherche vocale
Les sites web dotés d’une option de recherche vocale ont gagné en popularité en raison de la popularité croissante des assistants virtuels tels que Siri, Google Assistant, Alexa, etc. Afin de réduire le temps de navigation et d’accroître la flexibilité, les gens utilisent désormais des options de recherche vocale. Elles leur permettent de retrouver rapidement les informations souhaitées et de réaliser des activités sans avoir à les taper.
Voici les tactiques que vous pouvez suivre pour mettre en œuvre la recherche vocale et optimiser votre site web :
Utilisez des mots-clés à longue traîne
La recherche vocale prend principalement la forme de demandes ou de requêtes en langage naturel. Lorsqu’ils utilisent des assistants vocaux, les utilisateurs parlent souvent sur un ton plus décontracté. Par conséquent, optimisez votre contenu en utilisant des mots-clés à longue traîne et en répondant aux questions fréquemment posées sur votre catégorie ou votre spécialité. En outre, réfléchissez aux questions précises qu’un visiteur pourrait poser, puis répondez-y dans votre contenu de manière claire et succincte.
Fournissez des réponses claires et concises
Les assistants vocaux utilisent généralement des informations basées sur des graphiques de connaissances ou des extraits mis en évidence pour fournir des réponses concises et claires aux demandes des utilisateurs. Par conséquent, si vous pouvez structurer votre contenu de manière à répondre directement aux requêtes fréquentes, la possibilité que votre site web soit choisi comme résultat de la recherche vocale augmente considérablement.
Améliorez la navigation et la structure de votre site web
Veillez à ce que la navigation sur votre site soit simple et que les assistants vocaux puissent l’explorer et la reconnaître. Optimisez simplement vos menus de navigation, vos en-têtes et vos liens internes pour permettre une expérience utilisateur fluide. Cela améliore l’indexation et la récupération de votre contenu par les assistants vocaux.
Ciblez l’extrait en vedette
Les extraits en vedette sont le meilleur moyen de se faire remarquer dans les résultats de recherche vocale, car ils sont mis en évidence en haut des résultats de recherche. Par conséquent, structurez votre contenu de manière à ce qu’il soit attrapé et affiché dans un extrait en vedette. Par exemple : répondre à des questions de manière brève mais efficace, utiliser des puces et organiser les données dans des tableaux ou des listes.
Conclusion
Optimiser votre site web pour une expérience mobile fluide n’est pas si difficile. Tout ce dont vous avez besoin, c’est d’un peu de détermination et de la volonté d’appliquer les méthodes décrites dans cet article. Il est probable que vous soyez déjà familiarisé avec des éléments tels que la mise en cache du contenu et le chargement paresseux, mais qu’en est-il des environnements de mise en scène ou des préchargeurs ?
Nous espérons que cet article vous a éclairé sur l’état actuel de l’optimisation des sites web mobiles.