Performances mobiles | Comment adapter un site aux appareils mobiles ?

Pourquoi les performances sur les appareils mobiles sont-elles importantes ?

Internet devient de plus en plus mobile. Selon Statista, 51 % des pages web consultées dans le monde le sont sur des appareils mobiles. Dans certaines régions, telles que l'Asie et l'Afrique, le pourcentage est beaucoup plus élevé. Dans les deux cas, celui-ci augmente régulièrement chaque année.

Les principaux moteurs de recherche sont bien conscients du phénomène, c'est pourquoi ils accordent la priorité aux sites dont le temps de chargement sur les appareils mobiles est rapide. Les utilisateurs d'appareils mobiles disposent parfois d'une bande passante limitée, mais souhaitent néanmoins trouver rapidement des informations. Ces utilisateurs sont généralement moins patients, ce qui se traduit par des taux de rebond élevés pour les sites dont le chargement est lent. (Le « taux de rebond » désigne le pourcentage de visiteurs qui quittent un site Internet après n'avoir consulté qu'une seule page).

Google et d'autres organismes spécialisés dans la mesure de la vitesse des sites ont déterminé que le temps de chargement maximal d'un site devrait être d'environ trois secondes sur les appareils mobiles. Au bout de trois secondes, le taux de retenue des utilisateurs diminue considérablement. Les moteurs de recherche « punissent » les sites dont le temps de chargement est lent en les plaçant plus bas dans les résultats de recherche, notamment pour les utilisateurs d'appareils mobiles.

Une limite fixée à trois secondes peut paraître sévère, mais il existe des stratégies éprouvées pour réduire les temps de chargement sur les appareils mobiles.

Comment améliorer les performances sur les appareils mobiles ?

Un certain nombre de facteurs ont une incidence sur les performances des sites sur les appareils mobiles, de sorte que plusieurs stratégies et meilleures pratiques peuvent améliorer les temps de chargement.

Réduire la taille des fichiers et leur nombre

Pour accélérer le temps de chargement, tous les fichiers du site web doivent être aussi petits que possible. Les images sont souvent les plus gros fichiers à charger, et il est possible de les réduire en utilisant des logiciels d'optimisation d'images ou en les convertissant dans un format léger, comme le SVG.

Il est également possible de réduire la taille des fichiers HTML, JavaScript et CSS par minification. La minification du code consiste à retirer tous les espaces et les commentaires du code et à le restructurer sous la forme la plus compacte possible. Cela permet de réduire la taille du fichier au strict minimum. Bien que cela rende le code pratiquement illisible pour un être humain, les navigateurs web seront toujours capables de l'exécuter parfaitement.

Outre la création de fichiers de taille réduite, il convient également de limiter au maximum le nombre total de fichiers. Chaque fichier supplémentaire nécessaire pour charger un site web implique une requête et une réponse supplémentaires, et ces allers-retours augmentent le temps de chargement. Les sites comportant plusieurs fichiers JavaScript et CSS doivent regrouper tout le code JavaScript dans un seul fichier, et procéder de la même manière avec le CSS. Dans le cas des pages qui nécessitent très peu de JavaScript ou de CSS, l'utilisation de styles inline* peut améliorer considérablement les temps de chargement.

*En général, les développeurs web écrivent le code HTML, JavaScript et CSS dans différents fichiers. Grâce à une technique appelée « styles inline », un développeur peut écrire son code JavaScript et/ou CSS dans le même fichier que son code HTML.

Mettre en cache les ressources à la périphérie

En général, lorsqu'un utilisateur consulte un site web, son appareil doit communiquer avec le serveur pour récupérer les fichiers du site. Si le serveur est à San Francisco et l'utilisateur à Berkeley (soit à une quinzaine de kilomètres), le processus devrait être assez rapide, mais que se passe-t-il si l'utilisateur est à Tokyo (à 8 000 km) ? Chaque requête et chaque réponse devra parcourir des milliers de kilomètres, ce qui retardera considérablement le chargement du site web.

Il existe un moyen fréquemment utilisé pour y remédier : le réseau de diffusion de contenu (Content delivery network ou CDN). Un cache CDN mondial met en cache le contenu à la périphérie du réseau. Cela signifie que le CDN dispose de serveurs de mise en cache situés dans des centres de données partout dans le monde. Quiconque disposant d'un accès à Internet se trouve toujours à proximité d'un centre de données. Ces serveurs de centres de données peuvent communiquer avec les serveurs web d'origine pour mettre en cache les données du site web afin que les utilisateurs qui le visitent puissent obtenir des fichiers du site web à partir du centre de données le plus proche. Cela permet de garantir un délai de réponse rapide aux requêtes des utilisateurs, où qu'ils se trouvent.

Appels API en cache

Les appels API sont des requêtes HTTP qui permettent de récupérer des données à partir de ressources externes. Par exemple, un site de critique de films comme Rotten Tomatoes peut envoyer des appels API à un service de vente de billets comme Fandango afin que les utilisateurs qui naviguent sur Rotten Tomatoes puissent voir les horaires des films dans les cinémas près de chez eux. Si les appels API peuvent contribuer à améliorer le confort d'utilisation et à réduire les opérations redondantes, ils créent également de nouvelles requêtes HTTP, ce qui peut ralentir les temps de chargement.

Il est possible de mettre en cache les appels API pour réduire au minimum ces requêtes HTTP supplémentaires. Dans notre exemple ci-dessus, Rotten Tomatoes n'a besoin d'aller consulter les horaires de films de Los Angeles qu'une fois par jour. Le site peut être configuré pour mettre en cache cet appel API une fois par jour. Ainsi, si 10 000 utilisateurs de Los Angeles se rendent chaque jour sur Rotten Tomatoes, seul le premier de ces utilisateurs devra attendre l'appel API à Fandango.

Donner la priorité au contenu visible

Ce qu'un utilisateur voit immédiatement lors du chargement d'une page web n'est souvent que la partie émergée de l'iceberg : il doit faire défiler la page vers le bas pour voir le reste de la page. Le contenu qui apparaît sur l'écran d'un utilisateur avant qu'il ne fasse défiler la page est appelé contenu « au-dessus de la ligne de flottaison ». Les développeurs Web doivent écrire le code de sorte que le contenu au-dessus de la ligne de flottaison soit toujours chargé en premier. Pour cela, il existe une technique appelée « lazy-loading », qui consiste à charger le contenu sous la ligne de flottaison de manière dynamique lorsque l'utilisateur fait défiler la page.

Éviter les redirections

Pour diverses raisons, certains sites web créent des redirections sur les pages chargées. Par exemple, les redirections 301 sont couramment utilisées sur les sites web qui sont renommés ou rebaptisés. Il convient d'éviter cette pratique dans la mesure du possible, car les redirections consomment un temps de chargement précieux.

Résumé

La navigation mobile devenant de plus en plus courante, il est de plus en plus important de pouvoir disposer d'un site performant sur les appareils mobiles. Les sites rapides sur les appareils mobiles bénéficient d'un meilleur taux de fidélisation et de conversion, et sont mieux référencés. Les administrateurs de sites web doivent adopter une partie ou la totalité des stratégies décrites ci-dessus pour bénéficier de ces avantages.