LightHouse рекомендует убрать часть неиспользованных стилей и скриптов — как это сделать?

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

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

Возьмем для рассмотрения примера четыре страницы с разным количеством блоков:
— 5 блоков;
— 10 блоков;
— 15 блоков;
— все 20 блоков.

Если для страницы с пятью блоками я удалю из стилей и скриптов данные по 15 неиспользуемым на странице блокам, тогда оценка LightHouse будет выше. Таким образом я могу обработать каждую страницу. Но, как по мне, так этот вариант очень сложно поддерживать по нескольким причинам:
— надо будет обрабатывать каждую страницу.
— для многих страниц будут свои файл стилей и скриптов и из-за этого браузер при открытии каждой страницы будет тянуть эти файлы с сервера, а не из кэша — это расход ресурсов и более медленная загрузка страницы.
— при изменении кода надо будет заново генерировать каждый файл стилей / скриптов, да и вообще это вариант кажется весьма сложным в реализации и поддержке, так как есть свои нюансы.

Камрады, подскажите что с этим можно сделать! Как делаете вы или какие соображения по этому вопросу имеются?
  • Вопрос задан
  • 412 просмотров
Пригласить эксперта
Ответы на вопрос 2
BormotunJedy
@BormotunJedy
Верстальщик
Если при верстке используется что-то типа bootstrap, то многие стили действительно могут вообще никогда на сайте не использоваться. Однако опыт говорит, что идти на поводу у Lighthouse и PageSpeed не означает ускорить загрузку сайта. Если сайт уже устоявшийся и на нем будет ближайшее время (год) проводиться работы по стилизации, можно на все однотипные свойства объединить классы, в которых они используются. Например, вместо написания для отдельных классов свойства display: none, собрать все эти классы в одну строчку и ей придать display: none. Тогда будет обработка стилевых файлов быстрее. А разбивка одного файла стилей на несколько может сильно замедлить загрузку и PageSpeed опять будет недоволен.
Ответ написан
@pcmyonelove
Можно использовать сервис https://purifycss.online/ или использовать SCSS и разбивку стилей на части.Потом подключать их по мере необходимости. Также создать общий стиль, который используется на всех страницах сайта.
UPD. Хоть SCSS и может быть полезен при разделении CSS, можно сделать это и с обычным CSS (разделить монолитный CSS на логические блоки и подключать на целевых страницах).
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы