Стоит ли использовать технику встраивания критически важных стилей для ускорения загрузки страницы сайта?

Question

[weranda]

Приветствую.

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

Пришел к выводу, что штука эта в некоторых случаях не полезная, а даже вредная. Могу ошибаться. Приведу элементарные расчеты на примере двух вариантов.

Общие данные
Человек посещает 10 страниц с разными шаблонами, не суть важно каких, главное, что компоновка блоков на них чуть разная. Общий вес файла стилей 100 кб, время на загрузку 100 кб 100 мс.

Вариант 1: штатный
Стили для всех шаблонов загружаются раз и одним файлом, а при просмотре каждой следующей страницы данные уже берутся из кэша. При посещении первой страницы сайта загружается 100 кб за 100 мс. Итого на 10 разных страниц имеем расход в 100 кб и 100 мс на работу со стилями.


Вариант 2: встраивание критически важных стилей
У каждого из десяти шаблонов первый экран будет чуть разным, поэтому допустим, что для встраивания будем пользовать 50% кода стилей для каждого из шаблонов, остальной код будет подгружаться другим файлом. Можно сделать разделение на любой процент для расчетов: 10 на 90, к примеру, расход загружаемого объема файла и времени от этого не поменяются — всегда будет загружаться 100 кб и тратиться на это 100 мс. Итого на 10 разных страниц имеем расход в 1000 кб и 1000 мс, что в десять раз больше, чем при штатном варианте.


Выводы

• Даже если сократить объем шаблонов до двух, то преимущество будет не на стороне техники встраивания критически важных стилей для более быстрого отображения первого экрана.
  
  
• Если человек переходит по ссылке с анкором не на первый экран, то встраивание критически важных стилей для первого экрана вообще теряет всякий смысл.
  
  
• Если много разных компоновок отображения страниц, то встраивание критически важных стилей вообще в какое-то неразумное приключение превращается.
  
  
• Я не вижу преимуществ во встраивании критически важных стилей для ускоренной загрузки первого экрана. Для одного посещения страницы преимущество незначительно, разница в несколько десятков или одну-две сотни миллисекунд.
  

Вопрос
Есть ли у вас какие-то реальные и объективные доводы в пользу использования этой техники?

Comments

[Вадим]

В своих рассуждениях Вы допустили ряд не всегда реалистичных предположений, повлиявших на Ваши выводы.
Итак:

1. 
   

   время на загрузку 100 кб 100 мс.

   - Это если интернет хороший. А хороший интернет далеко не везде. И, будто бы, чем дальше на запад - тем он хуже\дороже. Я про мобильный интернет. Для хорошего безлимитного интернета эта оптимизация практически бессмысленна (ну разве что пэйдж спид ублажить).
   
   
2. 
   Эту технику, как правило, используют для оптимизации критически важных страниц. Как правило, главной страницы\каталога. А не для всех страниц, которые могут строиться на 10ти разных шаблонах.
   
   
3. 
   Суть оптимизации в том, чтобы уместить в первый TCP пакет как можно больше полезной для рендеринга информации. Я уже не помню сколько там точно и лень идти гуглить(всё же загуглил), но там что-то около 14кб (https://habr.com/ru/articles/684836/). Поэтому если Вы пихаете критического CSS на 100кб - то это уже совсем не так полезно. А даже скорее действительно вредно.
   
   

[Виталий Першин]

Критический css можно составить буквально из десятка свойств, чтобы зафиксировать в нужных позициях нестабильные блоки, 100кб css это будет явный перебор

[imko]

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

Answer 1

[Владимир Коротенко]

Реальные и объективные доводы вы получите при А - Б тестировании.
Причем не тупом через силениум, а на основе профиля посещаемости сайта и типичных маршрутов.