Written by Lorsque nous commençons un nouveau projet sur Joomla!, nous choisissons des templates, des extensions, commençons à construire le site, ajoutons d’autres extensions. La majorité des développements étant effectués sur un serveur local, le temps de chargement du site ainsi que ses performances ne pose aucun problème.
Outils et astuces pour vérifier la vitesse d’un site web et améliorer ses performances Lorsque nous commençons un nouveau projet sur Joomla!, nous choisissons des templates, des extensions, commençons à construire le site, ajoutons d’autres extensions. La majorité des développements étant effectués sur un serveur local, le temps de chargement du site ainsi que ses performances ne pose aucun problème. Mais les choses se compliquent lorsque le site est transféré sur un serveur en ligne et testé. Après avoir passé de nombreuses heures à le réaliser, il est difficile de supprimer une extension ou même de supprimer une fonctionnalité pour améliorer les performances de ce site. Voici l’histoire de nombreuses personnes qui demandent ensuite une assistance professionnelle pour optimiser les performances de leur site.
Souvenez-vous, si c’est lourd…. ce sera chargé lentement.
Que doit-on faire ?
Dès le premier jour, considérer l’optimisation du site comme l’une des principales priorités. Munissez-vous d’outils vous permettant de mesurer l’impact des changements que vous apportez sur les performances globales, avant de les adopter définitivement et essayez de fixer une limite maximale à la taille de ce site et des requêtes HTTP. Voici quelques outils très simples à utiliser pour tester votre site web.
1. GTMetrix (Googl Page Speed / YSlow)
GTMETRIX
Deux outils performants et populaires permettant de tester les performances d’un site sont Yslow de Yahoo et Page Speed de Google, et Gtmetrix vous permet de faire les deux tests simultanément afin de pouvoir comprendre et analyser les résultats en détail.
Affiche les résultats de Page Speed et Yslow
Fournit une version optimisée des images / fichiers
Option de re-tester la page (j’ai trouvé cela très utile pour optimiser un site en temps réel)
Option de comparer votre site avec un autre site (comme votre site original et le site optimisé)
Résultats simples à interpréter avec des suggestions pour résoudre les problèmes
Affiche la chronologie du changement du site
Historique de temps de chargement du site / taille des pages / requêtes HTTP / et autres données qui ont changé au fil des tests. Bien sûr, vous devez tester votre site régulièrement pour obtenir des données.
Option de sauvegarder les liens et partager les rapports
2. Google page Speed
Google Pgae Speed
Non seulement Google Page Speed analyse votre site et liste des recommandations, mais il fournit également de très bonnes explications, et ce pour chaque paramètre. Certains pourront le trouver ennuyeux ou moins agréable que d’autres services disponibles, mais il vous donnera l’ensemble des choses à effectuer pour accélérer votre site, ce qui permet de diminuer le taux de rebond et donc augmenter les statistiques de visites, sans parler de vous aider à optimiser votre site selon les standards du web.
3. Pingdom
Pingdom
Pingdom est l’un des outils en ligne les plus simples à utiliser pour tester le temps de chargement de votre site, les résultats comprennent des notes de performance, le nombre de requêtes HTTP, le temps de chargement du site et la taille des pages.
Onglet (Waterfall) : L’affichage Waterfall de requêtes de chargement du site est très utile, il donne une idée de la manière dont la page est construite et quels sont les éléments qui ralentissent l’ensemble du processus.
Onglet Performance Grade : donne des recommandations faciles à comprendre, mais pour résoudre ces problèmes, vous serez redirigé vers la doc de Google Page Speed (en anglais).
Onglet Page analysis : donne un graphique facile à comprendre sur les différents paramètres. J’ai trouvé le temps passé par domaine intéressant, cela aide à supprimer un service tiers non nécessaire (au moins à partir de la page principale du site).
Option de sauvegarder les liens et de partager les rapports.
4. WEBPAGE TEST
WebPageTest
C’est certainement le seul outil en ligne fournissant une analyse étendue ainsi que les détails des performances du site, en laissant en même temps le choix aux utilisateurs de la façon dont le site est testé. Vous pouvez choisir l’emplacement ou même les navigateurs à tester, seulement pour les fonctionnalités de base. Dans les paramètres avancés, l’outil vous permet de choisir une vitesse de connexion, d’ignorer les erreurs SSL ou encore de bloquer les publicités.
Les résultats sont informatifs et simples à interpréter, un coup d’œil au Waterfall ainsi qu’au diagramme donne une image très claire des éléments qui ralentissent votre site.
5. WEBSITEOPTIMIZATION.COM
WEBSITEOPTIMIZATION.COM
j’ai utilisé cet outil pour plusieurs raisons au cours de ces dernières années, le procédé en deux étapes pour obtenir les résultats est quelque peu ennuyeux, spécialement lorsque vous essayez d’optimiser et de vérifier un site en temps réel. En plus de cela, si le site fait plus de 2,8 Mo, il expire et les résultats ne sont plus traités. Ce test est donc réservé aux sites de petite taille.
6. YSLOW BY YAHOO!
YSLOW
Je ne souhaiterai pas me tromper en disant que Yslow et Google Page Speed, sont en tête de liste sur le sujet et sont également d’excellentes ressources pour optimiser votre site. Yslow est basé sur un ensemble de règles choisies (prédéfinies ou définies par l’utilisateur) et offre également des suggestions pour améliorer les performances des pages. Il est disponible sous forme d’add-on pour le navigateur Firefox. La page d’accueil Yslow liste également les “meilleures règles et pratiques de la performance web”, qui sont une lecture intéressante pour toute personne souhaitant apprendre les bases.
La liste est bonne, mais lequel dois-je utiliser en premier ?
Pour les débutants, les outils Gtmetrix et Pingdom devraient être suffisants pour connaître le statut de leur site. Avec Gtmetrix et Pingdom, il est facile de voir l’effet de chaque modification, aussi petite soit-elle, que vous apportez sur le site, car ils concervent l’historique des tests effectués sur un domaine spécifique. Cependant, pour en savoir plus sur le sujet, Google page speed docs et Yslow best practices section sont les meilleures ressources.
J’ai testé mon site, et maintenant ?
Laissez-moi deviner, un score faible, un chargement long et un désir fort d’obtenir des scores forts et un site très rapide. Essayez les astuces suivantes, continuez de vérifier les performances avec chaque changement, et assurez-vous de vider le cache à chaque fois.
1. Réduire les éléments lourds et optimiser les images
En bref, un site de 500KB se chargera plus rapidement qu’un site de 2MB. Vous devez d’abord regarder les objets chargés sur votre site pour chaque taille et chaque quantité (nombre de css / fichiers js, images, scripts /services externes).
Je sais, vous trouverez difficile de réduire les images ou autres éléments, mais certains ne font qu’ajouter de la taille au site, et souvenez-vous, plus c’est lourd.. plus c’est lent.
Si vous avez un slideshow / slider avec de grosses images, vous pouvez toujours limiter le nombre de slides, c’est une situation gagnant/gagnant si vous pouvez supprimer ne serait-ce qu’une image (cela vous économise une requête http en même temps que cela reduit la taille de la page).
Optimisez les images – vous serez étonné de voir les économies que vous ferez en optimisant vos images.
2. Rechercher des alternatives
Si l’une de vos extensions charge trop de fichiers js/css, vous devriez essayer de trouver une autre alternative. J’ai partagé un cas étudié ci-dessous où j’ai économisé 5MB sur la totalité du poids d’un site (7.8MB) simplement en changeant le module affichant le slideshow et ainsi obtenu plus de 60% d’amélioration dans les performances du site.
Ignorez le score, regardez simplement le temps de chargement de la page ainsi que sa taille totale.
3. Utiliser des outils de compression/minimisation
Il y a de nombreuses extensions disponibles pour effectuer ces taches, et de nos jours la plupart des framework de template en possède une intégrée. Je préfère personnellement utiliser une extension prévue à cet effet comme par exemple : JCH Optimize.
Suite à l’installation de l’extension, si l’affichage du site est imparfait, vous devrez la configurer selon vos besoins. Une fois que vous l’aurez configuré, assurez-vous qu’elle fonctionne également après expiration du cache (dans la plupart des cas, le site ne fonctionne plus parfaitement une fois le cache expiré).
Le premier test est effectué avec JCH optimize et le second avec Jbetolo
Pour ce site, pour lequel les performances ont été améliorées de plus de 60% voici ce qui a été réalisé :
1. Remplacement du module affichant le slideshow par un autre qui optimisait les images.
2. Migration du site basé sur un hébergeur dédié basé sur cpanel. L’hébergeur précédent avait un serveur SQL distant au lieu d’un basé localement. Cela a économisé entre 2 et 3 secondes sur le temps de chargement de la page.
3. Installation et configuration du plugin Jbetolo.
4. Mise à jour du fichier .htaccess comme suggéré par Cindy Montano qui fonctionne très bien.
Ce site a encore de grandes possibilités d’amélioration, mais les principaux objectifs ont été atteints, il est plus léger et plus rapide que jamais.
Conclusion
1. Analysez et réduisez la taille du site.
2. Assurez-vous que votre serveur est optimisé pour Joomla!.
3. Testez des extensions d’amélioration de performance comme JCH Optimize/Jbtolo (configurez-les étape par étape, elle ne pourront pas fonctionner correctement directement à l’installation).
4. Réglez les Etags/Expiry headers
5. Essayez CDN (si un budget est disponible).
6. Si cela ne fonctionne pas, vous pouvez rechercher une aide auprès d’un professionnel.
NOTE : Cet article est une tradustion de l’article : Tools and tips to check Joomla! site speed and improve performance publié sur Joomlart.com. 1. Réduire les éléments lourds et optimiser les images
En bref, un site de 500KB se chargera plus rapidement qu’un site de 2MB. Vous devez d’abord regarder les objets chargés sur votre site pour chaque taille et chaque quantité (nombre de css / fichiers js, images, scripts /services externes).
Je sais, vous trouverez difficile de réduire les images ou autres éléments, mais certains ne font qu’ajouter de la taille au site, et souvenez-vous, plus c’est lourd.. plus c’est lent.
Si vous avez un slideshow / slider avec de grosses images, vous pouvez toujours limiter le nombre de slides, c’est une situation gagnant/gagnant si vous pouvez supprimer ne serait-ce qu’une image (cela vous économise une requête http en même temps que cela reduit la taille de la page).
Optimisez les images – vous serez étonné de voir les économies que vous ferez en optimisant vos images.
2. Rechercher des alternatives
Si l’une de vos extensions charge trop de fichiers js/css, vous devriez essayer de trouver une autre alternative. J’ai partagé un cas étudié ci-dessous où j’ai économisé 5MB sur la totalité du poids d’un site (7.8MB) simplement en changeant le module affichant le slideshow et ainsi obtenu plus de 60% d’amélioration dans les performances du site.
Ignorez le score, regardez simplement le temps de chargement de la page ainsi que sa taille totale.
3. Utiliser des outils de compression/minimisation
Il y a de nombreuses extensions disponibles pour effectuer ces taches, et de nos jours la plupart des framework de template en possède une intégrée. Je préfère personnellement utiliser une extension prévue à cet effet comme par exemple : JCH Optimize.
Suite à l’installation de l’extension, si l’affichage du site est imparfait, vous devrez la configurer selon vos besoins. Une fois que vous l’aurez configuré, assurez-vous qu’elle fonctionne également après expiration du cache (dans la plupart des cas, le site ne fonctionne plus parfaitement une fois le cache expiré).
Le premier test est effectué avec JCH optimize et le second avec Jbetolo
Pour ce site, pour lequel les performances ont été améliorées de plus de 60% voici ce qui a été réalisé :
1. Remplacement du module affichant le slideshow par un autre qui optimisait les images.
2. Migration du site basé sur un hébergeur dédié basé sur cpanel. L’hébergeur précédent avait un serveur SQL distant au lieu d’un basé localement. Cela a économisé entre 2 et 3 secondes sur le temps de chargement de la page.
3. Installation et configuration du plugin Jbetolo.
4. Mise à jour du fichier .htaccess comme suggéré par Cindy Montano qui fonctionne très bien.
Ce site a encore de grandes possibilités d’amélioration, mais les principaux objectifs ont été atteints, il est plus léger et plus rapide que jamais.
Conclusion
1. Analysez et réduisez la taille du site.
2. Assurez-vous que votre serveur est optimisé pour Joomla!.
3. Testez des extensions d’amélioration de performance comme JCH Optimize/Jbtolo (configurez-les étape par étape, elle ne pourront pas fonctionner correctement directement à l’installation).
4. Réglez les Etags/Expiry headers
5. Essayez CDN (si un budget est disponible).
6. Si cela ne fonctionne pas, vous pouvez rechercher une aide auprès d’un professionnel.
NOTE : Cet article est une tradustion de l’article : Tools and tips to check Joomla! site speed and improve performance publié sur Joomlart.com. Crédits photo
Negative Space provenant de Pexels.