Bonsoir, après avoir mis du temps à optimiser notre site Joomla, j’ai décidé de faire ce petit article pour vous passer nos astuces, pour savoir comment optimiser réellement un site de ce type, et ainsi promouvoir notre CMS préféré, sans lequel ce site n’existerait tout simplement pas... Du reste, vous devez savoir que la vitesse de chargement de votre site influe grandement sur son classement dans les moteurs de recherche. Google recommande une vitesse de chargement de 600ms, je vous avouerai que je n’y suis jamais arrivé, mais nous avons tout fait pour nous en approcher. Vous avez différents services sur internet qui vous permettent de mesurer la vitesse de chargement de votre site. Je vous recommande de les tester pour savoir les gains que vous auriez gagné avec les diverses modifications que nous allons vous présenter. Chaque site vous propose des recommandations, pour optimiser votre contenu. Le premier est bien sûr Page Speed Insigths de Google, le second est GT Metrix qui est très complet, le plus réaliste à mon sens, et aussi, le plus précieux est Web Page Speed Test. Pour avoir une vue rapide Pingdom Tool et son mode cascade synthétique est aussi très utile pour identifier les ressources qui prennent le plus de temps à se charger. Dans tous les cas de figures choisissez bien le pays d’où vous lancer le test.
Tout d’abord il faut commencer par le commencement, vous avez en racine de votre site web un fichier qui s’appelle, .htaccess ce dernier contient certaines directives pour le fonctionnement de votre serveur, et on peut notamment y indiquer les temps de mise en cache des fichiers par type, ainsi que la compression des échanges entre votre serveur et les clients web. Aussi on ne perdra pas de temps vous avez des tonnes d’informations sur internet pour les expires headers, voici donc notre section consacrée à cette dernière, ceci afin d’avoir un temps d’échange minimal entre le client et le serveur.
RewriteEngine on
# MOD_DEFLATE COMPRESSION
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/x-httpd-php
#Pour les navigateurs incompatibles
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
#ne pas mettre en cache si ces fichiers le sont déjà
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip
#les proxies doivent donner le bon contenu
Header append Vary User-Agent env=!dont-vary
# BEGIN Expire headers
ExpiresActive On
ExpiresDefault "access plus 3024000 seconds"
ExpiresByType image/jpg "access plus 3024000 seconds"
ExpiresByType image/jpeg "access plus 3024000 seconds"
ExpiresByType image/png "access plus 3024000 seconds"
ExpiresByType image/gif "access plus 3024000 seconds"
AddType image/x-icon .ico
ExpiresByType image/ico "access plus 3024000 seconds"
ExpiresByType image/icon "access plus 3024000 seconds"
ExpiresByType image/x-icon "access plus 3024000 seconds"
ExpiresByType text/css "access plus 3024000 seconds"
ExpiresByType text/javascript "access plus 3024000 seconds"
ExpiresByType text/html "access plus 3024000 seconds"
ExpiresByType application/xhtml+xml "access plus 3024000 seconds"
ExpiresByType application/javascript A259200
ExpiresByType application/x-javascript "access plus 3024000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 3024000 seconds"
# END Expire headers
# BEGIN Cache-Control Headers
Header set Cache-Control "max-age=3024000, public"
Header set Cache-Control "max-age=3024000, private"
Header set Cache-Control "max-age=3024000, private"
Header set Cache-Control "max-age=3024000, private, must-revalidate"
# Disable caching for scripts and other dynamic files
Header unset Cache-Control
# END Cache-Control Headers
# KILL THEM ETAGS
Header unset ETag
FileETag none
Ensuite vous avez certaines configurations à faire dans le panneau de configuration de Joomla, les bonnes conduites à prendre pour le SEO étant d’indiquer la réécriture des URL en clair (Search Engine Friendly) et la réécriture au vol des URL, éviter aussi d’inclure le nom de votre site dans les titres, car cela vous ôtes de la place dans ces derniers dont la taille doit être limitée. Afin d'optimiser au mieux le système de cache de Joomla nous allons le modifier à deux niveau, premièrement il faut demander à votre hébergeur d'installer Memcached sur votre serveur, et ensuite l'indiquer dans votre configuration. Puis nous allons aussi utiliser un système de cache de second niveau beaucoup plus performant que le plug-in système de cache de Joomla, ce dernier s'appelle Jot Cache et s'appuira aussi sur Memcached plutôt que le système de fichier (certains paramètres des captures d'écrans sont tout bonnement effacés pour ne pas compromettre notre sécurité).
Voici un exemple de notre configuration.
La première chose à faire est de limiter le nombre de modules et de plug-in que vous chargez sur votre page de garde ainsi que sur toutes vos pages, chaque module et plug-in, prend un temps de chargement qui peut être important. Aussi, nous sommes souvent tentés de rajouter tels effets, telles images, mais cela a un impact sur le temps de chargement, et si vous voulez de la performance, il va falloir faire des choix. Bien sûr, avec les outils que nous vous avons indiqués précédemment vous serez en mesure de calculer l’impact de chacun des modules que vous désirez afficher. Le temps de chargement le plus important consiste dans les images, c’est pour cela qu’il est important d’optimiser ces dernières, les autres ressources telles que les fichiers CSS et JavaScript ont aussi un impact, et il faudra les optimiser. Sachez que j’ai dû le faire « manuellement », mais nous allons vous conseiller des extensions qui le feront pour vous, car chaque kilo-octet qui transite entre votre serveur et vos clients web a son importance.
Aussi pour optimiser vos images, et ceci de façon quasi automatique, nous vous conseillons Image Recycle, le composant peut avoir certains bugs, et le quota de page à optimiser est payant, sachez que la sauvegarde automatique des images optimisées a buggé chez moi, le traitement par lot aussi, car nous avons plus de 32.000 images. Mais le cron job a fonctionné, et nous avons ainsi pu optimiser toutes nos images, à l’heure où j’écris ces lignes nous avons remonté les informations de bug à l’éditeur, aussi peut-être qu’il aura corrigé son logiciel. Mais quoi qu’il en soit, si vous avez peu d’images vous pourrez les optimiser facilement.
N’oubliez pas (jamais) de sauvegarder votre site, des hébergeurs comme le nôtre (Infomaniak) font des backups de vos sites web tous les jours, aussi il est facile de redéployer un backup en 15 min, mais on n’est jamais mieux servi que par soi-même, aussi nous vous conseillons de doubler vos backups et d’utiliser Akeeba Backup, ce dernier est absolument fantastique, et ses sauvegardes vous permettrons de restaurer tel ou tel fichier sans redéployer l’intégralité d’un backup. Sauvegardez donc votre site web tous les jours, voir plusieurs fois par jour pour avoir les différentes versions, et pensez aussi à sauvegarder régulièrement dans un répertoire de votre disque dur la racine de votre site web, si vous faites telle ou telle modification sur vos fichiers, il est toujours utile d’avoir un backup daté de ces derniers.
Voilà s'en est fini pour les images.... ; ))))
Mais Comme je vous l’ai dit pour optimiser complètement votre site joomla vous devez aussi optimiser, merger et compresser vos fichiers CSS et JavaScript. Et comme je vous l’ai indiqué précédemment, il fut un temps où j’ai dû le faire à la main, et Page Speed insigths de Google est d’un grande aide pour cela. Puisque, après un test, il vous propose de télécharger les ressources de votre site web en version optimisées, à vous de remplacer un à un les fichiers sur votre serveur par ceux proposés par Google. Du reste, même en ayant optimisé vos fichiers pour pouvez vérifier le bon fonctionnement de votre optimisation via ce dernier. Sachez toutefois que certains fichiers ne peuvent pas être optimisés, parce qu’ils sont sur des sites distants, ou sont réfractaires. Vous devez aussi faire attention en optimisant ces derniers, car vous pouvez avoir des effets de bord visuel, ou de fonctionnement, en les améliorant. Encore une fois, les backups sont importants ; ))). Pour optimiser vos ressources, il existe un soft qui est payant, mais il est disponible dans une version limitée gratuitement, c’est JCH optimize, il est vraiment précieux et fournit une tonne d’optimisations que vous pouvez tester à loisir. Il a même des fonctions très faciles d’utilisation.
Alors une fois que vous aurez testé votre site, vous aurez les valeurs de référence que vous devrez vérifier après CHAQUE modification, pour voir si elle a impacté positivement ou négativement votre vitesse.
Une fois ceci fait et après l'installation du plugin (on ne se consacrera ici qu'à la version PRO)
Sur le premier écran vous avez toutes les fonctionnalités, mais je vous conseille de les désactiver au début, aussi le mieux est de tout désactiver et de tester les optimisations minimales, pour voir déjà comment 'répond' votre site,
voici un exemple de démarrage de config :
Une fois ceci fait à vous de tester d'activer les options de minification HTML 'HTML minification Level' et 'Combined files delivery' vous montez en qualité petit à petit, et vous testez, vous testez...
Ensuite idem le niveau d'optimisation globale, à vous de passer les niveaux, Intermediate, Average, Deluxe, Premium et le tant convoité Optimum.
Alors là je vous dis, il va falloir être patient, parce qu'il y a peu de chance que ça se passe sans soucis.
Voyez par exemple sur Crashdebug.fr et mode optimum (en fait bien avant) nous avons un défaut d'affichage avec les options activées, alors cela peut être un module, un plug in, ou comme dans le cas présent un bête fichier CSS.
Mais ce n'est pas esthétique...
Alors il va vous falloir plonger dans les entrailles de votre site, et plus particulièrement de votre template (où toute autres extensions)
Et tenter de trouver les fichier CSS ou Javascript qui vous posent soucis, et les intégrer dans la fonction exclude de JCH Optimize PRO, et c'est là que c'est délicat, car quand vous essayez de renter le fichier à exclure JCH vous propose toute une série de fichiers susceptibles d'être à l'origine du problème.
Doc du plug in :
Ces paramètres sont utilisés pour exclure des fichiers individuels, ou des fichiers d'extensions sélectionnées, tout en maintenant l'ordre d'exécution original des codes sur la page afin de s'assurer que la page ne se casse pas. Le fichier combiné se divisera autour des fichiers exclus afin de préserver l'ordre et de garantir qu'aucune dépendance avec d'autres fichiers/scripts combinés ne soit rompue. Si vous ne voyez pas les fichiers ou les extensions que vous souhaitez exclure dans la liste déroulante, ajoutez manuellement les fichiers ou les extensions à la liste. Pour ajouter un fichier à la liste manuellement, tapez l'url dans la zone de texte et cliquez sur le bouton "Ajouter un élément".
Aussi il vous faudra du temps et de la patience, je vous conseille de faire cela 'chirurgicalement' en identifiant les fichiers (CSS ou plus bas Javascript) via le FTP ou avec les outils de test de vitesse que l'on vous a cités plus haut.
Ensuite vous les indiquez dans le champ d'exclusion en tapant les premières lettres du fichier, il devrait s'auto-compléter.
Mais vous pouvez aussi faire mode 'bourrin' en excluant tout et en les désélectionnant après un à un, jusqu'à constater le défaut.
Cependant je vous le dis, il vous faudra du temps. Mais ça en vaut largement le coup, n'oubliez pas que votre score SEO est très fortement corrélé à la vitesse de votre site, Google parle de 600 millisecondes de temps de chargement, ce qui est impossible à moins d'avoir une page quasi vide.
Cependant je pense qu'il ne faut pas monter au dessus de 2,5 sec.
Aussi c'est pourquoi il faut tester toutes les options de JCH optimize PRO, certaines seront bénéfiques d'autres non.
Une fois que vous aurez identifié le ou les fautifs vous pouvez commencer à creuser les autres options du module avec les options 'basic'.
On trouve ici le fameux module Sprite, dont je me demandais l'utilité car je sais que c'est connu, mais le gain de vitesse est assez ridicule.
Mais regardez ce qu'en dit GT METRIX, donc rien n'est à laisser.
Du reste dans l'écran précédent, vous avez la possibilité de rajouter les attributs ALT aux images de votre site, si vous n'avez pas d'extension chargée de ce travail, activez-le, les attributs ALT manquants ou dupliqués impactent fortement le SEO.
Ensuite vous pouvez aller sur les options avancées :
Vous avez le :
HTTP2/Push
Si votre serveur le permet c'est assez apprécié, ça permet de gagner sur l'entête de la page je crois, voici ce qu'en dit le plug in :
Le plugin enverra les en-têtes appropriés à votre serveur pour pousser les fichiers de ressources avant que le navigateur ne les demande. Veuillez noter que cela ne fonctionne que si http/2 est activé sur le serveur.
Donc testez si votre serveur est compatible et activer.
Ensuite vous avez le CSS :
Optimiser la fourniture de CSS
Le plugin tentera d'extraire le CSS critique nécessaire au formatage de la page au-dessus du dossier et de le placer dans un élément Partager sur les réseaux sociaux
Terms & Conditions
Subscribe
Report
My comments