Optimisation du Javascript
Publié : décembre 6, 2011, 4:47 pm
Amis developpeurs web, vous utilisez régulièrement du javascript dans vos pages, et vous forcément été confronté à un moment où un autre à des problèmes de performances. Ce topic est là pour vous. Faute de temps, je ne fais pas d'article pour le moment, mais ça pourrait venir. Voilà quelques trucs que j'ai utilisé sur le site de la team.
Alors tout d'abord, au nouveau des outils, pour savoir si votre site est performant ou non, rien de mieux qu'un outil de mesure, là je vous conseille l’excellent pageSpeed de google qui peut aussi bien fonctionner sous forme d’extension et en ligne à l'adresse suivante : https://developers.google.com/pagespeed
PageSpeed va analyser votre page et vous donner une note sur 100 et quelques conseils.
Les plus courants concernent l'utilisation de sprites pour les images et le regroupement de js en un seul fichier. Pour le site de la team, j'ai fais un script php qui va ouvrir une liste de fichier js pour les regrouper en un seul.
Seconde chose très rapide à mettre en œuvre, c'est la compression gzip en modifiant son .htacess:Source: http://betterexplained.com/articles/how ... mpression/
Ensuite, un peu de cache ne mange pas de pain non plus, là pareil, ça se fait dans le .htacessVoilà pour les "bases", maintenant niveau javascript lui même, LE truc qui optimise pas mal, c'est un compresseur de javascript. ça n'a l'air de rien, mais outre la taille, avoir un script "minifié" boost pas mal les perfs. Pour ça, rien de mieux que Closure Compiler de google : http://closure-compiler.appspot.com/home
Enfin, dernier point, le chargement asynchrone des scripts. Pour ce faire, je vous invite à lire cet article Chargez Jquery en asynchrone avec Head.js. Là aussi le gain de perf est assez importante.
Bref, si vous avez d'autre truc, n'hésitez pas à faire partager.
Alors tout d'abord, au nouveau des outils, pour savoir si votre site est performant ou non, rien de mieux qu'un outil de mesure, là je vous conseille l’excellent pageSpeed de google qui peut aussi bien fonctionner sous forme d’extension et en ligne à l'adresse suivante : https://developers.google.com/pagespeed
PageSpeed va analyser votre page et vous donner une note sur 100 et quelques conseils.
Les plus courants concernent l'utilisation de sprites pour les images et le regroupement de js en un seul fichier. Pour le site de la team, j'ai fais un script php qui va ouvrir une liste de fichier js pour les regrouper en un seul.
Seconde chose très rapide à mettre en œuvre, c'est la compression gzip en modifiant son .htacess:
Code : Tout sélectionner
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
Ensuite, un peu de cache ne mange pas de pain non plus, là pareil, ça se fait dans le .htacess
Code : Tout sélectionner
<ifmodule mod_expires.c>
ExpiresActive On
#ExpiresDefault A3600
#ExpiresByType text/html A300
ExpiresByType image/png A864000
ExpiresByType image/gif A864000
ExpiresByType image/jpeg A864000
ExpiresByType image/gif A864000
ExpiresByType image/jpg A864000
ExpiresByType text/css M2592000
ExpiresByType image/x-icon A4320000
ExpiresByType text/javascript M2592000
ExpiresByType application/x-javascript M2592000
</ifmodule>
Enfin, dernier point, le chargement asynchrone des scripts. Pour ce faire, je vous invite à lire cet article Chargez Jquery en asynchrone avec Head.js. Là aussi le gain de perf est assez importante.
Bref, si vous avez d'autre truc, n'hésitez pas à faire partager.