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

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

  

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

  

Возьмем для рассмотрения примера четыре страницы с разным количеством блоков:  

— 5 блоков;  

— 10 блоков;  

— 15 блоков;  

— все 20 блоков.  

  

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

— надо будет обрабатывать каждую страницу.  

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

— при изменении кода надо будет заново генерировать каждый файл стилей / скриптов, да и вообще это вариант кажется весьма сложным в реализации и поддержке, так как есть свои нюансы.  

  

Камрады, подскажите что с этим можно сделать! Как делаете вы или какие соображения по этому вопросу имеются? 

 Если при верстке используется что-то типа bootstrap, то многие стили действительно могут вообще никогда на сайте не использоваться. Однако опыт говорит, что идти на поводу у Lighthouse и PageSpeed не означает ускорить загрузку сайта. Если сайт уже устоявшийся и на нем будет ближайшее время (год) проводиться работы по стилизации, можно на все однотипные свойства объединить классы, в которых они используются. Например, вместо написания для отдельных классов свойства display: none, собрать все эти классы в одну строчку и ей придать display: none. Тогда будет обработка стилевых файлов быстрее. А разбивка одного файла стилей на несколько может сильно замедлить загрузку и PageSpeed опять будет недоволен. 

 Можно использовать сервис <https://purifycss.online/> или использовать SCSS и разбивку стилей на части.Потом подключать их по мере необходимости. Также создать общий стиль, который используется на всех страницах сайта.  

UPD. Хоть SCSS и может быть полезен при разделении CSS, можно сделать это и с обычным CSS (разделить монолитный CSS на логические блоки и подключать на целевых страницах).