Monitoring et réseaux sociaux

Comment améliorer la rapidité et l’ergonomie de mon site – 2

Testez gratuitement la performance de votre site web :

Vous souhaitez améliorer votre positionnement sur les moteurs de recherche ou simplement augmenter votre taux de conversion de visiteur en acheteur sur votre site e-commerce voici des conseils pour améliorer la rapidité de votre site Web :

Analyser la rapidité de son site

Comme le suggère le processus WPO :

• – Evaluation
• – Benchmark
• – Monitoring
• – Optimisation

Avant d’optimiser la performance de son site Internet il faut préalablement commencer par l’étape 1, l’évaluation :

Voici des outils qui vous permettront d'évaluer la vitesse de votre site Internet:

Performance, un outil en ligne

Tester la rapidité de votre site Internet en ligne sur http://www.monitoring-transactionnel.com/performance

Vous obtiendrez des résultats comme ceux ci :

1. Voyage SNCF
2. Rue du commerce
3. Le bon coin
4. Google

Page Speed

Page Speed est un plugin pour le navigateur Firefox. Vous pouvez le télécharger ici :

http://code.google.com/intl/fr/speed/page-speed/

Il est nécessaire l'installer le plugin Firebug pour utiliser Page Speed :

https://addons.mozilla.org/fr/firefox/addon/1843/

L'utilisation est très simple.

Démarrez Firefox sur le site que vous souhaitez analyser, dans notre cas : http://www.monitoring-transactionnel.com/

Lancez Firebug en appuyant sur F12 :

Page Speed + Firebug + Firefox

Selectionnez l'onglet Page Speed, puis cliquez sur 'Démarrer l'analyse'.

Dans mon cas, Page Speed m'informe que pour améliorer la performance de mon site il faut absolument:

• Combiner les javascripts
• Spécifier une date d'expiration pour les images
• Minifier le CSS
• Utiliser un domaine sans cookies pour les images

Ensuite en orange, Page Speed me conseil également de :

• Combiner les CSS
• Minifier le HTML
• Utiliser un google analytics asynchrone
• Supprimer le CSS non utilisé
• Raccourcir les sélecteurs CSS

Page Speed vous indique votre score. Garder ce chiffre comme référence afin de pouvoir faire des comparaisons ultérieurement.

Voici une capture en exemple :

Score Page Speed

Yslow

Yslow est un outil très proche de PageSpeed.

Comme PageSpeed c'est un plugin pour le navigateur Firefox. Vous pouvez le télécharger ici :

http://developer.yahoo.com/yslow/

Comme Page Speed, il est nécessaire d'installer Firebug :

https://addons.mozilla.org/fr/firefox/addon/1843/

Lancez Firebug en appuyant sur F12 :

Yslow + Firebug + Firefox

Yslow + Firebug + Firefox

Selectionnez l'onglet Yslow, puis cliquez sur Run Test.

Dans mon cas, Yslow m'informe que pour améliorer la performance de mon site il faut absolument:

• Configurer les ETags pour les javascript, css et les images
• Spécifier une date d'expiration pour les javascript, css et les images
• Utiliser un CDN pour les javascript, css et les images

Ensuite en orange, Yslow me conseille également de :

• faire moins de requête HTTP
• mettre les javascript à la fin du document.

exemple de résultat Yslow

Quelques conseils avant de commencer l'optimisation

L'optimisation de la vitesse d'affichage d'un site internet est une question de bon sens. Voici quatre règles qu'il faut toujours garder à l'esprit :

• Cibler vraiment la page (ou l'ensemble de pages) prioritaire devant être optimisée. Seules les pages  stratégiques méritent d'être optimisées.
• Un site rapide est un site qui ne charge que très peu d’éléments. Si vous avez plusieurs CSS sur votre page essayez de les regrouper. Faites de même pour les javascripts.
• Si vous avez de nombreuses images pour faire des bordures arrondies, des dégradés, des ombres, ... Jetez un oeil aux possibilités offerte par CSS3. Vous pourrez ainsi remplacer de nombreuse petites images par quelques lignes simples de CSS : ombres, bordures arrondies, dégradé, fonte 'non-standard'
• Evitez le plus possible les appels vers des widgets extérieurs (twitter, facebook). Chaque appel à un élément extérieur (javascript, anlytics, css, iframe, webservice, ...) rend votre page complètement dépendante des indisponibilités et des latences de ces éléments.

Améliorer la rapidité de son site en PHP

Il existe des techniques assez simples pour améliorer la rapidité d'un site en PHP.

J'explique dans cet article comment nous avons amélioré la rapidité du site http://www.monitoring-transactionnel.com/ lorsque il était hébergé sur nos serveurs PHP.

Maintenant notre site est hébergé sur un serveur Java, tout le travail d'optimisation serveur est à refaire, mais autant vous faire cadeau des résultats de mes anciennes recherches.

PHP Minfy

http://code.google.com/p/minify/

PHP Minify permet de grouper l'ensemble des CSS(et Javascript) dans un seul fichier.

Il s'occupe également de minifier les CSS (et les JS), c'est à dire d'enlever les commentaires, les espaces, les sauts de lignes...Il s'occupe également de fournir une version compressée (format zip) de votre unique ficher CSS (et JS).

Pour l'utiliser c'est très simple, décompresser l'archive dans votre répertoire php, faîtes pointer votre navigateur dans ce répertoire, et laissez vous guider.

La seule contrainte sera de remplacer vos nombreuses balises css (et javascript) par celles proposées par PHP Minify.

Grâce à cette astuce le score PageSpeed de http://www.monitoring-transactionnel.com/ est passé de 77/100 à 88/100, et le score Yslow de 81/100 à 83/100

PHP Minify

.htacess d'apache

Mettre en cache les images, javascript, css, ...

Pour éviter que votre navigateur télécharge à chaque visite l'ensemble des images, des javascripts, des css, ...      Yslow et Page Speed vous conseille de configurer les caches serveurs.

Pour cela rien de plus simple, avec Apache. Editer le fichier .htaccess qui doit se trouver à la racine de votre site et ajouter :

 # 480 weeks
<filesmatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"="">
Header set Cache-Control "max-age=290304000, public"
</filesmatch>

# 2 DAYS
<filesmatch "\.(xml|txt)$"="">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</filesmatch> 

# 2 HOURS
<filesmatch "\.(html|htm)$"="">
Header set Cache-Control "max-age=7200, must-revalidate"
</filesmatch>

Pour activer la compression gzip :

Afin de réduire le temps de téléchargement de vos pages HTML, on va demander à Apache de faire de la compression.Pour cela il suffit d'ajouter dans le .htaccess les lignes suivantes :

 # Performance boost
SetEnv REGISTER_GLOBALS 0
SetEnv ZEND_OPTIMIZER 1
SetEnv MAGIC_QUOTES 0

# Commenter la ligne ci-dessous si plantage
#php_flag zlib.output_compression on

# Activer le filtre
SetOutputFilter DEFLATE 

# Certains navigateurs ne peuvent pas avoir GZIP (les vieux)
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Certains navigateurs ne peuvent pas avoir GZIP (les vieux)
BrowserMatch ^Mozilla/4\.0678 no-gzip

# On ne veut pas d'IE
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

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

Grâce à cette technique le score page speed de http://www.monitoring-transactionnel.com/ est passé de 88/100 à 91/100 et le score Yslow de 83/100 à 88/100

Vous n'avez plus qu'à mettre en pratique

A bientôt