Оптимизация 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/JS: архивируем все!» и «JavaScript: жать или не жать» стало ясно, что проблема уменьшения CSS-файлов в размере действительно актуальна, и общественности хотелось бы аналогичного исследования уже конкретно для такой оптимизации. Которое, собственно, и приведено ниже.
В интернете было найдено 6 различных инструментов для минимизации CSS-кода (однако, с одним из них, перловым модулем, разобраться не удалось, поэтому приведены результаты только для 5), далее ими обрабатывались несколько примеров, которые затем подвергались еще и архивированию. Результаты, опять-таки, представлены в виде графиков, ибо таблицы я нахожу менее информативными.
Инструменты
- CSSMin. Библиотека проводит набор простейших замен в CSS-файле (удаляет ненужные символы) и склеивает его в одну строку.
- Minify. Библиотека, минимизирующая как CSS-, так и JS-файлы. Кроме того, она может слеивать несколько файлов в один, заменять относительные пути к фоновым картинкам на более короткие и самостоятельно отдавать кеширующие заголовки. В общем, не сильно лучше предыдущей.
- YUI. YUI-compressor (использовалась версия 2.2.5). Фактически, делает то же самое, что две предыдущих библиотеки.
- CSS Minifier. Автор разработал собственный алгоритм сжатия (по моему мнению, несколько переработанная версия CSS Tidy), который, по его собственному утверждению, «жмет лучше всех». Ну это мы и проверим.
- CSS Tidy. Проект по минимизации CSS-файлов с открытым исходным кодом. Имеет много настроек, портирован на несколько языков и используется на нескольких ресурсах, которые предлагают инструментарий для минимизации CSS-файлов, например, на www.codebeautifier.com. Наиболее широко распространенная версия минимизатора.
Источники CSS-кода
В качестве исходных файлов брались таблицы стилей с некоторых достаточно сильно посещаемых ресурсов: 1383, 8818, 11052, 11851, 13040, 19744, 29529, 47175, 58892, 67244, 131446. Каждый из них был подвергнут действии минимизатора (для Minifier’а дополнительно файл склеивался в одну строку, вероятно, это временный баг текущей версии), затем архивировался. Корректность минимизации не проверялась (с этим в некоторых особо агрессивных случаях могут быть проблемы: CSS Tidy с определенными настройками перегруппировывает селекторы, и часть логики теряется).
Какие-либо закономерности степени сжатия файлов от их параметров обнаружить не удалось.
Результаты
Что изображено на графиках? Выведен выигрыш (в процентах) относительно несжатого файла (по оси ординат отложены проценты). По оси абсцисс отложены размеры исходных файлов. Внимание: файлы не расположены по размеру. Данные упорядочены по общей степени сжатия.
Вначале по каждому инструменту отдельный график: выведены показатели для простой минимизации файлов, также для минимизации с последующим архивированием. Серым пунктиром показана степень сжатия (в процентах) файла при помощи простого gzip’а.
CSSMin:
Minify:
YUI-compressor:
Minifier 0.5:
CSS Tidy 1.3:
Далее все инструменты на одном графике (без архивирования). Действительно, заметен явный выигрыш Minifier’а.
При архивировании, однако, все минимизаторы ведут себя примерно одинаково.
Для уточнения картины при архивировании минимизированного файла я отдельно выделил их преимущество относительно обычного архивирования.
Тут уже видно лучше, что CSS Tidy ведет себя, в целом, лучше остальных скриптов (хотя, за исключением редких случаев, выигрыш не превосходит 6% относительно обычного архивирования).
Выводы
Во-первых, gzip и так показывает хорошее сжатие (до 81%), поэтому в большинстве случаев можно пользоваться только им.
Во-вторых, простая «подчистка мусора» (удаление всех символов, которые можно безболезненно убрать по спецификации CSS) вместе с архивированием дает весьма неплохой результат (общее сжатие до 83%) относительно других инструментов, но при этом не теряется логика селекторов (т.е. такое сжатие абсолютно безопасно).
В-третьих, замечен локальный выброс при файле небольшого размера. Он связан с тем, что GZIP изначально его плохо сжал (вероятно, из-за маленькой исходной библиотеки слов), поэтому все минимизаторы показали себя на высоте. Однако, файлы такого размера (порядка 1Кб) стоит либо объединять с другими файлами, ибо тратить время на дополнительный запрос на сервер из-за такой мелочи не очень рационально, либо включить в сам HTML-файл. Так что данный выброс я не считаю серьезным основанием действительно использовать какой-либо минимизатор только из-за выигрыша в 3–4% от размера исходного файла.
В-четвертых, повторяется ситуация со сжатием JS-файлов, когда библиотека, жмущая лучше всего, проигрывает более умеренной сопернице при дополнительном архивировании результата. Только в данном случае это Minifier и CSS Tidy.
Все полученные файлы можно также скачать единым архивом здесь (всего 12х12 = 144 файла).
В качестве послесловия
В общем, если вы не хотите дополнительно морочить голову, то можно просто архивировать CSS-файлы (в среднем, выигрыш 79%) либо проводить простую «подчистку мусора» перед архивированием (в среднем, выигрыш 82%). Для тех, кто заботится о байтам, могу порекомендовать изучить действие CSS Tidy и Minifier’а (их прелесть заключается в алгоритме перегруппировки селекторов) и использовать их либо разработать собственное приложение.
Читать дальше
- CSS Sprites: все, что вы знали, но боялись спросить
- Практический CSS/JS: архивируем все!
- Разгоняем CSS-селекторы: стоит ли?
- Практический CSS/JS: уменьшаем время загрузки страницы
- Практический JS: оптимизируем CSS expressions
- Оптимизируем CSS-производительность
- Выносим CSS в пост-загрузку
Для чего используют сжатие css файла
Дорогие друзья,
как вы знаете, начиная с версии 8.5, в скрипте появилась возможность сжатия javascript файлов, что позволяет до 70% уменьшить их размер и тем самым существенно ускорить их загрузку в браузер. В данной статье я хочу вам рассказать о том, что данную возможность можно применить для файлов стилей CSS вашего шаблона. Для этого необходимо изменить их подключение в шаблон, допустим ваши стили подключаются в шаблоне строчками:
для включения сжатия для этих файлов, эти строки необходимо заменить на:
Собственно и все, теперь ваши стили будут автоматически объединены и сжаты, и в браузер будут отдаваться уже сжатые файлы, существенно экономя ваш траффик. При этом нужно будет помнить лишь одну особенность, если вы захотите изменить содержание этих файлов, то после внесения изменений, вам необходимо будет обязательно зайти в админпанель скрипта и сделать очистку кеша в админпанели скрипта, а также сделать очистку кеша в браузере.
Для чего используют сжатие css файла
Сокращение кода CSS способствует уменьшению времени ответа сервера. Вследствие сервер быстрее дает отклик, а скорость загрузки страницы увеличивается. Уменьшить CSS-код можно вручную или с помощью специальных инструментов.
Что такое CSS-код
При открытии любого сайта пользователь видит перед собой расположение блоков с текстом, картинками и другим контентом в определенном порядке. Каждая особенность, вплоть до определения оттенка и размера рамок, описывается в форме каскадной таблицы.
Это и есть CSS-код, который обычно хранится в файле style.css (иногда он может иметь другое название). Style.css содержит большое количество селекторов и отвечает за внешнее редактирование страниц сайта.
Некоторые строки style.css не используются, но при этом хранятся в таблице. Чем их больше, тем дольше отвечает сервер, в результате загрузка страницы замедляется. Низкая скорость отображения информации напрямую влияет на лояльность пользователей и ранжирование поисковых систем. Именно поэтому в PageSpeed Insights часто появляется рекомендация — сократить код CSS.
Как уменьшить размер CSS-кода
Проводить манипуляции по сжатию таблицы CSS рекомендуется после окончания работы над сайтом. Сокращение кода приведет его к неудобному для редактирования формату. Поэтому сначала приведите сайт в надлежащий вид, а только потом приступайте к минимизации каскадной таблицы.
Самый быстрый способ уменьшить CSS-код — использовать специальные инструменты. Например, CssCompressor. Вставьте содержимое файла style.css в пустое поле и выберите степень сжатия кода.
Уровень Highest приведет к тому, что код трансформируется в единую очень длинную строку. Для сервера это плюс, так как ему будет проще считать информацию в таком виде. Но если вам понадобится отредактировать код, найти нужный элемент будет сложно.
Так выглядит поле для вставки кода до сжатия:
Так выглядит код до и после максимального сжатия:
Если выбрать степень High, сохранится разделение между классами, но будут удалены лишние пробелы, разрывы строк, разделители. В результате инструмент выдает готовый код с указанием размера:
В данном случае код сократился в полтора раза. Теперь его нужно скопировать и перенести в исходный файл. Чтобы не рисковать, перед этим желательно сделать резервную копию первоначальной версии таблицы и сохранить ее на компьютер.
Если после сокращения все работает нормально, можно приступать к ручной обработке стилей. Альтернативные инструменты для уменьшения кода: CSSResizer, Refresh-SF, CSSMinifer.
Как сократить размер CSS-кода еще больше
Для ручной чистки команд в файле style.css необходимо разбираться в технической оптимизации. Одна ошибка может привести к неправильному отображению стилей на страницах сайта.
Дальше придется искать причину и начинать все с начала. Совет: после каждого изменения проверяйте внешний вид страниц, и только после этого работайте над сжатием CSS дальше.
Самое простое, что можно сделать, — объединить классы с одинаковыми свойствами. Скопируйте данные нескольких классов в один и добавьте команду подключаться только к одному:
После проверки страниц сайта на правильность загрузки скриптов и контента удалите скопированные строки из старых классов.
Еще один метод ручной чистки подразумевает тщательную проверку каждого класса:
Откройте файл style.css через программу Notepad++ или другой текстовый редактор.
Выделите нужный идентификатор, нажмите «Поиск» и «Найти в файлах».
В резервной копии сайта выберите папку с вашей темой, нажав на кнопку с троеточием.
Нажмите кнопку «Найти все». Перед вами откроется окно с найденными совпадениями:
Чем больше таких совпадений, тем больше команд используется с привлечением этого идентификатора.
При отсутствии совпадений или их мизерном количестве проверяемый идентификатор можно удалить со всеми его значениями. На скриншоте найдено одно совпадение. Значит строки 99-104 можно смело чистить.
Дополнительные способы сокращения CSS-кода
Удалить комментарии — подсказки, которые были созданы при написании кода — или заменить их на краткие версии.
Очистить строки от пробелов, оставляя код пригодным для чтения и редактирования.
Упростить команды определения оттенков. Например:
Оптимизировать отступы в строках:
Заключение
CSS-код представляет файл со списком селекторов для отображения внешнего вида страниц сайта. Размер шрифта, тональность фона, цвет рамок — все это определяется файлом style.css. Оптимизировать его величину можно ручным или автоматическим способом.
При первом варианте нужно самостоятельно просмотреть каждый идентификатор и проверить активность его использования. Также следует удалить лишние пробелы, объединить классы по свойствам, оптимизировать шрифт.
Уменьшить CSS-код в несколько раз возможно с помощью онлайн-инструментов. Необходимо вставить весь список команд из файла style.css и сжать его по заданным параметрам. При этом нужно помнить, что в будущем, вероятно, придется вносить правки в код. Поэтому новичку важно сохранить формат кода для удобного прочтения и редактирования.
Наиболее эффективный способ сокращения CSS — использование препроцессоров, таких как Sass, Less, Stylus. С их помощью код становится более читабельным.
Эта статья — часть модуля «Аудит сайта» в Serpstat
Аудит всего сайта или отдельной страницы в один клик. Полный список ошибок, отсортированный по критичности, пути их устранения и рекомендации. Любая периодичность проверки и автоматическая рассылка отчетов на почту.