.

 

 

 

“Pourquoi mon site est lent sur mobile ?”
Vous avez déjà sûrement remarqué la différence de vitesse entre les pages d’un même site web sur mobile et sur desktop. HTTP Archive, qui observe l’état du web, indique qu’une page met 6,6s à se charger sur desktop et… 19,7s sur mobile (médianes). Pourtant, en situation de mobilité, les internautes sont encore plus impatients.

Eh oui, personne n’aime attendre, et encore moins avec un smartphone à la main. Une étude montre que 85 % des mobinautes exigent d’un site web qu’il se charge plus vite sur mobile que sur desktop, et une autre étude révèle que 14 % des acheteurs en ligne s’attendent même à ce que les pages se chargent instantanément. Rien que ça !

Si la frustration causée par de mauvais temps de chargement est trop importante, les mobinautes sont sans pitié : selon une étude menée par Google, 53 % quittent le site web au bout de 3 secondes si la page n’est pas affichée, et il y a peu de chances qu’ils y reviennent. La lenteur de vos pages web est donc un risque pour votre chiffre d’affaires, puisque comme le souligne Google 1 seconde de temps de chargement en plus peut faire baisser le taux de conversion de 20 %.

Quand on sait que le trafic web mondial provient pour plus de la moitié du mobile, et que 4/10 internautes français utilisent exclusivement leur mobile pour surfer sur le web, avoir un site mobile rapide doit être une priorité.

Bien que la performance d’un site web soit plus difficile à améliorer sur mobile en raison de la puissance des processeurs et des conditions de réseau plus aléatoires, des techniques d’optimisation sont à portée de main pour optimiser votre vitesse et votre UX. Voyons lesquelles.

Dimensions et formats : adapter les images pour mobile

Optimiser et redimensionner automatiquement les images pour mobile

Les images représentent en moyenne 50 % du poids des pages web, lesquelles pèsent en moyenne 2 Mo. En optimisant vos images, il va sans dire que le poids de page sera forcément réduit, et la vitesse de votre site améliorée.

En compressant les images pour un affichage mobile plus rapide, vous pouvez réduire leur poids jusqu'à 70 % sans perdre en qualité visuelle.
Comme pour la version desktop de votre site, pensez aussi au lazyloading, à l’inlining des petites images et au Progressive JPEG pour gagner encore de précieuses millisecondes sur vos temps de chargement.

Progressive JPG - technique d'optimisation de la vitesse des pages web sur mobile

Chargement d’une image en Progressive JPEG

Vous vous demandez peut-être quel est le format d’image le plus efficace pour un bon score PageSpeed? Le format WebP offre de très bonnes performances.
Sans perte, il est 26 % moins lourd que PNG, et avec perte il est 25 à 34 % moins lourd que JPEG pour la même qualité perçue. Mais attention, il n’est pas adapté dans toutes les situations (notamment si vos images contiennent du texte ou si vous souhaitez appliquer des techniques de chargement progressif). 

Autre format dont vous avez peut-être déjà entendu parler : AVIF qui propose des performances toujours plus intéressantes :

Performance des images au format AVIF

Sachez toutefois que plus une image est compressée, plus un appareil aura besoin de puissance pour la décompresser. C’est un paramètre à prendre en compte pour définir comment servir les images au navigateur en fonction de l’équipement mobinautes.

Pour une meilleure expérience utilisateur, pensez aussi à redimensionner automatiquement vos images pour qu’elles s’adaptent à la taille de l’écran de vos visiteurs. Qu’il s’agisse de redimensionnement ou de recadrage pour s’adapter à la taille du viewport, vous avez intérêt à faire en sorte que cette opération soit réalisée côté serveur ou côté CDN pour éviter au navigateur de consommer de la CPU pour le faire.

Adaptive design : bien gérer les templates

Adaptive design - adaptation des images à la taille de l'écran sur mobile

Si la vitesse est l’exigence UX n°1 des mobinautes, l’adaptation des pages à l’écran fait aussi partie des critères d’évaluation de la qualité d’un site web.
Voici ce à quoi vous devez penser pour un site conçu en adaptive design (à ne pas confondre avec le responsive design) :

  • la gestion des différents templates de pages selon les tailles d’écran, pour faire en sorte que votre serveur envoie les éléments dans les bonnes dimensions au navigateur (en adaptive design, le choix de template se fait au niveau du serveur grâce à l’en-tête HTTP User-Agent). Vous pouvez par exemple décider d’afficher une image plutôt qu’une vidéo ou qu’un widget sur mobile si le réseau est peu puissant (notre moteur facilite la gestion de ces différents templates) ;
  • la gestion du cache (que nous verrons un peu plus loin), pour que votre serveur envoie également la bonne version de la page mise en cache en fonction de la taille de l’écran.

Minifier les fichiers JS / CSS / HTML

En quoi consiste la minification ? Cette technique est bénéfique sur mobile comme sur desktop : il s’agit de supprimer tous les caractères et espaces inutiles dans le code HTML, JavaScript ou CSS d’une page web. Le code est ainsi plus léger et par conséquent, les pages aussi. 

Concaténer les fichiers JS et CSS

Après la minification, voici une autre bonne pratique pour réduire le poids des pages : la concaténation des fichiers CSS et JavaScript. Elle permet de réduire le nombre de requêtes totales, et moins il y a de requêtes plus une page peut être servie rapidement par le navigateur. En effet, si le navigateur passe moins de temps à demander des informations au serveur et à attendre de les récupérer, il peut afficher la page plus vite.

Compresser les ressources HTML, CSS et JS

Pour qu’elles soient toujours plus légères, compressez vos ressources HTML, CSS et JS. Plusieurs formats et niveaux de compression existent, vous allez devoir opter pour la formule la mieux adaptée à vos besoins et à votre configuration, nous allons voir pourquoi.

Le format de compression Gzip offre de très bonnes performances, mais le nec plus ultra est à présent Brotli. Chez l’un de nos clients, ce format a par exemple permis de réduire le poids des fichiers CSS de 12 % par rapport à Gzip, et LinkedIn a même constaté une amélioration de 30 % grâce à ce format de compression.

Gzip propose 6 niveaux de compression, et Brotli en propose 11. Mais faut-il se diriger vers le niveau le plus élevé du format le plus performant ? Pas forcément. En effet, si le niveau de compression maximum de Brotli permet d’alléger au maximum les ressources, il demande aussi plus de temps de compression. Selon les ressources et votre contexte, il y a donc un équilibre à trouver.

Par ailleurs, Brotli n’est pas supporté par tous les navigateurs mobiles, et ce format implique de mettre à jour votre serveur, le reconfigurer, et globalement revoir le processus de génération des ressources. Sachez aussi que Brotli est supporté uniquement en HTTPS (si vous n’avez pas encore migré, voici un guide détaillé).

Support de Brotli selon les navigateurs

Etat des lieux du support de Brotli par les différents navigateurs web

Vous l’aurez compris, la compression des ressources est indispensable, mais elle demande aussi une expertise technique pour aller dans la bonne direction et ne pas être contre-productive. 

Les risques de JavaScript pour les modèles d’entrée de gamme

“L’excès de JavaScript dégrade fortement l’expérience de navigation sur un site mobile, et je constate que personne ne pense à vérifier les performances sur tous les devices - encore moins ceux d’entrée de gamme. Pourtant ce sont les premiers à être bloqués si les JS ne sont pas optimisés”, déplore Jean-Pierre Vincent, expert webperf.

S’ils sont utiles et parfois indispensables au fonctionnement d’un site, les JS peuvent multiplier par 2 ou 3 le temps d’accès à certaines fonctionnalités sur un site web.
Pensez à vos utilisateurs qui ne sont pas équipés de portables puissants et dernier cri (souvent la majorité) : allégez vos bundles JS, divisez les fichiers pour qu’ils se chargent plus rapidement, différez l’exécution des scripts.

Si les Third Parties sont une douleur, nous avons dédié une étude à ce sujet dans un livre blanc que vous pouvez télécharger ici.

Gérer sa stratégie cache et adopter un système de Smart Cache

Pour limiter le nombre de requêtes entre un navigateur et un serveur, il est aussi nécessaire de mettre un maximum de ressources en cache. Ces données sont ainsi conservées sur le cache du serveur, du navigateur, ou d’un CDN, pour être servies plus rapidement à l’utilisateur au lieu d’être demandées systématiquement au serveur d’origine.

Mais sur une page web, toutes les données ne peuvent pas être mises en cache, ou ne peuvent pas l’être de la même façon. Par exemple, des éléments dynamiques qui dépendent du contexte de navigation, ou un panier d’achat ne peuvent pas être mises en cache au même titre que des éléments statiques de la page, car ils sont susceptibles de changer cours de navigation ou d’une navigation à l’autre.

Vous devez alors mettre en place une stratégie de cache et vous appuyer sur un système de cache intelligent, ce qui vous permettra de faire la distinction entre les éléments qui peuvent être cachés et ceux qui ne doivent pas l’être.

Comment appliquer efficacement les optimisations webperf pour un site mobile 

Les bonnes pratiques et les techniques d'optimisation webperf doivent être appliquées intelligemment pour fonctionner correctement les unes par rapport aux autres, et elles évoluent vite.

Vous avez peut-être déjà monitoré la vitesse de votre site mobile grâce à des outils tels que PageSpeed Insights ou Test My Site de Google, mais attention, ne vous lancez pas dans l’application des recommandations sans l’avis d’un expert !
En effet, si ces outils permettent de faire un état des lieux et d’obtenir des données intéressantes sur la vitesse de chargement, toutes les optimisations recommandées ne sont pas applicables, ou n'entraînent pas exactement les améliorations promises.

Vous pouvez optimiser le code de votre site pour accélérer vos pages, mais pour vous faciliter la tâche et vous assurer des résultats durables avec un minimum d’efforts, mieux vaut automatiser l’applications de ces optimisations webperf. Toutes les techniques évoquées ci-dessus peuvent l’être grâce à notre moteur de Frontend Optimization.
C’est par exemple le choix qu’a fait le site e-commerce But pour faire gagner du temps à ses équipes techniques, et cesser de reprendre continuellement le même travail à chaque évolution ou modification sur le site.

Sachez aussi que les optimisations appliquées au mobile seront forcément bénéfiques à la version desktop, et d’autre part, elles vous permettront d’être toujours prêt pour absorber les pics de charge en cas de promotions, soldes, ventes privées… pour un site rapide, fiable et disponible en toutes circonstances. 

Outre vos utilisateurs, vous devez aussi rendre votre site rapide pour votre SEO, puisqu’à partir de septembre 2020, Google privilégie l’indexation Mobile First. C’est à dire que les pages seront d’abord crawlées par le moteur de recherche comme s’il était un mobile.

Alors, pour vos utilisateurs, votre référencement et vos taux de conversion, même si cela demande plus d’efforts, vous avez tout à gagner à améliorer votre Site speed sur mobile !

UX, SEO et CA : les bénéfices d’un site mobile rapide

Pour résumer, outre la satisfaction de vos visiteurs grâce à une meilleure UX, des pages rapides sur mobile vous assurent :

  • une meilleure visibilité dans les résultats de recherche - Alltricks a par exemple augmenté son trafic SEO de 25 % en améliorant sa vitesse de chargement ;
  • une baisse du taux de rebond - Villages Clubs du Soleil a enregistré -20 % de taux de rebond suite à l’amélioration de sa webperf ;
  • de meilleurs taux de conversion - IKKS a vu ses taux de transformation mobiles augmenter de 20 % auprès de ses nouveaux clients après avoir accéléré son site e-commerce.

 

Vous souhaitez en savoir plus sur les indicateurs webperf à suivre
et comment les améliorer ?

Télécharger le livre blanc