English English French French Spanish Spanish German German
Geekflare est soutenu par notre public. Nous pouvons gagner des commissions d'affiliation en achetant des liens sur ce site.
Partager sur:

Comment optimiser votre site Web pour les utilisateurs mobiles?

Scanner de sécurité des applications Web Invicti – la seule solution qui offre une vérification automatique des vulnérabilités avec Proof-Based Scanning™.

Vous êtes-vous assuré 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 abandonnent les ordinateurs de bureau et naviguent et achètent à la place sur leurs appareils mobiles.

La conception Web réactive a permis de créer des sites qui fonctionnent sur toutes les plates-formes à un niveau égal. Mais même dans ce cas, la conception réactive ne représente qu'une fraction de Optimisation UX stratégies pour mobile.

Si vous voulez véritable optimisation des performances, vous devrez également envisager d'autres alternatives.

C'est pourquoi l'accent est mis sur la construction de votre site en tant que expérience mobile-first. En termes simples, le mobile d'abord signifie que votre conception et votre contenu sont d'abord optimisés pour les utilisateurs mobiles.

Cela étant dit, cet article ne concerne pas la conception d'un site entièrement nouveau. Au lieu de cela, nous allons examiner certains principes fondamentaux de conception de mobile-first. Et, passez du temps à vous concentrer sur les aspects techniques pour optimiser l'expérience utilisateur pour vos utilisateurs mobiles.

#1: Designing with mobile in mind

Le Web repose en grande partie sur le principe de servir les utilisateurs de bureau. Le vrai Web, les véritables progrès technologiques, est mieux affiché sur un bel affichage plein écran. Mais les smartphones et autres appareils mobiles sont une chose, et il est temps de commencer à s'adapter au concept de conception mobile d'abord.

Outre la conception réactive de bon sens, quels autres éléments de conception devez-vous implémenter dans vos conceptions Web axées sur le mobile?

  • Priorisation. Les écrans mobiles sont limités à l'espace d'affichage disponible. En outre, les écrans mobiles présentent le contenu d'une manière verticale par opposition à une structure beaucoup plus large - horizontale - pour les ordinateurs de bureau. Cela signifie que vous devez concevoir en utilisant la hiérarchisation. Quels éléments sont de la plus haute importance pour les utilisateurs? S'il y a des boutons CTA, est-il facile de les voir pour l'utilisateur mobile?
  • Le contenu d'abord. Couleur seconde. Tu peux faire quelques des choses intéressantes avec la conception mobile, mais certainement pas dans le cadre de la conception de bureau. Alors, cédez d'abord au contenu. Rendez votre copie et d'autres parties de contenu facilement lisibles et accessibles. Un écran mobile est beaucoup moins indulgent sur les éléments visuels distrayants.
  • Navigation facile Sur un appareil mobile, vous ne pouvez pas simplement cliquer n'importe où et revenir à la page d'accueil. À moins, bien entendu, de prévoir ce type de navigation à l'avance. Et tu devrais. Expérimentez avec des widgets Scroll-to-Top, mais aussi des en-têtes collants transparents chaque fois que possible.

La meilleure façon de vérifier si vous faites cela correctement est d'utiliser votre téléphone (Je le fais tout le temps!) et visitez votre site. Faites un examen approfondi de la façon dont les choses se sentent et se déroulent ensemble.

Si vous êtes assis dans un café ou que vous attendez un vol dans un aéroport, poussez quelqu'un sur une épaule et demandez-lui poliment de vérifier votre site pour vous. Ensuite, asseyez-vous et écoutez leurs commentaires. La plupart du temps, vous vous surprendrez avec la façon dont les gens perçoivent l'expérience utilisateur de votre site Web.

#2: Resource optimization; images, icons, etc.

À quelle fréquence vous retrouvez-vous à utiliser des éléments visuels par souci de préférence personnelle et non UX? Cela arrive, et si vous voulez faire preuve de créativité, il vaut mieux comprendre comment fonctionne l'optimisation des médias.

Des éléments visuels comme des photos, des illustrations, icônes, et les vidéos sont les plus gros consommateurs de bande passante sur les pages Web.

Temps de chargement moyen des pages pour 2018 Comment le vôtre se compare-t-il au blog MachMetrics Speed
La taille moyenne des pages Web en 2018. Répertorié par industries et différents pays.

Bien qu'il n'y ait pas de taille de page Web définie que tout le monde doit respecter, il est logique qu'une plus petite taille de page Web entraîne des temps de chargement plus rapides.

Alors, comment pouvez-vous réduire quelques Ko supplémentaires ou même des Mo de votre contenu visuel?

  • Redimensionnez vos images. Cela semble simple, non? Eh bien, je ne peux pas compter sur le nombre de fois où j'ai navigué sur un site mobile juste pour avoir 1980 x 1200 les images se chargent en arrière-plan. Au lieu de cela, des photos en taille réelle doivent être fournies comme liens alternatifs, le cas échéant. Le redimensionnement peut réduire jusqu'à 80% de la taille totale de l'image, en fonction des dimensions requises. Pour les appareils mobiles cependant, il n'y a jamais de raison d'aller au-dessus de la plage 600-700px au maximum.
  • Réduisez la taille du fichier avec la compression. La compression / optimisation d'image est le processus d'utilisation d'un logiciel tiers pour réduire le nombre de couleurs présentes dans une image. Cela peut être fait dans une mesure où vos photos ne perdent pas leur qualité innée mais peuvent voir leur taille de fichier considérablement réduite. Si vous avez besoin d'aide pour compresser des images, ne cherchez pas plus loin que notre tour d'horizon complet de outils de compression d'image.
  • Explorez d'autres formats de fichiers. Tout le monde a entendu parler des formats de fichiers PNG et JPEG. Après tout, ce sont les normes d'image de facto sur le Web. Mais pas pour longtemps. La dernière et la meilleure technologie en matière de livraison d'images numériques tourne autour WebP et les formats de fichiers SVG. Les SVG, par exemple, peuvent automatiquement échelle à la taille de l'écran, réduisant le nombre de ressources nécessaires pour charger des composants visuels spécifiques.

L'optimisation de l'expérience utilisateur pour le mobile d'abord n'est qu'une chose consciente. Concevoir sur une impulsion signifie que vous ne considérez pas les effets à long terme de vos décisions. Alors qu'une approche consciente vous aide à construire avec les utilisateurs mobiles à l'esprit dès le départ.

Perspicace: Conformément au concept de conception mobile intuitive, vous n'avez pas à réutiliser les mêmes composants visuels sur vos conceptions mobiles. L'élimination de quelques images d'arrière-plan et leur remplacement par des arrière-plans colorés - sur mobile - ne nuira pas à l'expérience utilisateur. Recherchez toujours des moyens d'économiser même la plus petite quantité de bande passante.

#3: Pre-loading and Lazy-loading

Est-il nécessaire de charger toutes les ressources multimédias sur des pages dont la lecture prend beaucoup de temps? Et, peut-il aider à rendre les pages externes avant les utilisateurs qui les visitent?

Regardons d'abord les préchargeurs, également appelés conseils du navigateur.

Les préchargeurs permettent à une page d'indiquer au navigateur les opportunités de navigation potentielles. Par exemple, un utilisateur peut visiter page B À partir de PageA.

Avec le préchargement, l'utilisateur peut rendre la page B avant de cliquer sur le lien de navigation sur la page A.

directive de précharge

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 évalués individuellement.

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

  • Pré-extraire. Ce type suggère qu'une URL spécifique est le plus susceptible d'être le prochain choix de navigation. Et, si le navigateur accepte la demande, il mettra automatiquement en cache les ressources de page importantes, ce qui accélère considérablement le chargement de la page suivante.
  • Pré-rendu. Alors que le type ci-dessus ne récupère que certaines ressources, pré-rendu mettra en cache la page entière. Tout le contenu rendu est stocké dans la mémoire de l'appareil des utilisateurs.
  • DNS-Prefetch. La prélecture DNS résoudra le DNS spécifié et rien d'autre. En conséquence, si un utilisateur effectue un «virage» spécifique sur votre site, vous réduisez essentiellement le temps nécessaire à la navigation.
  • Préconnectez-vous. Idem que ci-dessus, mais établit également des connexions et des prises de contact avec des connexions TCP et TLS.

Quels sont quelques 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">

Les préchargeurs utilisant des balises HTML dynamiques, vous pouvez précharger du contenu comme Google Fonts ou créez un script personnalisé pour précharger les ressources JavaScript dans WordPress.

BTW, si vous utilisez WordPress, alors WP Rocket peut vous aider à dynamiser votre site.

Maintenant que vous en savez plus sur les préchargeurs, parlons de l'autre sujet brûlant: 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, puis propose ce contenu comme une expérience de navigation native. Dans la plupart des cas, vous êtes obligé de télécharger la page entière sans vraiment voir plus loin qu'au-dessus du pli.

Alors qu'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 sensibles à la taille sont ajoutées à une certaine page, ces fichiers ne s'afficheront que chaque fois que l'écran de votre navigateur atteindra cette partie du site.

Et si vous vous inquiétez des problèmes potentiels de référencement, ne le soyez pas. Yoast a confirmé que Google rend les pages qui utilisent le chargement paresseux, et le voit comme un autre signal d'amélioration des performances.

Layzr js

Ma recommandation pour une bibliothèque à utiliser est Layzr.js - 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 s'exécuter en temps réel. Les utilisateurs de WordPress peuvent trouver des dizaines de plugins à chargement différé dans le dépôt public de plugins.

#4: Web caching

La mise en cache Web est basée sur le concept de 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 ensuite d'accéder à cette page, au lieu de servir 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 back-end requises. 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.

mise en cache Web

Certains des noms les plus populaires dans la mise en cache Web sont Varnish, Squid et Memcached. Mais soyez assuré qu'il existe de nombreuses autres solutions sur le marché, surtout si vous êtes un utilisateur de WordPress.

Vous pouvez également envisager de vous inscrire à un CAN.

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

Un réseau de diffusion de contenu utilise un cluster mondial de serveurs distribués pour fournir une diffusion de contenu incroyablement rapide. UNE CAN peut transférer rapidement tous les types de contenu populaires sur le Web: vidéo, photo, JavaScript, etc. De nos jours, la majeure partie du trafic Web passe par une forme de CDN.

La seule chose à retenir à propos des réseaux de diffusion de contenu est qu'ils fonctionnent mieux lorsqu'ils sont utilisés sur un site Web à forte demande. Ainsi, si vous ne servez 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 plate-forme pour commencer à apprendre. Et si Cloudflare ne répond pas à vos attentes, consultez notre article pour les meilleurs fournisseurs de CDN gratuits du marché.

#5: AMP (Accelerated Mobile Pages)

Google Projet AMP est l'optimisation mobile sur les stéroïdes ! Essentiellement, AMP dépouille 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, pouvez-vous trouver le courage de dire non aux temps de chargement quasi instantanés ?

YouTube vidéo

D'accord, tous ces mots à la mode sonnent bien, mais comment fonctionne AMP?

AMP est une page HTML simple avec certaines limitations quant au type de contenu pouvant être affiché. Cela conduit à des temps de chargement beaucoup plus rapides et à des performances globales en raison de la limitation de l'exécution de scripts, etc.

JavaScript, par exemple, ne fonctionne pas avec AMP. Sauf, bien sûr, vous utilisez le Bibliothèque AMP JS disponible sur GitHub. L'utilisation de la bibliothèque JS vous permet d'obtenir certains résultats, comme éviter bloqueurs de publicité, mais si vous voulez de vraies performances, alors l'AMP brut est la solution.

Études de cas intéressantes pour AMP:

#6: Test before committing

À l'heure actuelle, il n'y a aucune excuse pour ne pas avoir un environnement de mise en scène distinct pour votre projet. Plus plates-formes d'hébergement cloud proposer des environnements de développement par défaut, alors vérifiez auprès de votre fournisseur si vous y avez accès.

tester avant de s'engager

Qu'est-ce qu'un environnement de préparation?

Eh bien, le moyen le plus rapide d'expliquer cela est de consulter votre site Web actuel.

Ce site est ce que vous appelez un site de production - une version en temps réel de tout le code, les scripts et le contenu sur lesquels votre site est basé. UNE mise en scène l'environnement dans ce contexte est une copie de votre site de production. UNE mannequin site si vous voulez. Et dans cet environnement de préparation, vous pouvez apporter des modifications ou ajouter de nouvelles fonctionnalités sans interrompre votre site en ligne.

Je repense toujours au post d'Ashley Harpp, Ne perdez pas de temps - Testez les modifications avant de vous engager.

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 faisons une erreur. Néanmoins, l'article d'Ashley comprend également des liens vers des outils utiles pour mettre en place un environnement de développement local.

Les tests ne sont pas aussi effrayants que cela puisse paraître. Mais c'est vraiment effrayant lorsque vous supprimez accidentellement toute votre base de données sur un serveur de production!

Déclaration de clôture

Optimiser votre site Web pour une expérience mobile n'est pas si difficile. Tout ce dont vous avez besoin est un peu de détermination et appliquez volontiers les méthodes décrites dans cet article. Il y a de fortes chances que vous soyez déjà familier avec des choses comme la mise en cache de contenu et le chargement différé, mais qu'en est-il des environnements de préparation ou des préchargeurs?

Espérons que cet article a jeté un éclairage sur l'état actuel de l'optimisation des sites Web mobiles.

Merci à nos commanditaires
Plus de bonnes lectures sur le SEO
Alimentez votre entreprise
Certains des outils et services pour aider votre entreprise à se développer.
  • Invicti utilise Proof-Based Scanning™ pour vérifier automatiquement les vulnérabilités identifiées et générer des résultats exploitables en quelques heures seulement.
    Essayez Invicti
  • Web scraping, proxy résidentiel, proxy manager, web unlocker, moteur de recherche et tout ce dont vous avez besoin pour collecter des données Web.
    Essayez Brightdata
  • Semrush est une solution de marketing numérique tout-en-un avec plus de 50 outils de référencement, de médias sociaux et de marketing de contenu.
    Essayez Semrush
  • Intruder est un scanner de vulnérabilités en ligne qui détecte les failles de cybersécurité de votre infrastructure, afin d'éviter des violations de données coûteuses.
    Essayez Intruder