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

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

  • автор:

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

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

Большинство современных сайтов созданы на CMS. Причём, обычно системы управления включают в себя несколько шаблонов, с различными вариантами расположения блоков, с разными цветовыми схемами и с разным набором элементов. Разумеется, для всех этих элементов прописываются стили. Также, стили есть у плагинов. В итоге, получается набор стилей как минимум на полмегабайта, и штук 10 ссылок на разные файлы стилей, и это ещё в лучшем случае. А всё это безусловно влечёт за собой большое количество лишних запросов к серверу и получение лишних килобайтов данных. А чем больше запросов килобайтов — тем больше время загрузки сайта. А чем дольше загружается Ваш сайт — тем больше недовольства у Ваших пользователей. Ведь никто не любит ждать. А если пользователь заходит с мобильного устройства и имеет нестабильное соединение — так это вообще отличный шанс потерять пользователя, который через пару секунд ожидания просто закроет Ваш сайт и перейдёт к более быстрому сайту Вашего конкурента.

Для решения этой задачи есть несколько способов. Они делятся на 2 категории:

  1. получение желаемого результата с помощью различных онлайн-сервисов (например, этот, или этот и других). Данный способ не имеет никаких настроек и может быть полезен для лендингов. Когда же на сайте много страниц и они разные по внешнему виду, этот вариант вряд ли будет нам полезен. Ведь нам нужен один файл стилей, который в итоге будет подходить одновременно под все страницы нашего сайта;
  2. работа вручную, через программные платформы (например, Node.js ) и консоль. Мы пойдём именно по данному пути, поскольку только в нём есть возможность гибкой настройки и получения идеального результата конкретно под наш проект. Если Вы никогда ранее не работали с консолью — попробуйте. Это прекрасно 🙂

Итак, как удалить все неиспользуемые стили на сайте

Перед началом работы небольшой комментарий. Вы можете выполнять данные действия как на своём сервере, так и в своей операционной системе (например, Windows ). Результат будет один, количество затраченного времени — приблизительно также.

Для работы нам понадобится установленный Node.js. Установка проста, не требует специальных знаний, поэтому не будет рассматривать её в данном материале.

❶ Вручную копируем все стили в один файл. Для этого открываем исходный код страницы ( CTRL+U ), ищем стили (проходимся поиском по странице, ища теги со стилями, используя для поиска атрибут stylesheet ) (он есть у каждого тега link, который ведёт на файл со стилями). Открываем в новом окне ссылку, указанной в атрибуте href данного тега, копируем код, вставляем в отдельный файл. Назовём его all_style.css .

Если у Вас любая популярная CMS, то часть стилей будет прописана прямо внутри страницы, чаще всего в области . Копируем и эти стили, если они есть.

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

Для проверки файла стилей я обычно использую сервис autoprefixer. Он и все ошибки покажет, и автопрефиксами дополнит. Также много и других сервисов для валидации стилей (например, вот ещё один: w3.org); выбирайте любой, на Ваше усмотрение.

Кроме этого, нам нужно проверить, чтобы нигде не было указано @import , иначе во время выполнения скрипта возникнет ошибка.

Также, пройдитесь поиском по файлу со стилями и найдите все относительные пути , которые могут быть прописаны в свойствах background-image и подобных. Ведь мы собрали в один файл стили, которые до этого момента располагались в разных папках. И любой относительный путь вида ../ теперь будет некорректен. Все пути данного вида измените на пути от корня сайта. Т.е. переделайте их так, чтобы они начинались на слэш / .

❷ Создаём папку. В неё помещаем наш файл со всеми стилями сайта. Кстати, обратите внимание на его размер. После окончания работ Вы сравните размер файла до оптимизации с размером файла после оптимизации. И сможете увидеть, сколько килобайт (а то и мегабайт) Вы сэкономили для Вашего проекта.

❸ Затем нам нужно создать файл package.json и указать там те пакеты, которые мы будем использовать для работы.

Для наших целей вполне подойдёт следующая конфигурация:

< "name": "your_name", "version": "1.0.0", "description": "", "main": "gulpfile.js", "scripts": < "test": "echo \"Error: no test specified\" && exit 1" >, "keywords": [], "author": "", "license": "ISC", "devDependencies": < "gulp": "^4.0.0", "gulp-debug": "^4.0.0", "gulp-postcss": "^8.0.0" >, "dependencies": < "gulp-clean-css": "^4.0.0", "gulp-uncss": "^1.0.6", "postcss-uncss": "^0.16.1" >>

❹ Затем нам нужно запустить консоль в этой папке. Если Вы используете Windows — нажмите Shift и, удерживая её, нажмите в пустом месте данной папки правую кнопку мыши . И выбирайте — » Открыть окно команд «. Если Вы работаете в UNIX -подобных системах, думаю, Вам не нужно объяснять, как открыть терминал и оказаться в нужной папке 🙂

Убедитесь, что у Вас уставлен Node.js и актуальная версия менеджера пакетов NPM. Для этого введите команду

npm -v

Если Вы увидите номер версии, то всё ОK. Продолжаем работу. Выполняем команду:

npm i

Начнут устанавливаться пакеты, указанные в файле package.json . Ждём окончания установки.

Мы почти готовы к началу минимизации. Осталось создать файл gulpfile.js и запустить gulp . Кто ещё не знаком с gulp’ом (здесь есть ещё такие? :)), Gulp — это таск-менеджер для автоматического выполнения часто используемых задач, написанный на JavaScript. Он удобен, прост в освоении и помогает автоматизировать огромное количество рутинных задач.

❺ Сохраняем содержимое файлов html. Есть вариант не делать этого и указать ссылки на html-код ниже в виде массива из URL, но я не рекомендую так делать. Дело в том, что нам нужен не исходный код страницы, а финальный код. Вы спросите, чем они отличаются? Объясняю — если на Вашем проекте много JavaScript, то исходный html-код Вашей страницы будет меняться «на лету», в том числе, при построении страницы. Т.е. JavaScript будет менять разметку страницы по мере своего выполнения. Если Вы точно знаете, что JavaScript на Вашем проекте никак не участвует в изменении первоначальной разметки страницы, то можете не выполнять этот пункт и перейти к следующему.

А для тех, кто остался на этом пункте — открываем отладчик браузера ( F12 ), выбираем вкладку Elements , затем щёлкаем правой кнопкой мыши по корневому элементу html, выбираем Copy —> Copy outerHTML . Затем вставляем это всё в отдельный файл, называем его 01.html .

К примеру, 01.html — это содержимое главной страницы нашего сайта. Также нужно создать аналогичные файлы с содержимым других шаблонов страниц. Допустим, у Вас интернет-магазин. Вот сколько страниц с html-кодом у Вас получится:

— страница с любой категорией товаров

— страница с любым конкретным товаром

— страница заказа товара

— страница с контактами

— страница с описанием Вашего магазина

— ещё какие-то страницы, внешний вид которых имеет индивидуальный внешний вид.

Итого у Вас должно получиться примерно около 10-ти страниц с индивидуальным внешним видом.

Перед следующим шагом у Вас должен быть установлен gulp, глобально. Если не уставлен — используем команду:

npm install gulp -g

❻ Создаём файл gulpfile.js . Далее в нём пишем следующее содержимое:

const gulp = require('gulp'), postcss = require('gulp-postcss'), uncss = require('postcss-uncss'), cleanCss = require('gulp-clean-css'); // здесь пишем название файла, в котором мы разместили стили со всего нашего сайта const styleFile = 'all_style.css'; gulp.task('default', function() < var plugins = [ uncss(< // ниже перечисляем те страницы, которые у нас получились на пункте 5 html: ['01.html','02.html','03.html','04.html','05.html','06.html','07.html'] // если Вы пропустили пункт 5 и решили вписывать URL вместо сохранения html-кода, то вписываем выше URL, через запятую, каждый URL отдельно, в кавычках. Подробнее - здесь >), ]; return gulp.src(styleFile) .pipe(postcss(plugins)) .pipe(cleanCss(< level: 2, // это самый сильный вариант объединения стилей. Подробнее - здесь format: 'keep-breaks' // с этим значением итоговые стили будут написаны с переносом каждого правила на новую строчку. Подробнее - здесь >)) .pipe(gulp.dest('dist')); >);
gulp

После выполнения данной команды, у Вас появится папка dist , в которой будут лежать минифицированные стили для Вашего сайта. Среди стилей будут только те, которые реально нужны для Вашего проекта. Смотрите на размер файле, радуйтесь!

❽ Удаляем вызов стилей внутри Вашей CMS. Это отдельная и достаточно сложная тема. Возможно, рассмотрим её как-нибудь отдельно. В каждой CMS это реализовано по-разному и в разных местах. Пройдитесь по всем файлам сайта через поиск внутри содержимого файлов и ищите имена файлов со стилями. Пройдитесь по базе данных, ищите там. Задача удаления встроенных стилей — намного более обширная, чем кажется. Тем не менее, удалив все старые стили, Вы будете наслаждаться результатом. Удаляйте все старые стили в области , в футере . Проверьте, чтобы остались только те, которые получились у нас с Вами в результате минимизации.

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

Радуемся результату и скорости загрузки сайта!

Подписывайтесь на группу в ВКонтакте, вступайте в сообщество на Facebook, чтобы всегда быть в курсе актуальных выпусков
W e b d e v e l o p m e n t b l o g !

Сео инструмент «Найти css код в CSS файле который не используется на html странице 2024» бесплатно онлайн

Время ответа сервера – один из важнейших показателей для продвижения ресурса, поскольку он напрямую связан со скоростью работы сайта в целом, так как из-за медленной загрузки страниц пользователи могут покидать сайт, а поисковые системы – понижать его позиции в поисковой выдаче. Так что же такое время ответа сервера? Это время, которое затрачивается на прохождение пакета информации, посланного браузером пользователя серверу, и время возврата пакета обратно на компьютер. Google рекомендует, чтобы время отклика сервера было менее 200 мс.

Найти CSS код который не используется на html странице web сервера

Со временем в файле CSS стилей накапливается много неиспользуемых строк, что существенно снижает скорость загрузки сайта. Как найти и удалить ненужные CSS селекторы? В этом Вам поможет наш онлайн сервис! Сео инструмент «Найти CSS код который не используется в html странице 2024» выводит неиспользуемые селекторы из таблицы стилей онлайн. Инструмент анализирует код CSS html страницы сайта, и показывает, код каких селекторов лишний, которые можно удалить в любом редакторе, например «Macromedia Dreamweaver».

  • Внимание! Если на тестируемой HTML странице не используются какие-то css-стили, то это не значит, что они не используются на всём сайте. Перед удалением любого «неиспользуемого» стиля из вашего css-файла, дважды проверьте, что он действительно не используется на других страницах.
  • Этот онлайн-инструмент позволит вам найти неиспользуемые селекторы CSS любой страницы сайта.
  • Функция «Найти неиспользуемые селекторы CSS» инструмента пока обсолютно БЕСПЛАТНА!

Как пользоваться инструментом:

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

Таблица Кодов ответа сервера

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

  • 1xx — информационные (Informational)
  • 2xx — успешные (Success)
  • 3xx — перенаправление (Redirection)
  • 4xx — ошибка клиента (Client Error)
  • 5xx — ошибка сервера (Server Error)

Функция «Проверка Кода ответа web сервера» инструмента пока обсолютно БЕСПЛАТНА!

Как удалить лишние 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

В обзоре состояния CSS на 2020 года был раздел, посвященный служебным библиотекам. Речь в нем шла о StyleLint, Purge CSS и PurifyCSS. Две из этих библиотек предназначены для удаления неиспользуемого CSS. Как автор PurgeCSS и участник PurifyCSS, я хочу воспользоваться моментом и объяснить, какие проблемы могут решить эти библиотеки, и сравнить три самые популярные библиотеки для выполнения этой работы.

Зачем пользоваться библиотекой для удаления ненужного CSS?

Как и c любой библиотекой, всё зависит от вариантов использования, и бывают ситуации, когда их применять не имеет смысла. Наиболее распространенный вариант применения упомянутых нами библиотек — удаление неиспользуемого CSS с помощью CSS-фреймворков.

CSS-фреймворки

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

Для сравнения, у TailwindCSS есть возможность воспользоваться Purge CSS для автоматического удаления невостребованного CSS. С TailwindCSS вы редко задаетесь вопросом: не переключиться ли на другой фреймворк для обрезки сайта. И вам редко приходится менять настройки, чтобы отключить правила.

Устаревшие веб-сайты

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

Критические страницы

В некоторых компаниях есть разные команды, которые присматривают за разными частями веб-сайта. Одна команда может отвечать за главную страницу приложения, другая — за страницы регистрации и оплаты, а третья — за страницы настроек и администрирования.

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *