Optimisation site web coté client

La plupart du temps lorsque l’on parle d’optimisation, on pense optimisation côté serveur : requêtes SQL, webservices, batchs…etc. En règle générale L’optimisation a pour but soit un gain de ressources (processeur, mémoire…etc.), soit une amélioration du temps de réponse aux requêtes de l’utilisateur. Cependant pour un site web, ce « ressenti » utilisateur ne dépend pas uniquement de l’optimisation côté serveur, mais également – trop souvent négligé – de celle côté client.

 

Yahoo a créé une page pour les « bests practice » :

http://developer.yahoo.com/performance/rules.html

 

Je traiterais donc principalement dans ce billet la gestion du nombre de requêtes, et notamment l’agrégation et le compactage du code JavaScript et CSS. Je reprendrais donc dans cet article le code source d’un précédent billet (http://blogtechno.novediagroup.com/site-web-statique-avec-internationalisation/), que je tenterais d’améliorer ici :

 

Minimiser le nombre de requêtes HTTP

C’est la règle la plus importante : pour afficher la page web, le serveur a besoin de la page HTML mais aussi des CSS / JavaScript / Images. Dans un site non optimisé, cela peut amener à plus de 50 requêtes en plus de la requête initiale !

 

Le but ici est d’agréger tous les fichiers JavaScript en un seul fichier, et tous les fichiers CSS en un seul fichier. Dans le même temps, les codes JavaScript et CSS vont être compactés.

 

Partie JavaScript

Pour la partie JavaScript nous avons un seul fichier externe « novedia-main.js » qui contiendra tous les fichiers JavaScript de votre page (y compris l’API JQuery).

En bas de votre fichier HTML vous mettez le code suivant :

<div id=’novediaMainJs’><script type= »text/javascript » src= »./js/novedia-main.js »></script></div>

Dans le fichier « novedia-main.js » :

var NovediaMainJs = {

load: function() {

var requires = [‘js/jquery-1.6.2.min.js’, ‘js/jquery-ui-1.8.16.custom.min.js’, ‘js/i18n.js’, ‘js/labels_i18n_fr.js’,
‘js/labels_i18n_en.js’, ‘js/optimisation.js’, ‘js/on_load.js’];

for (var i = 0, len = requires.length; i < len; i++) {

var script = document.createElement(‘script’);
script.type = ‘text/javascript’;
script.src = requires[i];
document.getElementById(‘novediaMainJs’).appendChild(script);

}

}

}

NovediaMainJs.load();

Lors du chargement de la page le script va ajouter les autres fichiers JavaScript mis dans la liste des « requires », dans le div « novediaMainJs ». Donc en développement vous avez ainsi accès à tous les fichiers JavaScript pour structurer et debugger votre code facilement. Mais en « production », tout le code JavaScript sera contenu dans ce fichier final « novedia-main.js ».

 

Partie CSS

Dans le « Head » de votre fichier HTML vous mettez le lien vers votre fichier CSS final :

<link href= »./css/novedia-main.css » rel= »stylesheet » type= »text/css » />

Dans le fichier « novedia-main.css », vous mettez les imports de tous les fichiers CSS de votre page :

@import url(« ./black-tie/jquery-ui-1.8.16.custom.css »);
@import url(« ./template.css »);

En développement vous avez ainsi accès à tous les fichiers CSS pour structurer et debugger votre code facilement. Mais en « production », tout le code CSS sera contenu dans ce fichier final « novedia-main.css ».

 

Agregation et compactage des fichiers JavaScript / CSS

Pour agréger et compacter les fichiers JavaScript / CSS, j’utilise maven avec le plugin YUI [Yahoo User Interface plugin].

La première partie du build maven va compacter les fichiers JavaScript et CSS, puis les agréger (dans le fichier « novedia-main.css » pour les CSS, et « novedia-main.js » pour le JavaScript).

La deuxième partie du build va créer un fichier compressé « xxxx.tar.gz » contenant tous les fichiers statiques de votre site : les fichiers JavaScript et CSS agrégés, les images, les fichiers HTML…etc. Il suffira de décompresser l’archive sur votre serveur de production lors du déploiement.

 

Pour lancer le build :

maven clean install

Vous pouvez télécharger le code source complet, et regarder le POM maven pour la partie agrégation / compactage des fichiers JavaScript / CSS:

http://blog.viseo-bt.com/wp-content/uploads/2013/07/Optimisation-site-web.zip

 

Autres optimisations dans mon exemple

Vous remarquerez dans le code source que j’ai mis en place d’autres « Best Practice » concernant l’optimisation :

  • Mettre les fichiers CSS dans le « head ».
  • Mettre les fichiers JavaScript à la fin.
  • Pas d’expression dans le code CSS.
  • Mettre le code JavaScript et CSS dans des fichiers externes.
  • Pas de scripts dupliqués.
  • Nombre d’éléments DOM réduits au minimum.

 

Nicolas Hérault

Une réflexion au sujet de « Optimisation site web coté client »

  • 9 octobre 2014 à 12 h 16 min
    Permalink

    Il est très important d’optimiser les sites internet de ses clients. Le référencement ne sera que meilleur et plus efficace. Merci pour cet article qui permet de se lancer dans une stratégie d’optimisation cohérente !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *