Introduction
Aujourd'hui, la chose la plus importante que vous puissiez faire pour votre site est de vous assurer qu'il fonctionne correctement lorsqu'il est consulté depuis un téléphone ou une tablette. Lisez la suite pour découvrir comment optimiser votre site pour le navigateur mobile à l'aide des outils pour les développeurs Chrome et d'un appareil Android.
Pourquoi est-il si important d'optimiser votre site pour le Web mobile ?
Performances
Les appareils mobiles sont dotés de processeurs plus rapides, de plus de RAM, de GPU plus rapides et d'un accès réseau plus rapide à mesure que nous passons de la 2G et de la 3G à la 4G. Malgré les progrès constants, les appareils mobiles sont moins puissants que nos ordinateurs. Concrètement, le chargement des ressources réseau prend plus de temps, tout comme la décompression des images, l'affichage de la page et l'exécution des scripts. On peut supposer que votre page s'exécute 5 à 10 fois plus lentement sur un appareil mobile.
Batterie
Les appareils mobiles sont exclusivement alimentés par batterie. Les utilisateurs d'appareils mobiles veulent que la batterie dure le plus longtemps possible. Un site non optimisé déchargera la batterie beaucoup plus rapidement que nécessaire. Minimisez le trafic réseau et réduisez les peintures pour réduire la décharge de la batterie. Lorsque vous récupérez une ressource, le Wi-Fi ou la cellule GSM doivent être activés, ce qui décharge la batterie. Lorsque le navigateur peint un élément, l'utilisation du processeur et du GPU augmente, ce qui décharge également la batterie.
Engagement
Les performances sont là pour améliorer la métrique qui compte le plus pour vous. Dans Facebook, nous nous soucions du défilement. Dans un test A/B, nous avons ralenti le défilement de 60 fps à 30 fps. Engagement réduit. Nous avons donc conclu que le défilement était important.
Facebook à la conférence Edge
Les utilisateurs mobiles s'attendent à pouvoir entrer et sortir rapidement. Le site le plus rapide obtiendra le plus d'engagement.
Gérer les performances
Chrome est fourni avec un excellent ensemble d'outils pour les développeurs. Cet article vous explique comment utiliser ces outils pour profiler votre site mobile. Si vous connaissez déjà les Outils pour les développeurs Chrome, tant mieux ! Si ce n'est pas le cas, consultez ces tutoriels :
- Profiler les temps de peinture longs
- Conseils et astuces pour les outils de développement
- Et bien plus encore…
Maintenant que vous êtes au point, voyons comment accélérer votre site mobile avec DevTools. Si vous utilisez les Outils pour les développeurs Chrome pour Android pour la première fois, consultez le guide de démarrage au bas de l'article.
Utiliser les outils pour les développeurs Chrome à distance
Avec votre appareil Android connecté à votre ordinateur. Dans Chrome pour ordinateur, accédez à http://localhost:9222 et ouvrez votre site sur votre appareil Android. La liste des onglets ouverts sur votre appareil Android s'affiche. Sélectionnez votre page dans la liste "Pages inspectables".
et vous serez redirigé vers les Outils pour les développeurs Chrome pour cette page.
La barre d'outils des outils pour les développeurs Chrome est bien là. La chose la plus importante à comprendre à propos des outils pour les développeurs Chrome à distance est qu'il s'agit des mêmes outils que ceux que vous utilisez aujourd'hui sur votre ordinateur. La seule différence est que votre appareil Android n'est responsable que de la page, tandis que votre ordinateur est responsable des outils de développement. En arrière-plan, les mêmes données sont collectées et les mêmes fonctionnalités sont disponibles.
Par exemple, j'ai accédé à www.sfgate.com/movies sur mon téléphone. À l'aide des Outils pour les développeurs Chrome sur mon ordinateur, j'ai pointé sur un élément div dans l'outil Éléments. Comme sur l'ordinateur, l'élément div est mis en surbrillance sur mon appareil Android.
L'outil Éléments peut également être utilisé pour activer et désactiver les styles, ce qui s'avérera utile lorsque nous tenterons d'examiner les temps d'affichage.
Lumière sur l'accès au réseau
Les performances du réseau sont importantes, et elles le sont encore plus sur le Web mobile. Les appareils mobiles sont souvent connectés à des réseaux plus lents que nos ordinateurs de bureau et portables. Pour vous assurer que vous faites ce qu'il faut, prenez un instantané du réseau en accédant à l'outil Réseau et en appuyant sur "Enregistrer".
La capture d'écran montre le trafic réseau résultant d'une recherche Google. Observez les requêtes réseau effectuées par votre site et trouvez des moyens de les réduire. Si votre site envoie des requêtes d'interrogation au serveur, vous pouvez surveiller l'activité de l'utilisateur et éviter d'envoyer des requêtes d'interrogation lorsqu'il est inactif. L'outil Réseau vous permet d'afficher les en-têtes HTTP bruts, ce qui est utile si les réseaux mobiles les modifient.
Optimiser les temps d'affichage
L'un des principaux goulots d'étranglement dans les navigateurs Web mobiles est l'affichage de votre page. La peinture est le processus qui consiste à dessiner un élément sur la page avec le style spécifié. Lorsqu'un élément est coûteux à afficher, il ralentit l'affichage de l'ensemble de la page. Chrome tente de mettre en cache les éléments précédemment peints dans un tampon hors écran. Cependant, sur mobile, la quantité de RAM GPU disponible est limitée, ce qui limite le nombre d'éléments pouvant être mis en cache hors écran. L'effet secondaire est plus de peintures et chaque peinture est plus lente que l'ordinateur de bureau. Pour que le défilement soit réactif, vous devez réduire les temps de peinture.
Chrome 25 inclut le mode de repeinture continue des pages. Le mode de repeinture continue des pages ne met jamais en cache les éléments peints. À la place, il peint tous les éléments à chaque frame. En forçant l'affichage de tous les éléments à chaque frame, il est possible d'effectuer des tests A/B des temps d'affichage en activant et en désactivant les éléments et les styles. Bien que le processus soit manuel, il s'agit d'un outil précieux pour déterminer le coût de l'affichage de chaque élément sur votre page. La première règle de l'optimisation est de mesurer ce que vous essayez d'optimiser pour obtenir une référence. Prenons un exemple simple.
Commencez par activer le mode de repeinture continue de la page :
Une fois l'option activée, un graphique s'affiche en haut à droite de votre appareil Android. L'axe des abscisses du graphique représente le temps, divisé en images. L'axe des ordonnées du graphique mesure le temps d'affichage, en millisecondes. Comme vous pouvez le voir, sur mon appareil, la page met 14 millisecondes à s'afficher. Les temps d'affichage minimal et maximal sont également indiqués, ainsi que la mémoire GPU utilisée.
À titre d'essai, j'ai défini le style de l'élément sélectionné sur display: none. Voyons maintenant combien coûte l'affichage de la page.
Les temps de peinture sont passés d'environ 14 millisecondes par image à 4 millisecondes par image. En d'autres termes, l'affichage de cet élément a pris environ 10 millisecondes. En suivant le processus d'activation et de désactivation des éléments et des styles, vous pouvez rapidement identifier les parties coûteuses de votre page. N'oubliez pas qu'un temps d'affichage plus rapide signifie moins de saccades, une autonomie de la batterie plus longue et un engagement accru de vos utilisateurs. Lorsque vous serez prêt à approfondir le sujet, lisez cet excellent article sur le mode de repeinture continue des pages.
Fonctionnalités avancées
about:tracing
De nombreuses fonctionnalités de développement avancées disponibles dans Chrome pour ordinateur sont également disponibles dans Chrome pour Android. Par exemple, about:gpu-internals, about:appcache-internals et about:net-internals sont disponibles. Lorsque vous examinez un problème particulièrement complexe, vous avez parfois besoin de plus de données pour identifier la cause de votre problème. Sur ordinateur, vous utilisez peut-être about:tracing. Si vous ne connaissez pas encore about:tracing, regardez ma vidéo sur l'utilisation et l'exploration de l'outil de profilage about:tracing. Il est possible de capturer les mêmes données à partir d'Android Chrome. Pour commencer, procédez comme suit :
- Téléchargez adb_trace.py.
- Exécuter adb_trace.py à partir de la ligne de commande
- Utiliser Chrome sur Android
- Appuyez sur Entrée sur la ligne de commande pour arrêter le script adb_trace.py.
Une fois l'exécution d'adb_trace.py terminée, vous obtenez un fichier JSON que vous pouvez charger dans about:tracing de Chrome pour ordinateur.
Guide de démarrage
Maintenant que nous avons vu ce que les Outils pour les développeurs Chrome à distance peuvent faire, voyons comment démarrer votre session de débogage à distance. Si vous ne les avez jamais utilisés, consultez les instructions détaillées pour commencer. Si vous les avez déjà utilisées, mais que vous avez oublié comment, j'ai également listé des instructions abrégées ici.
1. Installer le SDK Android
Vous vous demandez peut-être pourquoi vous devez installer le SDK Android alors que vous développez pour le Web. Le SDK inclut adb (Android Debug Bridge). Chrome pour ordinateur doit pouvoir communiquer avec votre appareil Android. Chrome ne communique pas directement avec l'appareil Android, mais achemine la communication via adb.
2. Activer le débogage USB sur votre appareil
L'option permettant d'activer le débogage USB se trouve dans les paramètres Android. Activez-le.
3. Se connecter à l'appareil
Si ce n'est pas déjà fait, connectez votre appareil Android à votre ordinateur via USB. Si vous utilisez le débogage USB pour la première fois, l'invite suivante s'affiche :
Si vous effectuez fréquemment des sessions de débogage à distance, je vous recommande de cocher "Toujours autoriser sur cet ordinateur".
4. Vérifier que votre appareil est correctement connecté
Exécutez adb devices à partir de l'invite de commande. Votre appareil devrait apparaître dans la liste.
5. Activer le débogage USB dans Chrome
Ouvrez Paramètres > Avancés > Outils de développement, puis cochez l'option Activer le débogage Web USB, comme illustré ci-dessous :
6. Créer une connexion DevTools à votre appareil Android
Exécutez la commande suivante :
adb forward tcp:9222 localabstract:chrome_devtools_remote
crée un pont entre votre ordinateur et votre appareil Android via adb. Si vous rencontrez des problèmes pour arriver à ce stade, lisez les instructions de configuration détaillées ici.
7. Vérification de votre éligibilité…
Vérifiez que votre appareil est correctement connecté en ouvrant Chrome sur votre ordinateur et en accédant à http://localhost:9222. Si vous obtenez une erreur 404 ou une autre erreur, ou si vous ne voyez pas quelque chose comme ceci :
Consultez les instructions de configuration détaillées sur cette page.
Conclusion
Les utilisateurs d'appareils mobiles sont souvent pressés et ont besoin d'accéder rapidement aux informations importantes de votre page. En tant que créateur de site mobile, il est de votre devoir de vous assurer que la page se charge rapidement et fonctionne bien sur mobile. Sinon, l'engagement utilisateur diminuera. Les Outils pour les développeurs Chrome à distance sont fonctionnellement équivalents à leurs homologues de bureau. L'UI est suffisamment similaire pour que vous n'ayez pas besoin d'apprendre à utiliser un nouvel ensemble d'outils. En d'autres termes, votre workflow est conservé. N'oubliez pas que Facebook n'est pas à l'abri de problèmes de performances, et votre site non plus. Les sites performants enregistrent un meilleur engagement des utilisateurs.