Optimiser les performances de votre site internet

Depuis la mise à jour importante de l’algorithme de Google nommée Google MayDay, celui ci prend en compte le temps de chargement des sites internet pour le positionnement dans les SERPs. Une nouvelle bataille est lancé dans l‘optimisation de la performance du site, que ce soit au niveau du code mais également du coté serveur où un véritable travail doit être fait.

Quels sont les outils qui permettent de connaitre la performance du site internet ?

Deux outils principaux nous permettent de visionner cette donnée : Yslow et PageSpeed. Ces deux extensions de Firebug vont effectués un test complet, sur des critères bien défini, et vous attribuer une note à chaque étape. Pour information, Yslow et PageSpeed ont 70% de critères en commun, mais leur pondération au niveau de la valeur d’un élément change.

Pour les utilisateurs de Chrome, Safari, IE, Lynx (Navigateur texte), ou comme moi, qui préfère un site générant les deux rapport de façon clair et détaillé, la solution est : GTmetrix.com

Bref, les petits fous d’entre vous se sont déjà jeté sur URL pour tester leur propre site internet… et voir le résultat, surement bien médiocre mais tout ceci ne sera qu’une histoire ancienne ( évidemment après la lecture de l’article et vous pourrez ainsi brandir votre score haut et fort !

Optimisation du serveur

Compression GZIP

Gzip compresse les éléments à la volée, les envoye au navigateur et les décompresses. Les navigateurs récents sont les seuls capable d’effectuer cette décompression des fichiers, mais ceci ne gène en rien les anciens, qui procéderons de manière standard.
Cette technologie GZIP permet de gagner :

• 10 à 30 % de poids de la page
• Beaucoup de bande passante
• en temps de chargement de la page (tout est lié)

Apache 1.x

Télécharger le module Gzip.

1
2

aptitude update
aptitude install libapache-mod-gzip

Créez un fichier mod_gzip.conf dans /etc/apache/conf.d/ et ajoutez :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<IfModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_can_negotiate Yes
    mod_gzip_static_suffix .gz
    AddEncoding gzip .gz
    mod_gzip_update_static No
    mod_gzip_command_version '/mod_gzip_status'
    mod_gzip_temp_dir /tmp
    mod_gzip_keep_workfiles No
    mod_gzip_minimum_file_size 500
    mod_gzip_maximum_file_size 500000
    mod_gzip_maximum_inmem_size 60000
    mod_gzip_min_http 1000
    mod_gzip_handle_methods GET POST
    mod_gzip_item_exclude reqheader "User-agent: Mozilla/4.0[678]"
    mod_gzip_item_include file .html$
    mod_gzip_item_include file .shtml$
    mod_gzip_item_include file .htm$
    mod_gzip_item_include file .shtm$
    mod_gzip_item_include file .php$
    mod_gzip_item_include file .phtml$
    mod_gzip_item_exclude file .js$
    mod_gzip_item_exclude file .css$
    mod_gzip_item_include file .pl$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/html$
    mod_gzip_item_include mime ^text/plain$
    mod_gzip_item_include mime ^httpd/unix-directory$
    mod_gzip_item_exclude mime ^image/
    mod_gzip_dechunk Yes
    mod_gzip_add_header_count Yes
    mod_gzip_send_vary Yes
</IfModule>

Ensuite, Dans le fichier /etc/apache/modules.conf, ajouter la ligne suivante si elle n’existe pas :

1

LoadModule gzip_module /usr/lib/apache/1.3/mod_gzip.so

Apache 2

Pour Apache 2, le module est activé par défaut et nommée module Deflate

1
2
3
4
5
6
7
8
9
10
11
12

# GZIP / DEFLATE
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
 
# Eviter la compression des images
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png)$ no-gzip dont-vary
 
# Pour que les proxies délivre le bon contenu
Header append Vary User-Agent env=!dont-vary

Puis réactiver les modules :

1
2

a2enmod headers
a2enmod deflate

A noter qu’il est parfois difficile d’effectuer ses manipulations sur un serveur mutualisé. Il existe bien évidemment des hacks avec des php.ini couplés à des .HTACCESS à la racine du site. Je vous invite donc à partager un serveur dédié OVH / DédiBox entre professionnel de l’internet, si confiance il y a

Expires Headers

Il permet d’indiquer au navigateur que certains fichiers peuvent être mis en cache. La durée sera déterminé dans la configuration en seconde.

Mais au final, ça apporte quoi ?

• Moins de requêtes HTTP
• Poids de la page diminué
• Bande passante utilisée est également diminuée

Éviter cette configuration dans un environnement preprod, il serait pénible que les modifications apportées à un document ne soient pas visible immédiatement… mais seulement 2min après !

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Debut Expire headers
<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresDefault "access plus 7200 seconds"
 ExpiresByType image/jpg "access plus 2592000 seconds"
 ExpiresByType image/jpeg "access plus 2592000 seconds"
 ExpiresByType image/png "access plus 2592000 seconds"
 ExpiresByType image/gif "access plus 2592000 seconds"
 AddType image/x-icon .ico
 ExpiresByType image/ico "access plus 2592000 seconds"
 ExpiresByType image/icon "access plus 2592000 seconds"
 ExpiresByType image/x-icon "access plus 2592000 seconds"
 ExpiresByType text/css "access plus 2592000 seconds"
 ExpiresByType text/javascript "access plus 2592000 seconds"
 ExpiresByType text/html "access plus 7200 seconds"
 ExpiresByType application/xhtml+xml "access plus 7200 seconds"
 ExpiresByType application/javascript A259200
 ExpiresByType application/x-javascript "access plus 2592000 seconds"
 ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
</IfModule>

Cache control

le cache control complète le Expires Headers en agissant directement sur les navigateurs compatibles.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
 <FilesMatch "\\.(ico|jpe?g|png|gif|swf|css|gz)$">
 Header set Cache-Control "max-age=2592000, public"
 </FilesMatch>
 <FilesMatch "\\.(js)$">
 Header set Cache-Control "max-age=2592000, private"
 </FilesMatch>
<filesMatch "\\.(html|htm)$">
Header set Cache-Control "max-age=7200, public"
</filesMatch>
# Disable caching for scripts and other dynamic files
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>
</IfModule>
# END Cache-Control Headers

E-tags

Les ETags sont utilisés pour pouvoir différencier deux versions d’un même document. C’est un identifiant de la forme « 65df7x89-cva-d612sd99″, unique pour une URL, qui est transmis entre le navigateur et le serveur dans les requêtes HTTP.

L’intérêt de cet ETag est que le navigateur peut demander au serveur si un document a été modifié.

Si le document n’a pas été modifié, le serveur répond avec « 304 Not Modified » et le navigateur utilisera son cache pour afficher le document. Autrement, le document est téléchargé à nouveau par le navigateur.

A mettre dans le HTACCESS ou le Http.conf

1
2

Header unset ETag
FileETag None

CDN : Content Delivery Network

Le CDN est un ensemble de serveurs géographiquement éloignés les uns des autres qui coopèrent afin de mettre à disposition du contenu ou des données (page web, fichiers multimédia, images …). Vous verrez souvent l’exemple lors du chargement d’une page de grand site e-commerce avec des sous domaine de type cdn1.cdiscount.com. Bref, Cette méthode (très couteuse) permet donc :

• De libérer des ressources serveurs (moins de requête HTTP)
• Gagner en bande passante
• Avoir un service de proximité pour l’internaute (serveurs dispatchés sur le territoire français)

La mise en place d’un CDN est très couteux et requière une expertise dans se domaine. Il existe des prestataires comme Akamai qui propose la gestion d’un service web de haute disponibilité. Bref, on est loin avec notre petit bouiboui

Cependant, nous pouvons mettre en place un « simple CDN » qui permettra de répartir la charge du serveur principale, et de valoriser un flux optimisé de requêtes HTTP. il suffit de mettre en place un second hébergement avec un nom de domaine et d’externaliser ainsi les images, ou les fichiers js/css …
Une autre solution est d’avoir un seul hébergement mais avec 2 sous domaines dont un est réserve pour les requêtes d’images : img.monsite.com. Cela nous permettra donc de délivrer 2x plus de requêtes HTTP que la normale. Vous verrez avec les indications ci-dessous qu’il est inutile d’aller à plus de 2 serveurs ou sous-domaines.

Pour information, ce sont les navigateurs principalement qui bride le nombre de requêtes HTTP :

• Firefox 2.5 : 2 connexions simultanées par domaine
• Firefox 3 : 6 connexion simultanées par domaine
• Internet Explorer 7 : 2 connexions simultanées par domaine
• Internet Explorer 8 : 6 connexion simultanées par domaine
• Opera 9 et Safari 3 : 4 connexions simultanées par domaine
• Opera 10.6 : 16 connexions simultanées par domaine

Pour les utilisateurs d’opéra 10.6, vous augmenter cette donnée en vous rendant le menu outils > Préférences > Avancé. Vous pouvez augmenter le nombre de connexions simultanées jusqu’à 128, de quoi décoiffer . vous devriez donc constater une legère amélioration du temps de chargement

Optimisation du code

Javascript et CSS externalisés

Eviter de mettre votre script JS/CSS directement dans le code. C’est pas propre et ça ralentira votre serveur. De même, la fonction « @import » pour les css est un peu plus lente que la classique « link »

Utiliser le Jquery de Google

Vous allez me dire pourquoi ? Je vous fait la listing de mon argumentaire :

• Les serveurs de Google sont surement plus rapides que celui qui héberge votre site web
• Le poids de la page est diminué
• Economie de bande passante
• Vous utiliser le CDN de google (et oui, google à des serveurs partout !)
• Avec le système de mise en cache et le E-tag présent sur les serveurs de la toile, il est fort possible que le visiteur est déja le JQuery de google en cache

1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

Javascript en bas de page et CSS en haut

Pour éviter de charger le javascript en premier, et ensuite les images du site, il est intéressant et recommandé de mettre le javascript (sans oublier le script Google analytics) en bas de page.

Minimiser le JS

Des outils nous permettent de réduire le poids des JS en quelques clics. Nous allons pas nous priver de gagner 20% facilement ! Penser cependant à faire un backup de vos fichier JS, en cas ou vous seriez amené à le faire évoluer ( vous pensez bien que la version minimisé est assez illisible ). Vous avez le choix entre deux outils, faites-vous plaisir !

• JS minifier
• ou
• JScompress

Minimiser le CSS

Egalement, nous faisons pas les choses à moitié, et nous compressons le CSS avec :

• Clean CSS
• ou
• CSS Optimiser

Utiliser Minify

Minify permettra de compresser, nettoyer et surtout combiner vos fichiers CSS,JS et HTML. Ainsi, au lieu d’avoir plusieurs script JS ( ou CSS), il va les concaténer pour effectuer une et une seul requête HTTP. Pour un site simple, utiliser plutôt les compresseurs classiques ( cleanCSS, JS minifier ), pour un site plus complexe, tournez-vous vers cette solution pratique et simple ( un peu gourmande parfois ). Disons que vous avez maintenant en main, le couteau Suisse du web CSS/JS/HTML.

Pour les possesseurs de WordPress, rien de plus simple, vous pouvez dès à présent télécharger l’extension WP Minify. Son utilisation est très simple, en cas, aidez-vous du tutorial d’utilisation

Optimiser vos images

Pour optimiser les images, je vous recommande une des deux solutions :

• Smush.it
• PunyPNG

Il est à noter que Smushi.it (de Yahoo) est intégré à l’outil Yslow. Ainsi, ouvrez votre Firebug, aller dans la partie Yslow et séléctionner Tools et cliquez sur All Smush.it. Il va vous récupérer toutes les images de la partie courante, et les réduires. Ensuite vous pourrez télécharger le .Zip du résultat optimisé. Vous avez également d’autres outils pour minimifier le JS et les CSS mais ils sont moins performants que ceux proposés plus haut. A vous de voir

Fidèle au poste, la communauté WordPress propose une extension nommée WP Smushit permettant d’intégrer ces capacités d’optimisations directement dans l’interface d’administration sans passer par une application online.

Dimensions des images

Effectivement, le renseignement des dimensions des images permet au navigateur d’allouer directement la place prise par l’image et non de la calculer. Par la meme occasion, il faut éviter de prendre une image original et la réduire à la volée.

Eviter les Erreurs 404

A la bête noire ! Ces fameuses erreurs qui nous font voir rouge ! En effet, les 404 font perdre un temps précieux au serveur ! Pour vérifier, utilisez firebug en mode « réseau », et regarder le code HTTP de la réponse (nommé Statut) !

Attention ! Figurez-vous que le manque de la favicon génère un statut 404 ! Pensez-donc à en mettre une, même basique! Favicon.cc vous donne la possibilité de convertir une image en .ico aux bonnes dimensions, n’attendez-plus !

Utiliser des Sprites CSS

L’utilisation des sprites, permet de diminuer l’impact du temps de latence et le poids des images. En effet, Le poids du sprite généré est inférieur à la somme des images qui le composent ! Bref, une technique d’expert assez facile à mettre en place car il existe de nombreux générateurs de sprites, il suffit uniquement d’uploader les images et le tour est joué. Au niveau des références: Facebook, Google, Amazon utilisent cette technique.

• Le mieux : SpriteMe
• CSS Sprites
• Sprites Generator
• Sprites creator
• Sprites Gen

Conclusion

Les performances web ne sont plus un secret pour vous. Gagnez ainsi plus de 70% de ressources serveurs et de poids des pages en appliquant ( hmm en -1 heure hein ! ) ces petites astuces. Le plus simple étant de les mettre en pratique directement lors du développement.