Placer les balises <link> dans le <head>
Placer les balises <link> dans le <head> fait partie des spécifications appropriées pour la construction d'un site web optimisé. Lorsqu'une page se charge pour la première fois, le HTML et le CSS sont analysés simultanément ; le HTML crée le DOM (Document Object Model) et le CSS crée le CSSOM (CSS Object Model). Les deux sont nécessaires pour créer les visuels d'un site web, permettant un temps rapide de « premier affichage significatif ». Ce rendu progressif est une catégorie d'optimisation selon laquelle les sites sont mesurés dans leurs scores de performance. Placer les feuilles de style près du bas du document est ce qui empêche le rendu progressif dans de nombreux navigateurs. Certains navigateurs bloquent le rendu pour éviter d'avoir à repeindre des éléments de la page si leurs styles changent. L'utilisateur est alors bloqué en train de voir une page blanche vide. D'autres fois, il peut y avoir des flashs de contenu non stylisé (FOUC), qui affichent une page web sans aucun style appliqué.
Placer les balises <script> juste avant </body>
Les balises <script> bloquent l'analyse HTML pendant qu'elles sont téléchargées et exécutées, ce qui peut ralentir votre page. Placer les scripts en bas permettra au HTML d'être analysé et affiché à l'utilisateur en premier.
Une exception pour le positionnement des balises <script> en bas est lorsque votre script contient document.write(), mais de nos jours, ce n'est pas une bonne pratique d'utiliser document.write(). De plus, placer les balises <script> en bas signifie que le navigateur ne peut pas commencer à télécharger les scripts tant que le document entier n'est pas analysé. Cela garantit que votre code qui a besoin de manipuler les éléments du DOM ne provoquera pas d'erreur et n'arrêtera pas l'ensemble du script. Si vous avez besoin de placer des balises <script> dans le <head>, utilisez l'attribut defer, qui aura le même effet d'exécuter le script seulement après que le HTML a été analysé, mais le navigateur peut télécharger le script plus tôt.
Gardez à l'esprit que placer les scripts juste avant la balise </body> fermante créera l'illusion que la page se charge plus rapidement sur un cache vide (puisque les scripts ne bloqueront pas le téléchargement du reste du document). Cependant, si vous avez du code que vous voulez exécuter pendant le chargement de la page, il ne commencera à s'exécuter qu'après que la page entière ait été chargée. Si vous mettez ces scripts dans la balise <head>, ils commenceraient à s'exécuter avant - donc sur un cache amorcé, la page semblerait en fait se charger plus rapidement.
Les balises <head> et <body> sont désormais facultatives
Selon la spécification HTML5, certaines balises HTML comme <head> et <body> sont facultatives. Le guide de style de Google recommande même de les supprimer pour économiser des octets. Cependant, cette pratique n'est pas encore largement adoptée et le gain de performance est susceptible d'être minime et pour la plupart des sites, cela ne devrait probablement pas avoir d'importance.