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

Question

[r_g_b_a]

Здравствуйте.
Читаю статьи про реализацию критического css, но в них не почему-то не разбираются важные вопросы:
1) Для какой высоты дисплея должен создаваться критический css? Ведь кто-то заходит с ноутбука с HD-разрешением, а у другого 4к монитор повернутый вертикально. Где золотая середина?
2) Как быть, когда пользователь по якорю попадает на средину, подвал сайта? Ведь в этом случае после оптимизации мы получаем быстро загружающуюся шапку сайта, и отсутствие дизайна на остальной части страницы некоторое время.
3) Прелоадеры и критический css вместе не могу существовать?

Answer 1

[archelon]

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

что выносить в критический css — всегда по ситуации, но имхо основной принцип должен быть не в том, что сначала мы полностью рендерим первый экран, а потом все остальное.
а в том, чтобы в том коротком временном промежутке, пока грузятся стили, не мелькал «голый» текст в столбик.
т.е. прячем второстепенные и служебные элементы, откладываем на потом тени-градиенты с прочими красивостями и т.п. главное — отобразить лейаут, чтобы при полной загрузке контент не прыгал.

3. Прелоадеры и критический css вместе не могу существовать?

critical css нужен, чтобы отобразить сайт практически мгновенно для пользователя, чтобы не пялиться целую секунду на дурацкий прелоадер.

Answer 2

[approximate solution]

Где золотая середина?

Золотая середина это обычно + 1 секция ниже(ей вы перекрываете особо большие экраны).

ноутбука с HD-разрешением, а у другого 4к монитор повернутый вертикально.

Как правило критический css создается с упором на пользователей мобильный девайсов, либо же пользователей с очень плохим интернет соединением. Но 2020 год на дворе, и ваш css в 100кб, для 99% пользователей просто смешон. Большинство статей которые вы читаете про критический css - зарубежные(плохой интернет, + многомиллионный охват аудитории, какой нибудь портал вроде bbc news), если у вас такого охвата нет, и вы "стримите" свой бизнес на Россию - заморачиваться с критическим css не столь продуктивно.

Прелоадеры

Прелоадер нужен как правило, если у вашего сайта загрузка более 3+ секунд, он позволяет снизить коэффициент отказа у пользователя, и убрать агрессию к вам) Если ваш сайт загружается до 3 секунд - прелоадер тоже такое себе.

Answer 3

[Вова Дружаев]

1. делай срез по своей аудитории. Может тебя только с смарт тв смотрят.
2. пробуй Splash screen. Для второй страницы он не нужен будет - т.к. стили уже в кеше
3. см пункт 2