Стоит ли загружать не основной CSS в конце страницы?

Question

[Jack Daniel's]

Есть один CSS файл со следующим содержанием (пример):

#one {
  width: 50px;
  height: 50px;
  background: red;

  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
}
#two {
  width: 50px;
  height: 50px;
  background: blue;

  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
}

Можно ли разделить данный файл на две части, например:

Файл one.css (основной), ссылка на который в начале страницы

#one {
  width: 50px;
  height: 50px;
  background: red;
}
#two {
  width: 50px;
  height: 50px;
  background: blue;
}

А вот two.css, который загружается в конце страницы

#one {
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
}
#two {
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
}

Или все-таки не стоит разделять файл на несколько частей?

Answer 1

[inDeepCode]

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

Answer 2

[Сергей Жубартович]

Все зависит от размеров самой страницы и css.
Я, например, часто верстаю лендинги. Основной файл стилей подгружаю сразу, а стили для fancybox того же перемещаю в конец страницы, это реально ускоряет загрузку

Answer 3

[De YURII]

Сделайте box-shadow отдельным классом и будете добавлять когда надо.

.shadow-class {
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
}

<div id="one" class="shadow-class"></div>

Answer 4

[Валера Удав]

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

Если стили обращены к элементам которые изначально не видимы (допустим модальные окна которые вызываются при клике), то такие стили вполне себе можно подключить и в конец файла. Но все таки лучше так не делать или делать только в крайних случаях когда CSS реально сильно замедляет загрузку и при этом является стилем элемента который виден не сразу.

Comments

[Jack Daniel's]

Вы не совсем поняли вопрос.

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

[Валера Удав]

Jack Daniel's: думаю стоит к этому прибегать только в случае реального прироста производительности, хотя я почти уверен что подобные стили будут занимать ничтожный вес, а вот скачек в загрузке сначала одного стиля а потом другого уже будет заметен глазу киента что врятли вызовет положительный фидбек