Lorsque nous commen\u00e7ons un nouveau projet sur Joomla!, nous choisissons des templates, des extensions, commen\u00e7ons \u00e0 construire le site, ajoutons d’autres extensions. La majorit\u00e9 des d\u00e9veloppements \u00e9tant effectu\u00e9s sur un serveur local, le temps de chargement du site ainsi que ses performances ne pose aucun probl\u00e8me.<\/p>\n
\nOutils et astuces pour v\u00e9rifier la vitesse d’un site web et am\u00e9liorer ses performances Lorsque nous commen\u00e7ons un nouveau projet sur Joomla!, nous choisissons des templates, des extensions, commen\u00e7ons \u00e0 construire le site, ajoutons d’autres extensions. La majorit\u00e9 des d\u00e9veloppements \u00e9tant effectu\u00e9s sur un serveur local, le temps de chargement du site ainsi que ses performances ne pose aucun probl\u00e8me. Mais les choses se compliquent lorsque le site est transf\u00e9r\u00e9 sur un serveur en ligne et test\u00e9. Apr\u00e8s avoir pass\u00e9 de nombreuses heures \u00e0 le r\u00e9aliser, il est difficile de supprimer une extension ou m\u00eame de supprimer une fonctionnalit\u00e9 pour am\u00e9liorer les performances de ce site. Voici l’histoire de nombreuses personnes qui demandent ensuite une assistance professionnelle pour optimiser les performances de leur site.
\n Souvenez-vous, si c’est lourd…. ce sera charg\u00e9 lentement. <\/p>\n
\nQue doit-on faire ?
\nD\u00e8s le premier jour, consid\u00e9rer l’optimisation du site comme l’une des principales priorit\u00e9s. Munissez-vous d’outils vous permettant de mesurer l’impact des changements que vous apportez sur les performances globales, avant de les adopter d\u00e9finitivement et essayez de fixer une limite maximale \u00e0 la taille de ce site et des requ\u00eates HTTP. Voici quelques outils tr\u00e8s simples \u00e0 utiliser pour tester votre site web.
\n
\n1. GTMetrix (Googl Page Speed \/ YSlow)<\/p>\n
GTMETRIX
\n
\nDeux 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\u00e9ment afin de pouvoir comprendre et analyser les r\u00e9sultats en d\u00e9tail.<\/p>\n
Affiche les r\u00e9sultats de Page Speed et Yslow
\nFournit une version optimis\u00e9e des images \/ fichiers
\nOption de re-tester la page (j’ai trouv\u00e9 cela tr\u00e8s utile pour optimiser un site en temps r\u00e9el)
\nOption de comparer votre site avec un autre site (comme votre site original et le site optimis\u00e9)
\nR\u00e9sultats simples \u00e0 interpr\u00e9ter avec des suggestions pour r\u00e9soudre les probl\u00e8mes
\nAffiche la chronologie du changement du site
\nHistorique de temps de chargement du site \/ taille des pages \/ requ\u00eates HTTP \/ et autres donn\u00e9es qui ont chang\u00e9 au fil des tests. Bien s\u00fbr, vous devez tester votre site r\u00e9guli\u00e8rement pour obtenir des donn\u00e9es.
\nOption de sauvegarder les liens et partager les rapports<\/p>\n
\n2. Google page Speed<\/p>\n
Google Pgae Speed
\n
\nNon seulement Google Page Speed \u200b\u200banalyse votre site et liste des recommandations, mais il fournit \u00e9galement de tr\u00e8s bonnes explications, et ce pour chaque param\u00e8tre. Certains pourront le trouver ennuyeux ou moins agr\u00e9able que d’autres services disponibles, mais il vous donnera l’ensemble des choses \u00e0 effectuer pour acc\u00e9l\u00e9rer votre site, ce qui permet de diminuer le taux de rebond et donc augmenter les statistiques de visites, sans parler de vous aider \u00e0 optimiser votre site selon les standards du web.
\n 3. Pingdom<\/p>\n
Pingdom
\n
\nPingdom est l’un des outils en ligne les plus simples \u00e0 utiliser pour tester le temps de chargement de votre site, les r\u00e9sultats comprennent des notes de performance, le nombre de requ\u00eates HTTP, le temps de chargement du site et la taille des pages.<\/p>\n
Onglet (Waterfall) : L’affichage Waterfall de requ\u00eates de chargement du site est tr\u00e8s utile, il donne une id\u00e9e de la mani\u00e8re dont la page est construite et quels sont les \u00e9l\u00e9ments qui ralentissent l’ensemble du processus.<\/p>\n
Onglet Performance Grade : donne des recommandations faciles \u00e0 comprendre, mais pour r\u00e9soudre ces probl\u00e8mes, vous serez redirig\u00e9 vers la doc de Google Page Speed (en anglais).
\n Onglet Page analysis : donne un graphique facile \u00e0 comprendre sur les diff\u00e9rents param\u00e8tres. J’ai trouv\u00e9 le temps pass\u00e9 par domaine int\u00e9ressant, cela aide \u00e0 supprimer un service tiers non n\u00e9cessaire (au moins \u00e0 partir de la page principale du site).<\/p>\n
Option de sauvegarder les liens et de partager les rapports.
\n 4. WEBPAGE TEST<\/p>\n
WebPageTest
\n
\nC’est certainement le seul outil en ligne fournissant une analyse \u00e9tendue ainsi que les d\u00e9tails des performances du site, en laissant en m\u00eame temps le choix aux utilisateurs de la fa\u00e7on dont le site est test\u00e9. Vous pouvez choisir l’emplacement ou m\u00eame les navigateurs \u00e0 tester, seulement pour les fonctionnalit\u00e9s de base. Dans les param\u00e8tres avanc\u00e9s, l’outil vous permet de choisir une vitesse de connexion, d’ignorer les erreurs SSL ou encore de bloquer les publicit\u00e9s.
\nLes r\u00e9sultats sont informatifs et simples \u00e0 interpr\u00e9ter, un coup d’\u0153il au Waterfall ainsi qu’au diagramme donne une image tr\u00e8s claire des \u00e9l\u00e9ments qui ralentissent votre site.
\n 5. WEBSITEOPTIMIZATION.COM<\/p>\n
WEBSITEOPTIMIZATION.COM
\n
\nj’ai utilis\u00e9 cet outil pour plusieurs raisons au cours de ces derni\u00e8res ann\u00e9es, le proc\u00e9d\u00e9 en deux \u00e9tapes pour obtenir les r\u00e9sultats est quelque peu ennuyeux, sp\u00e9cialement lorsque vous essayez d’optimiser et de v\u00e9rifier un site en temps r\u00e9el. En plus de cela, si le site fait plus de 2,8 Mo, il expire et les r\u00e9sultats ne sont plus trait\u00e9s. Ce test est donc r\u00e9serv\u00e9 aux sites de petite taille.
\n 6. YSLOW BY YAHOO!<\/p>\n
YSLOW
\n
\nJe ne souhaiterai pas me tromper en disant que Yslow et Google Page Speed, sont en t\u00eate de liste sur le sujet et sont \u00e9galement d’excellentes ressources pour optimiser votre site. Yslow est bas\u00e9 sur un ensemble de r\u00e8gles choisies (pr\u00e9d\u00e9finies ou d\u00e9finies par l’utilisateur) et offre \u00e9galement des suggestions pour am\u00e9liorer les performances des pages. Il est disponible sous forme d’add-on pour le navigateur Firefox. La page d’accueil Yslow liste \u00e9galement les \u201cmeilleures r\u00e8gles et pratiques de la performance web\u201d, qui sont une lecture int\u00e9ressante pour toute personne souhaitant apprendre les bases.
\n
\nLa liste est bonne, mais lequel dois-je utiliser en premier ?
\nPour les d\u00e9butants, les outils Gtmetrix et Pingdom devraient \u00eatre suffisants pour conna\u00eetre 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\u00e9s sur un domaine sp\u00e9cifique. Cependant, pour en savoir plus sur le sujet, Google page speed docs et Yslow best practices section sont les meilleures ressources.
\n J’ai test\u00e9 mon site, et maintenant ?
\nLaissez-moi deviner, un score faible, un chargement long et un d\u00e9sir fort d’obtenir des scores forts et un site tr\u00e8s rapide. Essayez les astuces suivantes, continuez de v\u00e9rifier les performances avec chaque changement, et assurez-vous de vider le cache \u00e0 chaque fois.
\n 1. R\u00e9duire les \u00e9l\u00e9ments lourds et optimiser les images
\nEn bref, un site de 500KB se chargera plus rapidement qu’un site de 2MB. Vous devez d’abord regarder les objets charg\u00e9s sur votre site pour chaque taille et chaque quantit\u00e9 (nombre de css \/ fichiers js, images, scripts \/services externes).
\nJe sais, vous trouverez difficile de r\u00e9duire les images ou autres \u00e9l\u00e9ments, mais certains ne font qu’ajouter de la taille au site, et souvenez-vous, plus c’est lourd.. plus c’est lent.<\/p>\n
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 \u00e9conomise une requ\u00eate http en m\u00eame temps que cela reduit la taille de la page).
\nOptimisez les images \u2013 vous serez \u00e9tonn\u00e9 de voir les \u00e9conomies que vous ferez en optimisant vos images.<\/p>\n
\n2. Rechercher des alternatives
\nSi l’une de vos extensions charge trop de fichiers js\/css, vous devriez essayer de trouver une autre alternative. J’ai partag\u00e9 un cas \u00e9tudi\u00e9 ci-dessous o\u00f9 j’ai \u00e9conomis\u00e9 5MB sur la totalit\u00e9 du poids d’un site (7.8MB) simplement en changeant le module affichant le slideshow et ainsi obtenu plus de 60% d’am\u00e9lioration dans les performances du site.<\/p>\n
Ignorez le score, regardez simplement le temps de chargement de la page ainsi que sa taille totale.
\n
\n3. Utiliser des outils de compression\/minimisation
\nIl y a de nombreuses extensions disponibles pour effectuer ces taches, et de nos jours la plupart des framework de template en poss\u00e8de une int\u00e9gr\u00e9e. Je pr\u00e9f\u00e8re personnellement utiliser une extension pr\u00e9vue \u00e0 cet effet comme par exemple : JCH Optimize.
\nSuite \u00e0 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\u00e9, assurez-vous qu’elle fonctionne \u00e9galement apr\u00e8s expiration du cache (dans la plupart des cas, le site ne fonctionne plus parfaitement une fois le cache expir\u00e9).
\n Le premier test est effectu\u00e9 avec JCH optimize et le second avec Jbetolo
\n
\n Pour ce site, pour lequel les performances ont \u00e9t\u00e9 am\u00e9lior\u00e9es de plus de 60% voici ce qui a \u00e9t\u00e9 r\u00e9alis\u00e9 :<\/p>\n
1. Remplacement du module affichant le slideshow par un autre qui optimisait les images.
\n2. Migration du site bas\u00e9 sur un h\u00e9bergeur d\u00e9di\u00e9 bas\u00e9 sur cpanel. L’h\u00e9bergeur pr\u00e9c\u00e9dent avait un serveur SQL distant au lieu d’un bas\u00e9 localement. Cela a \u00e9conomis\u00e9 entre 2 et 3 secondes sur le temps de chargement de la page.
\n3. Installation et configuration du plugin Jbetolo.
\n4. Mise \u00e0 jour du fichier .htaccess comme sugg\u00e9r\u00e9 par Cindy Montano qui fonctionne tr\u00e8s bien.<\/p>\n
Ce site a encore de grandes possibilit\u00e9s d’am\u00e9lioration, mais les principaux objectifs ont \u00e9t\u00e9 atteints, il est plus l\u00e9ger et plus rapide que jamais.
\n
\nConclusion<\/p>\n
1. Analysez et r\u00e9duisez la taille du site.
\n2. Assurez-vous que votre serveur est optimis\u00e9 pour Joomla!.
\n3. Testez des extensions d’am\u00e9lioration de performance comme JCH Optimize\/Jbtolo (configurez-les \u00e9tape par \u00e9tape, elle ne pourront pas fonctionner correctement directement \u00e0 l’installation).
\n4. R\u00e9glez les Etags\/Expiry headers
\n5. Essayez CDN (si un budget est disponible).
\n6. Si cela ne fonctionne pas, vous pouvez rechercher une aide aupr\u00e8s d’un professionnel.<\/p>\n
\nNOTE : Cet article est une tradustion de l’article : Tools and tips to check Joomla! site speed and improve performance publi\u00e9 sur Joomlart.com. 1. R\u00e9duire les \u00e9l\u00e9ments lourds et optimiser les images
\nEn bref, un site de 500KB se chargera plus rapidement qu’un site de 2MB. Vous devez d’abord regarder les objets charg\u00e9s sur votre site pour chaque taille et chaque quantit\u00e9 (nombre de css \/ fichiers js, images, scripts \/services externes).
\nJe sais, vous trouverez difficile de r\u00e9duire les images ou autres \u00e9l\u00e9ments, mais certains ne font qu’ajouter de la taille au site, et souvenez-vous, plus c’est lourd.. plus c’est lent.<\/p>\n
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 \u00e9conomise une requ\u00eate http en m\u00eame temps que cela reduit la taille de la page).
\nOptimisez les images \u2013 vous serez \u00e9tonn\u00e9 de voir les \u00e9conomies que vous ferez en optimisant vos images.<\/p>\n
\n2. Rechercher des alternatives
\nSi l’une de vos extensions charge trop de fichiers js\/css, vous devriez essayer de trouver une autre alternative. J’ai partag\u00e9 un cas \u00e9tudi\u00e9 ci-dessous o\u00f9 j’ai \u00e9conomis\u00e9 5MB sur la totalit\u00e9 du poids d’un site (7.8MB) simplement en changeant le module affichant le slideshow et ainsi obtenu plus de 60% d’am\u00e9lioration dans les performances du site.<\/p>\n
Ignorez le score, regardez simplement le temps de chargement de la page ainsi que sa taille totale.
\n
\n3. Utiliser des outils de compression\/minimisation
\nIl y a de nombreuses extensions disponibles pour effectuer ces taches, et de nos jours la plupart des framework de template en poss\u00e8de une int\u00e9gr\u00e9e. Je pr\u00e9f\u00e8re personnellement utiliser une extension pr\u00e9vue \u00e0 cet effet comme par exemple : JCH Optimize.
\nSuite \u00e0 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\u00e9, assurez-vous qu’elle fonctionne \u00e9galement apr\u00e8s expiration du cache (dans la plupart des cas, le site ne fonctionne plus parfaitement une fois le cache expir\u00e9).
\n Le premier test est effectu\u00e9 avec JCH optimize et le second avec Jbetolo
\n
\n Pour ce site, pour lequel les performances ont \u00e9t\u00e9 am\u00e9lior\u00e9es de plus de 60% voici ce qui a \u00e9t\u00e9 r\u00e9alis\u00e9 :<\/p>\n
1. Remplacement du module affichant le slideshow par un autre qui optimisait les images.
\n2. Migration du site bas\u00e9 sur un h\u00e9bergeur d\u00e9di\u00e9 bas\u00e9 sur cpanel. L’h\u00e9bergeur pr\u00e9c\u00e9dent avait un serveur SQL distant au lieu d’un bas\u00e9 localement. Cela a \u00e9conomis\u00e9 entre 2 et 3 secondes sur le temps de chargement de la page.
\n3. Installation et configuration du plugin Jbetolo.
\n4. Mise \u00e0 jour du fichier .htaccess comme sugg\u00e9r\u00e9 par Cindy Montano qui fonctionne tr\u00e8s bien.<\/p>\n
Ce site a encore de grandes possibilit\u00e9s d’am\u00e9lioration, mais les principaux objectifs ont \u00e9t\u00e9 atteints, il est plus l\u00e9ger et plus rapide que jamais.
\n
\nConclusion<\/p>\n
1. Analysez et r\u00e9duisez la taille du site.
\n2. Assurez-vous que votre serveur est optimis\u00e9 pour Joomla!.
\n3. Testez des extensions d’am\u00e9lioration de performance comme JCH Optimize\/Jbtolo (configurez-les \u00e9tape par \u00e9tape, elle ne pourront pas fonctionner correctement directement \u00e0 l’installation).
\n4. R\u00e9glez les Etags\/Expiry headers
\n5. Essayez CDN (si un budget est disponible).
\n6. Si cela ne fonctionne pas, vous pouvez rechercher une aide aupr\u00e8s d’un professionnel.<\/p>\n
\nNOTE : Cet article est une tradustion de l’article : Tools and tips to check Joomla! site speed and improve performance publi\u00e9 sur Joomlart.com. Cr\u00e9dits photo
\n Negative Space provenant de Pexels.<\/p>\n","protected":false},"excerpt":{"rendered":"
Lorsque nous commen\u00e7ons un nouveau projet sur Joomla!, nous choisissons des templates, des extensions, commen\u00e7ons \u00e0 construire le site, ajoutons d’autres extensions. La majorit\u00e9 des d\u00e9veloppements \u00e9tant effectu\u00e9s sur un serveur local, le temps de chargement du site ainsi que ses performances ne pose aucun probl\u00e8me.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-198","post","type-post","status-publish","format-standard","hentry","category-articles"],"yoast_head":"\n