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

113
19 июня 2019, 00:20

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

Answer 1

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

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

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

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

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

Answer 2

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

Answer 3

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

READ ALSO
Круговая диаграмма на чистом css

Круговая диаграмма на чистом css

Можно ли сделать подобную круговую диаграмму, только средствами css?

152
Как поснимать checkbox

Как поснимать checkbox

Имеется Чек Бокс вот такого вида, как на него нажать, при помощи, Python + Selenium?

112
Позиционирование блоков css, сдвиг вниз

Позиционирование блоков css, сдвиг вниз

У меня SideList съезжает вниз, здесь все работает нормальноВ чем может быть проблема?

95
Как реализовать сетку?

Как реализовать сетку?

Как с помощью сети bootstrap, реализовать те две колонки (первую выделил на скриншоте), которые выходят за пределы 12 колоночной сетки?

113