После MFI Google стал особое внимание уделять оптимизации под мобильные устройства, и как следствие это влияет на все основные факторы отрисовки страницы, которые “проповедуются” оптимизаторами, программистами и верстальщиками. Одним из них является быстрое взаимодействие и обработка браузером стилей страницы— CSS.
Прежде чем браузер сможет отобразить содержимое, он должен обработать всю информацию о стиле и макете для страницы. Браузер полностью обходит файлы js и CSS, несмотря на исключенные правила и классы, которые не используются в теле html.
Как это работает?
Давайте разберем это на примере ресурса https://www.mazda.ru/
В случае с ресурсом mazda.ru к нему подключен основной css-файл main.min.css состоящий, в свою очередь, из древа внутренних css ресурсов.
При анализе использования данных файлов мы обнаружили классы неиспользуемые на страницах сайта, которые в свою очередь обрабатываются браузером при отрисовке страницы увеличивается скорость загрузки ресурса. Операция по устранению данных позволит снизить нагрузку на сервер, ускорить загрузку страницы в браузере и сократить нагрузку на роботов поисковых машин, определяющих валидность верстки и отображения на мобильных устройствах.
Основная проблема CSS-ресурсов вызвана размером файла и содержащимися в нем правилами:
main.min.css — 27 181 строка. При сжатии и удалении лишних (неиспользуемых) правил css мы смогли сократить количество строк до 3 345 для главной страницы. Из чего следует: CSS ресурса включает в себя свод незадействованных правил, которые, в свою очередь, влияют на нагрузку браузера, сервера и интернета конечного пользователя.
В том числе нам удалось сжать данный файл примерно на 30кб, что теоретически сокращает время загрузки сайта на 0,4 сек.
Решение: удаление лишних символов, правил, пробелов и комментариев.
Для сокращения CSS использовали ресурс https://uncss-online.com/
Для анализа и выявления недочетов был использован сервис Google — web.dev
Спасибо!