Le test Google PageSpeed [1] « Eliminate render-blocking JavaScript and CSS in above-the-fold content » vous propose de livrer les fichiers JS et CSS après que le HTML soit entièrement chargé – et, ainsi, de ne pas mettre en pause le chargement HTML pour les télécharger.

Pour retarder le chargement de vos fichiers JS [2], vous pouvez soit ajouter le mot clé async ou defer à vos liens de scripts. Async ne va pas garantir qu’ils sont chargés dans le même ordre – ainsi, si vous avez plusieurs scripts qui doivent s’exécuter l’un après l’autre, defer est préférable pour garantir la séquence :

<script defer type="text/javascript" src="./js/mootools-more-1.4.0.1.js"></script>

Pour que le CSS soit chargé après que le HTML ait été complètement transmis, Google propose [3] ce morceau de code à ajouter à la fin de votre HTML, par exemple après la fermeture du tag footer et avant la fermeture du tag body :

</footer>
    <script>
      var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = './style.css';
        var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
      };
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(cb);
      else window.addEventListener('load', cb);
    </script>
</body>

Ceci m’a permis de passer le test Google PageSpeed [1] Eliminate render-blocking JavaScript and CSS in above-the-fold content (avec aussi Leverage browser caching [4]) sur un site web, allant d’un score de 51 sur mobile (Fig 1) à 72 (Fig 2), et de 59 (Fig 3) à 79 sur desktop (Fig 4).