Umieszczanie <link>ów w <head>
Umieszczanie <link>ów w <head> jest częścią właściwej specyfikacji w budowaniu zoptymalizowanej witryny. Kiedy strona jest ładowana po raz pierwszy, HTML i CSS są parsowane jednocześnie; HTML tworzy DOM (Document Object Model), a CSS tworzy CSSOM (CSS Object Model). Oba są potrzebne do stworzenia wizualizacji na stronie internetowej, co pozwala na szybkie uzyskanie czasu "pierwszego znaczącego malowania". To progresywne renderowanie to kategoria, w której optymalizacyjne witryny są mierzone pod kątem ich wydajności. Umieszczanie arkuszy stylów na dole dokumentu to to, co uniemożliwia progresywne renderowanie w wielu przeglądarkach. Niektóre przeglądarki blokują renderowanie, aby uniknąć konieczności ponownego malowania elementów strony, jeśli ich style się zmieniają. Użytkownik jest wtedy zmuszony do oglądania pustej, białej strony. Innym razem mogą wystąpić błyski nieostylowanej zawartości (FOUC), które pokazują stronę internetową bez zastosowanych stylów.
Umieszczanie <script>ów tuż przed </body>
Znaczniki <script> blokują parsowanie HTML podczas pobierania i wykonywania, co może spowolnić Twoją stronę. Umieszczenie skryptów na dole pozwoli na wcześniejsze sparsowanie i wyświetlenie HTML użytkownikowi.
Wyjątkiem od umieszczania <script>ów na dole jest sytuacja, gdy skrypt zawiera document.write(), ale w dzisiejszych czasach nie jest to dobra praktyka. Ponadto, umieszczenie <script>ów na dole oznacza, że przeglądarka nie może rozpocząć pobierania skryptów, dopóki cały dokument nie zostanie sparsowany. Zapewnia to, że kod, który musi manipulować elementami DOM, nie zgłosi błędu i nie zatrzyma całego skryptu. Jeśli musisz umieścić <script>y w <head>, użyj atrybutu defer, który osiągnie ten sam efekt uruchomienia skryptu dopiero po sparsowaniu HTML, ale przeglądarka może pobrać skrypt wcześniej.
Pamiętaj, że umieszczenie skryptów tuż przed zamykającym znacznikiem </body> stworzy iluzję szybszego ładowania strony na pustej pamięci podręcznej (ponieważ skrypty nie będą blokować pobierania reszty dokumentu). Jednakże, jeśli masz jakiś kod, który chcesz uruchomić podczas ładowania strony, zacznie on być wykonywany dopiero po załadowaniu całej strony. Jeśli umieścisz te skrypty w znaczniku <head>, zaczną one być wykonywane wcześniej - więc na przygotowanej pamięci podręcznej strona faktycznie wydawałaby się ładować szybciej.
Znaczniki <head> i <body> są teraz opcjonalne
Zgodnie ze specyfikacją HTML5, niektóre znaczniki HTML, takie jak <head> i <body>, są opcjonalne. Przewodnik stylów Google nawet zaleca ich usunięcie, aby zaoszczędzić bajty. Jednakże, ta praktyka nadal nie jest szeroko przyjęta, a zysk na wydajności jest prawdopodobnie minimalny i dla większości witryn prawdopodobnie nie będzie miał znaczenia.