Comment mesurer les performances d’un site internet ?
Avant de s’attaquer à l’optimisation des performances de votre site internet, nous allons voir ensemble comme les mesurer. Il serait en effet dommage de ne pas voir les bénéfices de telle ou telle optimisation !
Pour cela, rien de plus simple !
Vous trouverez ci-dessus une liste d’outils vous permettant de mesurer les mesures de votre site WordPress.
Pingdom Tools
Pingdom propose l’un des outils de référence pour mesurer la vitesse de chargement d’un site web. Il est gratuit et très simple à utiliser. Il vous suffit de copier-coller l’url de votre site. En plus de vous indiquer la vitesse de chargement, Pingdom vous donnera
- le score global de performance de votre site,
- la taille de la page,
- le nombre de requêtes nécessaires à son affichage complet.
Encore mieux, Pingdom vous donnera un score de performance pour chaque élément impactant la vitesse de chargement. C’est très pratique pour identifier les éléments à améliorer.
Google PageSpeed Insights
Google a développé son propre outil de mesure de la vitesse : PageSpeed Insights. Le fonctionnement est très proche de celui de Pingdom. Vous indiquez votre url et Google vous donne beaucoup d’informations concernant la vitesse de chargement de votre site. Le petit plus de cet outil c’est qu’il permet d’analyser séparément la version mobile et la vitesse desktop du site.
Comme Pingdom, Google PageSpeed vous indique les éléments à améliorer pour optimiser la vitesse de chargement de votre site internet.
WebPageTest
Le service WebPageTest a été développé par un ingénieur de l’équipe en charge du développement de Google Chrome. L’avantage de cet outil, 100% open source précisons-le, est qu’il permet de filtrer les résultats par navigateur et par lieu de test. Si vous voulez mesurer de manière très précise la performance de votre site, WebPageTest est un excellent outil de complément à ceux proposés plus haut.
Les rapports de performance contiennent beaucoup d’informations que l’on ne trouve pas sur ceux proposés par les autres outils. C’est sans doute l’outil le plus complet, mais si vous n’êtes pas développeur vous risquez de vous perdre parmi toutes les données proposées. En un mot, cet outil s’adresse plutôt aux développeurs.
GTmetrix
GTmetrix est l’un des outils les plus connus avec Pingdom. Contrairement à l’outil présenté plus haut, GTmetrix est idéal pour les débutants. GTMetrix utilise les outils PageSpeed Insights et YSlow pour proposer des rapports à la fois complets et simples à comprendre. Les données sont bien hiérarchisées : les principales informations sont réunies tout en haut de la page et les informations deviennent de plus en plus techniques que l’on scrolle la page. Les rapports sont téléchargeables sous format PDDF. GTMetrix, comme tous les autres outils de cette liste d’ailleurs, est 100% gratuit.
Optimisation du cache serveur
Parmi les optimisations à effectuer pour améliorer les performances de votre site internet, un des éléments à mettre en place est le cache serveur. À ne pas confondre avec le cache navigateur !
Lorsqu’une personne accède à une page de votre site internet, votre navigateur va effectuer des demandes auprès du serveur d’hébergement. Le serveur doit donc traiter ces demandes et y répondre.
Par exemple,
- Le navigateur va lui demander « que dois-je afficher pour l’adresse http://www.monsite.fr/«
- Le serveur va alors lui répondre « tu dois afficher tels textes, telles images, telles vidéos…etc etc. «
Et ce traitement peut prendre du temps !
Mettre en place du cache serveur permet donc de garder en mémoire, du côté du serveur, l’ensemble des traitements des pages en mémoire. Tout simplement !
Pour mettre en place le cache serveur sur votre site WordPress, il va falloir passer par une extension.
Deux choix vont s’offrir à nous :
- Une gratuite via l’extension WP Super Cache
- Une payante via l’extension WP Rocket
Ces extensions agissent toutes les deux de la même manière sur le cache serveur. Les différences se situent :
- au niveau de l’interface graphique – celle payante étant beaucoup plus simple à comprendre
- au niveau des options supplémentaires que proposent l’extension payante
A noter également que WP Super Cache est uniquement en anglais contrairement à Wp Rocket qui existe en français.
Optimisation du cache navigateur
Un navigateur comme Google Chrome, Mozilla Firefox ou Internet Explorer est un logiciel que nous utilisons pour accéder aux informations que nous souhaitons consulter en ligne. En d’autres termes, un navigateur cherche, trouve et affiche les sites web et/ou autres informations que nous recherchons au moyen d’URL.
Qu’est-ce que le cache d’un navigateur ?
Le cache est l’équipement ou l’instrument du navigateur qui lui permet de sauvegarder les données (images, langage HTML…) nécessaires à la consultation d’un site web. L’intérêt de ces sauvegardes est de réduire la consommation de bande passante.
Ainsi, lorsque vous consultez une page sur laquelle vous vous êtes déjà rendu, elle se charge plus rapidement grâce à la version cache sauvegardée par votre navigateur. Autrement dit, votre navigateur n’est pas contraint d’envoyer une nouvelle requête pour consulter une page dont il a déjà enregistré une version cache.
Mettre en place du cache navigateur va donc perdre d’afficher votre site plus rapidement. Et pour le mettre en place, il va falloir que votre serveur donne ses directives au navigateur.
La minification et la concaténation des ressources
La minification est la technique d’optimisation qui réduit la taille de vos fichiers. Cette technique s’applique aux fichiers JavaScript, CSS, and HTML.
Lorsqu’un fichier est minifié, tous les espaces non nécessaires, les commentaires, les retours à la ligne ou les caractères superflus sont retirés du code source, réduisant ainsi sa taille.
Si vous y réfléchissez, les espaces et les commentaires sont pratiques pour les développeurs, mais ils ne sont pas utiles pour l’utilisateur final. En vous en débarrassant, vous rendez le fichier certes difficile à lire, mais aussi beaucoup plus léger.
Comme les fichiers minifiés sont plus compacts, le navigateurs peut les servir à l’utilisateur final plus rapidement.
De plus, une fois que le contenu minifié est généré, il peut être utilisé pour un nombre infini de requêtes.
Pour la plupart des sites WordPress, la minification n’est pas la solution ultime pour un site plus rapide car la réduction de la taille des fichiers est en général de quelques kilooctets par site. Néanmoins, cela dépend du thème et des plugins que vous utilisez. Si leur code est riche en fichiers JavaScript et CSS, vous noterez une claire amélioration après la minification.
La minification JavaScript
La minification JavaScript retire tous les commentaires JavaScript (// …) et tous les espaces inutiles du code source.
La minification CSS
La minification CSS retire les espaces inutiles et les commentaires de fichiers CSS (/* … */).
La minification HTML
Les fichiers HTML peuvent aussi être minifiés. La minification retire les commentaires (<!– … –>), les espaces inutiles, les retours à la ligne et le contenu similaire.
Pourquoi la minification aide-t-elle les performances de votre site WordPress ?
D’après des tests de Google, la minification peut réduire le poids de votre page grâce à une économie de compression de 63%.
Il y a de nombreux avantages à l’envoi de contenu minifié aux utilisateurs finaux.
Voici les plus importants :
- Des chargements plus rapides – Vos utilisateurs recevront le même service de la part de votre site web, mais en plus rapide, car chaque requête traite une plus petite quantité de données.
- Une économie d’utilisation de bande-passante – Les réseaux ont moins de données à transmettre.
- Moins de ressources utilisées – Ceci est aussi dû au fait que chaque requête traite moins de données qu’avant la minification.
Optimisation des images sous WordPress
Aujourd’hui 62% du trafic Web mondial est composé d’images ! Et les sites sous WordPress ne font pas exception, ils regorgent d’images à la une, dans le corps, dans les widgets…. Bref, il y en a partout !
C’est vrai qu’un site avec des images c’est tout de même bien plus beau et cela illustre le propos… Cependant ces dernières sont de grandes consommatrices de ressources, notamment de bande passant et de fait, cela allonge les temps de chargement. Et nous savons maintenant que Google et nos visiteurs veulent que notre site soit rapide …
Voyons ensemble comment optimiser nos images ..
Quel format de fichier image doit-on utiliser ?
Il existe de nombreux types de fichiers image avec leurs avantages et leurs inconvénients.
Les formats image les plus utilisés sur le Web sont :
- PNG : Format qui gère la transparence, un peu lourd et souvent utilisé pour les logos
- JPEG : Format permettant de compresser l’image, plus léger mais au détriment de la qualité et de la transparence
- GIF : Format prenant en charge l’animation, moins utilisé que les deux précédents
Il en existe un petit dernier mais pas des moindre à savoir le format WebP. WebP est un format de fichier image créé par l’équipe Web de Google, développé pour remplacer les formats JPEG, PNG et GIF, tout en supportant la compression, la transparence et les animations. Pour faire simple, c’est un excellent mixte des 3 formats précédent .. Attention cependant à la retro-compatibilité de ce format avec l’ensemble des navigateurs internet. L’ensemble des dernières versions des navigateurs sont compatibles avec ce format mais forcément les anciennes ..
Quelles dimensions utiliser pour vos images ?
La dimension des images, c’est à dire la taille des images en pixels, influe grandement sur le poids du fichier.
Ne jamais oublier qu’il faut avoir un poids le plus faible possible pour assurer le chargement des pages le plus rapidement possible.
Par exemple, si votre site Web affiche des images d’une largeur maximale de 720 px, il est inutile d’utiliser des images de 2000px de large. L’image 2000 px va être automatiquement redimensionnée pour s’adapter au conteneur de 720 px, mais la taille de l’image sera conservée. Hors, la différence de poids entre une image de 2000px de large et une image de 720 px peut être de plus de 1 Mo !
De même, si vous avez besoin d’une image de 250 x 250 px, n’utilisez pas une image plus grande (par exemple 500x500px), créez une image avec les dimensions exactes dont vous avez besoin c’est-à-dire de 250 x 250 px.
Ainsi, vous minimisez le poids de votre page, et donc le temps de chargement de votre page est plus rapide pour vos visiteurs.
Notre conseil : connaître les dimensions nécessaires au thème de votre site et travailler vos images pour qu’elles soient exactement de cette taille. Cela va réduire le poids des pages. Ainsi vos pages vont s’afficher plus rapidement sans perdre en qualité. Pour en savoir plus sur la gestion des dimensions de vos images, n’hésitez pas à consulter notre article dédié à cette problématique !
Réduire le poids des images
Une fois que vous avez mis vos images à la bonne résolution requise par votre thème, chercher à éliminer tout kilo-octet superflu sans sacrifier la qualité de l’image.
Bien qu’il existe d’excellentes extensions WordPress qui compressent la taille des images, nous sommes convaincus que les images doivent être bien optimisées avant de les télécharger. Une fois optimisées avant de les uploader sur votre site, les plugin WordPress les compresseront davantage sans perdre en qualité d’image.
Pour réduire le poids de vos images en amont de WordPress, vous pouvez utiliser les services en ligne suivants :
Pour réduire vos images une fois uploadées sur WordPress, vous pouvez vous tourner les yeux fermés vers le plugin WordPress Imagify.
Réduire le poids des images avec le plugin WordPress Imagify
Imagify est un plugin WordPress vous permettant de compresser, directement en ligne, les images contenues dans votre bibliothèque afin de les alléger et sans perdre une once de qualité !
Comme tout plugin, il faudra vous rendre dans l’onglet Extension > Ajouter, saisir Imagify dans la barre de recherche puis l’installer et l’activer… Ensuite, en quelques étapes très bien guidées, vous pourrez passer aux choses sérieuses. Pour en savoir plus sur ces étapes, rendez-vous sur notre tutoriel dédié à ce plugin WordPress.
