Shlop
@Shlop
Программист

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

Здравствуйте, подскажите пожалуйста. Выполняю оптимизацию одного сайта. Извлёк критический 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>, хотя может это не сильная проблема, в общем честно говоря запутался я уже немного в том как лучше и что будет эффективнее.

Подскажите пожалуйста как более лучше поступить, заранее благодарю за ответ
  • Вопрос задан
  • 550 просмотров
Пригласить эксперта
Ответы на вопрос 1
XXXXPro
@XXXXPro
Fullstack Web developer
Вообще, более правильным является такой вариант:
<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.
И ещё: те стили, которые описаны в теге
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы