Зачем выносить стили в head?

163

19 июня 2019, 00:20

Знаю что есть такая практика, когда некие части CSS кода выносятся в <head>. Я так понимаю, что это на случай если файл стилей не загрузится. Но какие именно части нужно выносить, и нужно ли вообще это делать?

Answer 1

Если вы проверяли ваш сайт через PageSpeed Insights, то должны были заметить, одной из рекомендаций есть

Убрать js или css который блокирует рендеринг страницы

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

Поэтому, их рекомендуют загружать после, а в head добавить базовые стили через тег style, которые позволят воспринимать содержимое страницы до полной загрузки всех файлов.

Как пример, можно спрятать картинки,svg, рекламные блоки или ограничить их размер.

Answer 2

Если стили будут внизу, то покажется сначала сайт БЕЗ CSS. Потом они загрузятся и выйдет не очень. Писать в head это мировая практика.

Answer 3

Стили можно загрузить почти в любой момент. Размещение в HEAD обусловлено тем, что так их проще найти. Встречал в практике случаи загрузки стилей в конце страницы (можно считать в подошве). Из-за этого сайты начинали "плыть" после полной загрузки.