Размещение <link> в <head>
Размещение <link> в <head> является частью надлежащей спецификации при создании оптимизированного веб-сайта. При первой загрузке страницы HTML и CSS анализируются одновременно; HTML создает DOM (объектную модель документа), а CSS создает CSSOM (объектную модель CSS). Оба необходимы для создания визуальных элементов на веб-сайте, что обеспечивает быстрое время "первой значимой отрисовки". Этот прогрессивный рендеринг является категорией оптимизации, по которой оцениваются сайты в своих показателях производительности. Размещение таблиц стилей в нижней части документа препятствует прогрессивному рендерингу во многих браузерах. Некоторые браузеры блокируют рендеринг, чтобы избежать повторной отрисовки элементов страницы, если их стили изменяются. Пользователь тогда вынужден просматривать пустую белую страницу. В других случаях могут быть вспышки нестилизованного контента (FOUC), которые показывают веб-страницу без примененного стиля.
Размещение <script> непосредственно перед </body>
Теги <script> блокируют синтаксический анализ HTML во время загрузки и выполнения, что может замедлить работу вашей страницы. Размещение скриптов внизу позволит сначала разобрать и отобразить HTML пользователю.
Исключением для размещения <script> внизу является случай, когда ваш скрипт содержит document.write(), но в наши дни использовать document.write() не рекомендуется. Кроме того, размещение <script> внизу означает, что браузер не может начать загрузку скриптов, пока не будет проанализирован весь документ. Это гарантирует, что ваш код, которому необходимо манипулировать элементами DOM, не вызовет ошибку и не остановит весь скрипт. Если вам нужно поместить <script> в <head>, используйте атрибут defer, который позволит добиться того же эффекта запуска скрипта только после анализа HTML, но браузер сможет загрузить скрипт раньше.
Имейте в виду, что размещение скриптов непосредственно перед закрывающим тегом </body> создаст иллюзию более быстрой загрузки страницы при пустом кэше (поскольку скрипты не будут блокировать загрузку остальной части документа). Однако, если у вас есть код, который вы хотите запустить во время загрузки страницы, он начнет выполняться только после загрузки всей страницы. Если вы поместите эти скрипты в тег <head>, они начнут выполняться раньше — так что при заполненном кэше страница будет выглядеть загружающейся быстрее.
Теги <head> и <body> теперь необязательны
Согласно спецификации HTML5, некоторые HTML-теги, такие как <head> и <body>, являются необязательными. Руководство по стилю Google даже рекомендует удалять их для экономии байтов. Однако эта практика до сих пор не получила широкого распространения, и выигрыш в производительности, вероятно, будет минимальным, и для большинства сайтов это, скорее всего, не будет иметь значения.