<divelopers>: “Порядок в <head> Как часто вы заглядываете в <head> ваших проектов и п…”

Порядок в <head>

Как часто вы заглядываете в <head> ваших проектов и проверяете, что там происходит? А стоило бы периодически это делать, потому что содержимое и порядок элементов могут негативно влиять на производительность.

Начать стоит с валидности. Внутри <head> допустимы только определённые элементы:

- Один <title>
- Один <base>
- Ноль и более <link>
- Ноль и более <meta>
- Ноль и более <script>
- Ноль и более <style>
- Ноль и более <template>
- Ноль и более <noscript>

При обнаружении любого другого элемента парсер немедленно закрывает <head> и переносит оставшиеся элементы в <body>.

<head>
  <meta charset="utf-8">
  <title>Мой сайт</title>
  <img src="pixel.png">
  <link
    rel="preload"
    href="custom-font.woff2"
    as="font"
    type="font/woff2"
  >
  <link 
    rel="stylesheet"
    href="styles.css"
  >
  <script
    src="script.js"
    defer
  ></script>
</head>
<body>
  <!-- ... -->
</body>

<!-- парсер сделает так: -->

<head>
  <meta charset="utf-8">
  <title>Мой сайт</title>
</head>
<body>
  <img src="pixel.png">
  <link
    rel="preload"
    href="custom-font.woff2"
    as="font"
    type="font/woff2"
  >
  <link 
    rel="stylesheet"
    href="styles.css"
  >
  <script
    src="script.js"
    defer
  ></script>
  <!-- ... -->
</body>

У этого есть разные последствия, потому что от размещения элементов в <head> или <body> меняется место и приоритет в очереди загрузки ресурсов, статус блокировки парсера, нарушается работа скриптов, завязанных на <head>.

Недопустимые элементы в <head> часто появляются при интеграции различных «пикселей», аналитических фреймов и прочих сторонних вставок. Обычно они представлены элементами <img>, <iframe> и <div>.

Инструкции к таким вставками обычно предлагают вставить сниппет в начало <body>, но нередко они попадают в <head> вместе с элементами <script>. Отловить подобные ошибки помогает валидатор HTML.

Другой источник проблем — неверный порядок элементов в <head>. Простая перестановка элементов в нужном порядке может выиграть вплоть до нескольких секунд времени загрузки. Об этом есть отличный доклад Гарри Робертса.

Выявить проблемы с порядком элементов помогут два инструмента:

- ct.css — файл стилей, который делает элементы <head> видимыми и подсвечивает проблемные места;
- capo.js — сниппет, который анализирует содержимое <head> и выводит в консоль текущий и отсортированный порядок.

Отдельного внимания заслуживают менеджеры тегов, через которые на сайты неконтролируемо попадают разные маркетинговые скрипты и засоряют <head>. Подробнее об этом как-нибудь напишу пост.

#html #performance