Posizionamento dei <link> nel <head>
Mettere i <link> nel <head> fa parte delle specifiche corrette per la creazione di un sito web ottimizzato. Quando una pagina viene caricata per la prima volta, HTML e CSS vengono analizzati contemporaneamente; HTML crea il DOM (Document Object Model) e CSS crea il CSSOM (CSS Object Model). Entrambi sono necessari per creare gli elementi visivi in un sito web, consentendo un rapido tempo di "prima pittura significativa". Questo rendering progressivo è una categoria di ottimizzazione in cui i siti vengono misurati nei loro punteggi di performance. Mettere i fogli di stile vicino alla fine del documento è ciò che proibisce il rendering progressivo in molti browser. Alcuni browser bloccano il rendering per evitare di dover ridipingere gli elementi della pagina se i loro stili cambiano. L'utente rimane quindi bloccato a visualizzare una pagina bianca vuota. Altre volte possono verificarsi lampeggi di contenuto non stilizzato (FOUC), che mostrano una pagina web senza stili applicati.
Posizionamento degli <script> appena prima di </body>
I tag <script> bloccano il parsing HTML mentre vengono scaricati ed eseguiti, il che può rallentare la tua pagina. Posizionare gli script in fondo consentirà all'HTML di essere analizzato e visualizzato all'utente per primo.
Un'eccezione per il posizionamento degli <script> in fondo è quando il tuo script contiene document.write(), ma al giorno d'oggi non è una buona pratica usare document.write(). Inoltre, posizionare gli <script> in fondo significa che il browser non può iniziare a scaricare gli script finché l'intero documento non è stato analizzato. Ciò garantisce che il tuo codice che deve manipolare gli elementi DOM non genererà un errore e non bloccherà l'intero script. Se devi mettere gli <script> nel <head>, usa l'attributo defer, che otterrà lo stesso effetto di eseguire lo script solo dopo che l'HTML è stato analizzato, ma il browser può scaricare lo script prima.
Tieni presente che mettere gli script appena prima del tag di chiusura </body> creerà l'illusione che la pagina si carichi più velocemente su una cache vuota (poiché gli script non bloccheranno il download del resto del documento). Tuttavia, se hai del codice che vuoi eseguire durante il caricamento della pagina, inizierà l'esecuzione solo dopo che l'intera pagina è stata caricata. Se metti questi script nel tag <head>, inizierebbero l'esecuzione prima - quindi su una cache primed la pagina sembrerebbe effettivamente caricarsi più velocemente.
I tag <head> e <body> sono ora opzionali
Secondo la specifica HTML5, alcuni tag HTML come <head> e <body> sono opzionali. La guida di stile di Google raccomanda persino di rimuoverli per risparmiare byte. Tuttavia, questa pratica non è ancora ampiamente adottata e il guadagno di prestazioni è probabilmente minimo e per la maggior parte dei siti non è probabile che faccia la differenza.