И снова подключение CSS. Как подключить css на интернет-магазине (12000 строк), разделив логику верно?

Question

[DoubleWish]

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

Есть css файл со всеми стилями (внутри 404, лк, общие стили, фронт сайта и процедура оформления заказа)
Весит 220кБ

На главной по факту из всего этого нужно только 70кБ
На странице со всеми услугами другие 30кБ и там получается примерно 80кБ

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

Comments

[sim3x]

Сколько в сжатом виде?

[DoubleWish]

sim3x, 220 сжатый вес

[Сергей delphinpro]

В очередной раз задам популярный вопрос, на который так и нет однозначного ответа.

И в очередной раз не получите однозначного ответа.

[Pretor DH]

Я бы посчитал 12000 строк слишком длинным/кривым CSS.
Так быть не должно.

Сначала оптимизируйте код. А потом можно делать шаги по оптимизации.

[sim3x]

DoubleWish, соглашусь с PretorDH

Для одной страницы многовато стилей

[DoubleWish]

Pretor DH sim3x, для какой одной страницы? там 20 страниц приблизительно. Стили оптимизированны максимально.

Answer 1

[nepster-web]

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

Скорее всего в вашем случае нет жесткого хайлоада, просто включите gzip сжатие на сервере и сожмите сам css, если он не сжат и этого на долго хватит.

Если очень сильно хочется заморочиться:
- Перейдите на http2 протокол
- Разбейте этот файл на много мелких смысловых файлов, типа (grid.css, account.css, button.css ...)
- Подключайте вместо одного файла 10 мелких, только те, что требует страница (асинхронность http2 порешает)
- Включите кеш, gzip и сожмите файла.

Comments

[nepster-web]

еще раз упомяну, пока у ваз нет реального хайлоада, будет достаточно:
- gzip, cache, сжать css

[DoubleWish]

1) gzip включен
2) css сжат
3) хайлоуд умеренный, 12k уников.

[nepster-web]

DoubleWish, 12k уников. это не хайлоад.
Помню cms DLE лет 5 назад без всяких кешей и сжатий 20к держала и никто о подобной оптимизации и не думал.

В вашем случае вам этого хватит еще на долго.

[DoubleWish]

nepster-web, все же зависит от количества обращений к базе/работе тут с многопоточностью. Я бы лучше со спокойной душой оптимизировал самые важные моменты и был бы доволен, по сути ругань идет только на это от всемиизвестногопоисковика :)

[nepster-web]

DoubleWish, мы всеравно говорим о 220кБ в конце 2017 года, где скорость мобильного интерната вполне способна проглотить пару мб.

Но опять таки, если хочется заморочиться, тогда дробить на много мелких файлов и http2.
И если вообще овер хед, то вынести на отдельный сервак под CDN.
Учитывая если все кеши и сжатия включены, то это уже наверно будет максимум оптимизации. А еще возможно есть таски под тот-же GULP, через которые можно прогнать код и он его оптимизирует. Удалит лишние классы, что-то скомбинирует, что-то сократит.

Что касается инлайн подключения, это скорее всего влияет больше на юзабилити, чем на оптимизацию.

[Одиночка Айс]

nepster-web, то, что кто-то может проглотить 2мб за раз ни о чем не говорит, имейте уважение к остальным пользователям))
DoubleWish, я бы разделял файлы на множество, брал нужные и объединял в один файл, который потом бы и оптимизировал

Answer 2

[Сергей Горячев]

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

Comments

[DoubleWish]

220 - сжатый вариант)
Выделать в инлайновые стили в шапку насколько вообще верно? это же даже не кешируется.

[nepster-web]

DoubleWish, это гугловская заморочка, на нее мало кто обращает внимание. Это сделано с целью, показать что-то пользователю, пока идет загрузка.

Это особо не на что не влияет.

[DoubleWish]

nepster-web, 220 не так много и логику даже можно разделить реально на разные разделы (индексируемые/неиндексируемые). Толк от производительности неиндексируемой части для общих показателей сайта не особо важен, ведь так?

[nepster-web]

DoubleWish, если интересуют именно очки гугла, вам нужно пересмотреть архитектуру вашего css, сбилдить какой-то файл, типа хидер + то, что нужно, чтобы его корректно отобразить и отредерить его инлайново. КПД будет идти куда-то в 0, но очки получите.

[DoubleWish]

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

[alvvi]

nepster-web, вообще-то влияет, предполагается, что остальной CSS подгружается асинхронно, то есть пользователь его не ждет.

[nepster-web]

DoubleWish, тут скорее идет обсуждение "оптимизировать уже оптимизированное", так-как вы выполнили основные задачи по сжатию и кешу.

[nepster-web]

Илья Ростопка, этого можно добиться с помощью библиотек на js, которые будут его подгружать в самом низу страницы.

Но тут есть большое но, у пользователя будут блики дизайна сайта, что мне лично не нравится.

И снова тут вопрос идет об оптимизации уже оптимизированного. Там где-то я описывал вариант с http2 и мелкими файлами + CDN с друго-го сервака, чтобы еще в несколько потоков вписаться.

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

Answer 3

[Андрей Федосеев]

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