Introduction
Aujourd'hui, le plus important que vous puissiez faire pour votre site est de vous assurer qu'il fonctionne bien lorsqu'il est consulté depuis un téléphone ou une tablette. Lisez la suite et découvrez 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 pour le Web mobile ?
Performances
Les appareils mobiles disposent 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, les appareils mobiles sont sous-alimentés par rapport à nos ordinateurs. Plus concrètement, le chargement des ressources réseau prend plus de temps, le décompression des images prend plus de temps, la peinture de la page prend plus de temps, l'exécution des scripts prend plus de temps. On peut raisonnablement supposer que votre page s'exécute cinq à dix fois plus lentement sur un appareil mobile.
Batterie
Les appareils mobiles fonctionnent exclusivement sur batterie. Les utilisateurs d'appareils mobiles veulent que la batterie dure aussi longtemps que possible. Un site non optimisé déchargera la batterie beaucoup plus rapidement que nécessaire. Réduisez le trafic réseau et les peintures pour réduire la décharge de la batterie. Lorsque vous récupérez une ressource, le Wi-Fi ou la radio cellulaire doit être activé, 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 visent à augmenter la métrique la plus importante pour vous. Chez Facebook, nous accordons une grande importance au défilement. Dans un test A/B, nous avons ralenti le défilement de 60 FPS à 30 FPS. Engagement réduit. Nous avons dit "OK", donc le défilement est important.
Facebook à la conférence Edge
Les utilisateurs mobiles s'attendent à pouvoir accéder à une application et en sortir rapidement. Le site le plus rapide génère le plus d'engagement.
Gestion des performances
Chrome est fourni avec un excellent ensemble d'outils pour les développeurs. Cet article vous explique comment utiliser ces outils pour créer un profil de votre site mobile. Si vous connaissez déjà les outils pour les développeurs Chrome, c'est parfait. Si ce n'est pas le cas, consultez ces excellents tutoriels:
- Profiler les longs temps de peinture
- Conseils et astuces pour les outils de développement
- Et bien plus encore…
Maintenant que vous êtes à jour, voyons comment accélérer votre site mobile avec les outils de développement. Si vous utilisez les outils pour les développeurs Chrome pour Android pour la première fois, consultez le guide de démarrage en bas de cet article.
Utiliser les outils pour les développeurs Chrome à distance
Avec votre appareil Android associé à votre ordinateur. Dans Chrome pour ordinateur, accédez à http://localhost:9222, puis sur votre appareil Android, ouvrez votre site. La liste des onglets ouverts sur votre appareil Android s'affiche. Sélectionnez votre page dans la liste "Pages Inspectable".
Vous êtes alors redirigé vers les outils pour les développeurs Chrome correspondant à cette page.
La barre d'outils des outils pour les développeurs Chrome se trouve juste là. L'essentiel à retenir concernant les outils pour les développeurs Chrome à distance est qu'il s'agit des mêmes outils que ceux que vous utilisez actuellement 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 de DevTools. En réalité, les mêmes données sont collectées et les mêmes fonctionnalités sont disponibles.
Par exemple, j'ai consulté www.sfgate.com/movies sur mon téléphone. J'ai utilisé les outils pour les développeurs Chrome sur mon ordinateur de bureau et j'ai pointé sur un div dans l'outil Elements. Comme sur l'ordinateur, le div est mis en surbrillance visuellement sur mon appareil Android.
L'outil Éléments peut également être utilisé pour activer et désactiver des styles, ce qui s'avère utile lorsque nous essayons d'examiner les délais d'application.
Éclairer l'accès au réseau
Les performances du réseau sont importantes, et encore plus sur le Web mobile. La connexion des appareils mobiles est souvent plus lente que celle de nos ordinateurs de bureau et portables. Pour vous assurer de faire les choses correctement, prenez un instantané du réseau en accédant à l'outil de réseau et en appuyant sur "Enregistrer".
La capture d'écran montre le trafic réseau généré par une recherche Google. Observez les requêtes réseau de votre site et trouvez des moyens de les réduire. Si votre site envoie des requêtes d'interrogation au serveur, nous vous conseillons de prêter attention à l'activité des utilisateurs et d'éviter les interrogations lorsqu'ils sont inactifs. 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 de peinture
L'un des principaux goulots d'étranglement des navigateurs Web mobiles est la peinture de votre page. La peinture consiste à dessiner un élément sur la page avec le style spécifié. Lorsqu'un élément est coûteux à peindre, cela ralentit la peinture de l'ensemble de la page. Chrome tente de mettre en cache des éléments précédemment peints dans un tampon hors écran. Toutefois, sur mobile, la quantité de RAM du GPU disponible est limitée, ce qui limite le nombre d'éléments pouvant être mis en cache en dehors de l'écran. L'effet secondaire est que plus de peintures sont appliquées et que chaque peinture est plus lente que sur un ordinateur de bureau. Pour que le défilement soit responsif, vous devez réduire les délais de peinture.
Chrome 25 inclut le mode de repeinture de page continue. Le mode de repeinture de page continue ne met jamais en cache les éléments peints, mais peint tous les éléments à chaque frame. En forçant tous les éléments à être peints à chaque frame, il est possible d'effectuer des tests A/B sur les temps de peinture en activant et en désactivant les éléments et les styles. Bien que le processus soit manuel, il s'agit d'un outil inestimable pour déterminer le coût de la peinture de chaque élément de votre page. La première règle du club d'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 remise en peinture continue de la page :
Une fois l'option activée, un graphique s'affiche en haut à droite de votre appareil Android. L'axe des x du graphique représente le temps, divisé en cadres. L'axe Y du graphique mesure le temps de peinture, en millisecondes. Vous pouvez voir que, sur mon appareil, la page met 14 millisecondes à s'afficher. Les temps de peinture minimum et maximal sont également affichés, ainsi que la mémoire GPU utilisée.
À des fins de test, j'ai défini le style de l'élément sélectionné sur display: none. Voyons maintenant combien il coûte de peindre la page.
Les temps de peinture sont passés d'environ 14 millisecondes par image à 4 millisecondes par image. En d'autres termes, la peinture de cet élément a pris environ 10 millisecondes. En activant et en désactivant les éléments et les styles, vous pouvez rapidement identifier les parties coûteuses de votre page. N'oubliez pas que des temps de peinture plus rapides signifient moins de saccades, une meilleure autonomie de la batterie et un engagement plus important de la part de vos utilisateurs. Lorsque vous serez prêt à aller plus loin, lisez cet excellent article sur le mode de recoloration de page continue.
Fonctionnalités avancées
about:tracing
De nombreuses fonctionnalités avancées pour les développeurs 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 délicat, vous avez parfois besoin de plus de données afin de déterminer la cause de votre problème. Sur ordinateur, vous pouvez utiliser about:tracing. Si vous ne connaissez pas encore about:tracing, regardez cette 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écharger adb_trace.py
- Exécuter adb_trace.py à partir de la ligne de commande
- Utiliser Chrome sur Android
- Appuyez sur Entrée dans la ligne de commande pour arrêter le script adb_trace.py.
Une fois adb_trace.py terminé, vous disposerez d'un fichier JSON que vous pourrez 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 commencer votre session de débogage à distance. Si vous ne les avez jamais utilisées,lisez des instructions détaillées pour vous lancer. Si vous les avez déjà utilisés, mais que vous avez oublié comment exactement, je vous ai également fourni des instructions abrégées.
1. Installer le SDK Android
Vous vous demandez peut-être pourquoi vous devez installer le SDK Android lorsque vous développez pour le Web. Le SDK est adb (Android Debug Bridge). Chrome pour ordinateur doit pouvoir communiquer avec votre appareil Android. Chrome ne communique pas directement avec l'appareil Android. Il achemine plutôt 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-la.
3. Se connecter à l'appareil
Si ce n'est pas déjà fait, connectez votre appareil Android à votre ordinateur de bureau via USB. Si vous utilisez le débogage USB pour la première fois, l'invite suivante s'affiche :
Si vous allez effectuer des sessions de débogage à distance fréquemment, nous vous recommandons de cocher "Toujours autoriser sur cet ordinateur".
4. Vérifiez que votre appareil est correctement connecté
Exécutez adb devices à partir de votre invite de commande. Votre appareil devrait y figurer.
5. Activer le débogage USB dans Chrome
Ouvrez Settings > Advanced > DevTools (Paramètres > Avancé > Outils de développement) et cochez l'option Enable USB Web debugging (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 de bureau et votre appareil Android via ADB. Si vous rencontrez des problèmes pour arriver à ce stade, consultez les instructions de configuration détaillées.
7. Vérifier que vous êtes prêt
Vérifiez que votre appareil est correctement connecté en ouvrant Chrome sur votre ordinateur et en accédant à http://localhost:9222. Si vous obtenez un code 404, une autre erreur ou que vous ne voyez pas quelque chose comme ceci :
Pour obtenir des instructions de configuration détaillées, cliquez ici.
Conclusion
Les mobinautes sont souvent pressés et ont besoin de récupérer rapidement cette information importante de votre page. En tant que créateur de site pour mobile, il est de votre devoir de veiller à ce que la page se charge rapidement et fonctionne bien sur les mobiles. Sinon, l'engagement utilisateur diminuera. Les outils de développement Chrome à distance sont fonctionnellement équivalents à leurs homologues pour ordinateur. L'interface utilisateur est suffisamment similaire pour que vous n'ayez pas besoin d'apprendre un nouvel ensemble d'outils. En d'autres termes, votre flux de travail est maintenu. N'oubliez pas que Facebook n'est pas à l'abri des problèmes de performances, et votre site non plus. Les sites performants enregistrent un meilleur engagement des utilisateurs.