Techniques d'optimisation mobile

13 meilleures pratiques d'optimisation mobile que vous devez connaître

Pour obtenir la meilleure implémentation mobile absolue, assurez-vous de créer un site mobile conforme à ces 14 meilleures pratiques.






Cela fait un moment que Google a commencé à déployer son index mobile-first.

Lorsque cela a été annoncé pour la première fois, les professionnels du référencement se précipitaient partout pour s'assurer que leur site était conforme aux Core Web Vitals de Google et aux meilleures pratiques de développement mobile.

L'optimisation pour le Web mobile est un sous-domaine entièrement complet du référencement, nécessitant des connaissances de niveau spécialisé et ses propres meilleures pratiques pour réussir.

À tel point que de nombreuses industries exigent une mise en œuvre complète et de qualité de leur site Web sur mobile. Et tout le monde n'est pas à la hauteur.

Dans de nombreux cas, la plupart des sites ne parviennent parfois pas à atteindre leur objectif de conformité.

Il s'agit clairement d'une erreur en raison du fait que la conception mobile est une partie si répandue de notre société numérique :

• 96% des Américains âgés de 18 à 29 ans possèdent un smartphone.
• En 2020, plus de 3,6 milliards d'utilisateurs utilisaient un smartphone dans le monde. Il y en aura 4,3 milliards d'ici 2023.
• En 2020, les utilisateurs mobiles passaient 90 % de leur temps dans des applications, par opposition aux navigateurs mobiles.
• Google représente 93,22 % de la part de marché de la recherche mobile aux États-Unis en 2021.
• Le résultat initial de la recherche mobile sur Google a tendance à atteindre un CTR organique (taux de clics) de 26,9 % .

Afin de profiter de la meilleure présence en ligne possible, vous devez optimiser pour de nombreux types d'appareils et de résolutions d'écran. Pas seulement pour les ordinateurs de bureau.


Et maintenant, Google déploie sa mise à jour de l'expérience de la page de bureau. Mais cette mise à jour dépasse le cadre de cet article, bien qu'elle joue sur l'expérience globale de la page.

Pour obtenir la meilleure implémentation mobile absolue, il est important de s'assurer que vous créez un site mobile conforme à ces meilleures pratiques, et qui crée également des opportunités d' augmenter vos numéros Core Web Vitals.

En utilisant une conception réactive et non un sous-domaine m-dot, en observant les meilleures pratiques en matière de création et d'optimisation d'images, et en observant la compression et la minification, vous pouvez obtenir un site mobile de qualité qui touche autant de personnes que possible au sein de votre public.

C'est là que votre site mobile connaîtra le succès.

1. Assurez-vous que tout le contenu est le même sur le bureau et le mobile

L'idée derrière cette meilleure pratique est d'éviter le contenu en double et les accusations de dissimulation.

Pour être sûr, assurez-vous toujours que tout le contenu est le même sur la version de bureau de votre site que sur mobile.


L'une des meilleures techniques à utiliser pour s'assurer que cela se produit est la conception réactive.

La conception réactive, pour ceux qui ne le savent pas, implique la création d'une feuille de style qui utilise des "requêtes multimédias" pour faire automatiquement la transition des conceptions entre une grande variété de plates-formes et d'appareils.

Si vous souhaitez extraire toute la vitesse possible et rendre votre conception simple et efficace, envisagez de vous pencher sur  CSS sprites pour réduire les demandes côté serveur.

2. Utilisez une approche de développement «descendante»

Une approche de développement « du haut vers le bas » signifie que vous considérez toutes les conséquences potentielles de chaque décision prise dans une conception du début à la fin.


Vous développez d'abord pour le mobile, plutôt que pour le bureau d'abord, puis vous ajoutez ensuite une conception mobile. Cette approche de développement est idéale car vous n'introduisez pas de problèmes dans la conception finale.

Voici un exemple : Vous créez un site Web de bureau. Environ aux trois quarts du processus, vous décidez de créer un site mobile par-dessus.

Vous créez la maquette. Mais, après avoir codé la maquette et parcouru les transitions, vous trouvez un bug ici. Et vous y trouvez un bug. Ensuite, vous trouvez un bug là-bas. En effet, l'approche ascendante ne fonctionne pas et entraîne une dérive du champ d'application.

C'est le phénomène où des problèmes invisibles surgissent à la dernière minute, provoquant des bogues imprévus et des augmentations d'heures qui n'étaient pas prévues à l'origine lorsque le projet a été initialement défini.

La vérité est que si l'approche descendante pour la conception réactive mobile était envisagée dès le début, ces bugs et les choses qui doivent être résolues n'apparaîtraient pas à la fin, ce qui causerait ce problème redouté.

3. Ne vous concentrez pas exclusivement sur le consommateur mobile, cependant

À mesure que les mobiles et les ordinateurs de bureau fusionnent, les objectifs et les désirs des utilisateurs de ces plates-formes le sont également.

Lorsque vous vous concentrez sur ce que votre utilisateur souhaite réaliser sur la base de la plate-forme, vous créez une approche holistique qui atteint plus efficacement les clients via votre site Web.

Qu'un utilisateur achète un produit ou effectue des recherches sur les services que vous fournissez, la combinaison des objectifs de l'utilisateur et des acquisitions de clients de l'entreprise se poursuivra.

À tel point que se concentrer spécifiquement sur ces idéaux et ces valeurs deviendra moins nécessaire.

Pas moins important, attention, juste moins nécessaire à mesure que ce mélange de mobile et de bureau se poursuit.

4. Utilisez des techniques de conception réactives

L'époque des sites Web m-dot séparés (m.example.com) est révolue.

Il n'y a aucune raison valable d'utiliser une telle implémentation à l'ère du mobile.

La structure peut être très désordonnée, avec plusieurs URL créant des problèmes de contenu en double si elles ne sont pas correctement optimisées.


Il existe de nombreuses techniques disponibles pour garantir une transition efficace, mais sinon, les implémentations m-dot ont suivi le chemin du dodo avec l'avènement des nouvelles technologies.

Aujourd'hui, la mise en œuvre idéale passe par un design responsive. Ces conceptions utilisent ce qu'on appelle des requêtes multimédias pour définir les résolutions d'affichage que la conception prendra en charge.

Chaque résolution distincte est ce qu'on appelle un "point d'arrêt" dans la conception, ou le point auquel la conception réactive passe d'une résolution à la suivante.

L'avantage d'utiliser ce type de structure est que vous ne rencontrez pas les problèmes de contenu en double que vous auriez sur une implémentation m-dot.

De plus, votre implémentation mobile sera sur les dernières technologies.

5. Pensez 'code' au lieu de 'images partout' pour augmenter la vitesse du site

Avez-vous vraiment besoin d'utiliser cet arrière-plan bicolore comme arrière-plan répétitif de 2 pixels de large sur 1200 pixels de haut ?

Si vous ne le faites pas, et que vous pouvez le coder à la place, codez-le à la place.


Bien que quelque chose d'aussi petit ne fasse pas une brèche majeure dans la vitesse du site, les optimisations peuvent s'additionner au fur et à mesure qu'elles sont terminées.

La prochaine fois que vous effectuerez un audit de site ou que vous créerez un site Web, pensez : "Ai-je vraiment besoin de cette image ici ou puis-je simplement la coder à la place ?"

Si l'image n'est vraiment pas nécessaire, le codage de l'objet pourrait aider à augmenter la vitesse du site de manière exponentielle, en particulier les conceptions sur site qui utilisent une surabondance de graphiques.

6. Personnalisez WordPress pour mobile

Il existe de nombreux plug-ins disponibles pour WordPress 

À tel point que certains offrent même des fonctionnalités pour une compatibilité mobile accrue.

Les plug-ins les plus utiles à cet effet sont Duda Mobile, W3 Total Cache, ainsi que des plug-ins pour minifier HTML et CSS.

7. N'utilisez pas d'interstitiels intrusifs pour vendre votre produit

Oui. Nous savons. Votre produit est la chose la plus grande et la plus impressionnante pour honorer cette planète. C'est pourquoi nous visitons probablement votre site Web et effectuons des recherches avant d'acheter.


Mais, nous n'avons pas besoin d'avoir une publicité intrusive qui bloque notre activité sur votre site pour nous déranger lors de la vente.

Dans la mesure du possible, réduisez au minimum les interstitiels intrusifs et gardez les publicités vers le bas ou sur le côté avec une option permettant de cliquer sur la publicité et de la supprimer au minimum.

Il est important de noter que Google pénalise les interstitiels intrusifs.

Il vaut la peine de lire leurs guides de développement ainsi que leurs directives aux webmasters sur ce problème, ainsi que leur article de blog sur ce sujet.

8. Vérifiez votre site sur plusieurs systèmes d'exploitation et d'affichage

Tout référenceur doit savoir comment identifier les faiblesses de la mise en œuvre existante d'un site Web, y compris où et comment trouver des problèmes sur divers écrans et appareils.

Vous souhaitez vérifier votre site sur plusieurs systèmes d'exploitation, ainsi que sur plusieurs périphériques d'affichage. Cela garantit que votre site est compatible avec une gamme d'affichages et de plates-formes aussi large que possible.


Mais que se passe-t-il si vous ne pouvez pas vous permettre un millier d'appareils pour les vérifier ?

Tout cela se résume à quelques applications. Oui! Il est possible de vérifier ces types de problèmes avec plus d'une application.

Extension Chrome pour les développeurs Web de Google

Si vous avez un budget limité, l'utilisation de l'extension Chrome Web Developer de Google peut vous aider à examiner l'apparence de votre site dans de nombreuses tailles et résolutions d'écran différentes.

Il offre également la possibilité de voir à quoi ressemble votre site à travers différentes orientations d'appareils, comment les entrées tactiles interagissent grâce à la simulation, et bien plus encore.

Il est également possible d'utiliser leur outil de débogage pour examiner le code d'un site à la recherche de problèmes.

BrowserStack

BrowserStack.com est un excellent outil pour tester sur de nombreux navigateurs, systèmes d'exploitation et résolutions d'affichage différents. Ils ont également une extension Google Chrome dont vous pouvez profiter à cette fin.

Vous pouvez tester n'importe quel site sur plus de 2 000 appareils, navigateurs et systèmes d'exploitation réels.

En ayant un compte payant, vous obtenez un accès illimité à leur extension de navigateur pour les tests.

CrossBrowserTesting

CrossBrowserTesting.com est une alternative à BrowserStack que vous pouvez utiliser pour tester les navigateurs et les appareils.

Offrant plus de 1 500 navigateurs et plates-formes de test, son offre de produits ne manque pas de ce que vous pouvez faire.

Des comparaisons de captures d'écran sont possibles avec leur outil, ainsi que la possibilité de simuler le comportement de votre site Web sur des appareils du monde réel.

9. Suivez les meilleures pratiques en matière de vidéo mobile

Oui, il existe des bonnes pratiques SEO vidéo mobile ! Google a encore besoin d'avoir des signaux intégrés sur la page pour que son moteur de recherche comprenne mieux la vidéo qui se trouve sur cette page.

Cet article de Matt Southern, du Search Engine Journal, détaille les cinq meilleures pratiques de référencement vidéo recommandées par Google.

Des éléments tels que le texte sur la page, les liens de référence, les données structurées et les fichiers vidéo sont importants.

Il y a aussi d'autres choses auxquelles vous voulez faire attention lorsque vous créez des vidéos

Par exemple, vous voulez vous assurer que vos vidéos sont accessibles au public. Cela signifie que vous devez vous assurer que vos paramètres de confidentialité YouTube sont définis sur public et que vous devez disposer d'une page Web accessible à Google avec cette vidéo.


Avec des données structurées, il est recommandé d'utiliser le type de données VideoObject sur Schema.org.

Google recommande d'utiliser les meilleures pratiques vidéo mobiles suivantes pour une mise en œuvre vidéo mobile sans faille :

• Utilisation de contrôles personnalisés avec un élément racine div, ainsi qu'un élément multimédia vidéo et un élément enfant div dédié aux contrôles vidéo.
• Utilisation d'un bouton de lecture/pause vidéo.
• S'assurer que l'utilisateur peut rechercher en arrière et en avant.
• Leur mise en œuvre technique complète d'une vidéo mobile est inégalée et vous guide pas à pas tout au long du processus.

Comme le dit Google :

"Si la raison principale de la visite de l'utilisateur est la vidéo, cette expérience utilisateur doit devenir immersive et ré-engageante."

Outre l'évidence, les autres meilleures pratiques de référencement vidéo mobile incluent :

Faciliter au maximum la recherche de vos vidéos par Google. Ça signifie:

• Utilisation d'un sitemap vidéo : si vous n'envoyez pas de sitemap vidéo, Google risque de ne pas être en mesure de trouver vos vidéos directement. Un plan de site vidéo vous permet de soumettre encore plus facilement ce plan de site dans Google Search Console, ce qui facilite encore plus l'exploration et l'indexation potentielle de vos vidéos par Google.
• N'utilisez pas d'actions utilisateur complexes ou de fragments d'URL : si ceux-ci sont utilisés pour charger vos vidéos, il est possible que Google ne trouve pas vos vidéos du tout, car ces éléments sur votre page sont trop complexes pour que Google les comprenne.
• Utilisez une balise HTML facilement identifiable : certaines des balises valides incluent la vidéo, l'iframe, l'objet ou l'intégration. Il est plus facile pour Google d'identifier les vidéos lorsqu'elles sont intégrées dans des balises communes.
• Assurez-vous que vos vidéos peuvent effectivement être indexées. Cela arrive : parfois, quelqu'un peut apporter une modification à un fichier robots.txt qui empêche l'exploration des fichiers vidéo (sans faute de votre part… espérons-le). Si vos vidéos étaient indexées, et que tout d'un coup elles ne le sont plus, cela vaut la peine de jeter un coup d'œil à votre fichier robots.txt pour vous assurer qu'elles ne sont pas bloquées.
• Utilisez les formats de vignettes pris en charge par Google : il existe également des bonnes pratiques en matière de vignettes que vous devez suivre dans la documentation des développeurs Web Google ci-dessus.

Le référencement vidéo mobile n'est pas toujours aussi simple qu'on pourrait le penser.

Bien qu'il ne soit pas nécessaire de cocher toutes les cases, certaines choses pourraient nuire à l'exploration et à l'indexation de vos vidéos mobiles si elles ne le sont pas.

10. Utiliser les données structurées de Schema.org

Les données structurées de Schema.org sont importantes non seulement pour identifier les pages de votre site qui contiennent des informations spéciales et structurées que les moteurs de recherche doivent voir, mais lorsque l'index mobile entre en jeu, attendez-vous à voir une dépendance accrue à Schema.

Il s'agit d'une méthode simple et concise pour comprendre les informations qui peuvent ensuite être traduites en extraits enrichis dans les résultats de recherche mobile.

Mais, dans tous les cas, l'auteur est d'avis que les données structurées Schema doivent être utilisées même sur les implémentations de bureau, car elles peuvent vous aider à apparaître dans les résultats d'extraits enrichis en fonction de votre mot clé ciblé. Cela peut aider à améliorer la visibilité de votre site lorsqu'il est correctement mis en œuvre.

11. Ne bloquez pas les scripts de prise en charge tels que JavaScript, CSS ou des éléments tels que des images

Cela devrait être du bon sens lors du développement de sites pour n'importe quelle plate-forme, qu'elle soit de bureau ou mobile, mais certaines personnes le font encore.


Il est important de s'assurer que les scripts de prise en charge de votre conception mobile ne sont pas bloqués, car ce blocage peut entraîner des problèmes tels que mobile soft 404s sur toute la ligne. Cela peut également entraîner des desktop 404s.

Mais, si vous empêchez ces fichiers d'être explorés par Google, ils ne peuvent pas explorer ces fichiers pour voir que votre site Web fonctionne correctement.

Lorsqu'ils ne peuvent pas le faire, cela peut entraîner des classements inférieurs car ils ne peuvent pas comprendre pleinement votre site Web.

12. Compression et optimisation des images

Pour le Web mobile, l'optimisation des images est un élément essentiel pour réussir. Cela signifie que vous devez vous assurer que les images sont correctement optimisées pour toutes les tailles d'image sur toutes les résolutions possibles.

Il n'est pas possible de créer une image et de s'assurer qu'elle est visible partout. Bien, vous pouvez. Mais il aura l'air déformé sur les résolutions pour lesquelles il n'a pas été conçu.

Au lieu de cela, il est recommandé d'utiliser les meilleures pratiques de référencement holistiques et de s'assurer que vous créez des images de haute qualité à chaque résolution, mais qui se chargent également rapidement.


C'est pourquoi il existe plusieurs bonnes pratiques de conception réactive que Google recommande d'utiliser afin d'optimiser vos images pour la plate-forme mobile. Ils recommandent ce qui suit :

• Utilisez des tailles d'image relatives. Si vous utilisez des tailles d'image relatives, vous finissez par les empêcher de déborder de la balise de conteneur qui héberge l'image.
• Utilisez des images en ligne. Il est possible de réduire la vitesse de la page en s'assurant que les images en ligne sont utilisées afin de réduire les demandes de fichiers. Ceux-ci doivent être utilisés sur des pages qui ne peuvent pas être utilisées ailleurs sur votre site.
• Pour les périphériques DPI plus élevés, utilisez l'attribut srcset pour les images. Cela vous aide à ajouter plus d'un fichier image pour différents appareils.
• Si vous faites du référencement pour le commerce électronique, vous voudrez peut-être rendre vos images de produits extensibles. Les clients peuvent souhaiter agrandir l'image qu'ils achètent potentiellement sur leur appareil afin de mieux la voir. Il est donc logique de proposer cette option.

L'astuce pour intégrer des images dans vos optimisations mobiles est la suivante : trouver un équilibre entre la taille des images, les charger sur un appareil mobile et garantir la bonne vitesse de page sans réduire la qualité de l'image sur les principaux appareils recherchés par votre public.

13. Optimiser la taille globale de la page

La taille de la page est une considération majeure pour un site Web adapté aux mobiles. Pour être vraiment adapté aux mobiles, la taille de la page doit se charger rapidement. Pour ce faire, l'optimisation de la taille globale du DOM est nécessaire.

Pour le faire efficacement, vous devez prendre en considération non seulement ce dont je parle dans le lien ci-dessus, mais aussi ce qui suit :

N'utilisez pas de polices personnalisées inutiles

L'utilisation de polices personnalisées inutiles peut compliquer le processus de chargement de votre page et augmenter le nombre de scripts requis pour traiter votre page.


Cela se traduit par une augmentation du temps de chargement des pages et peut augmenter vos scores Core Web Vitals hors de la plage souhaitable.

Dans la mesure du possible, utilisez plutôt des polices système et vous pouvez réduire au minimum l'impact que cela entraîne.

Optimisez vos images

Vous voulez également vous assurer que vous optimisez vos images tout en préservant la qualité d'image. Ce n'est pas un résultat professionnel si quelqu'un arrive sur votre site et que la qualité de votre image est granuleuse à cause d'une sur-compression, vous n'avez pas obtenu le meilleur résultat.

Idéalement, vous devriez utiliser des tailles de fichiers image qui correspondent à ce qui produira la meilleure qualité sur les appareils mobiles pour lesquels votre site est optimisé tout en vous assurant de ne pas descendre en dessous de ce point de qualité.

Il s'agit d'un exercice d'équilibre délicat qui nécessite une personne experte dans l'optimisation des images afin d'obtenir les résultats souhaités.

Réduisez la quantité de ressources dont le DOM global et le chemin de rendu critique ont besoin

Plus votre page a besoin de ressources pour s'afficher, plus la vitesse de téléchargement de votre page sera élevée. Vous ne devriez jamais avoir besoin de plus de 10 plugins (max) et de trois à quatre fichiers de script pour traiter une page Web.


Cet auteur a vu des situations où 160 plugins se chargent et la taille du fichier de page est de 10 Mo. Ce n'est absolument pas là où vous voulez être.

Pour être le plus efficace, l'avis de cet auteur est que les pages d'un site WordPress ne doivent jamais dépasser 150-250 Ko - en moyenne - et ne doivent pas comporter plus de cinq à sept ressources max (CSS, police externe si besoin, un fichier d'annonce, un fichier JavaScript et trois plugins). Si vous avez besoin de plus, vous n'êtes peut-être pas aussi optimisé que vous le pensez.

Et ne sous-estimez pas les économies que l'utilisation de polices système plutôt que de polices Web externes vous fera économiser.

Minifiez vos pages

Le processus de minification de vos pages consiste à compresser vos fichiers afin d'économiser de l'espace et de réduire ainsi leur temps de chargement global des pages.

L'utilisation de la minification en tant que processus vous aidera à vous débarrasser des espaces blancs indésirables dans votre code et à compresser ce code afin qu'il occupe le moins d'espace possible nécessaire.


Idéalement, le meilleur processus n'impliquera aucun plugin. Vous voudriez embaucher un développeur pour minifier manuellement vos pages.

Si vous êtes déjà surchargé de plugins, en ajouter un autre pour minifier vos pages est une mauvaise idée. Dans ces cas, vous voudriez utiliser un développeur de niveau professionnel afin d'assurer le meilleur résultat.

Si vous avez déjà un minimum de plugins, l'utilisation d'un développeur professionnel pour cette tâche vous aidera à obtenir des temps de chargement de page et des scores Core Web Vitals encore meilleurs.

Si vous devez absolument utiliser un plugin, assurez-vous simplement de l'utiliser comme mesure temporaire jusqu'à ce que vous puissiez faire appel à un développeur professionnel et minifier manuellement votre code.

Mobile-First est là ; Le besoin de mise en œuvre a atteint une masse critique

Avec l'arrivée de l'index mobile-first de Google, la mise en œuvre de votre site Web multiplateforme, multiappareil et multicompatible est désormais devenue une priorité absolue.

Cela signifie que plus vous tardez, plus le fait de ne pas avoir uniquement une implémentation mobile, mais de ne pas avoir la bonne implémentation mobile va vous coûter cher à bien des égards.

Pas seulement des classements.

Si vous n'avez pas encore fait le saut vers le mobile, pourquoi pas ?

Les outils 5 en un 1 de Mangools sont des outils très indispensables dans le référencement, ainsi ils vous facilitent les  taches dans la recherches de mots clés,, dans l'analyse SERP, dans le suivi de classement, dans la vérification de backlinks ainsi que dans l'analyse SEO.