Module 2 : Améliorer la vitesse d'un site mobile

2.1.1 Outils de démarrage

Ce didacticiel vous apprend étape par étape comment utiliser le panneau Chrome DevTools Network, et vous explique les raisons pour lesquelles une page met du temps à se charger.

Remarque : Ce didacticiel est conçu pour Chrome 57, désormais appelé Canary.

Étape 1 : Configurer DevTools

Imaginons que des utilisateurs mobiles vous signalent qu'une page spécifique de votre site est lente. Votre objectif sera alors de la rendre rapide.

  1. Cliquez sur "Open Slow Page". La page s'ouvre dans un autre onglet.
  2. OUVREZ LA PAGE DE VOTRE SITE SIGNALÉE COMME LENTE.
  3. Lorsque la page est nette, appuyez sur Commande + Option + I (Mac) ou Ctrl + Maj +I (Windows, Linux) pour ouvrir DevTools sur la page.
  4. Dans DevTools, cliquez sur l'onglet "Network".

    Figure 1. Le panneau Chrome DevTools Network ouvert à côté de la page lente que vous allez analyser.

    Remarque : Dans toutes les captures d'écran suivantes, DevTools est détaché dans une autre fenêtre, de manière à ce que vous puissiez mieux voir son contenu.
  5. Activez l'option Capture Screenshots , qui doit devenir bleue lorsqu'elle est activée. DevTools effectue des captures d'écran pendant le chargement de la page.

Étape 2 : Émuler l'expérience de l'utilisateur mobile

Tester les performances du réseau sur un ordinateur portable ou fixe peut être trompeur, car la connexion Internet est beaucoup plus rapide sur ces dispositifs que sur les appareils mobiles. De plus, sur un ordinateur, le navigateur met en cache les ressources des visites précédentes.

  1. Cochez la case Disable Cache. Lorsque cette case est cochée, DevTools ne fournit plus aucune ressource venant du cache. L'émulation de l'expérience utilisateur est ainsi plus juste : vous pouvez voir ce que les internautes voient quand ils accèdent à votre page pour la première fois.
  2. Dans le menu déroulant qui indique pour le moment No Throttling, sélectionnez Regular 3G. DevTools ralentit la connexion réseau pour simuler une expérience mobile stantard 3G. Vous pouvez ainsi voir à quoi ressemble l'expérience utilisateur sur mobile quand la connexion est mauvaise.

Figure 2. Le panneau Chrome DevTools Network configuré pour émuler l'expérience utilisateur sur mobile : les options de captures d'écran, désactivation du cache et ralentissement de la connexion sont encadrées en bleu de gauche à droite dans cet ordre.

Cette émulation représente le pire scénario possible. Par conséquent, si votre page se charge rapidement dans cette configuration, elle se chargera rapidement pour tous vos utilisateurs !

Étape 3 : Analyser les demandes

Essayez d'identifier ce qui ralentit la page en l'actualisant et en analysant les demandes qui arrivent.

Partie A : Identifier les scripts qui bloquent l'affichage

Lorsque le navigateur détecte une balise <script>, il doit interrompre l'affichage pour exécuter le script immédiatement. Identifiez les scripts qui ne sont pas nécessaires pour le chargement de la page : marquez-les comme asynchrones ou différez leur exécution afin de réduire le temps de chargement.

  1. Appuyez sur Cmd + R (Mac) ou Ctrl + R (Windows, Linux) pour actualiser la page. Avec une bonne connexion Wi-Fi, la page met plus de 10 secondes à se charger complètement.

    Figure 3. Le panneau Chrome DevTools Network après l'actualisation de la page.

  2. Observez la valeur indiquée pour "DOMContentLoaded" dans le volet récapitulatif, qui se trouve tout en bas du panneau Network. Cette valeur correspond normalement à quatre secondes minimum. Lorsque l'affichage de la page met autant de temps, recherchez les scripts qui retardent le chargement et l'analyse du document principal.
  3. Pour étudier plus en détail la demande, cliquez sur main.js. DevTools affiche un ensemble de nouveaux onglets présentant des informations supplémentaires sur la demande.
  4. Pour afficher le code source de la demande, cliquez sur l'onglet Preview. Vous pouvez voir que l'exécution du script s'étend sur 4 000 ms. Affectez l'attribut "async" (asynchrone) à ce script, et déplacez-le tout en bas du <body> du document. De cette manière, la page pourra se charger sans attendre le script.

Figure 4. Affichage du code source du script main.js dans l'onglet Preview.

Pour en savoir plus sur les scripts qui bloquent l'affichage, consultez la section Blocage de l'analyseur vs JavaScript asynchrone de cet article.

Partie B : Identifier les demandes volumineuses

Lors du chargement de la page, vous êtes-vous rendu compte que le logo DevTools a mis du temps à se charger ? Le problème ici n'est pas que le logo bloque le chargement général, mais plutôt que l'utilisateur a l'impression que la page est lente à s'afficher. Et il n'aime pas cela, il veut de la rapidité.

  1. Cliquez sur Close pour réafficher le volet Requests.
  2. Double-cliquez sur l'icône de capture d'écran dans l'angle supérieur gauche.
  3. Appuyez sur la flèche vers la droite pour faire défiler l'ensemble des captures d'écran. Le temps sous la capture d'écran indique à quel moment elle a été effectuée. Si le chargement de la capture d'écran prend plusieurs secondes, cela signifie probablement que le fichier est trop volumineux.
  4. Cliquez n'importe où en dehors de la capture d'écran pour la réduire.
  5. Passez la souris sur la section Waterfall pour la demande logo-1024px.png. Ce qui prend le plus de temps dans cette demande, c'est le téléchargement de l'image. L'image est donc trop volumineuse.

Figure 5. La cascade ("Waterfall") de la demande logo-1024px.png.

Étape 4 : Vérifier que les modifications fonctionnent sur la page mise à jour

Vous avez presque terminé. Supposons que vous avez effectué deux modifications sur la page :

  • Vous avez déplacé le script tout en bas du <body>, et vous l'avez marqué comme asynchrone pour qu'il ne bloque pas le chargement de la page.
  • Vous avez converti le logo au format SVG pour qu'il soit moins volumineux.

La seule chose qu'il vous reste à faire est de tester la page mise à jour afin de vérifier que vos modifications lui permettent bien de se charger plus rapidement.

  1. Cliquez sur Open Fast Page. La page mise à jour s'ouvre dans un nouvel onglet.
  2. OUVREZ LA PAGE QUI DEVRAIT DÉSORMAIS ÊTRE RAPIDE.
  3. Appliquez la même configuration à DevTools. Les captures d'écran doivent être activées, la mise en cache désactivée, et la connexion réseau paramétrée sur Regular 3G.
  4. Actualisez la page. Elle devrait se charger beaucoup plus rapidement.

Figure 6. Analyse du chargement de la page une fois les modifications effectuées. Auparavant, l'affichage complet de la page prenait environ 10 secondes. Désormais, il ne prend plus qu'à peu près une seconde.

Cet article vous a-t-il été utile ?
Comment pouvons-nous l'améliorer ?