Как разделить критический css?

Question

[BoriHagen]

Есть сайт на хостинге. Нужно ускорить его загрузку на стороне клиента. Google Page Speed дет рекомендацию "Устраните ресурсы, блокирующие отображение".

Есть огромный css файл в котором очень много неиспользуемого кода. Насколько я понял, нужно вырезать критическую часть css и загружать ее сразу, а остальное загружать потом. Вопрос состоит в следующем: Как это должно выглядеть? Я вырезал критическую часть css с помошью онлайн сервиса и теперь надо сдалть так, чтобы она загружалась первой, а остальноая часть потом. Типа мне надо разделить большой css фал на два файла и подгружать сперва критический. Но как мне вырезать отдельно некритическую часть? Ведь иначе будет грузиться сперва критический css а потом опять весь большой файл.

Answer 1

[Арсений Матыцин]

1. Средний по адкватности метод (без углубления в суть задачи) — в head вызывать критический CSS, а в подвале после всего остальное.
2. Использовать хак типа такого для остального кода:

<link rel="stylesheet" href="/css/style.css" media="none" onload="if(media!=='all')media='all'" >

, с созданием fallback-а для случая, когда не включен JS.
3. Генерировать вызов через document.write с помощью JS (но это по сути одна из вариаций и насколько я помню опасна тем, что безопасность браузером на такое триггериться, не уверен, поэтому просто прими к сведению).

4. Просто адекватно подойти к генерации стилей и не грузить того, что не должно быть на странице. Читай как хочешь, хоть билд для каждой страницы свой (не самое лучшее, ибо кеш).

UPD: В любом варианте, основной CSS должен грузится в head. А остальной код (если такой есть) какими-то иными способами.

Comments

[BoriHagen]

А можно поподробнее о хаке в пункте 2?

[Арсений Матыцин]

BoriHagen, весь хак прямо перед тобой. Одна из его вариаций.

[BoriHagen]

Арсений Матыцин, Всмысле мне не понятно в чем тут суть, что он делает

[Арсений Матыцин]

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

Лучше воспользуйся первым вариантом. Самую малость получишь варнинг при валидации (на который всем насрать). Он простой и работает в конечном счете почти так же.

[BoriHagen]

Арсений Матыцин, на сайте есть файл стилей который медленно грузится, я правильно понимаю, что надо написать так

<link rel="stylesheet" href="/css/ПРОБЛЕМНЫЙ_ФАЙЛ.css" media="none" onload="if(media!=='all')media='all'" >

[Арсений Матыцин]

BoriHagen, нет, в данной схеме не должно быть «проблемного файла», должен быть «первые по необходимости элементы», например сетка, чтобы сборка сайта на глаза у пользователя не напоминала создание франкенштейна, а затем отдельный файлом все остальное. Вот все остальное и можно грузить таким образом, «отложив» загрузку.

Но при все эффективности данного метода он аморально устарел, так как давно уже принято просто не засирать билд стилей всем, что есть на странице. Под каждый шаблон свой билд. Или вообще динамическая подгрузка стилей на каком-нить JS-фреймворке. ИМХО, лучше всего с этим справляется OctoberCMS со своим combined и может сливать как js, так и css, и более того, билдить из исходников на scss. Из коробки. Нет в целом ничего страшного в том, чтобы просто импортировать код по необходимости. Т.е. разделить на компоненты и линковать их в документ. Да, тут можно перестараться и выстрелить себе в ногу, засрав просто поток запросов, но если у тебя их несколько штук, а в целом на страницах требуется всего ничего описания, помимо сетки и базового конфига, то ну такое.

[BoriHagen]

Арсений Матыцин, дело в том что это готовый сайт на самописной cms, плюс в этом файле стилей очень много всего понатыкано, и разделить важную и неважную часть ручками это геморрой еще тот.

[Арсений Матыцин]

BoriHagen, тут 2 фактора. Наличие желания и оплата за труд.
А тот факт, что проект самописка увеличивает шансы на вменяемое разделение. К тому же на самом деле от движка, если не пытаться на нем или на ЯП реализовать сборку билдов, то вообще этим занимается webpack, как сборщик, или сконфигурированная сборка на gulp. Все, что нужно в конечном виде — просто подключить скомпилированное в шаблоны.

Answer 2

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

Критическую часть вы не загружаете, а размещаете через style в теге head. Общий файл грузите асинхронно.

Comments

[BoriHagen]

Ну а если там css код на 11К символов? Тоже в теге style писать? Это ж капец каждый раз такое грузить)

[Арсений Матыцин]

BoriHagen, сливать в кеш браузера. Иными словами проблема не в том, как такое каждый раз грузить, а как не упустить юзера, который не захотел эту срань грузить первый раз.

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

BoriHagen, ну во-первых у вас надеюсь подключен gzip или аналоги на сервере? Ваши 11К вполне могут превратиться в 2К. Во-вторых есть такой инструмент https://refresh-sf.com/ . И наконец в третих, вы грузите html и критический css одним файлом, это гораздо лучше чем выделять критический css в отдельный файл, т.к. нет задержки на подключение с серверу и не занимается лишний HTTP-поток.