Optimisation et vitesse de votre site Joomla!

gtmetrix pulsarComment le site de Pulsar a obtenu sa note A pour l'indice Google PageSpeed!

 Vu lors de nos formations sur l'optimisation pour le référencement de votre site Joomla!

Nous vous livrons ici la méthodologie que nous avons suivi pour optimiser le site de l'agence web Joomla! Pulsar pour un affichage rapide sur PC et supports mobiles. 

Nous avons mis en oeuvre les grandes lignes suivantes:

  • Architecture minimaliste (CMS Joomla! / SEBLOD / Framework de template WARP) avec quasiment aucune extension. Une architecture légère est la base de toute optimisation. 
  • Activer la mise en cache de joomla (mettre cache progessif) si il n'y a pas de cache serveur, sinon désactiver le cache Joomla et se reposer sur un APC ou MEMCACHED
  • Activer la compressions Gzip de Joomla!
  • Ne PAS activer la compression du template WARP maximale (Minify + Data URLs + Gzip) si vous utilisez un plugin de compression général comme JCH Optimize PRO. Dans le cas contraire il faut activer la compression Warp
  • Ajouter des règles d'optimisation dans le fichier racine .htaccess (EXPIRES, ETag, Deflat, Gzip)  :

########## Begin - ETag Optimization

## This rule will create an ETag for files based only on the modification
## timestamp and their size. This works wonders if you are using rsync'ed
## servers, where the inode number of identical files differs.
## Note: It may cause problems on your server and you may need to remove it
FileETag MTime Size
########## End - ETag Optimization
########## Begin - Optimal default expiration time
## Note: this might cause problems and you might have to comment it out by
## placing a hash in front of this section's lines
## Note: Some people prefer using "now plus 1 month" instead of "now plus 1 year".
## Suit to taste.

# Enable expiration control
ExpiresActive On

# Default expiration: 1 hour after request
ExpiresDefault "now plus 1 hour"

# CSS and JS expiration: 1 week after request
ExpiresByType text/css "now plus 1 week"
ExpiresByType application/javascript "now plus 1 week"
ExpiresByType application/x-javascript "now plus 1 week"

# Image files expiration: 1 month after request
ExpiresByType image/bmp "now plus 1 month"
ExpiresByType image/gif "now plus 1 month"
ExpiresByType image/jpeg "now plus 1 month"
ExpiresByType image/jp2 "now plus 1 month"
ExpiresByType image/pipeg "now plus 1 month"
ExpiresByType image/png "now plus 1 month"
ExpiresByType image/svg+xml "now plus 1 month"
ExpiresByType image/tiff "now plus 1 month"
ExpiresByType image/vnd.microsoft.icon "now plus 1 month"
ExpiresByType image/x-icon "now plus 1 month"
ExpiresByType image/ico "now plus 1 month"
ExpiresByType image/icon "now plus 1 month"
ExpiresByType text/ico "now plus 1 month"
ExpiresByType application/ico "now plus 1 month"
ExpiresByType image/vnd.wap.wbmp "now plus 1 month"
ExpiresByType application/vnd.wap.wbxml "now plus 1 month"
ExpiresByType application/smil "now plus 1 month"

# Audio files expiration: 1 month after request
ExpiresByType audio/basic "now plus 1 month"
ExpiresByType audio/mid "now plus 1 month"
ExpiresByType audio/midi "now plus 1 month"
ExpiresByType audio/mpeg "now plus 1 month"
ExpiresByType audio/x-aiff "now plus 1 month"
ExpiresByType audio/x-mpegurl "now plus 1 month"
ExpiresByType audio/x-pn-realaudio "now plus 1 month"
ExpiresByType audio/x-wav "now plus 1 month"

# Movie files expiration: 1 month after request
ExpiresByType application/x-shockwave-flash "now plus 1 month"
ExpiresByType x-world/x-vrml "now plus 1 month"
ExpiresByType video/x-msvideo "now plus 1 month"
ExpiresByType video/mpeg "now plus 1 month"
ExpiresByType video/mp4 "now plus 1 month"
ExpiresByType video/quicktime "now plus 1 month"
ExpiresByType video/x-la-asf "now plus 1 month"
ExpiresByType video/x-ms-asf "now plus 1 month"

########## End - Optimal expiration time
########## Begin - Automatic compression of resources
# Compress text, html, javascript, css, xml, kudos to Komra.de
# May kill access to your site for old versions of Internet Explorer
# The server needs to be compiled with mod_deflate otherwise it will send HTTP 500 Error.
# mod_deflate is not available on Apache 1.x series. Can only be used with Apache 2.x server.
# AddOutputFilterByType is now deprecated by Apache. Use mod_filter in the future.


############################################
## enable apache served files compression Gzip
# Activer le filtre pour tout le contenu
SetOutputFilter DEFLATE

AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
# Netscape 4.x crée quelques problèmes¦
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 en ont encore d'autres
BrowserMatch ^Mozilla/4\.0[678] no-gzip

# IE se déguise en Netscape, mais OK
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# On ne compresse pas les images: le sont déja
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

#End Deflate

########## End - Automatic compression of resources

  • Réduire la taille des images (Photoshop) avec le bon choix selon les cas en GIF (schémas, logotypes, symboles), JPEG (photos), PNG8 (transparence binaire), PNG24 (transparence en degradé)
  • Ne pas utiliser de GIF pour les images dont on va faire des vignettes car SEBLOD ne les compresse pas (utilisez plutôt des JPG et PNG)
  • Avec les champs image de SEBLOD, toujours préciser dans le typo IMAGE la taille des vignettes et ne pas laisser sur automatique pour que les balises width et height soient toujours présentes
  • Préciser dans les options générales de SEBLOD une qualité minimale visuellement acceptable pour la génération des vignettes PNG et JPG
  • Utilisez des extensions tierces de joomla pour l’optimisation comme JCH Optimize Pro
    • penser à remetre le plugin system SEBLOD en premier après l'installation de JCH Optimize Pro
    • réglage général à 'optimum'
    • HTML Minification level = advanced
    • Essayer ensuite toutes les options et voir si cela casse le site
      • fusion des scripts css et js
      • ordre des plugins
      • générateur de sprites
      • calculs des attributs width et height des images
      • chargement progressif des images (lazyload)
      • ordre chargement css selon la ligne de flottaison
      • optimisation des images 
  • tester la page d'accueil et vos pages cibles pour le référencement avec Google Speed Insight et GTMetrix
  • Suivre pas à pas les recommandations de ces deux outils en commençant par les plus importantes (du haut vers le bas)
  • Ne pas utiliser d'import CSS (pour les polices par exemple) mais mettre directement le contenu de l'url importée dans votre fichier CSS (theme.css)
  • Nettoyer tous les liens indirects publicitaires souvent arrivés avec une extension peu scrupuleuse qui vit de ses liens sponsorisés.

pagespeed pulsar On remarquera la puissance des outils d'analyse GSpeed et GTMetrix qui donnent précisément la liste des actions à réaliser pour optimiser l'affichage de vos pages.

La première étape de l'optimisation consiste à suivre les grandes lignes de cette méthodologie mais la seconde étape correspond à appliquer ligne à ligne les recommandations pondérées des outils d'analyse.

Ce travail d'optimisation est d'autant plus aisé que l'architecture technique est simplifiée (avec le CCK qui remplace beaucoup d'extensions).

 

 

 

Commentaires 4

Guest - Stephan Herby

(website) le mardi 1 septembre 2015 18:44

Merci pour ce sérieux Tuto sur l'optimisation d'un Joomla/Seblod. C'est vraiment chouette de votre part.
par contre j'ai certains de mes sites Joomla/Seblod qui rencontre des problème lors de l'activation de la cache progressive, ce n'est pas votre cas ? Si oui, avez-vous une idée pour conourner ce problème ?

Merci pour ce sérieux Tuto sur l'optimisation d'un Joomla/Seblod. C'est vraiment chouette de votre part. par contre j'ai certains de mes sites Joomla/Seblod qui rencontre des problème lors de l'activation de la cache progressive, ce n'est pas votre cas ? Si oui, avez-vous une idée pour conourner ce problème ?

cyril

(website) le mardi 1 septembre 2015 20:56

Bonsoir
Merci pour votre commentaire. Nous n'utilisons pas le cache de Joomla mais des caches serveurs (APC, memcached...) plus fiables.

Bonsoir Merci pour votre commentaire. Nous n'utilisons pas le cache de Joomla mais des caches serveurs (APC, memcached...) plus fiables.

Guest - daneel

le mercredi 2 septembre 2015 09:28

Bonjour,

Chaque site joomla peut obtenir cette note à condition d'effectuer ce travail d'optimisation. Toutefois, ce n'est pas précisé mais le choix du type d’hébergement a également son importance.

Les préchargements (ex: dns prefetch) sont une solution pour gérer les fichiers externes, ce n'est pas pris en compte dans votre optimisation et vous fait descendre à B pour Yslow.

Evitons les amalgames, les extensions et templates "gratuits" comportent parfois une ligne d'indication pour se faire connaître, ce n'est pas toujours des "extensions scrupuleuses"... il est préférable de financer en choisissant une offre payante avec support qui permet de desactiver ces liens.

Enfin l'utilisation de chaque éléments d'optimisation (y compris l'extension jch optimise) ne doivent pas être prises à la légère et on peut causer plus de problèmes que de solutions.
A manipuler avec précaution !

Bonjour, Chaque site joomla peut obtenir cette note à condition d'effectuer ce travail d'optimisation. Toutefois, ce n'est pas précisé mais le choix du type d’hébergement a également son importance. Les préchargements (ex: dns prefetch) sont une solution pour gérer les fichiers externes, ce n'est pas pris en compte dans votre optimisation et vous fait descendre à B pour Yslow. Evitons les amalgames, les extensions et templates "gratuits" comportent parfois une ligne d'indication pour se faire connaître, ce n'est pas toujours des "extensions scrupuleuses"... il est préférable de financer en choisissant une offre payante avec support qui permet de desactiver ces liens. Enfin l'utilisation de chaque éléments d'optimisation (y compris l'extension jch optimise) ne doivent pas être prises à la légère et on peut causer plus de problèmes que de solutions. A manipuler avec précaution !

cyril

(website) le jeudi 3 septembre 2015 14:52

Merci Yann pour ton commentaire. Bien sûr qu'il faut faire attention avec des composants comme jch optimize, il faut tester chaque page pour trouver le bon réglage. Mais ce genre d'outils peut faire gagner beaucoup de temps.

Pour le DNS Prefetch il faut que je regarde, merci du conseil!

Merci Yann pour ton commentaire. Bien sûr qu'il faut faire attention avec des composants comme jch optimize, il faut tester chaque page pour trouver le bon réglage. Mais ce genre d'outils peut faire gagner beaucoup de temps. Pour le DNS Prefetch il faut que je regarde, merci du conseil!
Pas encore de commentaire
Already Registered? Login Here
Guest
samedi 8 août 2020

Image Captcha

By accepting you will be accessing a service provided by a third-party external to https://www.pulsar-informatique.com/