Стоит ли использовать технику встраивания критически важных стилей для ускорения загрузки страницы сайта?
Приветствую.
Давненько посматриваю в сторону рекомендации по встраиванию в код критически важных стилей для ускорения загрузки первого экрана страницы и тем самым улучшения опыта пользователя. Посматриваю, но не внедряю. Решил разобраться что к чему: сам Google рекомендует это в своих материалах, есть библиотеки, которые помогают выделять такие стили и пр.
Пришел к выводу, что штука эта в некоторых случаях не полезная, а даже вредная. Могу ошибаться. Приведу элементарные расчеты на примере двух вариантов.
Общие данные
Человек посещает 10 страниц с разными шаблонами, не суть важно каких, главное, что компоновка блоков на них чуть разная. Общий вес файла стилей 100 кб, время на загрузку 100 кб 100 мс.
Вариант 1: штатный
Стили для всех шаблонов загружаются раз и одним файлом, а при просмотре каждой следующей страницы данные уже берутся из кэша. При посещении первой страницы сайта загружается 100 кб за 100 мс. Итого на 10 разных страниц имеем расход в 100 кб и 100 мс на работу со стилями.
Вариант 2: встраивание критически важных стилей
У каждого из десяти шаблонов первый экран будет чуть разным, поэтому допустим, что для встраивания будем пользовать 50% кода стилей для каждого из шаблонов, остальной код будет подгружаться другим файлом. Можно сделать разделение на любой процент для расчетов: 10 на 90, к примеру, расход загружаемого объема файла и времени от этого не поменяются — всегда будет загружаться 100 кб и тратиться на это 100 мс. Итого на 10 разных страниц имеем расход в 1000 кб и 1000 мс, что в десять раз больше, чем при штатном варианте.
Выводы
- Даже если сократить объем шаблонов до двух, то преимущество будет не на стороне техники встраивания критически важных стилей для более быстрого отображения первого экрана.
- Если человек переходит по ссылке с анкором не на первый экран, то встраивание критически важных стилей для первого экрана вообще теряет всякий смысл.
- Если много разных компоновок отображения страниц, то встраивание критически важных стилей вообще в какое-то неразумное приключение превращается.
- Я не вижу преимуществ во встраивании критически важных стилей для ускоренной загрузки первого экрана. Для одного посещения страницы преимущество незначительно, разница в несколько десятков или одну-две сотни миллисекунд.
Вопрос
Есть ли у вас какие-то реальные и объективные доводы в пользу использования этой техники?
Дополнительно:
В своих рассуждениях Вы допустили ряд не всегда реалистичных предположений, повлиявших на Ваши выводы.
Итак:
-
время на загрузку 100 кб 100 мс.
- Это если интернет хороший. А хороший интернет далеко не везде. И, будто бы, чем дальше на запад - тем он хужедороже. Я про мобильный интернет. Для хорошего безлимитного интернета эта оптимизация практически бессмысленна (ну разве что пэйдж спид ублажить).
- Эту технику, как правило, используют для оптимизации критически важных страниц. Как правило, главной страницыкаталога. А не для всех страниц, которые могут строиться на 10ти разных шаблонах.
- Суть оптимизации в том, чтобы уместить в первый TCP пакет как можно больше полезной для рендеринга информации. Я уже не помню сколько там точно и лень идти гуглить(всё же загуглил), но там что-то около 14кб (https://habr.com/ru/articles/684836/). Поэтому если Вы пихаете критического CSS на 100кб - то это уже совсем не так полезно. А даже скорее действительно вредно.
Ответы:
Реальные и объективные доводы вы получите при А - Б тестировании.
Причем не тупом через силениум, а на основе профиля посещаемости сайта и типичных маршрутов.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Использование техники встраивания критически важных стилей для ускорения загрузки страницы сайта - это один из способов оптимизации производительности веб-сайта. Эта техника заключается в том, что критически важные стили (которые необходимы для отображения верхней части страницы) встраиваются непосредственно в HTML-документ, а остальные стили загружаются асинхронно или динамически после загрузки страницы.
Преимущества использования этой техники включают в себя ускорение начальной загрузки страницы, улучшение визуальной производительности и улучшение опыта пользователей, особенно на медленных интернет-соединениях или мобильных устройствах.
Однако, есть и некоторые недостатки при использовании этой техники. Например, встраивание критически важных стилей может увеличить размер HTML-документа, что может отрицательно сказаться на скорости загрузки страницы. Кроме того, это может затруднить обслуживание и поддержку стилей, так как они разбросаны по разным частям кода.
Поэтому перед тем как использовать технику встраивания критически важных стилей, следует внимательно взвесить все плюсы и минусы, а также провести тестирование производительности для конкретного веб-сайта. Возможно, для оптимальной производительности лучше использовать другие методы оптимизации, такие как минификация и объединение стилей, кеширование ресурсов и другие.
// Пример встраивания критически важных стилей в HTML-документ body { font-family: Arial, sans-serif; background-color: #f1f1f1; color: #333; } .header { background-color: #007bff; color: #fff; padding: 10px; }