Conception de sites web réactifs ≠ adaptés aux mobiles. Voici comment fonctionne l'optimisation mobile

Oliver Pfeil Dernière mise à jour le 21.10.2020
6 Min.
mobileoptimisation
Dernière mise à jour le 21.10.2020

Dans cet article, je vais expliquer la différence entre "réactif" et "prêt pour le mobile" et comment optimiser votre site web pour les appareils mobiles. Vous apprendrez également quelques astuces très intéressantes pour améliorer le temps de chargement de votre site WordPress afin qu'il se charge rapidement.

De plus en plus de personnes se déplacent sur l'internet. Cela crée de nouvelles opportunités et, bien sûr, une nouvelle réflexion sur les thèmes de la "conception web réactive" et de "l'optimisation mobile du site web".

Pourquoi l'optimisation mobile ?

Avant de vous montrer des possibilités concrètes d'optimisation, j'aimerais discuter brièvement avec vous du "pourquoi". Ce faisant, j'aborderai plus en détail les deux raisons les plus importantes :

Raison n° 1 :

De plus en plus de personnes utilisent des appareils mobiles (smartphones et tablettes). En revanche, les ordinateurs et les blocs-notes sont de moins en moins utilisés. C'est particulièrement vrai pour un usage privé lors de la recherche d'un problème, d'un sujet, d'une solution, d'un restaurant, d'un produit ou d'un service spécifique.

Chaque opérateur de site web doit s'adapter à ce changement. En effet, ce n'est que si votre site web est affiché de manière optimale sur l'appareil mobile que votre visiteur restera sur la page et réservera un produit ou un service avec vous.

Raison n° 2 :

Pour Google, les performances de votre site web sur les appareils mobiles constituent un critère de classement. Les deux aspects suivants sont extrêmement importants :

  • Le site web est-il totalement réactif ?
  • Quel est le temps de chargement de votre site web ?

Plus vous vous améliorez dans ces deux domaines, plus vous obtiendrez de points positifs et, en fin de compte, plus votre classement sera bon dans les résultats de la recherche.

Quelle est la différence entre réactif et mobile ?

Sur de nombreux sites web, il est écrit que vous n'avez besoin que d'une conception adaptée et que tout va bien. Cependant, j'ai une opinion complètement différente ici et c'est pourquoi je voudrais me concentrer sur ce point en particulier. Car c'est précisément à ce stade que vous pouvez parfaitement optimiser votre site web pour les appareils mobiles.

La procédure de base est la suivante : Par exemple, un opérateur de site web installe un Theme réactif pour un site web WordPress . C'est généralement la fin de l'affaire pour lui. Mais à mon avis, c'est là que tout commence vraiment. Car un Theme réactif signifie uniquement que la conception s'adapte automatiquement à l'appareil final respectif. C'est la condition de base et donc très importante.

Un Theme réactif signifie seulement que le design s'adapte automatiquement à l'appareil final respectif.

L'étape suivante consiste à visualiser votre site web sur une tablette et un smartphone. Vous verrez rapidement si le design réactif a l'air professionnel et attrayant. Car il arrive souvent que l'optimisation du mobile n'ait pas été effectuée malgré une conception réactive.

Pour cela, je voudrais vous donner quelques exemples, que vous avez sûrement remarqués sur certains sites web :

  • La police de caractères du titre est beaucoup trop grande.
  • La police du corps du texte est trop grande ou trop petite.
  • L'espacement des lignes est trop important.
  • Les images sont affichées trop grandes ou trop petites.
  • Certains formats ne s'affichent pas correctement sur l'appareil mobile.
  • La navigation est difficile à utiliser.

Cette liste pourrait être beaucoup plus longue, bien sûr, mais je pense que vous comprenez mon point de vue.

Même si ces aspects ne sont pas optimisés, vous disposez d'un site web réactif, que Google évalue également de manière positive. Cependant, vous devriez vraiment prendre l'optimisation mobile au sérieux pour vos visiteurs et prêter attention à ces aspects et les faire optimiser par votre programmeur.

Conception de sites web réactifs : conseils aux navigateurs pour l'optimisation des téléphones portables

En général, vous avez un smartphone et peut-être une tablette. Toutefois, si vous souhaitez consulter votre site web avec différents appareils mobiles, vous atteindrez rapidement vos limites. Toutefois, il existe une solution très simple à ce problème. Si vous utilisez le navigateur Google Chrome, vous disposez d'une fonction intégrée à cet effet.

Vous pouvez afficher votre "design web réactif" pour de nombreux appareils différents. Pour ce faire, cliquez sur le bouton droit de la souris et sélectionnez "inspecter" dans le menu qui apparaît. Une console s'ouvrira et vous pourrez sélectionner les appareils mobiles (voir la capture d'écran). Le navigateur vous montrera alors comment votre site web est affiché sur certains appareils.

test de conception de sites web adaptés aux appareils mobiles

Vous trouverez sur le site web suivant les instructions relatives à l'utilisation de cette fonction du navigateur.

Conseils : Optimiser WordPress mobile

Si vous utilisez WordPress , les conseils suivants vous seront très utiles. Grâce à WordPress , vous pouvez effectuer de nombreuses optimisations avec un Plugin ou une fonction interne. Cela facilite votre travail et vous fait gagner du temps :

  • L'exigence de base est un Theme réactif. Je vous recommande de choisir une prime Theme pour WordPress . Cela coûte quelques dollars, mais vous avez beaucoup plus de possibilités. En outre, une prime Theme est généralement mieux programmée, dont vous bénéficiez également.
  • Si votre Theme doit être optimisé dans la vue mobile, vous avez 2 options. Soit vous modifiez le Theme , soit vous optimisez votre Theme existant . Pour l'optimisation, vous pouvez utiliser un enfant Theme . Demandez à un programmeur de mettre en œuvre les optimisations pour vous.
  • Entre-temps, il existe de nombreux constructeurs de Theme, avec lesquels vous pouvez très facilement créer le design que vous souhaitez et ainsi optimiser WordPress mobile. En voici quelques exemples Prospérer-Themes ou encore Divi.

Si vous ne connaissez pas le sujet de WordPress mais le trouvez intéressant, vous pouvez consulter les informations suivantes. Sur cette page, vous trouverez un WordPress tutorieloù vous pouvez apprendre toutes les bases de ce système de gestion de contenu génial.

Utiliser des liens internes dans le texte

Passons maintenant à une petite astuce d'initié qui est extrêmement puissante : Lien vers les sous-pages internes pertinentes dans le texte de votre site web. De cette façon, vos visiteurs peuvent facilement naviguer sur votre site web. Les utilisateurs de smartphones en particulier préfèrent cliquer facilement sur un lien dans le texte plutôt que de chercher dans le menu du burger.

En procédant à cette simple optimisation, vous créez plusieurs choses positives à la fois :

  • Les liens internes sont un facteur de classement sur Google.
  • En créant des liens internes, vous facilitez la tâche de vos visiteurs et ils se sentent plus à l'aise sur votre site.
  • En moyenne, vos visiteurs consultent plusieurs de vos sous-pages, ce qui augmente le temps qu'ils passent sur votre site. Et c'est aussi un facteur de classement qui aura un effet positif.

Temps de chargement des appareils mobiles

Nous avons maintenant beaucoup parlé du sujet "Optimiser le site web pour les appareils mobiles". Il y a un autre aspect que vous devriez également prendre en considération : Le thème de "l'optimisation du temps de chargement". À mon avis, ce sujet est particulièrement important pour deux raisons :

  1. Le temps de chargement de votre site web est un facteur de classement dans Google.
  2. Plus le temps de chargement de votre site web est long, plus le nombre de visiteurs abandonnant le site sera élevé.

Cela a un impact énorme, surtout pour les visiteurs mobiles, car les temps de chargement sont toujours un peu plus longs que dans l'environnement de bureau. Voici 3 conseils concrets pour optimiser WordPress en termes de temps de chargement pour les appareils mobiles :

#N°1 : Images :

Les images occupent le plus grand pourcentage du temps de chargement. C'est donc vous qui avez le plus de poids dans ce domaine. Le plus important est que vous téléchargiez les images sur WordPress dans la taille exacte dans laquelle vous allez également intégrer le graphique. Cela permet déjà de réduire la taille des fichiers et le temps de chargement.

En outre, il existe désormais des outils gigantesques qui vous permettent de réduire encore davantage la taille des fichiers de vos images de manière entièrement automatique. Vous pouvez décider vous-même si la qualité doit être maintenue ou réduite un peu. Pour cela, je recommande les deux suivants WordPress -Plugins:

ewww image optimizer optimiser les images

Avec quelques Plugins pour l'optimisation des images vous pouvez également générer automatiquement des images WEBP. Il s'agit d'un tout nouveau format de Google qui réduit la taille des fichiers tout en conservant la même qualité.

#N° 2 : Mise en cache

Le deuxième point important concerne la mise en cache. Je ne veux pas trop entrer dans les détails parce que vous n'avez pas besoin de connaissances de base.

Le fait est que les recherches dans la base de données ne sont pas effectuées à chaque fois que votre site web (ou une sous-page) est appelé. Grâce au "caching", une copie de chaque sous-page est stockée sur votre serveur et est donc disponible beaucoup plus rapidement car aucune requête séparée ne doit être effectuée.

Mon Plugin-recommandation : WP-Rocket. WP-Rocket est facile à utiliser et s'installe complètement en quelques minutes. En outre, le site Plugin propose d'autres optimisations qui vous permettront de gagner du temps de chargement.

#3 : Nettoyer Plugins et Themes

Certes, ce tuyau semble très banal, et il l'est. Néanmoins, elle est efficace :

Je vous recommande de désinstaller tous les sites Plugins et Themes, que vous n'utilisez pas. Le handicap seul ne suffit pas.

Cela permet également de garder votre système propre et chaque extension supplémentaire comporte un certain risque de sécurité. Au fil du temps, de nombreux Plugins et Themes s'insinuent dans votre vie sans que vous n'en ayez vraiment besoin.

Sur mon site web, vous pouvez trouver une série de vidéos gratuites sur la façon d'accélérer WordPress . Ces tutoriels montrent en direct à l'écran quels paramètres vous devez définir et où.

Conclusion : pour qui l'optimisation mobile est-elle vraiment utile ?

L'internet évolue à la vitesse de la lumière. Il existe de nombreux sujets intéressants et peut-être vous demandez-vous maintenant si l'optimisation des téléphones portables en vaut vraiment la peine pour moi ? Bien sûr, vous devez décider par vous-même. Toutefois, je vous recommande d'optimiser votre site web exactement dans cette direction :

  • Optimiser le site web pour les appareils mobiles
  • Améliorer et optimiser le temps de chargement

Un site web est LA figure de proue qui travaille pour vous 365 jours par an. Et pour que votre vaisseau amiral remplisse sa fonction, il doit être poli régulièrement. Mest une recommandation : peaufinez votre site web pour les appareils mobiles et vous en tirerez sûrement profit.

Contribution à l'image : Le Buzz @Unsplash

Oliver Pfeil aide les gens à créer un site web réussi et rentable avec des livres, des formations en ligne et des cours. Ses domaines d'expertise sont WordPress , la conception de sites web et le marketing en ligne.

Articles connexes

Commentaires sur cet article

Laisse un commentaire

Ton adresse électronique ne sera pas publiée. Les champs obligatoires sont marqués d'un *.