Удаление неиспользуемых CSS стилей
От автора: рассуждать о монолитных стилях довольно сложно, так как, обычно, CSS файлы часто раздуваются. Удаление неиспользуемых стилей CSS должно перевести ситуацию в управляемое русло. Прежде чем мы начнем искать неиспользуемые стили, стоит отметить, что существует множество других стратегий написания обслуживаемых стилей. Наши стили можно разделить на логические части (макет страницы, кнопки, сетки, виджеты и т.д.) и использовать понятную систему именования (например, БЭМ). Как правило, разработчики делают это еще до того, как ищут неиспользуемые правила. Я думаю, это правильно, ведь стили имеют долгосрочное воздействие.
Еще одна причина, по которой не так часто урезают правила – просто неудобно искать и удалять неиспользуемые стили в чем-либо, что больше маленького веб-проекта. Если контент не статичен, как понять, какие правила используются и где?
Инструмент разработчика Chrome
Оказывается, в инструментах разработчика Chrome уже есть встроенная функция. Я испытал ее на сайте, на котором, как я знал, было много стилей, которые можно удалить. Ощущения были смешанные. Порог входа очень низкий, особенно для разработчиков, которые уже работали с панелью разработчика Chrome. Устанавливать ничего не нужно, это приятно.
Что нужно сделать для проверки стилей на сайте:
Откройте интересующий сайт
Откройте панель разработчика
Перейдите на вкладку audits
Выберите опцию Web Page Performance и запустите
В части результатов будет «Remove unused CSS rules». Если этого нет, значит, у вас нет неиспользуемых стилей. Поздравляю! Результат разбит по стилям. Разбивка не просто по файлам, а по блокам style. Реально полезная функция, так как нам нужны только те стили, которые писали мы. По крайней мере, в рамках этой статьи.
Хорошо ли это?
Я не нашел супер простого способа экспортировать результат из Chrome. Можно копировать прямо из блока, но его сначала нужно развернуть. Это делает разбор результатов немного неудобным. Запуск теста в браузере еще дальше отталкивает нас от работы с кодом, что, возможно, приведет к тому, что мы будем забывать тестировать сайт.
Вывод: для начала полезно, но не долгосрочное решение.
UnCSS
Для поиска неиспользуемых стилей можно задействовать инструменты командной строки. UnCSS – интересный экземпляр. Он вытягивает страницу через phantomJS и ловит стили, вставленные через JS. Я очень хотел попробовать этот инструмент, так как он решал мою проблему, ведь панель разработчика Chrome совсем не связана с редактированием кода. С помощью UnCSS результат можно сохранить прямо в файл, идеально.
Установка
У меня не получилось выполнить npm install uncss на Ubuntu. Ничего серьезного, оказалось, я забыл пару зависимостей. Команды для установки недостающих библиотек, которые я запускал:
Как очистить css от неиспользуемых стилей
В этой статье вы узнаете о том, как сбрасывать CSS в наши дни.
��Мой Твиттер — там много из мира фронтенда, да и вообще поговорим��. Подписывайтесь, будет интересно: ) ✈️
Если честно, то кажется я слишком много и через чур увлеченно забиваю голову всякой нудной чепухой из CSS. Одним из таких моментов является сброс CSS, это возможно тот момент, который забрал у меня слишком много времени за последние годы.
В эпоху современной веб разработки, нам не так то и нужен загруженный сброс стилей или вообще совсем не нужен, поскольку проблемы совместимости CSS в браузерах сейчас встречаются куда реже, чем это было в дни старого доброго IE6. Это был момент времени, когда появились такие реализации сброса стилей в CSS, как normalize.css и спасли нас от ада с бесконечной вознёй при правке стилей. Но эти дни уже прошли и сейчас мы вполне можем доверять браузерам в этом плане, так что подобные подходы к сбросу стилей, в большинстве своём, уже довольно излишне.
Сброс разумных настроек по умолчанию
Мне до сих пор нравится делать сброс, так что я долго и усердно, годами ковырялся, как одержимый в Code golf (прим. это когда побеждает самый короткий и действенный подход в программировании ) стиле на этом направлении. Я всё объясню, что в этом коде где и как, но сначала посмотрите на него целиком:
Ну, а теперь разбираемся
Начинаем мы с box-sizing . Тут я простым и элегантным движением сразу же сбрасываю все элементы и псевдоэлементы на box-sizing: border-box .
Кто-то считает, что псевдоэлементы должны наследовать параметры блочной модели, но я считаю это глупым. Если вы хотите использовать другое значение для box-sizing , то просто укажите его — ну это то, как я делаю, в любом случае. Я написал про box-sizing больше в CSS From Scratch.
После box-sizing , я сбрасываю margin и padding , даже там, где они выставлены дефолтными настройками браузеров. Тут и так всё понятно, так что я не буду уделять этому моменту много внимания.
-
или
, то я хочу, чтобы он выглядел реально как список. Тут главное не переусердствовать, охватив всё, как в предыдущем моменте, что удалит все отступы.
Идем дальше: стили для body . Тут у меня всё просто. Очень полезно указать для body занять весь viewport , даже когда он пуст, делаю я это, выставляя min-height на 100vh . Ещё мне нравится плавный скролл к анкорам, так что тут я выставлю scroll-behavior: smooth .
Ещё, я выставил только два текстовых стиля. line-height на 1.5 , потому что по-дефолту стоит 1.2 , чего откровенно недостаточно в плане доступности и читабельности текста. Так же я выставил text-rendering на optimizeSpeed . Используя optimizeLegibility вы делаете ваш текст приятнее на вид, но можете столкнуться с серьёзными проблемами производительности, такими как задержки в 30 секунд при загрузке, так что я его стараюсь избегать. Хотя, я иногда добавляю его для секций с микротекстом.
Как и с отступами, я сбрасываю стилизацию списков только у элементов, у которых указан class .
Для ссылок без указания класса, я выставлю text-decoration-skip-ink: auto , так что подчеркивание будет рендериться куда читабельнее. Вообще, это можно было бы выставить всем ссылкам, но у меня возникло несколько конфликтов, так что я оставил так, как написано выше.
Дальше идут старые добрые резиновые изображения. Я решил сделать все изображения блочными элементами, потому что, откровенно говоря, жизнь слишком коротка, чтобы мириться с этим мелким, стрёмным отступом снизу и вообще, в реальности, изображения — особенно те, с которыми я работаю — обычно подразумевают под собой блочное поведение.
Мне очень нравится этот трюк в CSS и я наконец-то осмелился добавить его в сброс. Так называемый “lobotomized owl selector” выбирает прямых потомков article и добавляет им сверху внешний отступ в 1em . Это указывает понятную периодичность в потоке контента у article . Вообще, на самом деле, я использую удобную штуку с .flow , сейчас уже почти в каждом проекте. Вы можете больше прочитать про это на 24 Ways. Да и вообще, мне так кажется, что это сейчас мой самый используемый CSS.
Ещё одна вещь, которую я наконец то решился выставить по дефолту это font: inherit для инпутов, которые, проще говоря, делают то, что и должны делать. Хватит уже этого мелкого (mono, в некоторых случаях) текста!
Последнее, но уж точно не менее важное, это один @media запрос, который сбрасывает анимации, переходы и поведенческие настройки для скролла, но только в тех случаях, когда пользователь предпочитает как можно меньше всяких движений на странице. Мне нравится такая штука в сбросе стилей, с побеждающим специфичность селекторов !important , потому что в современных реалиях, если пользователь не хочет видеть лишних переходов и т.п., то он и не должен их видеть, вне зависимости от CSS при сбросе стилей.
Заключение
Вот и всё, вот он маленький и сброс для стилей, который делает жизнь куда проще. Если он вам приходится по вкусу, то смело можете его брать на вооружение! Берите его на GitHub или в NPM.
Как вы избавляетесь от неиспользуемого CSS-кода? Часть 1
Автор статьи, первую часть перевода которой мы сегодня публикуем, хотел бы, чтобы читатели заранее знали о том, что избавление от ненужного CSS — это трудная задача. Если вы это читаете в надежде найти некий инструмент, запустив который, вы сможете узнать о том, какой именно CSS-код можно безбоязненно удалить из вашего проекта, то… Есть подобные инструменты, но их нужно использовать крайне осторожно, так как ни один из них не способен дать достойный ответ на вопрос о неиспользуемом CSS.
Несложно понять, что любому веб-разработчику хотелось бы взять некую утилиту, запустить её, и удалить тот ненужный CSS, о котором она сообщит. Пара минут — и сайт ускорен. Но не всё так просто. Автор этого материала полагает, что к подобным инструмента стоит относиться со здоровым скептицизмом. Ни один из них не лжёт разработчику. Эти инструменты обычно просто не обладают достаточным объёмом информации, позволяющим им выдать результаты, которым можно безоговорочно доверять. Но это не означает, что такими инструментами невозможно пользоваться. Не значит это и того, что от неиспользуемого CSS никак нельзя избавиться. Обсудим это.
Зачем избавляться от неиспользуемого CSS?
Я полагаю, что главную причину, по которой кому-то может понадобиться избавиться от неиспользуемого CSS, можно описать с помощью следующего примера. Предположим, вы пользуетесь CSS-фреймворком (вроде Bootstrap), и в ваш проект попадает весь CSS-код этого фреймворка. А реально в проекте применяется лишь небольшая часть такого кода. Как избавиться от всего ненужного?
Я могу проникнуться чувствами того, кто оказался в подобной ситуации. CSS-фреймворки часто не дают разработчикам простых способов выбора именно тех возможностей, которые применяются в конкретных проектах. При этом доведение исходного кода фреймворка до состояния, идеально соответствующего некоему проекту, может потребовать от команды такого уровня опыта, которого у неё может и не быть. Подобная ситуация уже сама по себе может стать причиной поиска фреймворка.
Предположим, вы загружаете 100 Кб CSS. Я бы сказал, что это много. (В тот момент, когда я это пишу, на сайте css-tricks.com используется около 23 Кб CSS. Здесь имеется довольно много страниц и шаблонов. При этом я ничего особого не делал для того, чтобы уменьшить размер CSS.) Тут у вас возникает подозрение, что некую часть из этого объёма кода вы не используете. А, может быть, вы находите некие доказательства этого. Я тут вижу причину бить тревогу. Если у вас имеется JPG-файл объёмом в 100 Кб, который можно сжать до 20 Кб, обработав его неким инструментом, то это замечательно, и это стоит сделать. Но если нечто подобное сделать с CSS, то подобное гораздо важнее. Дело в том, что CSS загружается в начале загрузки страницы и является ресурсом, блокирующим рендеринг. JPG-файлы такими ресурсами не являются.
Анализ ситуации с помощью инструментов разработчика Chrome
В окне инструментов разработчика Chrome есть вкладка Coverage . С её помощью можно узнать о том, сколько загруженного CSS и JavaScript реально используются на анализируемой странице. Например, сейчас я зашёл на css-tricks.com. Ниже показано то, что я увидел на вкладке Coverage .
Инструменты разработчика Chrome, вкладка Coverage
Здесь я вижу, что не используются 70.7% моего файла style.css . Я так думаю, что ничего плохого в этом нет. Оставшаяся незадействованной часть CSS используется на каких-то других страницах сайта. На этом сайте я не использую некую большую библиотеку стилей. Я сам написал каждую строчку CSS, поэтому я сомневаюсь в том, что в глобальном масштабе сайта 2/3 CSS оказываются не у дел.
Я предполагал, что при работе с вкладкой Coverage можно начать «запись» и побродить по сайту, наблюдая за тем, как процент неиспользуемых ресурсов падает по мере того, как в браузере выводятся различные страницы. Но, к сожалению, при обновлении страницы обновляется и содержимое вкладки Coverage . В результате это средство не особенно полезно в деле выяснения процента использования ресурсов на нескольких страницах. Возможно, это не так лишь в том случае, если анализировать одностраничное приложение.
Мне неприятно это говорить, но анализ сайта с помощью вкладки Coverage оказался практически бессмысленным занятием. То, что я увидел, эти 70.7%, представляет собой ужасную картину, которая играет на моих сомнениях, но ничего конкретного этот анализ мне не даёт, в результате мне остаётся лишь беспокоиться о том, что на моём сайте что-то не так.
Возможно, подобный анализ сайта и будет тем самым механизмом, который наведёт вас на мысль о том, что вам нужно найти и удалить CSS-код, который загружается, но в вашем проекте не используется.
Моя первостепенная проблема
В деле поиска и удаления неиспользуемого CSS-кода меня больше всего беспокоит следующее. Предположим, некто смотрит на результаты анализа и видит неиспользуемые фрагменты CSS.
Неиспользуемые фрагменты CSS
Он думает: «Отлично, удаляю всё лишнее!». Лишнее удаляется, а потом оказывается, что было оно вовсе не лишним, и что его удаление привело к большим проблемам со стилизацией на всём сайте. Вот в чём тут дело: можно быть полностью уверенным в том, что некий CSS-селектор не используется, только если провести изыскания по следующему плану:
- Нужно проверить каждую страницу сайта с помощью инструмента наподобие вкладки Coverage .
- При этом нужно выполнить весь JavaScript-код.
- Сделать это надо со всеми возможными вариантами состояния приложения.
- И, вдобавок, надо всё это проверить и со всеми возможными вариантами используемых медиа-запросов.
Нечто подобное — это слишком сложно для автоматических средств анализа CSS. Они не в состоянии идеально выполнить подобные проверки, особенно если учитывать анализ сайта в ситуации неопределённости. Речь идёт, например, об исследовании проектов в различных браузерных контекстах (разные размеры экранов, разные возможности браузеров, разные браузеры), и об учёте влияния на сайт сторонних библиотек.
А сейчас я хочу показать пример того, как все те проблемы, о которых я только что рассказал, выглядят на практике.
PurifyCSS Online
Я решил попробовать оптимизировать css-tricks.com с помощью ресурса PurifyCSS Online. Ему можно передавать ссылки, а он тут же выдаёт готовый к использованию CSS. Я «скормил» этому сайту css-tricks.com и в моём распоряжении оказался новый CSS-код. Вот что получилось после того, как я этим кодом воспользовался.
Слева — обычный вид css-tricks.com. Справа — результат применения нового, «очищенного» CSS. В этом новом коде недоставало много такого, что нужно для различных страниц сайта
PurifyCSS позволяет провести анализ на основе множества ссылок (что приятно), но на css-tricks.com десятки тысяч ссылок. Многие из них ведут на аналогичные, в плане CSS, страницы, но на каждой из таких страниц может быть что-то такое, что в других местах не используется. Кроме того, у меня появилось такое ощущение, что PurifyCSS не запускает JS-код, так как после «очистки» моего CSS всё, что выводилось на страницы средствами JavaScript, оказалось нестилизованным. Пропали даже стили для псевдоклассов :hover .
Вероятно, я уже рассказал достаточно для того, чтобы вы поняли, что я не случайно так мало доверяю подобным инструментам.
Очистка CSS с помощью PurifyCSS как часть процесса сборки проекта
PurifyCSS, вероятно, чаще используется в роли инструмента, применяемого при сборке проекта, чем в роли онлайн-средства для очистки CSS. В документации проекта есть инструкции по его использованию при применении Grunt, Gulp и webpack. Вот, например, обработка файлов по шаблонам:
Такой подход позволяет добиться гораздо большей точности. Материалы сайта, передаваемые на анализ, могут представлять собой список, в который входит каждый шаблон, каждый фрагмент, используемый для построения страниц, каждый JavaScript-файл. Может оказаться так, что подобный список ресурсов непросто поддерживать, но это позволяет учесть всё, что можно учесть. Это, правда, не относится к содержимому страниц, лежащему в неких хранилищах (вроде блог-постов, которые хранятся в базе данных), и к стороннему JavaScript-коду, но, возможно, это в некоторых случаях и неважно, или, может быть, разработчик способен будет как-то учесть CSS-нужды подобных ресурсов.
В документации к конкуренту PurifyCSS PurgeCSS есть предупреждение, касающееся способа обработки ресурсов, используемого PurifyCSS. А именно, речь идёт о том, что PurifyCSS может работать с ресурсами любых типов, а не только с HTML и JavaScript. PurifyCSS в ходе работы анализирует все слова в файлах и сравнивает их с селекторами в CSS-коде. Каждое слово рассматривается как селектор. То есть — множество селекторов может быть ошибочно признано используемыми на сайте. Например, в текстовом наполнении файла, в обычном предложении, может присутствовать слово, соответствующее некоему CSS-селектору.
Об этой особенности PurifyCSS стоит помнить. Этот инструмент ищет CSS-селекторы в материалах сайта, применяя предельно простой алгоритм. Это, с одной стороны, толковая идея, а с другой — это довольно-таки опасно.
Сервис UnusedCSS
Ручная настройка некоего инструмента, проводимая так, чтобы этот инструмент проанализировал бы каждую страницу, чтобы он рассмотрел её со всех возможных точек зрения, это, конечно, скучная рутина. При этом такая работа должна проводиться на ежедневной основе, так как анализируемые сведения о сайте должны пополняться новыми данными по мере развития проекта. Существует один онлайн-сервис, который называется UnusedCSS. Он самостоятельно обходит страницы сайта, избавляя разработчика от массы однообразной работы. Этому сервису достаточно передать единственную ссылку на сайт.
Я оформил платную подписку на этот сервис и проанализировал с его помощью css-tricks.com. Надо признать, что после того, как я взглянул на результаты, у меня возникло такое ощущение, что выглядят они гораздо точнее, чем то, что мне доводилось видеть раньше.
Анализ css-tricks.com с помощью UnusedCSS. В отчёте говорится о том, что на сайте используется 93% от загружаемого CSS-кода. Мне это кажется близким к истине, так как я вручную написал весь CSS-код для этого сайта
Сервис, кроме того, позволяет загрузить файл с очищенным CSS-кодом и предлагает возможности по управлению содержимым этого файла. Например, это включение и отключение селекторов, которые разработчику хотелось бы или не хотелось бы добавлять в CSS-код. Предположим, разработчик видит имя класса, которое, по мнению UnusedCSS, на сайте не нужно, но разработчик совершенно точно знает о том, что без этого имени класса он обойтись не может. В результате ошибочно признанный ненужным код можно отметить как нужный. Среди других возможностей UnusedCSS можно отметить работу с префиксами и удаление дублирующихся селекторов.
Мне очень понравилось то, что UnusedCSS дал мне гораздо более точные результаты, чем другие инструменты. Однако в данных, выдаваемых этим сервисом, слишком много «шума», и я, к тому же, пока не знаю о том, как включить UnusedCSS в регулярно повторяющийся процесс сборки проекта и вывода его новых версий в продакшн.
Уважаемые читатели! Сталкивались ли вы с проблемой наличия неиспользуемого CSS-кода в своих проектах?
Как удалить неиспользуемые стили из CSS?
Имеется HTML и CSS файл, в котором много неиспользуемых стилей CSS которые хотелось бы удалить в автоматическом режиме и оставить только те стили, которые используются. Как и чем это сделать?
Используйте uncss:
А для сборки, нужно скачать и установить node.js, в проекте создать файлы: package.json, gulpfile.js.
Минимальное содержимое package.json:
В командной строке (лучше бы coneEmu консоль) выполнить установку gulp npm install -g gulp npm install —save-dev gulp
Установить gulp-uncss: npm install —save-dev gulp-uncss
Как удалить лишние CSS стили на сайте
Расскажем о сайте, который достался нам на техническую поддержку. На момент написания статьи сайт уже пережил 3-4 итерации редизайна и содержал в своем коде тучу неиспользуемых CSS стилей. Объем CSS файлов был более 2 Мб и даже в сжатом виде они составляли более 400 Кб, что довольно много. Особенно для мобильных устройств. К тому же, это очень сильно влияло на показатели в Google Pagespeed Insight.
Не буду подробно вдаваться в процесс поиска решения данной задачи. Скажу лишь, что на просторах Рунета актуальной информации не обнаружил. Все как правило упиралось в плагин для FireFox, который на текущий момент не работает. Либо в сервисы качество работы которых, мягко говоря, сомнительное.
Решение нашлось в заграничном сегменте и мы спешим с вами им поделиться.
Хоть разработчики FireFox и убрали возможность поиска лишних CSS стилей в браузере для пользователей, но они оставили ее в версии для разработчиков. Для работы нам понадобится скачать и установить именно ее.
Перед работой по очистке стилей настоятельно рекомендую сделать бекап хотя бы для шаблона сайта, т.к. баги могут выплыть лишь спустя какое-то время. Мы для этой операции делали вообще отдельный шаблон сайта, так удобнее потом сравнивать 2 шаблона: очищенный и исходный.
Алгоритм работы следующий:
1. Если работаете с сайтом на Битрикс, отключаем в админке сайта сжатие и объединение CSS стилей в настройках главного модуля.
2. Открываем FireFox ESR и нажимаем Shift + F2
3. В открывшейся панели пишем csscoverage start
4. Обходим все разделы сайта со всеми возможными шаблонами. Тут смысл в том, чтобы открыть все отличающиеся страницы. Не обязательно открывать 200 карточек товаров, т.к. стили в них скорее всего идентичные.
5. После обхода страниц пишем csscoverage stop
6. Получаем список файлов стилей. Зачеркнутыми будут отмечены стили, которые не используются в работе. Работать с файлом можно прямо в окне браузера, скачать уже очищенный файл нельзя. Впрочем, это и не надо, объясню почему.
Ограничения метода
Данный инструмент не понимает, используется псевдокласс или нет (:before, :after и т.д.). И тут вам нужно смотреть глазами: если стили для класса используются, то и для псевдокласса скорее всего тоже. И наоборот.
Еще csscoverage не воспринимает стили элементов, которые были построены после загрузки страницы. Это могут быть слайдеры, всплывающие окна, формы и т.п. Тут вам нужно примерно ориентироваться в проекте, чтобы понять, нужны они вам или нет.
Все! Сохраняем очищенные файлы стилей. Визуально проходим по шаблону и сравниваем его с исходным. Прогоняем страничку через Google Pagespeed Insight и радуемся полученным результатам!
А если возникли вопросы или что-то пошло не так (Боже упаси!), то мы на связи 24/7 и всегда готовы помочь Вам решить любую проблему!
Похожие публикации:
- Как прижать элемент к низу css
- Как программировать на arduino
- Как работает css flexbox
- Как разместить блок в центре другого блока css
Sniper-CSS: как избавиться от неиспользуемых стилей
В этом небольшом руководстве расскажу, как я перешел от 212 KB CSS к 32.1 KB, тем самым сократив код на 84,91%. Такой результат был достигнут даже при использовании сторонних библиотек и полном сохранении эстетики приложения.
Данный проект создавался с помощью Astro.
Улучшение производительности приложения
Предстоящие этапы работы:
- Переход от сторонних библиотек CSS к пользовательским файлам CSS.
- Анализ и улучшение других ресурсов кода CSS.
- Пересмотр подхода к написанию структуры CSS.
1. Переход от сторонних библиотек CSS к пользовательским файлам CSS
Ежедневная работа фронтенд-разработчика предполагает постоянную работу с библиотеками стилей, например Bootstrap и Tailwind.
Конечно, вы и так продолжите с ними работать. Я просто покажу, как извлечь из них максимальную пользу и повысить производительность приложения.
Если вы когда-либо пытались улучшить метрики сайта, предоставляемые инструментом Lighthouse, то знаете, что в числе прочего он рекомендует сократить неиспользуемый код стилей/скриптов.
Chrome DevTools также предлагает интересный инструмент Coverage. После полного взаимодействия с приложением он помогает выявить вообще неиспользуемые участки кода.
Рекомендую изучить документацию Coverage для лучшего понимания принципов его работы.
Исходная ситуация
В рассматриваемом примере применяется Bootstrap. Прежде всего обращаем внимание на то, что он задействуется не как зависимость проекта, а через CDN, и этому есть объяснение.
Быстро вспомним, что именно мы делаем при работе с Bootstrap CDN.
Согласно официальной документации Bootstrap необходимо установить полный минифицированный пакет (225.97 kB):
Но в данном случае не требуется вся библиотека Bootstrap целиком. Нужно импортировать только действительно необходимое. Для просмотра требуемого содержимого переходим на страницу доставки корневого CSS:
https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/
Для данного проекта потребуются только utilities.css (104.09 kB) и grid.css (68.28 kB).
На текущий момент Coverage выявляет 92% неиспользуемых стилей.
Это слишком много.
Теперь сосредоточимся на Bootstrap. Настало время для представления магического инструмента.
Практическое применение
Можно ли экспортировать только CSS, используемый сайтом? Было бы здорово!
Встречайте новое расширение Chrome Sniper CSS:
Устанавливаем и без труда пользуемся: просто открываем сайт и нажимаем сначала на расширение, а затем на кнопку sniperize . Расширение готово к работе!
Sniper CSS старается собрать все возможные сценарии сайта, такие как различные дисплеи клиента, пользовательские агенты, темные и светлые темы, полная прокрутка страницы, псевдосостояния для каждого элемента и т. д.
Расширение автоматически генерирует и загружает оптимизированный файл CSS.
// Если вы также работаете с Astrojs и VSCode, воспользуйтесь данным регулярным выражением для поиска и замены всех :where(.astro-whatever) на пустое пространство.
// Это позволит удалить все пользовательские классы, добавленные Astro, которые могут нарушить стили.
:where\(\.+([aA-zZ])+-+([aA-zZ])+\)
Результаты
У нас по-прежнему есть предустановленные стили Astro, но зато теперь мы обзавелись файлом Sniper-CSS bootstrap_custom.css .
В начале было 212 KB стилей, а теперь всего 32.1 KB.
Примечание. В результате немного увеличился объем стилей из-за возможного дублирования встроенного кода или локальных стилей.
2. Анализ и улучшение других ресурсов кода CSS
На скриншотах отображаются и другие ресурсы CSS, которые можно улучшить, например Google Fonts.
Можно ли улучшить импорт Google Fonts? Да.
Посмотрим, что вкладка Coverage сообщает о Google Font:
Кажется, что используется все, но это не так. Здесь много бесполезного для нас кода.
В данном случае Google Fonts обеспечивает поддержку Montserrat и MuseoModerno для разных языков.
За дополнительной информацией по этому вопросу можно обратиться к сервису Quora или найти информацию в Google.
Что касается данного примера сайта, здесь не требуется полная поддержка всех языков мира. Только поддержка Latin .
Создаем новый файл fonts.css для применения всех типов насыщенности шрифта, поддерживающих только латинский язык. Размер сокращается почти в 3 раза:
Можно ли улучшить другие ресурсы проекта? Конечно, улучшать можно всегда!
3. Пересмотр подхода к написанию структуры CSS
Ниже — рекомендации по улучшению CSS.
От сервера к локальному контенту
На этапе разработки вы, как обычно, будете задействовать сторонний контент. Однако, закончив проект, применяйте свои пользовательские файлы CSS и конфигурации на основе работы с библиотекой.
Помните об этом. В идеале это разовая задача при попытке улучшить метрики сайта.
На случай потери правил или обнаружения повторов
Расширение Sniper CSS экспортирует весь возможный CSS. Оно отлично справляется, но его все равно приходится улучшать. Попробуйте заменить стили и проверить, все ли на месте.
Постарайтесь хранить ключевые кадры Keyframes и директивы At-Rules в файлах отдельно, чтобы не потерять стили.
Подведение итогов
Сравним показатели Coverage до и после.
До
212 KB стилей при наличии 92% неиспользуемого кода.
После
Теперь 32.1 KB стилей с 26% неиспользуемого кода.
Общий объем CSS сокращен на 84,91%
И есть возможности для дальнейшего сокращения!
Если вы знаете, как добиться 0% неиспользуемых стилей на сайте, скорее делитесь секретом.
- 12 генераторов CSS для работы в 2023 году
- Супербыстрый веб-фреймворк Astro: подробный обзор
- Создание эффектов при прокрутке
Читайте нас в Telegram, VK и Дзен
Как очистить css от неиспользуемых стилей
Удалите неиспользуемый CSS-код
Published on четверг, 2 мая 2019 г. • Updated on пятница, 29 мая 2020 г.
Table of contents
- Как неиспользуемый CSS-код снижает производительность
- Как определить неиспользуемый CSS-код
- Встройте критический CSS-код и отложите некритический CSS-код
- Рекомендации по стекам
- Drupal
- Joomla
- WordPress
В разделе Opportunities (Возможности) отчета Lighthouse перечислены все таблицы стилей с неиспользуемым CSS-кодом с потенциальной экономией 2 КиБ или более. Удалите неиспользуемый CSS-код, чтобы уменьшить количество ненужных байтов, потребляемых сетевой активностью:
# Как неиспользуемый CSS-код снижает производительность
Использование тега — распространенный способ добавления стилей на страницу:
doctype html>
html>
head>
link href="main.css" rel="stylesheet">
.Файл main.css , загружаемый браузером, называется внешней таблицей стилей, поскольку хранится отдельно от HTML-кода, который его использует.
По умолчанию браузер должен загрузить, провести синтаксический анализ и обработать все внешние таблицы стилей, с которыми он сталкивается, прежде чем вывести на экран пользователя любой контент. Браузер не будет пытаться отобразить контент до обработки таблиц стилей, поскольку в них могут содержаться правила, влияющие на стиль страницы.
Каждая внешняя таблица стилей должна быть загружена из сети. Эти дополнительные обращения к сети могут увеличить время ожидания контента.
Неиспользуемый CSS-код также замедляет построение браузером дерева рендеринга. Дерево рендеринга похоже на дерево DOM, за исключением того, что оно также включает стили для каждого узла. Чтобы построить дерево рендеринга, браузер должен пройти по всему дереву DOM и проверить, какие правила CSS применяются к каждому узлу. Чем больше неиспользуемого CSS-кода, тем больше времени браузер может потратить на вычисление стилей для каждого узла.
# Как определить неиспользуемый CSS-код
Вкладка Coverage в Chrome DevTools поможет обнаружить критический и некритический CSS-код. См. раздел «Просмотр используемого и неиспользуемого CSS-кода на вкладке Coverage».
Вы также можете извлечь эту информацию из Puppeteer. См. Page.coverage .
# Встройте критический CSS-код и отложите некритический CSS-код
Используйте процедуру, аналогичную встраиванию кода в тег . Встройте критические стили, необходимые для первой отрисовки контента, в блок тега head HTML-страницы. Затем загрузите остальные стили асинхронно, задав для атрибута rel тега link значение preload .
Подумайте об автоматизации процесса извлечения и встраивания CSS-кода верхней половины полосы с помощью инструмента Critical.
Дополнительные сведения см. в статье «Отложите некритичный CSS-код».
# Рекомендации по стекам
# Drupal
Подумайте об удалении неиспользуемых правил CSS и прикрепите только необходимые библиотеки Drupal к соответствующей странице или компоненту на странице. Более подробно см. в разделе «Определение библиотеки».
# Joomla
Подумайте о том, чтобы сократить количество (удалить или отключить) расширений Joomla, загружающих неиспользуемый CSS-код на вашу страницу.
# WordPress
Подумайте о том, чтобы сократить количество (удалить или отключить) плагинов WordPress, загружающих неиспользуемый CSS-код на вашу страницу.
# Ресурсы
Updated on пятница, 29 мая 2020 г. • Improve article
Table of contents
- Как неиспользуемый CSS-код снижает производительность
- Как определить неиспользуемый CSS-код
- Встройте критический CSS-код и отложите некритический CSS-код
- Рекомендации по стекам
- Drupal
- Joomla
- WordPress