Réduisez votre temps de chargement pour améliorer l’UX

Le succès d’un site et d’une expérience réussie dépend de nombreux facteurs tels que du contenu de qualité, un design plaisant, la facilité de navigation, etc… mais n’oubliez pas que la vitesse de chargement est aussi un élément essentiel.

Il y a énormément de choses à dire sur l’optimisation du chargement d’une page et je vais tacher de rester succinct mais il me semble indispensable de commencer par quelques chiffres qui en disent long sur l’impact du temps de chargement sur l’utilisateur.

L’impact du chargement sur l’expérience utilisateur

L’utilisateur est un pokémon impatient et hargneux, il n’aime pas attendre et s’attend à trouver son information ou son expérience immédiatement. En 1999 – à une époque où vos doigts de bébé étaient peut-être encore trop boudinets pour tenir un clavier – le temps de chargement idéal d’une page web était estimé à 8 secondes. Huit longues secondes.

Aujourd’hui, 1 utilisateur sur 2 s’attend à ce qu’une page charge en 2 secondes ou moins. Toujours d’après des études, si le temps de chargement excède 2s, vous perdez 40% d’utilisateurs.

Besoin de plus de chiffres ? Je continue… Amazon avait fait des tests il y a quelque temps et avait déclaré que 100 ms de chargement supplémentaire réduisait son chiffre d’affaires d’1%. De plus, une étude a montré que 79% des gens mécontents du temps du chargement d’un site ont moins de chances d’acheter à nouveau sur ce même site.

Même Google a réalisé des tests en ralentissant son affichage de 100ms à 400ms et a constaté un impact mesurable sur le nombre de recherches par utilisateur sur son site. Et pourtant on parle bien de 400ms de temps de chargement total.

J’espère que vous êtes maintenant convaincu de l’intérêt de la vitesse de chargement face à l’impatience d’un utilisateur toujours plus exigeant.

La vitesse sur mobiles compte aussi

Pas besoin de le rappeler, les mobiles révolutionnent la façon dont on accède au web et à l’information.

85% des utilisateurs s’attendent à ce qu’une page s’affiche aussi vite ou même plus encore sur mobile que sur desktop.

Finie l’indulgence due à la nouveauté et au mauvais réseau. La conclusion est simple : ne délaissez pas les performances sur mobile et au contraire, apportez-y un soin particulier. Les visiteurs s’attendent à des expériences fluides et rapides, faute de quoi ils quitteront votre site pour un concurrent qui charge plus vite.

Un autre aspect important : le SEO

Ce n’est maintenant plus nouveau (depuis avril 2010), Google prend en compte la vitesse de chargement des pages dans son algorithme de résultats de recherche. Plus votre site est rapide, plus vous gagnerez des places et au contraire votre mule vous vaudra quelques pertes de visites.

Je ne rentrerai pas dans les aspects techniques puisqu’il vaut de toute manière mieux s’attacher à la philosophie de Google plutôt qu’à essayer de comprendre ses algorithmes. Et celle-ci est simple, c’est la même que la notre : délivrer l’UX la plus satisfaisante possible.

Une dernière note concernant les mobiles : Google a sorti une version alternative de son moteur de recherches pour les pages mobiles et ainsi s’assure que les pages recevant le plus de trafic de son moteur ne sont pas les plus lentes à charger. A bon entendeur. 😉

Comment optimiser la vitesse de vos pages

Comme il ne s’agit pas d’un article orienté développement front-end mais UX avant tout, je ne vais pas rentrer dans les détails ou lister tous les outils disponibles, cependant je vous laisse quelques liens en fin d’article pour approfondir le sujet si nécessaire.

Déterminer votre vitesse et quels sont les causes de ralentissement

La liste d’outils se concentrant sur la vitesse de chargement et son optimisation est très longue, j’en avais d’ailleurs déjà parlé dans un précédent article listant 10 des meilleurs outils pour l’UX.

Google PageSpeed, GT Metrix et YSlow par Yahoo et WebPageTest devraient faire votre bonheur. Ces services analysent les pages web, présentent des résultats détaillés et offrent des suggestions pour les optimiser et réduire le temps de chargement. Ils sont vraiment très puissants et rien ne leur échappe (requêtes, timing, taille des fichiers, etc…) et peuvent même tester vos pages depuis différents lieux ou navigateurs.

Optimisez votre code HTML/CSS

Nettoyez votre HTML et le reste devrait suivre !

• Codez vos pages de façon sémantique en utilisant les bonnes balises (« nav », « article », « header », « footer », etc…) et sans multiplier les ID ou autres éléments inutiles
• Evitez le syndrome de la « div »-ite : ne multipliez pas les balises « div » lorsque ce n’est pas nécessaire. Vous gagnerez du poids en HTML mais également en CSS en réduisant le nombre d’éléments superflus
• Gardez un CSS propre et évitez les sélecteurs multiples inutiles. Vous pouvez considérablement réduire la taille de votre CSS si vous optimisez votre code.

Diminuez le nombre de requêtes serveur

Chaque requête fait un aller-retour entre votre navigateur et un fichier distant ou un enregistrement DNS. Tachez de réduire le nombre de requêtes et de réduire la charge CPU nécessaire pour les exécuter. Plus elles seront peu nombreuses et vite exécutées, plus vite le navigateur aura les infos à afficher.

Réduisez au mieux le nombre de requêtes pour charger des fichiers : mieux vaut charger un gros fichiers Javascript que 5 petits différents. Idem pour les images, fichiers HTML, SVG ou autre…

Suivez cette même logique pour vos requêtes Javascript : optimisez-les et ne chargez que les scripts nécessaires à la page qui est chargée. Ne chargez pas un millier de scripts sur toutes vos pages alors que certaines pages n’en nécessitent que quelques-uns.

Compresser les images, CSS et scripts

Dans la même optique que lorsque vous réduisez le nombre de requêtes pour les fichiers, réduisez aussi leur poids ! De nombreux outils existent pour compresser vos images, feuilles de style CSS ou encore vos scirpts JS.

Pensez aussi à éviter d’utiliser des images lorsque vous pouvez utiliser du CSS à la place. Cela est d’autant plus valable depuis l’arrivée du CSS3 qui ajoutent de nombreuses options graphiques comme les dégradés, ombres portés, coins arrondis, etc… qui nécessitaient autre fois des images.

Utiliser des sprites

La technique du sprite CSS est vieille comme le monde : elle consiste à compiler plusieurs images en un seul fichier image. Ce sont ensuite les propriétés CSS qui s’occuperont de faire s’afficher la bonne portion de cette image au bon endroit. Résultat : vous diminuez le nombre de requêtes et chargez un seul fichier.

Si vous êtes fainéants, il y a même des générateurs de sprites CSS qui feront tout pour vous : créer votre sprite et même le code associé. La vie est pas belle ?

Utiliser un CDN (Content Delivery Network)

Mettre en cache vos pages web peut accélérer drastiquement le chargement. Je ne rentre pas dans les détails techniques, sachez juste que la mise en place d’un CDN vaut le coup. Si vous utilisez WordPress, de nombreux plugins de cache accélèreront le chargement de vos pages pour vous gratuitement (ou non) et sans grande connaissance technique. Bien sûr, pour une optimisation aux petits oignons, vous aurez besoin d’un technicien.

Prenez un serveur dédié

De nombreux hébergeurs de qualité existent et proposent ce service sur leur site. Basiquement, cela signifie que votre site possède son propre serveur à lui seul et que vous ne le partagez avec aucun autre site (et vous ne partagez donc pas non plus les performances du serveur).

Comparé à un hébergement mutualisé, il est sûr que le coût est plus important mais si sur le long terme une meilleure conversion rattrape le coût du serveur, n’est-ce pas une bonne stratégie ? 😉

La liste est encore longue…

Lister toutes les techniques d’optimisation de poids et toutes les causes possibles de ralentissement reviendrait à écrire suffisamment de texte pour gommer une forêt de la carte si on les imprimait. Je vous renvoie vers les articles plus bas et avant tout vers les outils d’optimisation listés plus haut (Google Speed, GT Metrix, etc). Ces derniers listent justement des dizaines de choses à passer en revue pour accélérer son site et vous expliquent quoi faire.

Pour conclure

J’espère que vous ne prendrez plus jamais à la légère le temps de chargement de votre site si vous ne souhaitez pas perdre des visiteurs ou de la conversion. Je m’écris d’ailleurs ce message à moi-même qui ait encore du boulot à faire de ce côté-là ! 😛 Un jour, un jour…

Ne mettez plus l’optimisation du chargement de vos pages en dernier sur votre liste si vous ne voulez pas passer à côté d’une UX réussie et en tirer bénéfice. Et n’oubliez pas : chaque kilobyte compte !

Je vous invite à lister en commentaires vos outils préférés !

Pour aller plus loin :

Improving UX Through Front-End Performance

Need for Speed – Fast Loading the Key to a Satisfying UX

Auteur: Gaétan Weltzer, comme toujours en fait.