Как удалить неиспользуемый CSS

Это не секрет, что любой сайт будет работать быстрее если в его стилях будут отсутствовать лишние стили и лишний текст. Потому не стоит позволять лишним стилям отяжелять сами сайты. Наоборот нужно стараться увеличить производительность сайт!

Что такое неиспользуемый CSS?

Не важно какой ты опытный верстальщик или просто разработчик, ты можешь случайно допустить ошибку. Это хороший шанс на то, что ты написал стили, от которых по каким-то причинам пришлось отказаться но при этом эти стили остались в документе.

Чаще всего эта проблема возникает с фреймворками такими как bootstrap. Внутри него десятки и сотни стилей, которые реально не используется. Ну а так, это стандартная ситуация – добавили компонент на сайт, а позже решили отказаться от него, и что дальше?

Дальше лишний css остался.

Зачем мне удалять неиспользуемый CSS?

Когда мы загружаем любой сайт, то браузеры сначала скачивают все файлы, а именно картинки, javascript файлы и стили. Дальше браузер начинает разбирать и анализировать эти файлы.

На это он тратит и время, и ресурсы, которые можно было бы сэкономить. И вот тут возникает не задачка, ведь чем больше CSS стилей, тем сложнее браузеру, а значит и времени больше на это нужно потратить.

Кроме того, когда таблицы более чистые их проще поддерживать разработчикам, потому сделайте одолжение для себя и для своих посетителей, и просто откажитесь от неиспользованного CSS.

Как удалить неиспользуемый CSS вручную?

Если ты используешь Google Chrome, то ты явно умеешь использовать DevTools. Это очень удобный инструмент, которые позволяет вам увидеть какой код исполняется на странице, а какой нет, так же он выводит все ошибки ну и конечно же этот инструмент позволяет полностью оптимизировать сайт.

Для удаления лишнего css достаточно выполнить следующие действия:

Открой Chrome DevTools (F12)

В открывшемся окне выберите „Coverage”

как начать очистку css

Дальше страница попросит обновления

используем devTools для очистки css

Выбираем файл, который нам потребуется

выбираем файл css

Ну а дальше видим следующую картину, когда стиль используется то выделяется голубой линией, а когда нет то синей.

неиспользованные селекторы css

А теперь хочу сразу сказать, что все указанные стили, которые выделены синей линией они могут использоваться на других страницах, потому будь аккуратный, когда будешь удалять неиспользуемые стили.

Это у нас был самый простой и самый эффективный случай со стилями, а все потому, потому что ты выбираешь из списка то что ты используешь либо не используешь!

Удаление неиспользованных CSS стилей с помощью программ

Ну не то чтобы программами, просто они тоже, как и в предыдущем случае покажут, что используется, а что нет. Но чаще всего с такими программами тоже круто и эффективно пользоваться, а все потому что они могу проиндексировать сайт и указать что на всех просканированных страницах мы нашли такие стили, ну и вот эти работают, а эти не нужны. Я подготовил небольшой список крутых инструментов, которые пригодятся!

UnusedCSS

UnuserdCSS – Очень простой сайт в использовании. На главной странице вставляем URL своего сайта ну и нажимаем на кнопку «Remove Unused CSS». В следующем окне нужно ввести Email, ну а дальше дождаться, когда они пришлют инструкции и регистрационную ссылку после входа на которую мы увидим уже выделенные стили, которые нам не нужны на сайте, а какие нужны. Вот так это примерно выглядит:

сайт который поможет очистить сайт от лишнего css

Дальше в ручном режиме просто вставляем и удаляем те стили, которые нам не нужны. Но стоит быть аккуратным, чтобы все четко легло, чтобы не затереть лишнего. В общем не забывай о правиле делать бекапы.

Самое крутое то, что у них есть осмотрщик, который уже удалил эти стили и отображает страницы без лишнего css. Кроме того, можно посмотреть на разных размерах дисплеев. И мобильные и планшеты и десктопы.

PurifyCSS

Этот инструмент подойдет для разработчиков на этапе самой разработки. То есть если есть цель удалить css у живого сайта, который уже работает, то так не получится, в таком случае понадобится другой инструмент. А вот этот крутой инструмент сравнивание ваш контент с вашими css-файлами, удаляя селекторы, которые не совпадают.

Один большой изъян заключается в том, что все нужно вручную вносить в белый список css. Ну а это все-таки огромное количество работы и действий. Кроме того, головняк начинается, когда на сайте html формы.

PurgeCSS

Это полнейший аналог предыдущему инструменту. Мне даже кажется, что человек, который делал PurgeCSS был вдохновлен PurifyCSS, но нашел способ сделать его более понятным и интуитивно понятным в использовании. Но возникает все такая же проблема – нужно сначала внести в белый список селектор, а после уже работать с этой программкой. Хочу отметить, что на живом сайте эта штука тоже не работает.

Заключительная часть

Найти инструмент с чем можно очистить свой CSS не тяжело, но стоит понимать, что от программиста к программисту код может сильно отличаться. Один делает максимально правильно и пытается писать идеальный код. Другие люди просто делают это абы как. Представим ситуацию, что код, который используется на сайте подгружается JS, ну или после авторизации, либо даже при каком-то определенным условии.

Что я хочу сказать?

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

Если я был полезным для тебя, то хотелось бы попросить себя сделать репост. Это очень поможет сайту, а так же ты сделаешь для небольшую закладку и не потеряешь эту статью из виду.

Оставьте комментарий