Améliorer la vitesse de son site Internet – Nginx, IIS, Apache, php …
« You can’t manage what you can’t measure » – W. Edwards Deming
Par mesurer tu commenceras :
ISIS Performance le dit et le recommande : commencez par mesurer tout ce que vous voulez optimiser. Il est ainsi pour tout ce qui touche l’optimisation de la performance, et notamment pour les sites internet.
Il existe trois outils que je recommande vivement :
Pour des sites non accessibles sur Internet, il y a Google Page Speed en version module pour Chrome ou Firefox. Il s’installe rapidement et donne les mêmes informations.
Comprendre les réponses et les axes d’amélioration :
1- Enable GZIP compression :
– Apache : Nécessite des lignes dans le fichier .htaccess pour utiliser les mog_gzip (apache 2) et mod_deflate (apache 1)
<ifModule mod_gzip.c>mod_gzip_on Yesmod_gzip_dechunk Yesmod_gzip_item_include file .(html?|txt|css|js|php|pl)$mod_gzip_item_include handler ^cgi-script$mod_gzip_item_include mime ^text/.*mod_gzip_item_include mime ^application/x-javascript.*mod_gzip_item_exclude mime ^image/.*mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*</ifModule>
– Nginx : fichier nginx.conf voir http://www.nginxtips.com/how-to-configure-nginx-gzip-compression/
gzip on; gzip_min_length 1100; gzip_buffers 4 32k; gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript; gzip_vary on;
– IIS : se fait dans IIS, voir le lien http://www.codeproject.com/Articles/242133/Making-the-most-out-of-IIS-compression-Part-conf
Conseils Google : https://developers.google.com/speed/docs/insights/EnableCompression
2- Defer loading / parsing of Javascript
– Au maximum, déplacer les fichiers Javascript dans le footer du site. Cela nécessitera éventuellement de recoder le site et certains scripts car la variable jQuery (par exemple) n’existe qu’au chargement du fichier jQuery. Aussi, lors du chargement de la page, cette variable sera inexistante.
– Le seul à placer dans le head est Modernizr (assez rare)
– Tous les scripts de type Google Analytics, Browser Metrics, sont à proscrire dans le head
3 – Minify Javascript :
Réduire le Javascript en utilisant des scripts de minification.
Par exemple : http://refresh-sf.com/yui/
Attention, ne pas remplacer le Javascript Original avec ce contenu ! on préfèrera l’ajout de fichier .min.js
En production, on appellera ces fichiers, au lieu des .js
De même, il faut idéalement réduire le nombre de fichiers appelés.
Sous MAC, on pourra utiliser Codekit, Grunt , Simpless , etc… qui permettent de générer le fichier js/css compressé et réunit en un seul à la volée au fur et à mesure de l’écriture du code.
CSS minifier :
http://tools.w3clubs.com/cssmin/
Visual Studio possède à partir de la version 2013 un plugin pour écrire du Less / js minifié à la volée
4 – Optimize Images
D’une manière générale , il est préférable de fournir des images déjà aux bonnes dimensions par rapport au cadre dans lesquels elles s’affichent.
Par exemple, une image en 2000 x 1000 pour un cadre où l’image fera en réalité 400×200, nécessitera beaucoup de ressources réseau (pour le transfert) et CPU (pour la réduction à l’écran).
Les images doivent aussi être compressées :
– préférer le PNG au GIF
– le JPEG
5 – Techniques de réduction connues
Utilisation des sprites CSS pour les nombreux icônes (toutes les images en une seule, et déplacement d’un masque CSS / html pour n’afficher qu’un bout de l’image http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html
Permet de réduire les appels au serveur et réduire le temps de chargement
Utilisations des Polices de type Font Awesome (pour les icônes également) un peu plus génériques.
Même Chose, avec en plus le poids des icônes en moins. Désavantage, ne tourne pas sur d’anciennes version IE
6 – De très bonnes idées, Good Practice, pour le développement et la réduction du temps de chargement / temps de rendu client
http://browserdiet.com/fr/
7 – Gérer le Cache de façon plus optimisée
– pas bête : Utiliser un Accélérateur HTTP de Type Varnish
– voir comment ajouter les instructions d’expiration du cache client dans Apache et Nginx
Nginx http://www.howtoforge.com/make-browsers-cache-static-files-on-nginx
Apache (vérifier le lancement du module mod_expires) puis ajouter dans .htaccess http://httpd.apache.org/docs/2.2/mod/mod_expires.html
