Optimisation du Javascript

[Aurelienazerty]

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:

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

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 .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>

Voilà 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.

[Ndo]

est ce que peut appliquer tout ça à iodasweb ?

[Aurelienazerty]

Inutile, je connais le gars qui est à l'origine de tout le JS de iodasweb, c'est déjà optimisé à mort ! Ce mec avait un tallent fou, je me demande pourquoi vous l'avez laissé partir il y a 3 ans...

[Aurelienazerty]

Il manquait cette ligne :

Code : Tout sélectionner

ExpiresByType application/javascript A2592000

Dans le premier post, du coup les fichiers JS n'étaient pas mis en cache.
Le .htaccess donne ça :

Code : Tout sélectionner

<ifmodule mod_expires.c>
ExpiresActive On
#ExpiresDefault A3600
#ExpiresByType text/html A300
ExpiresByType image/png A2592000
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/gif A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/bmp A2592000
ExpiresByType text/css A2592000
ExpiresByType image/icon A2592000
ExpiresByType image/x-icon A2592000
ExpiresByType image/vnd.microsoft.icon A2592000
ExpiresByType text/javascript A2592000
ExpiresByType application/javascript A2592000
ExpiresByType application/x-javascript A2592000
</ifmodule>

J'ai remplacé les durée (1 mois) et les M (pour depuis la dernière modification du fichier) par A (pour dernier accès au fichier)

[Aurelienazerty]

Mozilla, Cloudflare, Facebook et d'autres proposent BinaryAST

[Aurelienazerty]

Un article intéressant : Les aides au pré-chargement de ressources

[Phoen1x]

Bonjour,

Merci pour le partage ! Les aides au pré-chargement de ressources sont en effet un sujet important pour optimiser les performances web.