Не пропусти
Главная » Интернет новичку » Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в 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

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

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

Как работают поисковые системы

> Как работают поисковые системы — сниппеты, алгоритм обратного поиска, индексация страниц и особенности работы Яндекса Здравствуйте, уважаемые читатели блога Занимаясь SEO или, иначе говоря, поисковой оптимизацией, как на профессиональном ...

Как продвигать сайт

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

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

> Как провести мониторинг позиций по определенным фразам? Здравствуйте, уважаемые читатели блога Извечная проблема SEO-специалистов и веб-мастеров — досконально неизвестно, какие факторы влияют на ранжирование сайта. Эта тайна, как мифическая ...

Как проверить скорость интернета

> Как проверить скорость интернета — онлайн тест соединения на компьютере и телефоне, SpeedTest, Яндекс и другие измерители Здравствуйте, уважаемые читатели блога Есть масса онлайн-сервисов позволяющих это сделать, и о ...

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

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

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

> Как проверить кроссбраузерность верстки сайта в Browsershots и настроить отправку пинга при появлении новых материалов Доброго времени суток, уважаемые читатели блога В эфире очередной выпуск рубрики Веб-обзоры. Сегодня я ...

Как преобразовать документ Word (doc) в PDF файл, а так же конвертировать его в FB2, создание, продвижение и заработок на сайте

> Как преобразовать документ Word (doc) в PDF файл, а так же конвертировать его в FB2 Здравствуйте, уважаемые читатели блога Решил написать небольшую заметку о том, как можно преобразовать документ, ...

Как правильно искать в Яндексе

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

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

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

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

> Как помочь сотруднику работать продуктивнее? Здравствуйте, уважаемые читатели блога Где баланс между кнутом и пряником, и что актуальнее в век удаленки и open-space офисов? Возможно ли с помощью современных ...

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

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

Как получить быстрый сайт

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

Как покупать вечные ссылки и размещать статьи в, а так же добавить свой сайт в эту биржу и начать зарабатывать на нем, создание, продвижение и заработок на сайте

> Как покупать вечные ссылки и размещать статьи в Pr.Sape, а так же добавить свой сайт в эту биржу и начать зарабатывать на нем Здравствуйте, уважаемые читатели блога За время ...

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

> Как подтянуть гайки в коллективе с помощью Wrike Здравствуйте, уважаемые читатели блога Один мой сосед, работающий менеджером интернет-проекта, постоянно ходил с кисло-злым выражением лица. Жильцы подъезда привыкли к тому, ...

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

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

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

> Как повысить эффективность push-уведомлений с помощью сегментирования аудитории Здравствуйте, уважаемые читатели блога Браузерные push-уведомления доставляются до подписчика в режиме реального времени, поэтому их все чаще используют, чтобы доводить актуальную ...

Как повысить заработок на контекстной рекламе Директа или Адсенса, создание, продвижение и заработок на сайте

> Как повысить доход с контекстной рекламы — вставка блоков РСЯ и Адсенса в статьи Вордпресса вручную и автоматически Здравствуйте, уважаемые читатели блога Сегодня мы продолжим разбираться с нюансами и ...

Как повысить доход от рекламы Яндекса

> Как повысить доход от рекламы Яндекса — просто работать через Profit Partner, где будут бонусы, акции и бесплатные консультации Здравствуйте, уважаемые читатели блога Недавно мне здорово повезло в акции, ...

Как писать статьи в WordPress

> Как писать статьи в WordPress — визуальный и Html редакторы, заголовки и выделение ключевых слов Здравствуйте, уважаемые читатели блога Сегодняшнюю публикацию я решил посвятить вопросу написания статей в HTML ...

Как открыть интернет-магазин

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

Рейтинг@Mail.ru