Правильный ли такой подход к подключению css?

Question

[Сергей Хлопов]

Здравствуйте, подскажите пожалуйста. Выполняю оптимизацию одного сайта. Извлёк критический css с помощью инструмента critical, в итоге получается я критический css встраиваю в тег <style>...</style>на странице.
А не критический подключаю через link:

<link href="home.css" media="print" onload="this.media='all'; this.onload=null;" rel="stylesheet">

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

Для главной это - home.css
Для страницы товара - product.css
Для страницы контакты - contacts.css

А если не разделять вот так на файлы, и подключать один общий файл app.css к примеру, то тогда стили будут дублироваться, в файле app.css будут стили которые будут в теге <style>...</style>, хотя может это не сильная проблема, в общем честно говоря запутался я уже немного в том как лучше и что будет эффективнее.

Подскажите пожалуйста как более лучше поступить, заранее благодарю за ответ

Answer 1

[4X_Pro]

Вообще, более правильным является такой вариант:

<link type="text/css" rel="preload" as="style" href="home.css" onload="this.rel='stylesheet'"/>
<script>
// Firefox не грузит стили с preload автоматически, 
// поэтому в конец HTML-кода нужно добавить такое (один раз):
if (navigator.userAgent.indexOf("Firefox")>=0){
var elms = document.querySelectorAll('link[rel=preload][as=style]');
for (i=0; i<elms.length; i++){
elms[i].rel="stylesheet";}}
</script>

Стоит ли разделять стили — сложно ответить однозначно. Когда файлов много, и часть стилей дублируется, сложнее вносить изменения (приходится дублировать их в каждый файл), зато меньше траффика для пользователя и лучше скорость загрузки. Соответственно, тут нужно смотреть, насколько у раздельных файлов размер меньше, чем у общего. Если в 2—3 раза, а сайт требуется модифицировать редко, то можно разделить. Если на сайте то и дело что-то доделывается, то лучше обойтись одним app.css.
И ещё: те стили, которые описаны в теге

Comments

[Сергей Хлопов]

Благодарю вас за ответ.
Я просто использовал такое подключение, из за того что в этом репозитории loadCSS рекомендуют так делать.
И вот ещё ссылка, тут говорится о недостатках preload.
Понял, однозначно тут не сказать разделять на файлы или нет.

Тогда если оставить только один app.css, это мне скорее всего не нужно тогда удалять из него критический css к примеру для главной, а просто критический css вставлять в <style>...</style>, ну и app.css подгружать отложено, в общем буду думать, благодарю вас ещё раз =)