Comment tester la vitesse de votre site et 10 techniques pour l’améliorer



S’il y a un endroit au monde où il vaut mieux faire une bonne première impression, c’est votre site internet. On parle bien sûr de votre design et de votre contenu, mais pas seulement. La vitesse de vos pages est l’un des facteurs déterminants de votre succès en ligne.


Un site lent peut ruiner votre réputation. Si en plus on recense le nombre de conversions perdues, cela peut aussi vous coûter cher. À l’inverse, un site performant aura un effet positif sur tous les aspects de votre business. Il attirera plus de visiteurs, ce qui veut dire plus de clients potentiels et donc, plus de ventes.


La première étape pour vous assurer d’avoir un temps de chargement rapide est d’utiliser un constructeur de site efficace pourvu de la meilleure technologie. Mais votre travail ne s’arrête pas là. Votre contenu y est aussi pour beaucoup. Quels fichiers média ajouter ? Où les placer ? Comment optimiser les images ? Qu’en est-il des applications externes ? Il y a beaucoup d’éléments à prendre en compte.


Heureusement, vous venez de frapper à la bonne porte. Vous trouverez dans cet article comment tester la vitesse de votre site et 10 techniques pour l’améliorer.



Qu’est-ce que la vitesse d’un site et pourquoi est-ce si important ?


On appelle la vitesse d’un site le temps que prennent une ou plusieurs pages web pour se charger, s’afficher sur le navigateur et réagir aux interactions après qu’un internaute ait cliqué sur un lien.


À ne pas confondre avec la façon dont les visiteurs jaugent la performance de votre site en fonction de ce qu’ils voient en premier sur leur écran (en sachant que ce ne sont pas forcément les éléments qui chargent le plus vite). Ce sont deux notions différentes et très importantes sur lesquelles vous devez travailler simultanément.


Qu’est-ce qui est considéré comme étant une bonne vitesse de chargement ? Cela dépend de l’industrie dans laquelle vous travaillez, mais il est fortement recommandé de ne pas dépasser les 3 secondes.


Pourquoi est-ce si important ? Parce que la vitesse d’un site affecte l’expérience utilisateur, l’engagement des visiteurs, la conversion et la position sur les moteurs de recherche.


L’impact sur l’expérience utilisateur : cela peut sembler évident, mais laissez nous vous le répéter : plus votre site charge vite, plus vos visiteurs pourront utiliser ses fonctionnalités, voir votre contenu, contacter votre service client ou simplement comprendre de quoi il s’agit. En permettant une interaction plus rapide, vos visiteurs seront davantage satisfaits et donc plus aptes à retourner sur vos pages. C’est aussi simple que cela.


L’impact sur l’engagement des visiteurs : les visiteurs sont plus enclins à interagir avec un site lorsqu’ils peuvent naviguer rapidement sur celui-ci. Par exemple, si vous avez une boutique en ligne et que chaque étape du processus d’achat prend plus de quelques secondes, il est tout à fait compréhensible que vos clients se lassent et finissent par aller chez la concurrence. Le même principe s’applique pour remplir des formulaires ou pour passer d’une page à une autre. Vous comprenez donc l’impact négatif que cela peut avoir sur le trafic de votre site et sur votre business en général.


L’impact sur la conversion : la conversion est l’objectif principal de la plupart des sites. Aussi insignifiant que cela puisse paraître, un retard de 100 millisecondes sur le chargement d’une page peut faire chuter le taux de conversion de 7 %. Si vos visiteurs ne peuvent pas utiliser vos éléments assez vite, ils quitteront votre page.


L’impact sur le référencement : Google prend en considération la vitesse de chargement d’un site pour le classer dans ses pages de résultats. Ce qui veut dire que vos chances d’être en bonne position pour une recherche de mots-clés spécifiques augmentent à chaque fois que vous gagnez une milliseconde sur le chargement de vos pages.


Maintenant que vous avez saisi les enjeux, il est temps de passer à l’action.



Comment tester la vitesse de votre site ?


Avant d'entamer le chantier, vous voudrez savoir combien de temps votre site met-il pour charger. Si vous avez un site Wix, rien de plus facile. Vous pouvez utiliser notre test de rapidité.





Pour les autres, il existe de nombreuses plateformes en ligne pour mesurer la performance de vos pages. PageSpeed Insight de Google et Pingdom sont les plus connues. Elles vous donnent la vitesse de chargement et vous expliquent aussi à quoi sont dus les ralentissements et comment y remédier.



10 techniques pour améliorer la vitesse de votre site :


  1. Ne surchargez pas la page d’accueil

  2. Optimisez ce qui se trouve au-dessus de la ligne de flottaison

  3. Réduisez le contenu média

  4. Contrôlez la taille de vos images

  5. Équilibrez le ratio texte-images

  6. Utilisez du texte autant que possible

  7. Limitez le nombre de typographies

  8. Avez-vous vraiment besoin d’animations ?

  9. Concentrez-vous sur la performance mobile

  10. Diminuez les applications externes



01. Ne surchargez pas la page d’accueil


Si vous ne devez retenir qu’une chose de cet article, autant que ce soit celle-ci : votre page d’accueil doit être claire et pas trop chargée.


Ajouter beaucoup de contenu (texte, images, vidéos et animations) peut jouer contre vous. Non seulement cela mettra du temps à s’afficher, mais en plus, vos visiteurs risquent de se perdre et de ne pas voir les éléments essentiels.


À l’inverse, une page d’accueil organisée avec un minimum d’informations permet aux internautes de comprendre le message instantanément et de le retenir plus facilement.


Pour ne pas négliger de contenu, dispersez-le simplement sur différentes pages. Ainsi, chaque information aura sa propre place. Ajoutez un bouton « En savoir plus » ou « Rendez-vous sur mon blog » pour faciliter la navigation et vous assurer que les visiteurs ne manquent rien.



02. Optimisez ce qui se trouve au-dessus de la ligne de flottaison


La ligne de flottaison est l’endroit à partir duquel les visiteurs doivent faire défiler la page. Tout ce qui se trouve au-dessus est visible dès le chargement de votre site. C’est la partie la plus importante car c’est ce que les internautes voient en premier.


Vous devez utiliser cette section de façon stratégique pour capter l’attention en attendant que le reste de votre page se charge. Pour cela, utilisez des images attrayantes et un texte accrocheur. La pratique la plus courante est d’insérer à cet endroit votre titre et sous-titre (nom de votre entreprise et votre slogan), votre logo et un bouton d’appel à l’action.


Ce qu’il faut, c’est donner toutes les informations importantes en vous assurant de garder votre page nette. Si vous avez des doutes sur ce qu’il faut inclure ou pas, suivez cette règle : si cet élément participe à votre objectif principal, gardez-le. Par contre, s’il détourne l’attention de vos visiteurs, placez-le après la ligne de flottaison. Exception faite des animations. Dans tous les cas, il vaut mieux qu’elles se trouvent plus bas sur votre page pour ne pas altérer votre message (nous détaillons ce point un peu plus bas). Utilisez des images, du texte ou un logo pour vos effets visuels.




03. Réduisez le contenu média


Et si vous faisiez un petit ménage de printemps ? En dehors de votre page d’accueil, ce sont toutes les parties de votre site qui doivent être limitées en contenu. Préférez toujours la qualité à la quantité.


Tout comme un magasin n’expose pas l’ensemble de son inventaire en vitrine, évitez d’afficher trop d’éléments. Votre site est votre devanture et tout ce que vous ajoutez a un impact sur sa performance.


Pour être plus précis, nous parlons des médias qui consomment beaucoup de bande passante et ralentissent le chargement global. Les longues galeries de photos en font partie. Quelle que soit la taille des images, elles ont une influence sur la rapidité de votre site. Voilà pourquoi vous devez réduire leur nombre et ne sélectionner que les meilleures – à fortiori si elles sont destinées à votre page d’accueil.


L’intégration d’un contenu externe (une vidéo YouTube ou Facebook par exemple) fait également débat. Parce que le code source ne provient pas de votre hébergeur de site (comme Wix.com), ce dernier n’a pas de contrôle sur son optimisation et son chargement. Cela ne veut pas dire que vous devez le bannir, mais seulement le limiter. Un ou deux contenu externe sur l’ensemble de votre site est suffisant. Vous pouvez également opter pour une vidéo d’arrière-plan ou une boîte vidéo. Ces deux éléments provenant directement de votre site sont plus faciles à gérer.



04. Contrôlez la taille de vos images


Pour faire simple, cela revient à utiliser un format JPEG plutôt que PNG lorsque c’est possible. Si vous n’êtes pas sûr de faire la distinction, consultez notre guide sur les différents formats de fichiers.


Pourquoi ? Car les fichiers JPEG sont plus légers et se chargent plus rapidement que leurs homologues tout en gardant une bonne qualité. Donc, à moins que vous ne soyez un photographe professionnel, cela sera largement suffisant pour une utilisation sur le Web. Pour convertir vos visuels, utilisez des outils comme TinyJPG, Compressor.io ou ImageOptimizer.


Les sites hébergés par Wix.com ont la chance d’avoir des visuels automatiquement convertis en WebP. C’est un format relativement récent, créé par Google, qui permet une meilleure compression. Wix l’utilise sur tous les navigateurs qui supportent ce type de fichiers. En plus de cela, nous optimisons la taille de chaque image que vous rognez dans votre Éditeur pour l’adapter à vos pages web.


S’il y a une chose sur laquelle nous ne transigeons jamais, c’est la qualité. Nous considérons la façon dont vos images apparaissent comme une priorité absolue et aucune de nos actions ne va à l’encontre de ce principe. Bien au contraire, nous avons même mis en place un système spécial : l’affichage paresseux. Lorsque votre site charge, les images s’affichent d’abord avec une faible résolution. C’est une étape de transition en attendant le chargement complet de la page en HD. Ainsi, vos visiteurs ne tombent jamais sur une page blanche et ne sont pas tentés de vous quitter prématurément.



05. Équilibrez le ratio texte-images


Avoir des textes et des images à la fois, c’est un peu comme posséder deux animaux domestiques dans une même maison. Parfois ils s’adorent et souvent ils se déchirent. Pour éviter que votre contenu s’entrechoque, vous devez délimiter des territoires. Donnez à vos éléments la place qu’ils méritent pour leur permettre de cohabiter en harmonie.


Prenons un exemple : si vous avez un fond d’écran blanc, une image colorée sur laquelle vous ajoutez un texte blanc, votre texte se chargera plus vite que votre image et il apparaîtra en blanc sur fond blanc, donc invisible.


De là, nous pouvons tirer deux leçons. La première est de jouer sur les contrastes pour donner plus de visibilité à vos éléments. La deuxième est d’éviter de placer des textes sur des images. La seule exception à cela est votre logo. Pour le reste, écrivez votre texte dans un encart que vous placerez simplement au-dessus de votre image afin d’éviter toute confusion et problème de chargement.



06. Utilisez du texte autant que possible


Comme mentionné auparavant, le texte se charge plus vite que les visuels et les animations. Mais ce n’est pas la seule raison pour préférer les mots aux jolies images. Un titre qui apparaît instantanément et en gros sur votre page attire immédiatement l’attention des internautes sur un message clair et précis. N’était-ce pas ce que vous cherchiez, après tout ?


Un autre argument est votre référencement (ou SEO). Sans trop entrer dans les détails techniques, il y a une chose que vous devez garder en tête : un texte détaillé et bien écrit va aider Google à comprendre votre site et lui permettre de mieux vous classer dans les pages de résultats. Quant aux médias, ils ont un rôle plus indirect : ils vont garder vos visiteurs en alerte et leur permettre de rester plus longtemps sur vos pages. Pour conclure, s’il ne fallait garder qu’un type de contenu pour augmenter votre trafic, nous opterions pour le texte.



07. Limitez le nombre de typographies


D’après nos amis (et collègues) designers, avoir plus de 3 polices de caractères sur votre site est un fashion faux-pas. Selon nous, c’est surtout une mauvaise idée pour la vitesse de votre site. Limiter le nombre de typographies vous permet tout d’abord de garder une image professionnelle et nette auprès de vos clients. Enfin, cela aide vos pages à charger plus vite.


De plus, si vous voulez utiliser des polices personnalisées, sachez qu’elles sont considérées comme des éléments graphiques (au même titre que les photos et vidéos) et donc, qu’elles ralentissent la performance de votre site.


Pour finir, ayez la main légère sur les caractères gras, italiques ou soulignés. Ils demandent aussi plus de travail et, vous l’aurez deviné, diminuent votre vitesse de chargement. Encore une fois, cela ne veut pas dire que vous devez tirer un trait dessus, mais seulement les utiliser avec parcimonie et dans un but bien défini. Voilà tout !



08. Avez-vous vraiment besoin d’animations ?


Elles sont attrayantes, voire addictives et nous laissent toujours sur notre faim. Il ne s’agit pas des mousses au chocolat, mais des animations. Dans cette catégorie aussi, la modération est votre meilleure amie. Bien que nous les adorons, ce sont des fichiers très lourds.


Nous pensons particulièrement aux GIFs. Ils chargent plus lentement qu’avance une tortue en temps de canicule. Les plus petits mettront des plombent à s’afficher et les plus gros ralentiront l’ensemble de votre page.


Toutefois, si animations il y a, placez-les toujours en dessous de la ligne de flottaison. L’idée est de ne pas accaparer l’attention des visiteurs dès leur arrivée et de laisser de la place à votre message principal, qui lui, se chargera plus rapidement que le reste.


L’astuce est d’utiliser des outils comme GIF to MP4 pour convertir vos animations en fichiers vidéo. Vous obtiendrez le même effet visuel, mais avec un délai bien plus court. En effet, la lecture d’une vidéo se lance dès le début du chargement, alors qu’un GIF doit être complètement downloadé pour se jouer – d’où l’impact négatif sur la performance globale de votre site.



09. Concentrez-vous sur la performance mobile


Le nombre de personnes naviguant sur leur smartphone augmente chaque jour. Tout naturellement, elles s’attendent à ce que votre site ait l’air tout aussi élégant que sa version sur ordinateur. Wix crée automatiquement une version mobile de votre site pour que vous n’ayez pas à tout reprendre de zéro. Mais ceci est loin d’être suffisant.

Ce n’est en réalité que la première étape. L’écran étant largement plus petit, vous devez optimiser l’espace en ajustant votre contenu. Par exemple, la section au-dessus de la ligne de flottaison doit contenir moins d’informations sur mobile. Elle doit comprendre le nom de votre entreprise, votre logo et votre CTA. Pour le reste, triez les éléments sur le volet.


En plus de cela, supprimez ou cachez ce qui est susceptible d’affecter votre performance. Cela peut provenir de tout ce qui a été mentionné plus haut : vidéos, photos, animations, typographies, etc. À la place, utilisez des fonctionnalités comme un écran de bienvenue. Il affiche une photo ou votre logo pendant que votre site charge tranquillement. Vous pouvez aussi ajouter une barre d’action rapide pour rendre vos informations de contact disponibles en un clic.





10. Diminuez les applications externes


Les applications externes sont des fonctionnalités que vous pouvez ajouter à votre site et qui ne sont pas créées par votre hébergeur. On compte par exemple le flux Instagram, le widget de notation et une carte pour afficher votre localisation – il en existe des centaines sur la Wix App Market et beaucoup sont gratuites.


Les applications externes utilisent ce que l’on appelle les iFrames. Ce sont en quelque sorte des navigateurs web à l’intérieur de votre site. Cela revient à charger un site (qui de plus n’est pas directement pris en charge par votre hébergeur) à l’intérieur d’un autre. Conclusion : un temps de chargement considérablement plus élevé.


Il va sans dire que les applications externes fournissent des fonctionnalités très utiles. Ne les supprimez pas mais placez-les intelligemment. Commencez par comprendre lesquelles ralentissent réellement votre site. Pour cela, testez la vitesse de chargement avec et sans (et oui, vous devez le faire pour chacune d’entre elles). Une fois que vous avez repéré le vilain petit canard, demandez-vous si vous en avez vraiment besoin. Si la réponse est oui, placez-le sur une page indépendante ou avec peu de médias – vous n’avez peut-être pas besoin d’une galerie de photos et d’un flux Instagram au même endroit. Si la réponse est non, vous savez ce qu’il vous reste à faire. ;)



Prêt à avoir un site ultra rapide ? Créez le vôtre avec Wix !

FR03.png