@Shlop
critical, в итоге получается я критический css встраиваю в тег <style>...</style>на странице.А не критический подключаю через link:
<link href="https://qna.habr.com/q/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>, хотя может это не сильная проблема, в общем честно говоря запутался я уже немного в том как лучше и что будет эффективнее.
Подскажите пожалуйста как более лучше поступить, заранее благодарю за ответ
Решения вопроса 0
Ответы на вопрос 1
@XXXXPro
<link type="text/css" rel="preload" as="style" href="https://qna.habr.com/q/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.
И ещё: те стили, которые описаны в теге