Имеет ли смысл заинлайнить CSS сразу в HTML?

Question

[Джавараст Скриптович]

(при финальной сборке, а не в процессе разработки)
Собственно, и весь вопрос)
Это уменьшит количество запросов на страницу вдвое, но еще какие есть плюсы и какие минусы?

Answer 1

[Zhandos M]

Имеет смысл инлайнить критический css для отображения первого экрана (верхняя часть сайта) для пользователя. Эта методика является также официальной рекомендацией https://developers.google.com/speed/pagespeed/insights/ .
Основной же css должен подгружаться асинхронно, например используя библиотеку https://github.com/filamentgroup/loadCSS

Comments

[Джавараст Скриптович]

Конструкции:

fetch('GET','/style.css').then(...) // примерно так, точного синтаксиса не помню

Может хватить? Меня не особо радует наличие лишних библиотек для мелочей)

[Zhandos M]

M4mkin_pr0ger, там не особо большая библиотека, а polyfill для поддержки rel=preload для браузеров которые это не поддерживают. Просто код https://github.com/filamentgroup/loadCSS/blob/mast... вставлять в script в начале страницы и всё. Предварительно минифицировав конечно.

Answer 2

[Борис Сёмов]

Если пользователь будет заходить на страницу только один раз, или страница статична и у неё очень длинный expires, это может иметь определённый смысл - один запрос против двух.

Если нет, то при каждом визите, кроме html, будет загружаться и css, а не браться из кеша на стороне браузера, т.е. будет гоняться лишний трафик, и уже не экономия будет, а наоборот.

Также, это имеет уже куда меньше смысла при использовании HTTP/2 т.к. дополнительные запросы имеют меньшие накладные расходы.

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

Answer 3

[sim3x]

Применяется для ускорения показа первого екрана юзеру при гигантских размерах основного цсс

Делается не руками

К поисковой оптимизации никак не относится или идет в минус
К серверной оптимизации не имеет никакого отношения

Comments

[alex4answ]

Подскажите пжалуйста, чем делается ?

Answer 4

[coderxx]

Категорически противопоказано так как ставит крест на дальнейшей поддержке.
А как это уменьшит количество запросов на страницу, за счет чего?

Comments

[Джавараст Скриптович]

Если существует разделение: файлы разработки и файлы для публикации, проблем не будет, или ошибаюсь?
Минус запрос на CSS-файл, ибо он имеется в HTML, вот и все)

[coderxx]

M4mkin_pr0ger, да, если есть такое разделение то поддерживаемость кода разумеется сохранится.
Тут дело не в этом, а в том, что отсутствие запросов к CSS-файлу не даст вообще ничего, никакой оптимизации:)