Corrections rapides à Mobile Website Performance

Bonjour. Je m'appelle Maile Ohye. Je travaille chez Google, en tant que responsable des programmes pour les développeurs, dans l'équipe d'aide aux webmasters. Cette vidéo vise à fournir des solutions rapides que vous-même, ou votre personnel technique, pouvez implémenter facilement pour améliorer les performances de votre site pour mobile. Mais avant de voir comment accélérer les choses, regardons les statistiques. Les performances peuvent influencer les profits. Lors d'un test réalisé par Strangeloop, une seconde de latence supplémentaire a été ajoutée aux pages destinées aux utilisateurs de smartphones. Avec une seule seconde de différence, le nombre de pages vues a baissé de plus de 9 %, le taux de rebond a augmenté de plus de 8 %, et le nombre de conversions a chuté de 3,5 %. Enfin, plus grave encore, même après l'expérience, les acheteurs étaient bien moins enclins à retourner sur le site. Quel est le comportement actuel des mobinautes quant à la vitesse des pages pour mobile ? Les études montrent que les utilisateurs sont attentifs pendant une seconde. Mais le temps moyen de chargement d'une page sur un mobile est de 7 secondes. Cela nous laisse donc 6 secondes pour essayer un autre site, oublier notre tâche en cours ou nous noyer dans la frustration. Voyons pourquoi le Web pour mobile est plus lent que celui pour ordinateur. Comparons le potentiel de latence des mobiles et des ordinateurs. Prenons le cas d'un internaute qui consulte google.com sur son ordinateur portable pour effectuer une recherche. Une fois la requête saisie, la totalité du processus, à savoir la connexion du navigateur de l'internaute à notre site, le traitement de la requête par nos serveurs, puis le renvoi des résultats et leur affichage dans le navigateur de l'ordinateur peuvent prendre moins d'une demi-seconde. En fait, la plupart d'entre nous sont habitués à de telles performances. Sur des smartphones, ce processus complet en moins d'une demi-seconde est presque impossible. En effet, quand un mobinaute saisit une requête sur son smartphone, le client doit se connecter au réseau mobile avant de pouvoir atteindre le serveur. Les réseaux mobiles sont configurés de telle sorte que, en 3G ou en 4G, un smartphone nécessite 0,5 seconde au minimum pour se connecter à un serveur comme Google. Une fois cette demi-seconde pour se connecter au serveur passée, il faut encore traiter la requête, renvoyer les résultats et afficher la page sur le smartphone. Ce qu'il faut retenir, c'est que vos visiteurs potentiels sur smartphone devront attendre 0,5 seconde au minimum rien que pour se connecter à votre serveur. Ainsi, environ 0,6 seconde plus ***, une fois qu'une seconde est passée, il est déjà possible que votre visiteur soit distrait. Voyons comment nous pouvons accélérer les choses. Dans cette vidéo, je vais vous proposer des idées en utilisant Google Analytics avec notre site de commerce électronique, Google Store, sur www.googlestore.com. Rendons-nous d'abord sur Google Analytics pour créer un segment de trafic issu de mobiles. Commencez par créer un segment. Le mois dernier, mes collègues de l'équipe Page Speed ont lancé une nouvelle fonctionnalité dans Google Analytics : Vitesse du site. Accédons à la page "Vitesse du site : temps de chargement des pages". Une fois notre segment réglé sur "Trafic sur mobile", sélectionnez l'onglet "Diffusion". La diffusion donne une idée très précise des performances d'un site. Nous pouvons voir que le temps de chargement moyen d'une page pour mobile pour mon site, le Google Store, est supérieur à 6 secondes. Nous remarquons aussi que pour 46 % des pages de mon site, le temps de chargement sur mobile varie entre 3 et 7 secondes. Heureusement, nous disposons d'une grande marge d'amélioration. Toujours dans "Vitesse du site : temps de chargement des pages", cliquez sur l'onglet "Explorateur". Sur cette page, en triant par défaut les pages vues, ce qui affiche donc les pages les plus visitées de notre site, vous pouvez voir la vitesse relative de chaque page. Il s'avère que ma 3e page la plus populaire, celle de la catégorie YouTube, qui vend par exemple des bouteilles d'eau ou des aimants YouTube, est particulièrement lente, 350 % plus lente que la moyenne de mes pages pour mobile, qui, nous l'avons vu plus tôt, n'étaient déjà pas très rapides. Nous pouvons utiliser cette fonctionnalité pour lister les pages populaires lentes que nous souhaitons examiner. Maintenant, rendons-nous sur les "Suggestions relatives à la vitesse du site" pour découvrir quelles améliorations apporter. Nous pouvons voir que, pour la page YouTube, il y a 9 suggestions relatives à la vitesse de la page. Quand vous cliquez sur les suggestions, l'outil PageSpeed Insights s'affiche dans une nouvelle fenêtre. C'est comme assister à la correction de votre examen en direct. Une fois l'examen terminé, regardez les performances sur mobile. Sans surprise, votre page YouTube affiche un score de 55 sur 100 pour les bonnes pratiques en matière de performances. Cela équivaut à un F. Comme cette vidéo a pour but d'améliorer rapidement les performances sur mobile, concentrons-nous sur les suggestions les plus simples avec un point d'exclamation rouge. Certaines suggestions peuvent vous sembler familières, d'autres moins. Mais vous pouvez afficher plus de détails pour chaque suggestion. Je tiens vraiment à vous faire comprendre à quel point il est utile et rentable de mettre en place ces suggestions d'amélioration des performances. J'ai fait un tableau, sur deux diapositives, qui a pour but d'illustrer les suggestions faciles d'amélioration des performances et de vous fournir des éléments de contexte pour les plus difficiles. N'hésitez pas à mettre la vidéo en pause si vous avez besoin de plus de temps. Le haut du tableau illustre les suggestions faciles à mettre en place en quelques heures par un développeur ou une personne avec des compétences techniques. La première chose à faire est d'autoriser la compression. Autoriser la compression consiste à zipper les ressources. Ainsi, il y a moins de données à transférer entre votre serveur Web et le client. Il suffit de modifier les paramètres du fichier de configuration de votre serveur. Il est facile de réduire la taille des ressources grâce aux outils accessibles au grand public. L'utilisation de scripts asynchrones consiste à copier-coller de nouveaux extraits de code pour remplacer les anciennes versions. Pour tirer profit de la mise en cache du navigateur, il vous suffit d'ajouter des en-têtes HTTP appropriés pour vos ressources. La dernière suggestion d'amélioration de la vitesse est d'éviter les redirections de pages. Si des pages font partie d'une chaîne de redirection, il faut faire en sorte que l'URL source dirige directement vers la cible, et non vers des pages intermédiaires. Nous pouvons voir en quoi il est intéressant de corriger des redirections inutiles en examinant à nouveau la latence d'un smartphone. Chaque redirection obligera le mobinaute à attendre 0,5 seconde de plus pour voir la page. Pour en revenir à un autre conseil simple, permettre la compression est aussi facile que de copier du code dans un fichier de configuration de serveur. Il existe des fichiers de configuration principaux Open Source que vous pouvez utiliser, par exemple pour copier les bons paramètres de sécurité et de performances pour votre serveur. Les suggestions d'amélioration de la 2e page du tableau sont plus difficiles à mettre en place. La plupart ne peuvent être réalisées en seulement quelques heures. Elles demandent plus de réflexion et des améliorations des processus. Malgré tout, j'aimerais prendre un instant pour traiter des recommandations d'optimisation des images. L'optimisation des images comprend toute une palette d'améliorations, allant de la compression sans perte à la création et au rognage d'images destinées à votre site mobile. L'optimisation des images n'est pas aussi simple que les suggestions d'amélioration de la vitesse de la diapositive précédente. Mais cela peut avoir un impact plus important. Les images constituent 65 % des données du Web pour mobile. Optimiser ces ressources peut réduire le temps de téléchargement et, en dernier lieu, afficher les pages plus vite. Le principal enseignement à tirer de tout cela est que, si vous avez une page pour mobile avec un fort trafic et des suggestions d'amélioration de la vitesse signalées par un point d'exclamation rouge, et faciles à réaliser, il serait bon pour vos visiteurs et votre activité de les corriger. Si vous voulez une autre source d'inspiration, rendez-vous sur WebPageTest.org. Avec Web Page Test, nous pouvons indiquer une page, comme la page des catégories YouTube, et analyser sa vitesse. Sélectionnez un user-agent pour mobile, comme un smartphone de type iPhone ou Android. Une fois le test de la page Web lente terminé, vous pouvez voir où le bât blesse. J'ai examiné cette page avec mon collègue, Ilya Grigorik, qui s'est d'abord intéressé aux performances. Sa réponse : Houlà. Ce n'est pas une jolie cascade. La cascade représente la raison pour laquelle le temps de chargement de la page a dépassé 15 secondes. Les barres bleues sont les téléchargements de contenu nécessaires pour charger la page. Pour que la page commence à s'afficher, il a presque fallu sept secondes. Avec de telles performances, vous espérez donc qu'un acheteur YouTube va attendre sept secondes pour recevoir une première réponse visuelle, et plus de 15 secondes pour que la page s'affiche entièrement. Si vous n'êtes toujours pas décidé à faire ces quelques changements rapides, veuillez noter que selon "Ce que les internautes attendent des sites mobiles aujourd'hui", 61 % des internautes affirment que s'ils ne trouvent pas tout de suite ce qu'ils cherchent sur un site pour mobile, ils changent très vite de site. Ainsi, il peut être amusant de comparer les informations sur la vitesse de votre page, et sur la vitesse d'une page équivalente de votre concurrent. Sportive depuis toujours et la plus jeune de trois sœurs, je trouve cela particulièrement motivant de m'améliorer quand je vois que mes concurrents font mieux que moi. De plus, avec Web Page Test, vous pouvez télécharger une bande de film affichant le rendu de votre page pour mobile. N'hésitez pas à comparer votre bande de film avec les pages des autres sites du secteur. Je voudrais, pour finir, mettre l'accent sur des ressources exceptionnelles, comme Page Speed, avec des outils tels que PageSpeed Insights et des articles. Il y a également de très bonnes vidéos réalisées par Ilya et les membres de l'équipe de Page Speed. Enfin, n'hésitez pas à vous rendre sur WebPageTest.org. Merci de votre attention.