ZeroPT
@ZeroPT

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

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

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

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

Но как правильно разделить, для кеширования всего этого дела, если для оптимизации загрузки мы сначала грузим первую часть css (чтобы отображалось все, что попало в первый экран), а затем внизу другую. И как быть с уникальными блоками, которые могут быть расположены только на отдельной странице?
  • Вопрос задан
  • 250 просмотров
Пригласить эксперта
Ответы на вопрос 3
nepster-web
@nepster-web
Преждевременная оптимизация это не очень хорошо.
Обычно за каждый байтом гоняются на высоких нагрузках.

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

Если очень сильно хочется заморочиться:
- Перейдите на http2 протокол
- Разбейте этот файл на много мелких смысловых файлов, типа (grid.css, account.css, button.css ...)
- Подключайте вместо одного файла 10 мелких, только те, что требует страница (асинхронность http2 порешает)
- Включите кеш, gzip и сожмите файла.
Ответ написан
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
А я бы собрал в один файл, сжал, оптимизировал и закэшировал все.
220 кб не так много по сути, тем более, загрузится только 1 раз.
Ну, за исключением части, которая требуется для PageSpeed.
Ответ написан
Если уж сильно хочется, то разбить: сетку, кнопки, типографику и адаптив в один файл в head, морду, карточку, листинги, инфо. страницы в другие файлы перед закрывающим /body, возможно прелоадить их в том же head. Ну и кэш, хттп/2 (вариативно), минифицировать... мастхев боян.
Да и правки не так жестко будет вносить.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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