optimisation de site web

Poursuivons la série optimisation de site web, pour améliorer le ressenti utilisateur. Mes 2 articles précédents : Vitesse d'affichage de site web améliorée et Google mod_pagespeed, accélérer Apache, présentaient des techniques et optimisations possibles. Des problèmes demeurent comme la parallélisation des téléchargements de CSS et Javascript. HeadJS est LA solution ?

Head.js est un mini-framework, qui va permettre de contourner certains problèmes, mais avant plantons le décors.

La section HEAD du fichier HTML, est l'endroit le pire pour y placer le chargement des scripts Javascript et des CSS. Ça ralentit tout le processus, d'autant, qu'ils sont souvent volumineux. Si vous placez à la fin du fichier HTML, les résultats avec HTML5 et CSS3 sont erratiques et les "performances" sont identiques !

Sur le site de Head.js, il y a même un test a réaliser :

better user experience

Pour les développeurs de Head.js, combiner les scripts en un seul et même script, n'est pas une bonne solution, car :

  • les browsers modernes parallélisent certains téléchargements
  • si le gros script est modifié, il sera re-téléchargé et l'on perdra le bénéfice du cache client
  • de nombreux frameworks sont hébergés sur des CDN, comme j'en parlais dans mon précédent article
  • l'iPhone 3.x ne sait pas "cacher" des fichiers plus grands que 15Ko et l'iPhone 4 est limité à 25Ko, avant compression ! Donc, avec un seul "gros" script, pas de cache client sur les iPhones

un anneau unique pour les gouverner tous Un anneau unique pour les gouverner tous, c'est ce que propose Head.js, il se charge de télécharger, en parallèle, les scripts. Lui ne pèse que 2.3Ko ! Mais, il permet bien d'autres choses : la détection des possibilités CSS3 du navigateur, il ajoute la compatibilité HTML5 dans tous les navigateurs, il détecte la taille de l'écran, ...

Un outil qui débute, mais, que je vous encourage a utiliser pour rendre la consultation de vos sites plus agréable et plus rapide. Head.js est un bon outil !