Как сжать css файл
Перейти к содержимому

Как сжать css файл

  • автор:

Сжатие CSS для уменьшения времени загрузки

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

Обновлено: 2021-07-14 19:25:18 Вадим Дворников автор материала

Возможности оптимизации CSS

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

В этой статье мы приведем несколько приемов, которые можно использовать для сжатия CSS и JS .

  1. Избегайте чрезмерного использования встроенных стилей CSS ( размещенных в HTML ), если это не относится к началу страницы. То же самое касается тегов стилей ( отдельных CSS-свойств , отклоняющихся от установленных стандартов );
  2. Объединяйте нескольких файлов CSS в PHP-скрипте . Таким образом, клиент должен вызвать только файл PHP вместо отправки HTTP-запроса для каждого файла стилей;
  3. Сжатие CSS подразумевает использование сокращенных форм свойств, если это возможно:

body

вместо полной формы:

body

  1. Избегайте ненужного использования кода. Если определенные теги размещаются только в одном теге ( например, в списке ), то элемент не должен упоминаться дважды;
  2. Используйте для установки цвета значения HEX , а не RGB ;
  3. Универсальный селектор «*» следует использовать только в исключительных случаях. Установки стиля, заданные через универсальный селектор, применяются ко всем элементам, поэтому браузеру нужно сначала обеспечить выполнение соответствующих указаний для всех элементов;
  4. Минимизируйте файлы CSS , удаляя ненужные пробелы, пустые строки и комментарии. Пробелы не нужны, например, после двоеточия или точки с запятой. Окончательная точка с запятой после последнего символа списка также может быть опущена;
  5. Так как минимизация CSS является сложным процессом, обязательно нужно создавать резервную копию файла. Так вы сможете исправить ошибки.

Возможности оптимизации CSS

Сжатие CSS: онлайн и оффлайн инструменты

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

К таким приложениям относятся:

Скопируйте код CSS в поле » Input CSS » и нажмите на кнопку » Minify «, чтобы начать процесс. В поле » Minified Output » вы увидите результат, который можно скопировать вручную или скачать. CSS Minifier сокращает код, удаляя разрывы строк и пробелы, последнюю в списке точку с запятой. Инструмент может легко преобразовывать код RGB в сжатый вариант HEX .

Этот сервис для сжатия CSS онлайн немного отличается от предыдущего, поскольку поддерживает больше возможностей для сжатия кода. Вставьте CSS-код в поле » CSS Source Code Input «. Затем выберите степень сжатия. В разделе » Show advanced options » можно установить флажок для параметров минимизации. Например, сжатие цветов цвета, удаление последнюю точку с запятой и т.д. Нажмите » Compress «, чтобы начать процесс сжатия CSS . Также инструмент предоставляет информацию о размере входного и выходного файла, а также процент минимизации.

Free CSS Toolbox

Бесплатная программа для веб-разработчиков. Она включает в себя целый ряд инструментов и может выполнять форматирование и проверку CSS-кода . На вкладке меню » CSS Formatting Options » выберите параметры CSS , которые нужно оптимизировать и запустите сжатие, нажав » Re-format now «. Free CSS Toolbox без проблем удаляет пробелы и конечные точки с запятой, минимизирует коды цветов. Эта программа работает во всех операционных системах, начиная с Windows от XP и выше.

Уменьшение времени загрузки благодаря оптимизации CSS

Нагрузка на сервер возрастает по мере того, как увеличивается размер CSS-файлов . Если сайт открывается с помощью клиента ( браузера ), все CSS-данные должны быть запрошены и переданы. Поэтому настоятельно рекомендуется осуществлять сжатие CSS и JS онлайн . Перечисленные выше инструменты помогут вам в этом. Но полная оптимизация не может быть выполнена с помощью сервисов и приложений. Эту задачу нужно выполнять самостоятельно.

Еще один способ сжатия CSS файлов

image

На изображении выше многие увидят известную картину. Так выглядит большинство CSS файлов на продакшене. Мы все стараемся, чтобы наши веб-страницы загружались быстро; для достижения этой цели используем различные инструменты и техники оптимизации загрузки и рендеринга страниц. Об одном, но редко используемом методе, я бы хотел поговорить и рассказать, как мне удалось сократить размер CSS файла почты mail.ru на 180Кб.

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

Далее мы попробуем выжать все соки из этого файла.

Если приглядеться, то мы заметим в этом файле кое что интересное.

image

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

Примеры из жизни

Я провел анализ CSS файлов, некоторых популярных ресурсов и подтвердил свое предположение:

image

На изображение указаны классы, встречающиеся в продакшан версиях CSS файлов указанных сайтов

Наверное, никому не надо объяснять значимость скорости первоначальной загрузки страницы и ее влияние на удовлетворенность пользователей, конверсию, посещаемость сайтов. С приходом мобильных девайсов и мобильного интернета эта проблема стоит очень остро. Например, загрузка 40Кб на 4G интернете в среднем займет 700мс, а если рассмотреть 3G, EDGE, GPRS, WiFi в час пик в кафе или метро, то время загрузки значительно увеличится. Каждые сэкономленные килобайты на вес золота.

Если мы боремся за каждый пробел и перенос строки в CSS файлах, беспощадно вырезая их, то почему бы не сжимать названия классов и идентификаторов до двух или трех символов? Ведь вашим пользователям абсолютно не важно, как будет называться класс блока на странице, но им будет очень важна скорость загрузки страницы. Возможно, именно поэтому ребята из Google используют эту технику (на сайте google.com):

image

От слов к делу

Итак, с тем, зачем это нужно, надеюсь, разобрались. Приступим к делу. Первая проблема в том, что мы не можем просто так взять и сократить классы и идентификаторы в CSS файлах, потому что они используются в верстке, шаблонах и JS файлах. Заменив только в одном месте — все поломается. Становится очевидно, что надо заменить названия во всей связке файлов. В своих проектах для минификации, склеивания и прочих таких задач я использую Grunt.js. Эта система сборки является одной из самых популярных мире фронтенд-разработки. Занимаясь беглым поиском плагинов, реализующих такую задачу, я ничего не обнаружил и решил написать свой велосипед плагин.

grunt-revizor

Так родился grunt-revizor. При его написании я столкнулся с несколькими проблемами. В CSS файлах все просто, синтаксис заранее известен, .name или #name, но в других файлах это может выглядеть иначе. Например, в HTML

т.е. name уже без точки или в JS файлах

document.getElementById('name')

тоже без #, что усложняет проблему поиска и замены имен. Что наиболее страшно — можно поломать что-нибудь, например, если имя CSS класса будет «.success» и в JS файле у нас будет переменная «success», заменив ее мы поломаем JS код. А этого мы допустить не можем, поэтому пришлось ввести требования к написанию имен, а именно — имя должно оканчиваться на уникальный префикс, который однозначно даст возможность отличить класс от чего либо другого JS, HTML и других файлах. Например, .b-tabs__title-block—, в данном случае префикс ‘—‘.

grunt.initConfig(< revizor: < options: < namePrefix: '__', compressFilePrefix: '-min' >, // Найдет файлы: test/css/style1.css, test/css/style2.css, 'test/js/main.js и др. src: ['test/css/*.css', 'test/html/*.html', 'test/js/*.js'], dest: 'build/' >, >); 

После запуска этого таска grunt найдет все CSS, HTML и JS файлы, которые соответствуют путям из src, найдет в CSS файлах все имена классов и идентификаторов, оканчивающихся на префикс __, сожмет найденные имена до двух и трех символьных, например .b-tabs—notselected__ -> .zS, после чего сохранит новые файлы, в которых будут заменены все найденные совпадения, и сохранит их в папке build, с именами style1-min.css, index-min.html, main-min.js.

/* Original: style1.css */ .b-tabs__title-block-- < color: red; font-size: 16px; >.b-tabs__selected-- < font-weight: bold; >/* ======================================= */ /* Result: style1-min.css */ .eD < color: red; font-size: 16px; >.rt
/* Original: main.js */ var $tabmenu = $('#tabmenu--'); var tabmenu = document.getElementById('tabmenu--'); if ($tabmenu.hasClass('b-tabs__selected--')) < $tabmenu.removeClass('b-tabs__title-block--'); >; /* ======================================= */ /* Result: main-min.js */ var $tabmenu = $('#j3'); var tabmenu = document.getElementById('j3'); if ($tabmenu.hasClass('rt')) < $tabmenu.removeClass('eD'); >; 

Такой же принцип и для HTML, template и прочих фалов.

  • Сначала генерируются 2-х символьные имена. После того, как количество имен перевалит за 2500, начнутся генерироваться 3-х символьные имена;
  • Для генерации имен используются строчные и заглавные буквы латинского алфавита, цифры, символы и _;
  • Есть проверка на коллизию, т.е. сжатое имя может соответствовать только одному полному имени.
Оптимизации на примерах

Попробуем выяснить потенциальную выгоду такой оптимизации на примере тех же популярных ресурсов. Расскажу, как я буду считать. Конечно же, не буду пропускать CSS файлы через grunt-revizor, потому что в них не используется уникальный префикс. С помощью нехитрого Node файла я буду считать общее количество классов, высчитывать их длину в байтах и из этого высчитывать потенциальный размер файлов. Упрощенная формула выглядит так:

names = ['b-block1','b-block2','b-block3', . ]; saveSize = allNamesSize - (names.length*3) // allNamesSize - Общая длина всех символов всех найденных классов // 3 - Итоговое количество символов в сжатом название 
Сайт Размер оригинального файла Сжато В процентах
Mail.ru почта (Desktop version) 849 Кб 182,5 Кб 26,4%
hh.ru (Desktop version) два файла 109,8 Кб 30 Кб 27,3%
vk.com (Mobile version) два файла 184,1 Кб 48,5 Кб 26,4%
Яндекс.Такси (Mobile version) 127 Кб 13 Кб 10,3%
2gis.ru (Mobile version) 1293 Кб 172 Кб 13,3%

Использовались обычные файлы, не gzip. Данные оптимизации примерные, потому что по мимо CSS файлов стили иногда были в html странице, соответственно, здесь не учитывались. Использовалась простенькая регулярка для парсинга, которая искала только классы, притом не все возможные, и она не искала идентификаторы. Помимо сжатия CSS будет выигрыш на других файлах, html, шаблонах и т.д., которые здесь тоже не учтены. Отмечу сразу, что некоторые файлы мало подаются такой оптимизации, например, файлы где мало классов или используются короткие имена, или много изображений, вставленных через data:URL, что демонстрируется на файлах 2gis и Яндекс.Такси.

Заключение

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

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

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

В общем, есть о чем поговорить и над чем задуматься.

UDP: Скоро отвечу на все вопросы, приведу конкретные файлы, и сравню выигрыш при использование GZIP.

  • CSS
  • JavaScript
  • Клиентская оптимизация

Оптимизация CSS и JavaScript-файлов

При оптимизации CSS и JavaScript-файлов перед разработчиками стоят две задачи: сжатие и объединение. Одна из проблем, с которой сталкиваются разработчики, заключается в том, что сложно объединить скрипты в правильном порядке.

Скажем, мы включили три разных элемента в index.html.

Эти скрипты хранятся в двух разных папках и будет сложно объединить их через традиционные плагины, вроде gulp-concatenate. К счастью, есть полезный плагин gulp-useref, который решает данную проблему.

gulp-useref объединяет любое количество CSS и JavaScript-файлов в один, ища комментарий, который начинается с . Вот его синтаксис:

—> … Разметка HTML, список элементов или

может быть js , css или remove . Лучше всего задать как тип файлов, которые вы пытаетесь объединить. Если установите как remove , то Gulp удалит весь блок сборки без создания файла.

— это указатель на целевой путь, где окажется сгенерированный файл.

К примеру, мы хотим чтобы конечный JavaScript-файл создался в папке js под именем main.min.js. Следовательно, разметка будет следующей:

Теперь настроим плагин gulp-useref. Мы должны установить плагин и вызвать его в gulpfile.

$ npm install gulp-useref --save-dev
var useref = require('gulp-useref');

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

gulp.task('useref', function()< return gulp.src('app/*.html') .pipe(useref()) .pipe(gulp.dest('dist')) >);

Если вы запустите задачу useref , то Gulp пройдётся по трём элементам и объединит их в один dist/js/main.min.js.

Этот файл, однако, на данный момент не сжат. Нам придётся воспользоваться плагином gulp-uglify для уменьшения JavaScript-файлов. Кроме того потребуется второй плагин под названием gulp-if, который гарантирует, что мы будем сжимать только файлы JavaScript.

$ npm install gulp-uglify --save-dev
var uglify = require('gulp-uglify'); var gulpIf = require('gulp-if'); gulp.task('useref', function()< return gulp.src('app/*.html') .pipe(useref()) // Сжимаем, только если это JavaScript-файл .pipe(gulpIf('*.js', uglify())) .pipe(gulp.dest('dist')) >);

Gulp теперь должен автоматически сжимать файл main.min.js всякий раз, когда вы запускаете задачу useref .

Одна из замечательных вещей, которую я ещё не рассказал о gulp-useref, — это то, что он автоматически меняет все скрипты внутри на один файл JavaScript, который указывает на js/main.min.js.

Чудесно, не правда ли? Этот же метод мы можем использовать для объединения любых CSS-файлов (если их больше одного). Воспользуемся тем же процессом и добавим комментарий с build .

Мы также можем сжать объединённый CSS-файл, для чего потребуется плагин под названием gulp-cssnano, который поможет для сжатия.

$ npm install gulp-cssnano
var cssnano = require('gulp-cssnano'); gulp.task('useref', function()< return gulp.src('app/*.html') .pipe(useref()) .pipe(gulpIf('*.js', uglify())) // Сжимаем, только если это CSS-файл .pipe(gulpIf('*.css', cssnano())) .pipe(gulp.dest('dist')) >);

Теперь вы получите один оптимизированный файл CSS и один оптимизированный файл JavaScript при каждом запуске задачи useref .

Двинемся дальше и оптимизируем изображения.

Автор: Зелл Лью
Последнее изменение: 05.08.2023

  • Почему Gulp?
  • Установка Gulp
  • Создание Gulp-проекта
  • Определяем структуру папок
  • Написание первой Gulp-задачи
  • Препроцессинг с помощью Gulp
  • Подстановки в Node
  • Слежение за Sass-файлами
  • Перезагрузка с помощью Browser Sync
  • Оптимизация CSS и JavaScript-файлов
  • Оптимизация изображений
  • Копирование шрифтов в папку Dist
  • Очистка сгенерированных файлов
  • Комбинирование Gulp-задач
  • Заключение

Сжать CSS

Сжать CSS-код
compressed css exampleМинимизируйте CSS-код
minified css source codeОн удаляет лишние пробелы и разрывы строк из кода, что уменьшает размер нашего файла кода и увеличивает скорость загрузки нашего веб-сайта.

Он также удаляет все ненужные комментарии (как однострочные, так и двухстрочные) из файла CSS, которые не требуются браузеру.

Этот инструмент помогает легко оптимизировать наш код CSS.

Как сжать файл CSS?

Следуйте инструкциям по сжатию файлов CSS онлайн (бесплатно):

Шаг 1: Скопируйте код CSS

редактор кода и код

Откройте текстовый редактор (VS Code, Atom, Notepad и т. д.) и найдите таблицу стилей CSS, которую нужно сжать или минимизировать.
Выберите таблицу стилей, нажав Ctrl+A (или Cmd+A), если вы хотите выделить ее всю, или выберите вручную, если хотите сжать только часть кода.

Скопируйте код, используя Ctrl+C (если вы используете компьютер с Windows) или Cmd+C (если вы используете Mac).

Шаг 2: Сжатие кода CSS

Вставьте скопированный код CSS в текстовую область «Ввод CSS».
вставьте код css, который вы хотите оптимизировать, в textareaИ нажмите на кнопку Сжать.
сжать кнопку cssКод автоматически минимизируется, и экран прокручивается до sectionа «Сжатый CSS».

Все лишние пробелы, разрывы строк и комментарии будут удалены кодом.

Этот компрессор CSS не имеет ограничений, поэтому вы можете оптимизировать свои файлы CSS столько раз, сколько захотите.

Шаг 3: Скопируйте сжатый CSS

После сжатия кода экран автоматически переходит к сжатому sectionу.

копировать сжатый код CSS

Нажмите кнопку «Копировать», чтобы скопировать весь сжатый код.
Теперь вы можете вставить уменьшенный код таблицы стилей в реальную кодовую базу.

Что такое CSS?

CSS – это язык таблиц стилей, который используется с HTML для оформления разметки страницы.

CSS означает каскадную таблицу стилей.

Этот язык используется для описания того, как должны выглядеть элементы веб-страницы.

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

Это делает наши HTML-элементы более стильными и профессиональными.

CSS необходим для каждого веб-сайта в Интернете. Профессиональный стиль на веб-сайте может увеличить удержание пользователей и тем самым послать положительный сигнал Google.

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

Внешние таблицы стилей имеют в конце расширение .css.

Что такое сжатие CSS?

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

Браузеры не отображают эти три вещи: разрывы строк, лишние пробелы и комментарии с нашего сайта.

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

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

Минимизированный CSS быстрее?

Да, минимизированные CSS быстрее, потому что они не содержат ненужных строк кода, которые не отображаются браузером.

Браузер обрабатывает минимизированный CSS быстрее, чем файлы CSS, которые не были минимизированы (в них есть все, что не отображается браузером, и поэтому они имеют большой размер файла).

Почему люди минимизируют код?

Минификация кода имеет множество преимуществ, некоторые из них описаны ниже:

Уменьшить размер файла

Удаление ненужных символов из наших таблиц стилей может значительно уменьшить размер файла.

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

Увеличить скорость страницы

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

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

Улучшить рейтинг Google

Более высокая скорость страницы напрямую связана с более высоким рейтингом Google, и минификация помогает нам в этом.

Влияет ли минимизация на SEO?

Да, минимизация влияет на SEO, но в положительном ключе. Это может помочь нам хорошо ранжироваться в Google.

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

Увеличение Pagespeed напрямую связано с улучшением рейтинга Google.

Низкая скорость страницы может снизить наш рейтинг, независимо от того, насколько хорош или полезен наш веб-сайт.

Как узнать, минимизирован ли CSS?

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

Если в таблице стилей CSS нет лишних пробелов, разрывов строк и комментариев, то CSS был минимизирован.

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

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