Psychologie et performance WEB

La vitesse de chargement des pages web de votre site WordPress a un impact considérable sur les objectifs que vous vous fixez en terme de trafic, d’expérience utilisateur et de chiffre d’affaire. Voici quelques exemples :

Google a calculé que de passer de 10 résultats affichés par page dans son moteur de recherche pour un temps de chargement de 0.4 seconde à 30 résultats par page pour un temps de chargement en 0.9 seconde réduit son trafic et ses revenus publicitaires de 20% (Linden 2006).

Lorsque le poids de la page d’accueil de Google Maps a été réduit de 100KB à ~70-80KB, le trafic a augmenté de 10% dans la première semaine, et de 25% de plus les 3 semaines suivantes (Farber 2006).

Un test effectué par Amazon a révélé des résultats similaires : à chaque 100 millisecondes de temps de chargements supplémentaires sur ses pages web, les ventes baissent de 1% (Kohavi and Longbotham 2007). (Source)

Début 2010, Google annonce la prise en compte de facteurs de vitesse pour classer les sites dans les résultats de recherche, en précisant néanmoins que la pertinence de la page par rapport à la requête reste le facteur maître. (Source)

Le message est assez clair, tout le monde déteste les sites lents. Voyons maitenant comment rendre le votre plus rapide.

Pourquoi la vitesse est-elle aussi importante?

Optimiser la vitesse de chargement de votre site est très important, non seulement pour votre visiteur, mais également pour les moteurs de recherches tels que Google.

Optimiser votre site:

  • Réduis le taux de rebond « Bounce Rate ».
  • Augmente le temps passé sur votre site.
  • Augmente le nombre de pages vues.
  • Améliore votre position dans les moteurs de recherche.

Concernant l’amélioration de votre position, les moteurs de recherche mesurent la vitesse de votre site web dans leur algorithme. Quand ils recommandent un site, ils veulent s’assurer que les utilisateurs trouveront ce qu’ils cherchent rapidement.

Outils pour tester la vitesse de chargement

WebPageTest: Probablement le service le plus complet disponible sur le marché. Souvent boudé par les débutants parce qu’il est plus difficile d’approche, il est néanmoins l’outil de prédilection pour tester la performance réelle de votre site. N’hésitez pas à effectuer plusieurs tests à partir de serveurs différents et avec des vitesses de connexions différentes.

Cet outil est également le seul à vous donner l’indice de vitesse de votre site. L’indice de vitesse (speed index) est sans aucun doute la donnée la plus importante en performance Web.

PageSpeed Insights: proviens directement du défunt Google labs. Il vous fournira des conseils techniques classés par priorité d’importance afin d’optimiser les performances de votre site. Je vous recommande donc fortement de régler les problèmes de haute et de moyenne importance tout d’abord.

Attention, ce n’est pas parce que vous obtenez une mauvaise note que votre site est nécessairement lent et l’inverse est également vrai.

Pingdom Tool: Cet outil vous aidera à tester la vitesse de votre site Web, et ce rapidement. Il vous sera possible de choisir la provenance de la requête ainsi que d’enregistrer ou non les résultats pour suivre votre progression pendant vos optimisations.

Le grand ménage

Limiter le nombre d’extensions
En fait, ce n’est pas le nombre, mais la qualité des extensions utilisée qui importe. Par contre, plus vous avez d’extensions activées, plus il devient difficile d’en contrôler la qualité. Il est donc bien de faire l’inventaire de vos extensions régulièrement et de vous assurer qu’elles sont toujours pertinentes.

Si vous en avez l’occasion, remplacez certaines extensions par un code équivalent.

Limiter/Désactiver les révisions WordPress
WordPress offre nativement un contrôle de révision sur les pages et les articles. Ce qui vous permet de revenir en arrière et d’afficher les modifications apportées à votre page. Même si ça peut sembler une bonne chose, au fil du temps cela peut conduire à des problèmes de performance.

Par exemple, disons que vous créez une page et que vous travaillez sur celle-ci à sept reprises. À chacune des fois, vous modifiez un mot ou deux. Bien que le changement dans la base de données soit mineurs, vous auriez maintenant huit copies de votre page originales, la principale et 7 autres révisions. Ce qui peut rapidement dégénérer et ralentir WordPress à long terme.

Nettoyer la base de données
Je pourrais écrire un article complet sur le nettoyage de la base de données WordPress. Ce que je vais sûrement faire un jour d’ailleurs. Vous connaissez déjà les révisions WordPress et vous savez comment les limiter. Mais sachez que vous devez également retirer les révisions déjà présentes dans votre base de données.

Limiter les ressources externes
Ce point est l’un des plus importants pour l’optimisation de votre site. Pourquoi? Simplement parce que les ressources externes peuvent difficilement être optimisées!

Qu’est ce que tu veux dire par ressource externe?
Une ressource externe est simplement un script, une feuille de style, une Font où toutes autres ressourcent qui n’est pas hébergé sur votre serveur. Même Google Analytics est une ressource externe!

Il est difficile de retirer Google Analytics, mais pour ce qui est du reste, c’est tout à fait envisageable.

Google fonts ou autres fournisseurs
Difficile également de retirer la Font de votre site, il est toutefois possible de restreindre le poids et le nombre de requêtes nécessaire.

Par exemple, Google Font vous permet de choisir parmi les styles vraiment utilisés sur votre site.

Widget et outils de partage

Les outils de partages tels que Facebook et Twitter peuvent être les éléments qui ralentissent le plus votre site.

En effet, les outils de partage peuvent nuire des façons suivantes:

  • Téléchargement de ressources externes.
  • Les ressources externes ne peuvent pas être optimisées et elles ajoutent une requête DNS.
  • Ajoute des requêtes HTTP supplémentaires.
  • Augmente le poids de la page.

C’est pourquoi il est conseillé de supprimer ces outils de partage et de les remplacer par de simples boutons.

Publicités et produits affiliés
Comme il n’est pas possible d’optimiser les ressources externes. Les publicités et produits affiliés ne font pas exception. Si votre site affiche de la publicité, assurez-vous de ne pas en abuser et, si possible, utilisez une seule régie publicitaire. Donc, si vous utilisez Google Adsense et Viglink, pourquoi ne pas couper la poire en deux et laisser seulement une des deux?

Les produits affiliés sont bien souvent sous la forme d’images hébergés sur le serveur de la compagnie.

Pourquoi ne pas héberger vous-même les images? Ce qui vous permettrait de les optimiser et de retirer une requête DNS.

Les images

L’optimisation des images est un enjeu crucial pour la performance Web.

En effet, les images représentent souvent la majorité des octets téléchargés sur une page. Par conséquent, l’optimisation des images permet souvent les plus importantes économie en octets et améliorations de performances pour votre site Web : moins le navigateur doit télécharger d’octets, moins il y a de concurrence pour la bande passante du client, et plus vite le navigateur peut télécharger et afficher le contenu utile à l’écran.

Mon objectif n’est pas de vous faire installer plusieurs extensions qui vous donneront l’illusion que vos images sont optimisées. Mais bien de vous aider à comprendre comment optimiser vos images. La performance Web n’est jamais “One size fit all” et vous devez comprendre ce processus afin de l’adapter à votre situation.

Éliminer et remplacer les images
La toute première question que vous devez vous poser est la suivante : cette image est-elle vraiment indispensable? Un bon design doit être simple, et offre également les meilleures performances. Cela étant dit, une image bien placée peut également transmettre plus d’informations qu’un millier de mots. Il vous incombe donc de trouver le bon équilibre.

Ensuite, si vous êtes un développeur, vous devez vous demander s’il existe une autre façon d’intégrer les images dans votre site.

    • Base64 – Cette technique est vieille comme le Web. Elle vous permettra de réduire le nombre de requêtes au serveur et d’être affiché instantanément. Attention de ne pas abuser des Base64 et de l’utiliser sur de petites images. Puisque cela peut affecter le poids de votre page et nuire plus qu’autre chose.
    • SVG inline – Le SVG inline vous apportera les mêmes avantages que l’encodage en base64, sans les désavantages. Attention néanmoins, car les SVG inline ne sont pas supporté sur les versions antérieures à IE9.
    • Sprites – Le CSS Sprite est également une très vieille technique pour optimiser l’affichage de vos images. Lorsque vous développez votre thème WordPress, il est peut-être avantageux de regrouper la plupart de vos petites images en une seul.

Sélectionner le bon type d’image
En effet, le bon type d’image peut faire la différence.

        • JPG – Utilisez les JPG pour les photos, les images en hautes résolutions et celle avec beaucoup de détails.
        • PNG – Utilisez les PNG pour les icônes, les logos, les illustrations et les images avec peu de détail.
        • GIF – Les GIF ne sont pas si mal pour les petites images, mais par expérience ils sont très rarement supérieurs au PNG. Donc, n’utilisez les GIF que lorsque vous voulez une animation 😉

Sélectionner les bonnes dimensions
Attention de ne pas téléverser des images plus grandes que nécessaire dans votre site. Redimensionner manuellement celle-ci ou bien utiliser une extension telle que Imsanity pour redimensionner automatiquement les images à des dimensions acceptables. Imsanity n’optimise en aucun cas les images, elle ne fait que limiter leurs dimensions.

Compression des images
La compression des images est une étape importante. Certes, vous pourriez le faire manuellement dans Photoshop, mais en plus d’être fastidieux vous obtiendrez de meilleurs résultats avec une extension spécialisée.

QUELQUES TÉMOIGNAGES DE NOS CLIENTS

ÉVALUATION DU NIVEAU DE SÉCURITÉ & SOUMISSION EN LIGNE