LightHouse рекомендует убрать часть неиспользованных стилей и скриптов — как это сделать?
Проверил сайт Lighthouse'ом и он мне выдал много разных данных, в том числе и рекомендацию: «убрать неиспользуемые стили и скрипты». Давненько я размышляю над тем как это сделать, но однозначного варианта, который можно было бы взять да и применить, не нахожу, да и вообще там есть такие рекомендации, над которыми стоит весьма сильно призадуматься, но вопрос сейчас не в этом.
Все стили в одном файлы, а скрипты в двух и все это дело грузится на всех страницах. Предположим, что в стилях и скриптах описано 20 блоков, а на той или иной странице может использоваться разное количество блоков в разном порядке.
Возьмем для рассмотрения примера четыре страницы с разным количеством блоков:
— 5 блоков;
— 10 блоков;
— 15 блоков;
— все 20 блоков.
Если для страницы с пятью блоками я удалю из стилей и скриптов данные по 15 неиспользуемым на странице блокам, тогда оценка LightHouse будет выше. Таким образом я могу обработать каждую страницу. Но, как по мне, так этот вариант очень сложно поддерживать по нескольким причинам:
— надо будет обрабатывать каждую страницу.
— для многих страниц будут свои файл стилей и скриптов и из-за этого браузер при открытии каждой страницы будет тянуть эти файлы с сервера, а не из кэша — это расход ресурсов и более медленная загрузка страницы.
— при изменении кода надо будет заново генерировать каждый файл стилей / скриптов, да и вообще это вариант кажется весьма сложным в реализации и поддержке, так как есть свои нюансы.
Камрады, подскажите что с этим можно сделать! Как делаете вы или какие соображения по этому вопросу имеются?
Вы точно уверены что именно это лайтхаус от вас хочет? Что он хочет из общей таблицы стилей убрать те, которые не используются на данной странице? Он конечно умный, я уверен, но чтобы настолько...
Если при верстке используется что-то типа bootstrap, то многие стили действительно могут вообще никогда на сайте не использоваться. Однако опыт говорит, что идти на поводу у Lighthouse и PageSpeed не означает ускорить загрузку сайта. Если сайт уже устоявшийся и на нем будет ближайшее время (год) проводиться работы по стилизации, можно на все однотипные свойства объединить классы, в которых они используются. Например, вместо написания для отдельных классов свойства display: none, собрать все эти классы в одну строчку и ей придать display: none. Тогда будет обработка стилевых файлов быстрее. А разбивка одного файла стилей на несколько может сильно замедлить загрузку и PageSpeed опять будет недоволен.
"А разбивка одного файла стилей на несколько может сильно замедлить загрузку и PageSpeed опять будет недоволен"
Интересное мнение, а каким образом ухудшаться показатели загрузки страницы если при ее рендере будут использоваться только задействованные стили которые необходимы для ее отрисовки, нежели все подряд ? Даже в крайнем случае можно использовать http 2 подключение.
для многих страниц будут свои файл стилей и скриптов и из-за этого браузер при открытии каждой страницы будет тянуть эти файлы с сервера, а не из кэша — это расход ресурсов и более медленная загрузка страницы
weranda, значит если сравнивать показатели загрузки страницы со всеми стилями проекта и только с задействованными для ее отрисовки, то скорость будет хуже при втором варианте? Я к сожалению проверить это не могу, но это мне кажется маловероятно. Если я правильно Вас понял конечно.
weranda, вот это мне и не понятно. "для многих страниц будут свои файл стилей и скриптов и из-за этого браузер при открытии каждой страницы будет тянуть эти файлы с сервера, а не из кэша — это расход ресурсов и более медленная загрузка страницы." - почему в ситуации с одними файлами на весь проект они будут тянуться из кеша, а при разделении файла стилей под каждый тип страниц, они уже из кеша браться не будут. Тут скорее все дело в корректной настройки кеширования, но еще раз уточню, я не разработчик.
почему в ситуации с одними файлами на весь проект они будут тянуться из кеша, а при разделении файла стилей под каждый тип страниц, они уже из кеша браться не будут
Вот такой вот ситуэйшн с файлами в браузерах. Вы путаете серверное кеэширование и кэширование на стороне клиента.
PageSpeed и Lighthouse ориентируются на количество запросов к серверу. Чем больше запросов, тем хуже показатели. Про неиспользуемые стили пишет каждому первому сайту. И опять-таки, на сайты без фреймворков ругаться будет меньше, чем с фреймами, потому что на фреймах написано все для всего, а использоваться может лишь часть. Если заказчику покоя не дает красная зона на PageSpeed, это одно, тут уж надо потешить его красивыми желтыми и зелеными полями. Но видела я сайты с 98 в PageSpeep, которые на любом устройстве грузятся по минуте, и с 9 в PageSpeed, которые мгновенно отображаются. Так что тут смотреть надо, для каких целей добиваться чудо-показателей у google.
Можно использовать сервис https://purifycss.online/ или использовать SCSS и разбивку стилей на части.Потом подключать их по мере необходимости. Также создать общий стиль, который используется на всех страницах сайта.
UPD. Хоть SCSS и может быть полезен при разделении CSS, можно сделать это и с обычным CSS (разделить монолитный CSS на логические блоки и подключать на целевых страницах).
Антон Литвиненко, Создаём основной стиль style.scss + несколько суб.стилей типа personal.scss, news.scss и подклаем когда и куда надо. Потом запускаем какой-нибудь Webpack или через плагины IDE и на выходе имеем нужные CSS стили.
pcmyonelove, и зачем для того чтобы написать отдельные от основного стили scss? Я двумя руками за scss, но в рамках вопроса что я просто буду писать css, что через препроцессоры на выходе получу одно и тоже
Антон Литвиненко, Можно же разделить монолитный CSS на логические блоки и без SCSS. Просто обычно те, кто уже используют SCSS и сборщики, либо пихают всё в один сжатый файл (не одобряю), либо разделяют на логические блоки и подключают на целевых страницах.
Простой
Простой
