Introduction
Aujourd'hui, la chose la plus importante que vous pouvez faire pour votre site est de vous assurer qu'il fonctionne bien lorsqu'il est consulté à partir d'un téléphone ou d'une tablette. Poursuivez votre lecture 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 l'optimisation pour le Web mobile est-elle si importante ?
Performances
Les appareils mobiles disposent de processeurs plus rapides, de davantage 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é un rythme effréné, les appareils mobiles sont moins puissants que nos ordinateurs. Plus concrètement, le chargement des ressources réseau prend plus de temps, le décompression des images prend plus de temps, l'affichage de la page prend plus de temps et l'exécution des scripts prend plus de temps. Vous pouvez partir du principe que votre page s'exécute 5 à 10 fois plus lentement sur un appareil mobile.
Batterie
Les appareils mobiles fonctionnent exclusivement sur batterie. Les utilisateurs d'appareils mobiles veulent que cette batterie dure le plus longtemps possible. Un site qui n'est pas optimal décharge la batterie beaucoup plus rapidement que nécessaire. Minimisez le trafic réseau et les peintures pour décharger 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 affiche un élément, l'utilisation du processeur et du GPU augmente fortement, ce qui décharge également la batterie.
Engagement
Les performances ont pour but d'augmenter la métrique qui compte le plus pour vous. Sur Facebook, nous nous soucions du défilement. Lors d'un test A/B, nous avons ralenti le défilement de 60 FPS à 30 FPS. Engagement réduit. Nous avons dit "OK". Le défilement est donc important.
Facebook at Edge Conference
Les mobinautes s'attendent à pouvoir entrer et sortir rapidement. Le site le plus rapide générera le plus d'engagement.
Gestion des performances
Chrome est livré avec un ensemble d'outils pour les développeurs incroyable. 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, c'est parfait. Si ce n'est pas le cas, consultez ces tutoriels très utiles:
- Profiler de longs temps de rendu
- Conseils et astuces sur les outils de développement
- Et bien plus encore…
Maintenant que vous avez consulté toutes les informations, découvrons comment accélérer votre site mobile grâce aux 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 figurant au bas de l'article.
Utiliser les outils pour les développeurs Chrome à distance
Lorsque vous partagez la connexion de votre appareil Android avec votre ordinateur. Dans Chrome pour ordinateur, accédez à http://localhost:9222, puis 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 Inspectable".
pour accéder aux outils pour les développeurs Chrome associés à cette page.
La barre d'outils des outils pour les développeurs Chrome, que vous connaissez déjà, est là. Ce qu'il faut savoir sur les outils pour les développeurs Chrome à distance, c'est qu'ils sont identiques à 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 des outils de développement. En arrière-plan, les mêmes données sont collectées et la même fonctionnalité est disponible.
Par exemple, j'ai consulté www.sfgate.com/movies sur mon téléphone. J'ai passé la souris sur un élément div de l'outil Elements à l'aide des outils pour les développeurs Chrome sur mon ordinateur. Comme sur l'ordinateur de bureau, cet élément div est mis en surbrillance sur mon appareil Android.
L'outil Elements peut également être utilisé pour activer et désactiver des styles, ce qui est pratique lorsque nous essayons d'examiner les temps de rendu.
Lumière sur l'accès au réseau
Les performances du réseau correspondent à l'importation, et elles sont encore plus importantes sur le Web mobile. Les appareils mobiles ont souvent une connexion plus lente que nos ordinateurs de bureau et portables. Pour vous assurer de procéder correctement, 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 généré par une recherche Google. Observez les demandes réseau envoyées par votre site et trouvez des moyens de les minimiser. Si votre site envoie des requêtes d'interrogation au serveur, vous pouvez prêter attention à l'activité de l'utilisateur et éviter l'interrogation lorsque celui-ci est inactif. L'outil Réseau vous permet d'afficher les en-têtes HTTP bruts, ce qui est utile au cas où les réseaux mobiles les modifieraient.
Optimiser les temps de rendu
L'un des principaux goulots d'étranglement dans les navigateurs Web mobiles est de peindre votre page. La peinture consiste à dessiner un élément de la page avec le style spécifié. Lorsqu'un élément est coûteux à peindre, cela ralentit la peinture de la page entière. 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 de 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 davantage de peintures et chaque peinture est plus lente que le bureau. Pour bénéficier du défilement responsif, vous devez minimiser les temps de rendu.
Chrome 25 inclut le mode repeinture continue de la page. Le mode repeindre de page continu ne met jamais en cache les éléments peints, mais affiche tous les éléments dans chaque frame. En forçant tous les éléments à être peints dans chaque cadre, il est possible d'effectuer des tests A/B des temps de rendu en activant/désactivant les éléments et les styles. Bien que le processus soit manuel, c'est un outil précieux pour mesurer le coût de 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 repeindre de page continu:
Une fois l'activation effectué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 des ordonnées du graphique mesure le temps de rendu, en millisecondes. Vous pouvez voir que, sur mon appareil, la peinture prend 14 millisecondes. Les temps d'application minimal et maximal sont également affichés, ainsi que la mémoire GPU utilisée.
Pour effectuer un test, j'ai défini le style de l'élément sélectionné sur display: none. Voyons maintenant combien coûte
de peindre la page.
Les temps de rendu sont passés d'environ 14 millisecondes par image à 4 millisecondes par frame. En d'autres termes, peindre cet élément a pris environ 10 millisecondes. En suivant le processus d'activation/de désactivation des éléments et des styles, vous pouvez rapidement limiter les parties coûteuses de votre page. N'oubliez pas qu'un temps de rendu plus court signifie moins d'à-coups, plus de batterie et plus d'engagement de la part des utilisateurs. Lorsque vous serez prêt à approfondir vos connaissances, consultez cet article très utile sur le mode repeinture continue des pages.
Fonctionnalités avancées
about:traçage
Bon nombre des fonctionnalités avancées pour les développeurs disponibles dans le navigateur Chrome pour ordinateur le sont également 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 sa cause. Sur un ordinateur, vous utilisez peut-être about:tracing. Si vous ne connaissez pas encore le about:tracing, regardez ma vidéo sur l'utilisation et l'exploration de l'outil de profilage about:tracing. Vous pouvez capturer les mêmes données à partir de Chrome Android. Pour commencer, procédez comme suit:
- Télécharger le fichier adb_trace.py
- Exécutez adb_trace.py à partir de la ligne de commande.
- Utiliser Chrome sur Android
- Appuyez sur Entrée sur la ligne de commande, arrêtant le script adb_trace.py.
Une fois adb_trace.py terminé, vous disposez d'un fichier JSON que vous pouvez charger dans la version about:tracing de Chrome pour ordinateur.
Guide de démarrage
Maintenant que nous avons vu ce que les outils pour les développeurs Chrome peuvent faire à distance, voyons comment démarrer votre session de débogage à distance. Si vous ne les avez jamais utilisées auparavant,lisez ces instructions détaillées pour vous lancer. Si vous les avez déjà utilisées, mais que vous avez oublié exactement comment les utiliser, j'ai également fourni des instructions abrégées ici.
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 comprend 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-la.
3. Se connecter à l'appareil
Si vous ne l'avez pas déjà fait, connectez votre appareil Android à votre ordinateur de bureau à l'aide d'un câble USB. Si vous utilisez le débogage USB pour la première fois, l'invite suivante s'affiche:
Si vous effectuez souvent des sessions de débogage à distance, nous vous conseillons de cocher l'option "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 figurer dans la liste.
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 USB Web) comme indiqué ci-dessous:
6. Créer une connexion aux outils de développement sur votre appareil Android
Exécutez la commande ci-dessous.
adb forward tcp:9222 localabstract:chrome_devtools_remote
crée une liaison entre votre ordinateur de bureau et votre appareil Android via adb. Si vous rencontrez des problèmes pour y accéder, consultez les instructions de configuration détaillées.
7. Vérification de votre disponibilité...
Vérifiez que votre appareil est correctement connecté en ouvrant Chrome sur votre ordinateur et en accédant à http://localhost:9222. Si vous recevez une erreur 404, une autre erreur ou si vous ne voyez rien de semblable à celui-ci:
Pour consulter les 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 depuis votre page. En tant que concepteur de sites mobiles, il est de votre devoir de vous assurer que la page se charge rapidement et fonctionne correctement sur les mobiles. Sinon, l'engagement utilisateur diminuera. Du point de vue fonctionnel, les outils pour les développeurs Chrome à distance sont équivalents à ceux de la version pour ordinateur. L'UI est suffisamment similaire pour que vous n'ayez pas besoin de vous familiariser avec un nouvel ensemble d'outils. En d'autres termes, votre flux de travail est reporté. N'oubliez pas que Facebook n'est pas invincible aux problèmes de performances, de même que votre site. Les sites performants génèrent davantage d'engagement.