Не пропусти
Главная » Интернет новичку » Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в CSS файле вашего сайта, создание, продвижение и заработок на сайте

Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в CSS файле вашего сайта, создание, продвижение и заработок на сайте

>

Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в CSS файле вашего сайта

Здравствуйте, уважаемые читатели блога Это небольшая заметка из серии «самому себе на память». Возникла идея убрать лишние строки из файла стилей. За семь лет существования блога много чего поменялось, но строки в файлике STYLE.CSS оставались (на всякий случай или просто забывал их убирать). Сейчас мне показалось, что он стал слишком много весить, а посему возникла идея его почистить.

Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в CSS файле вашего сайта, создание, продвижение и заработок на сайте

Делать это вручную довольно сложно, да и не нужно. Есть способы данный процесс автоматизировать. Часть из них у меня не сработала, за что-то нужно было платить и я посчитал это излишним. В итоге я воспользовался полуавтоматическим методом, о котором и напишу в ближайших нескольких абзацах. Забегая вперед скажу, что уменьшить размер файла CSS удалось чуть ли не в два раза, что меня даже несколько удивило.

Варианты поиска ненужных для работы сайта CSS стилей

Как-то я уже писал, как объединить все файлы стилей в WordPress в один. По сути, нужно просто отключить файлы стилей некоторых плагинов, которые автоматом их добавляют между тегами Head в код каждой страницы сайта. Ну, а строки со стилями из этих файлов нужно перенести в основной — у меня он называется STYLE.CSS и живет в папке с используемой темой оформления.

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



В сети я нашел несколько рекомендуемых для этого дела плагинов. Остановился на плагине для Фаерфокса под названием Dust-Me. Он в реальном времени делает разбор открытой в браузере страницы мгновенно выявляя те селекторы CSS, которые оказались не используемыми для ее отрисовки.

Но этого, как вы понимаете, мало для того, чтобы выносить вердикт этим селекторам. Ведь они могут использоваться на других типах страниц вашего сайта. Что делать? Проверять их все вручную? Вовсе нет. Dust-Me умеет работать с картой вашего сайта вида сайтмар xml — достаточно будет только указать путь до нее:

Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в CSS файле вашего сайта, создание, продвижение и заработок на сайте

Как видите, у меня в sitemap.xml около 1000 страниц и плагин успешно начал их сканирование. Примерно через сотню другую страниц он у меня затыкался и приходилось нажимать на паузу, а потом его повторно запускать.

Данный метод всем хорош, ибо позволяет проверить абсолютно все страницы своего сайта, чтобы точно знать, что лишние CSS селекторы нигде не используются и не понадобятся. Проблема в том, что Dust-Me для моего STYLE.CSS в итоге выдал ошибку при показе неиспользуемых строк (селекторов). Может быть ему не понравилась его компрессия или еще что помешало, но факт остается фактом.

Далее я зашел на платный онлайн-сервис Unused-Css.com, где зарегистрировался и указал Урл своего сайта. Они обещали в течении нескольких часов его просканировать и прислать отчет по почте. Полный вариант нового (очищенного) CSS файла стоит 25$, что, по-моему, очень дорого.



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

Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в CSS файле вашего сайта, создание, продвижение и заработок на сайте

Суть метода удаления неиспользуемых стилей заключается в следующем:

  1. Открываете содержимое вашего файла стилей, например, загрузив файлик STYLE.CSS (или как он там у вас обзывается) по ФТП к себе на компьютер. Копируете все его нутро в буфер обмена и вставляете в окно верхнего текстового поля на приведенной странице сервиса.
  2. Проделываете ряд итераций с помощью браузера Хром и инструментов разработчика в нем спрятанных (открывается панель инстументов, например, по нажатию на F12 на клаве).
  3. Получаете на выходе «чистый» CSS код, которым можно заменить старое содержимое файлика стилей.

Методика очистки CSS файла от совсем ненужных селекторов

Вся соль как раз в манипуляциях проводимых в браузере. Открываете сначала в нем любую страницу сайта, запускаете «инструменты разработчика» (F12) и проделываете следующее: «Audits» → «Reload Page and Audit on Load» → «Run» → разверните «Web Page Performance» → разверните «Remove unused CSS rules» → разверните ваш CSS файл → скопируйте все что появилось в буфер обмена.



Выглядит все это примерно так:

Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в CSS файле вашего сайта, создание, продвижение и заработок на сайте

Т.е. просто переставляете галочку в указанное место и жмете на запуск. По окончании процесса находите под спойлером «Remove unused CSS rules» название вашего файла стилей (у меня это STYLE.CSS) и кликаете по нему. Все CSS селекторы, которые не используются для отрисовки данной страницы, будут там приведены в столбик:

Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в CSS файле вашего сайта, создание, продвижение и заработок на сайте

Копируете их все (от первого до последнего) в буфер обмена и вставляете в окно сервиса, помеченное на приведенном выше скриншоте цифрой 1. Т.к. это данные только с одной страницы вашего сайта, то делать по ним выводы еще рано. Поэтому повторяете все то же самое с десятком других страниц своего сайта, чтобы охватить весь их возможный набор: статьи, список рубрик, статические страницы, страницы с таблицами, страницы с оформленным кодом, страницы со списками и т.п.

Все полученные в этих итерациях списки неиспользуемых стилей (на разных страницах вашего сайта) вы по очереди вставляете в окно, помеченное на скриншоте цифрой 2, и каждый раз после этого жмете на расположенную чуть правее желтую кнопку «Оставить неиспользуемые стили. »

Сервис таким образом сравнит CSS стили неиспользуемые на всех протестированных вами страницах и удалит из общего списка те, что участвовали в прорисовке хотя бы одной страницы. Чем больше страниц вы проверите, тем лучше. Когда надоест — жмите на кнопку «Удалить неиспользуемые стили» и копируйте появившееся в нижнем текстовом поле содержимое вашего обновленного (очищенного) стилевого файла.



Лично я сначала сравнил его содержимое с оригинальным файлом STYLE.CSS в Нотепад++ с помощью плагина Compare. Все удаленные из оригинала строки (у меня в каждой строке записано по селектору, чтобы уменьшить общий размер файла) подсветятся и можно будет на вскидку проанализировать целесоображность их удаления.

Никаких нареканий у меня удаленные селекторы не вызвали (они остались в STYLE.CSS от старых экспериментов или уже неиспользуемых плагинов). В итоге число строк (селекторов) у меня в файле стилей уменьшилось с почти 600 до чуть более 300. А итоговый вес файла снизился до 25 килобайт (менее 10 с учетом его gzip сжатия при передаче с сервера до браузера).

Замена файла стилей (его содержимого — старое удалил, а новое вставил, после чего сохранил изменения через файлзилу) на новый (покоцанный) видимых изменений на сайте не вызвало (пока, во всяком случае, не выявил). В общем, я очень доволен и рекомендую попробовать. Быстро, просто и удобно (а так же бесплатно).

Если хотите провести комплексную оптимизацию, то вам могут пригодиться 6 видеоуроков по теме ускорения сайта, которыю стоит посмотреть:

Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в CSS файле вашего сайта, создание, продвижение и заработок на сайте

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Подборки по теме:

Комментарии и отзывы

А проще всего завести трафарет и на каждый новый стиль включать в него пример. Ошибки в css сразу отражаются в трафарете.



Добрый день. Отличный и актуальный материал, как всегда, спасибо.

Возник вопрос, у меня сайт на движке Ворд пресс, подключаются стили css из нескольких файлов, (один основной style.css) и файлы стилей плагинов (форма связи, капча и т.д.). Как правильно находить неиспользуемые строки в таком случае,отдельно для каждого файла стилей находить места которые не используются? И что лучше сделать первично, определить неиспользуемые части каждого файла стиля, или сначала объединить все стили в один?

Александр: Здравствуйте! Ну, все же лучше все файлы объединить в один, ибо не сложно, а выигрыш в скорости загрузки не помешает. Смысла оптимизировать отдельные файлы стилей плагинов особо нет, ибо при их обновлении все можете переписаться, как было до оптимизации. ИМХО,

* Нажимая на кнопку «Добавить комментарий» или «Подписаться» Вы соглашаетесь с политикой конфиденциальности.

О admin

x

Check Also

Проверка уникальности текстов в онлайн сервисах антиплагиата и с помощью программ, помогающих найти сайты плагиаторов, создание, продвижение и заработок на сайте

> Проверка уникальности текстов в онлайн сервисах антиплагиата и с помощью программ, помогающих найти сайты плагиаторов Здравствуйте, уважаемые читатели блога На вопрос «что такое плагиат» лучше всего, наверное, ответит Википедия ...

Проверка сайта

> Проверка сайта — 85 онлайн сервисов и программ Здравствуйте, уважаемые читатели блога Сегодня я хотел бы в рамках одной статьи объединить все сервисы и программы, которые могут помочь вебмастеру ...

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

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

Проверка домена на занятость или как подобрать свободное доменное имя для сайта, создание, продвижение и заработок на сайте

> Проверка домена на занятость или как подобрать свободное доменное имя для сайта Здравствуйте, уважаемые читатели блога Мы с вами уже обсудили что такое Hosting, разобрали что такое домен и ...

Проблема с All in One SEO Pack и ее решение

> Проблема с All in One SEO Pack и ее решение — убираем rel=prev и исправляем rel=canonical, чтобы убрать из индекса дубли Здравствуйте, уважаемые читатели блога Случайно сегодня глянул на ...

Пробельные символы и форматирование ими кода в Html, а так же спецсимволы неразрывного пробела и другие мнемоники, создание, продвижение и заработок на сайте

> Пробельные символы и форматирование ими кода в Html, а так же спецсимволы неразрывного пробела и другие мнемоники Здравствуйте, уважаемые читатели блога Чуть ранее мы уже успели поговорить о том, ...

Принципы транслитерации, где она используется и онлайн переводчики траслита, создание, продвижение и заработок на сайте

> Принципы транслитерации, где она используется и онлайн переводчики траслита Здравствуйте, уважаемые читатели блога Сегодняшний пост будет посвящен такой (на первый взгляд) простой теме, как транслит, который по большому счету ...

Примеры взлома WebMoney кошельков и настройки безопасности, способные снизить его вероятность (блокировка по IP), создание, продвижение и заработок на сайте

> Примеры взлома WebMoney кошельков и настройки безопасности, способные снизить его вероятность (блокировка по IP) Здравствуйте, уважаемые читатели блога Сегодня будет, как и обещал ранее, статья посвященная безопасности работы с ...

Привлечение трафика посетителей на свой сайт методами SMO (форумы, социальные сети, группы Subscribe), создание, продвижение и заработок на сайте

> Привлечение трафика посетителей на свой сайт методами SMO (форумы, социальные сети, группы Subscribe) Здравствуйте, уважаемые читатели блога Сегодня хочу рассказать о тех способах привлечения посетителей на сайт, которые сам ...

Привлекай рефералов и выиграй конкурс от BetAdvert! Призовой фонд более, создание, продвижение и заработок на сайте

> Привлекай рефералов и выиграй конкурс от BetAdvert! Призовой фонд более 150.000Р Здравствуйте, уважаемые читатели блога Хочу проанонсировать большой конкурс для всех, кто умеет привлекать рефералов. Партнерская программа BetAdvert объявляет ...

Презентация обновленной партнерской программы МегаКонкурс, создание, продвижение и заработок на сайте

> Презентация обновленной партнерской программы Binpartner.com + МегаКонкурс Здравствуйте, уважаемые читатели блога Хочу предложить вашему вниманию пресс-релиз обновленной партнерки Binpartner.com. Но, прежде всего, остановлюсь на МЕГАКОНКУРСЕ, который стартовал параллельно с ...

Предновогодняя акция от Профит Партнера, создание, продвижение и заработок на сайте

> Предновогодняя акция от Профит Партнера Здравствуйте, уважаемые читатели блога Ну, вот и дождались — Профит Партнер проводит очередную акцию (по моему, уже третью за этот год). Догадайтесь, призы от ...

Пошаговый план продвижения коммерческих сайтов, создание, продвижение и заработок на сайте

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

Почта (новый Hotmail), создание, продвижение и заработок на сайте

> Почта Outlook.com (новый Hotmail) Здравствуйте, уважаемые читатели блога У компании Майкрософт имеет место быть привычка смены названия их онлайн-сервисов. Поисковик Бинг не раз менял свое имя, да и облачное ...

Почему так важна быстрая индексация страниц сайта в Яндексе и как ее можно ускорить через, создание, продвижение и заработок на сайте

> Почему так важна быстрая индексация страниц сайта в Яндексе и как ее можно ускорить через GetBot.guru Здравствуйте, уважаемые читатели блога Сегодня речь пойдет про онлайн-сервис, позволяющий быстро отправлять в ...

Почему не загружается и не работает социальная сеть — Одноклассники, а так же как ее открыть, если она заблокирована

> Почему не загружается и не работает социальная сеть «Одноклассники», а так же как ее открыть, если она заблокирована С каждым годом количество пользователей в социальной сети «Одноклассники» становится все ...

Почему не загружается ВК и браузер не заходит во Вконтакте, создание, продвижение и заработок на сайте

> Почему не загружается ВК и браузер не заходит во Вконтакте Здравствуйте, уважаемые читатели блога Практически каждый житель отечественных стран в возрасте от 14 до 45 лет имеет свой аккаунт ...

Почему выгодно работать с партнерской программой Studybay, создание, продвижение и заработок на сайте

> Почему выгодно работать с партнерской программой Studybay Здравствуйте, уважаемые читатели блога StudyBay — это онлайн биржа для заказа студенческих работ под бурж трафик со своей партнерcкой программой, работающей по ...

Послушай Платона и сделай правильно, создание, продвижение и заработок на сайте

> Послушай Платона и сделай правильно §1 Платон всегда прав §2 Если Платон не прав, смотри §1 Здравствуйте, уважаемые читатели блога Сегодня поговорим о новой страшилке Яндекса — Минусинске, и ...

Пользовательское соглашение, создание, продвижение и заработок на сайте

> Пользовательское соглашение KtoNaNovenkogo.ru Пользовательское соглашение сайта KtoNaNovenkogo.ru Итак, Уважаемые посетители, давайте с вами договоримся об условиях пользования ресурсом Использование материалов данного сайта регулируется положением законодательства РФ (и международными нормами) ...

Получение бэклинков с профилей трастовых сайтов и со страниц сервисов для проведения SEO анализа, создание, продвижение и заработок на сайте

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

Рейтинг@Mail.ru