Pourquoi placer le JavaScript à la fin et le CSS au début ?
16 mai 2019Lors des tutoriels que j’ai déjà réalisés sur ce blog, je vous disais d’insérer le javascript à la fin du document HTML. Le CSS étant, quant à lui, sollicité au début, dans la partie head. Mais en vous disant cela, je ne vous ai pas expliqué pourquoi il était nécessaire de faire ainsi.
C’est en fait, très simple à comprendre et c’est à cette question que nous allons répondre aujourd’hui.
Le processus de lecture d'une page Web
Les navigateurs lisent une page web comme on lirait un document. Il va donc exécuter le script suivant l’ordre dans laquelle vous l’avez inséré dans votre page. Jusque-là, rien de compliqué.
Ce qui devrait être lu en première est alors le contenu de la page, c’est-à-dire son squelette en HTML, puis son modèle d’affichage en CSS et ses images. C’est tout ce qui est destiné aux visiteurs de la page.
Quant aux scripts Javascript (JS), ce sont des instructions destinées au navigateur. Celui-ci va les traiter en tâche de fond. Le site peut s’afficher sans eux et les internautes n’auront pas de mal à naviguer, même si le JavaScript ne fonctionne pas. Le problème est que le chargement des pages sera alors interminable. Le JS bloquant la lecture. De plus, étant donné que le JS peut modifier ce qui a été écrit en HTML et CSS, pour, par exemple, rendre votre site dynamique, le navigateur se doit de le lire également.
Vous l’aurez compris, écrire votre JS au début de la page fera perdre de lourdes secondes de lecture à votre navigateur, faisant alors ralentir le chargement de la page et augmentant l’impatience de vos internautes. D’autre part, en cas de problème de lecture, cela provoquera une page blanche.
La solution est donc...
Pour optimiser la lecture de vos pages, le navigateur doit lire en premier lieu leur contenu avant de faire une quelconque modification sur celui-ci. Cela évitera également, en cas d’erreurs, une page blanche au chargement interminable.
L’ordre nécessaire est donc l’HTML et le CSS, puis le JS en dernière position dans votre document.
