Содержание

Сравнение эффективности минимизаторов CSS- и JavaScript-кода / Хабр

Разработчики, использующие Bundle Transformer, часто спрашивают у меня: «Какой минимизатор обладает самой высокой степенью сжатия?». В принципе, в сентябре прошлого года в своей статье «Вышел Bundle Transformer 1.6.2 или что изменилось за полгода?» я уже проводил сравнение минимизаторов по степени сжатия кода, но это сравнение было поверхностным и не было подкреплено цифрами.

В этой краткой статье мы проведем сравнение наиболее популярных алгоритмов минимизации CSS- и JS-кода на примере адаптеров-минимизаторов из Bundle Transformer. В качестве исходных файлов будут использоваться файлы bootstrap.css и bootstrap.js из Twitter Bootstrap версии 2.3.2. Измерять размеры файлов мы будем с помощью YSlow.

Сравнение минимизаторов CSS-кода

Размер исходного файла bootstrap.css составляет 127,3 КБ, а после применения GZip-сжатия — 27,9 КБ. В таблице приведена информация о размерах файлов, полученных путем применения к файлу bootstrap. css различных алгоритмов CSS-минимизации:

Адаптер-минимизатор Алгоритм минимизации Размер после минимизации Экономия Размер после минимизации с GZip-сжатием Экономия при GZip-сжатии
YuiCssMinifier YUI CSS Compressor for .Net 2.2.0.0 106,0 КБ 16,73% 24,5 КБ 12,19%
MicrosoftAjaxCssMinifier Microsoft Ajax CSS Minifier 4.92 105,7 КБ 16,97% 24,5 КБ
12,19%
KryzhanovskyCssMinifier CSSO 1.3.7 105,6 КБ 17,05% 24,6 КБ 11,83%
WgCssMinifier WebGrease Semantic CSS Minifier 1. 3.0 — — — —
Из таблицы видно, что наилучший результат показал минимизатор CSSO (CSS Optimizer) от компании Яндекс. Основным достоинством данного минимизатора является поддержка структурной минимизации CSS-кода (о структурной минимизации можно более подробно прочитать на сайте методологии БЭМ).

К сожалению, структурный минимизатор от компании Microsoft — WebGrease Semantic CSS Minifier, выбыл из борьбы, потому что не смог минимизировать файл bootstrap.css.

Другой минимизатор от Microsoft — Microsoft Ajax CSS Minifier наоборот показал очень хороший результат по сравнению со своим основным конкурентом YUI CSS Compressor for .Net.

Сравнение минимизаторов JS-кода

Размер исходного файла bootstrap.js составляет 61,9 КБ, а после применения GZip-сжатия — 16,9 КБ. В таблице приведена информация о размерах файлов, полученных путем применения к файлу
bootstrap. js различных алгоритмов JS-минимизации:

Адаптер-минимизатор Алгоритм минимизации Размер после минимизации Экономия Размер после минимизации с GZip-сжатием Экономия при GZip-сжатии
CrockfordJsMinifier JSMin от 22.05.2007 34,5 КБ 44,26%
11,1 КБ		 34,32%
EdwardsJsMinifier Packer 3.0 31,3 КБ 49,43% 10,4 КБ 38,46%
YuiJsMinifier YUI JS Compressor for .Net 2.2.0.0 28,8 КБ 53,47% 10,0 КБ 40,83%
ClosureLocalJsMinifier Closure Compiler Application от 11.
04.2013 (режим Simple)		 28,1 КБ 54,60% 9,7 КБ 42,60%
MicrosoftAjaxJsMinifier Microsoft Ajax JS Minifier 4.92 28,3 КБ 54,28% 9,8 КБ 42,01%
UglifyJsMinifier UglifyJS 2.3.6 28,3 КБ 54,28% 9,8 КБ 42,01%
Как и следовало ожидать, 1-е место занял минимизатор Closure Compiler от компании Google. Следует также отметить, что в режиме
Advanced можно достичь еще более лучших результатов.

Как и в случае с CSS-минимизацией Microsoft Ajax JS Minifier обошел YUI JS Compressor for . Net. Кроме того, при сжатии файла bootstrap.js Microsoft Ajax JS Minifier и UglifyJS показали одинаковый результат и оба заняли 2-е место.

Старейшие минимизаторы JSMin и Packer показали худшие результаты. Кроме того, код, минимизированный Packer, содержал ошибки.

Выводы

Безусловно, в битве минимизаторов победили поисковые гиганты Яндекс и Google.

Но и компания Microsoft не сидела сложа руки: хоть команда Рона Логана еще не выпустила стабильную версию WebGrease Semantic CSS Minifier, но они смогли поднять Microsoft Ajax Minifier на совершенно новый уровень.

UglifyJS по-прежнему можно считать JS-минимизатором №2 в мире.

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

Опрос

В заключении статьи предлагаю вам принять участие в опросе:

Полезные ресурсы

Аналитика

  • Яндекс Радар
  • Яндекс.
    Метрика
  • Statcounter

Оптимизация

  • Минификатор CSS
  • Минификатор JS
  • PageSpeed Insights – Проверка оптимизации страницы
  • Normalize.css
  • О normalize.css
  • Оптимизация контента
  • Ускоряем загрузку ресурсов для сайта: preconnect, prefetch, prerender, preloading…
  • Для чего стоит использовать предварительную загрузку?

Кроссбраузерность

  • Can I Use
  • Автопрефиксер CSS онлайн
  • Shouldiprefix – Свойства которые необходимо использовать с префиксами
  • Microsoft Edge VMs
  • BrowserStack – Тестирование веб-сайтов в браузерах
  • Parallels – Виртуальная машина для macOS
  • Simulate Mobile Devices with Device Mode in Chrome DevTools

Тестирование

  • Validator. w3
  • Perfectpixel
  • Как попасть в макет и не сойти с ума
  • Краш-тест вёрстки

Стиль кода

  • БЭМ
  • Стиль кода HTML Академии
  • Code Guide by @mdo
  • Руководство по оформлению HTML/CSS кода от Google
  • Слова, часто используемые в CSS-классах
  • Слова и сокращения в CSS-классах
  • Типовые названия классов для html
  • Progressive Enhancement
  • Graceful Degradation
  • Основные правила и принципы написания CSS
  • Принципы написания однородного CSS-кода
  • EditorConfig
  • EditorConfig — Одни Настройки для всех Редакторов/IDE

Доступность

  • Рекомендации по разработке сайтов для людей с нарушениями зрения
  • Спецификация WAI-ARIA 1. 1
  • Как прятать
  • Правила использования ARIA в HTML
  • Hiding DOM elements

Блочная модель

  • Интерактивная диаграмма блочной модели
  • Centering in CSS: A Complete Guide
  • How To Center in CSS
  • Организация отступов в верстке (margin/padding)
  • Границы и отступы в потоке
  • Антигерой CSS-разметки — свойство «display: table»

Flexbox

  • Flexbox cheat sheet
  • Flexbox playground
  • Flexbox in 5 minutes
  • Описание свойств Flexbox
  • Выравнивание элементов в Flex контейнере
  • Визуальное руководство по свойствам Flexbox из CSS3
  • Полное руководство по Flexbox
  • Flexbugs

Float

  • Раскладка в CSS: float
  • Float’омания: разъяснение как работает css свойство float

Grid

  • Основные понятия Grid Layout
  • Вёрстка на Grid в CSS. Полное руководство и справочник
  • Полное руководство по CSS Grid
  • Большая статья про гриды (CSS Grid Layout)
  • Вёрстка реальных проектов на гридах (CSS Grid Layout) уже сейчас

Адаптивная верстка

  • 5 распространенных проблем, которые решает адаптивная верстка
  • Responsive Resources
  • Основные принципы «отзывчивого» веб-дизайна
  • Контент по центру, фон по ширине

Шрифты и типографика

  • Google Fonts
  • Fonts 4 web – Бесплатные кириллические шрифты
  • Коллекция веб-безопасных шрифтов
  • Создание типографики с вертикальным ритмом
  • Набор спецсимволов
  • Иконки utf-8
  • Конвертер веб-шрифтов
  • Подключение нестандартных шрифтов
  • Оптимизация шрифтов
  • Ремы, емы, и почему отказ от них — не проблема
  • Создание вертикального ритма на сайте
  • О верстке вертикального ритма
  • Исчерпывающее руководство по стратегиям загрузки веб-шрифтов
  • CSS font-display: The Future of Font Rendering on the Web

SVG

  • SVGOMG – svgo gui
  • URL-encoder for SVG
  • SVG for Everybody – поддержка SVG-спрайтов
  • Flaticons – векторные иконки
  • Seeklogo – векторные логотипы компаний
  • SVG Porn – векторные логотипы
  • Способы генерации SVG-спрайтов на примере библиотеки svg-sprite
  • Символьный SVG-спрайт. Подробное руководство
  • SVG в вебе. Практическое руководство
  • Доступные SVG
  • Блог Юлии Бухваловой про SVG
  • Как правильно вставлять SVG
  • Как проектировать, создавать и анимировать SVG

Оптимизация растровой графики

  • Squoosh – оптимизация изображений от Google
  • iLoveIMG
  • TinyPNG – PNG and JPEG compression
  • Optimizilla – online image optimizer
  • Сompressor – сжимает JPG и PNG
  • ImageOptim
  • ImageAlpha – оптимизация PNG
  • FileOptimizer (for Windows)
  • Оптимизация изображений
  • WebP
  • Using WebP Images

Прочая графика

  • Octicons – Иконочный шрифт заточеный под ретину, от GitHub
  • UI Gradients – CSS градиент генератор
  • StickPNG – Free PNG
  • Unsplash – Beautiful Free Images & Pictures
  • Iconka – Иконки, иллюстрации, анимации
  • TOP Logos – Логотипы компаний (русские)
  • Font Awesome – Иконочный шрифт
  • Fontello – Онлайн генератор шрифтов с иконками
  • Spritepad – Веб-генератор спрайтов
  • Favicon Generator
  • X-Icon Editor
  • Заметка: как использовать HTML «picture» для адаптивных изображений
  • Picturefill – полифилл для picture
  • Теория цвета в цифрах
  • Про PNG
  • Как отличить контентное изображение от декоративного
  • Форматы изображений
  • Какие нужны фавиконки

Node.

js
  • Node.js
  • Установка Node.js
  • Полезные команды для работы с Node.js
  • How to Uninstall Node.js from Mac
  • npm-package.json
  • npm-install
  • Node Hero: начало работы с Node.js
  • Bower – Менеджер пакетов (сторонних библиотек проекта)

Плагины для Gulp

  • gulp
  • gulp-sass – Компиляция SASS/SCSS
  • gulp-watch – Отслеживание изменений
  • browser-sync – Запуск сервера с живой перезагрузкой страниц
  • gulp-stylelint – Линтинг CSS
  • gulp-concat – Конкатенация (объединение) файлов
  • gulp-postcss + autoprefixer
  • gulp-autoprefixer
  • gulp-clean-css или gulp-csso – Минификация CSS
  • gulp-uglify – Минификация JS
  • gulp-htmlmin – Минификация HTML
  • del – Удаление файлов
  • gulp-plumber – Безперебойная работа Gulp
  • gulp-sourcemaps
  • gulp-rename – Переименование файлов
  • gulp-imagemin – Оптимизация изображений
  • gulp-webp – Конвертация изображений в формат WebP
  • gulp-svgstore – Сборка SVG-спрайтов
  • gulp-posthtml + posthtml-include – Шаблонизация HTML

CSS-препроцессоры

  • Как работать с CSS-препроцессорами и БЭМ
  • Less. Путеводитель для новичков
  • Less
  • Sass
  • Руководство по написанию разумного, поддерживаемого и масштабируемого Sass.
  • CSS-препроцессоры против CSS

Плагины для Atom

  • Atom beautify
  • Color picker
  • Emmet
  • File Icons
  • Minimap
  • Pigments
  • SVG Preview
  • Remote FTP
  • Git-Plus
  • EditorConfig
  • Git Log – Рисует график коммитов
  • PlatformIO IDE Terminal – Встраивает Terminal
  • Linter
  • linter-eslint – Проверяет JS
  • linter-stylelint – Проверяет CSS
  • Busy Signal – Показывает что пакет выполняет задачу

GitHub

  • GitHub Desktop
  • Atlassian SourceTree
  • GitKraken
  • Создание файла gitignore
  • Pro Git book
  • Git How To — интерактивный тур по основам Git
  • Интерактивное обучение работе с ветками в Git
  • Скринкаст по Git (от javascript. ru)
  • Коллекция часто задаваемых вопросов по Git
  • Шпаргалка по Git
  • Шпаргалка по консольным командам Git
  • Правила полета на Git
  • Глоссарий терминов для Git и GitHub
  • Полезные команды для работы с Git
  • Работа с Git через консоль
  • Как склеить коммиты и зачем это нужно
  • Следите за концом строки
  • Гитхаб как хостинг

Terminal

  • iTerm2
  • Terminal в Mac OS
  • Искусство командной строки
  • Как сделать красивую консоль в Mac и Linux

Bootstrap

  • Bootstrap
  • Bootstrap на русском
  • Material Design for Bootstrap
  • Free themes for Bootstrap
  • Start Bootstrap – Bootstrap Templates & Themes

Основы

  • Выражения и операторы
  • MDN. Массивы
  • MDN. Объекты
  • MDN. Работа с объектами
  • MDN. Циклы и итерации
  • Как работает рекурсия – объяснение в блок-схемах и видео
  • MDN. Использование объекта Console
  • Всё, что вы хотели знать об областях видимости в JavaScript

Алгоритмы

  • Сортировки в гифках: 8 самых популярных алгоритмов
  • Об основах алгоритмов сортировки в иллюстрациях

Оформление кода

  • JavaScript: путь к ясности кода

Материалы для изучения

  • Современный учебник Javascript
  • Выразительный JavaScript

Canvas

  • MDN. Руководство по canvas
  • Выводим текст на HTML5 Canvas

Разное

  • Клавиатурные события
  • keyCod.es – Код клавиши
  • Что такое Объектная Модель Документа (DOM)?
  • Отладка JavaScript в Google Chrome и Visual Studio Code

jQuery плагины

  • ​​Slick – Адаптивный слайдер
  • ​​Owl Carousel – Адаптивный слайдер-карусель
  • Tooltipster – Всплывающие подсказки
  • ​​Flatpickr – Всплывающие окна с выбором даты
  • CodeHouse – Крутые подборки готовых решений на CSS и jQuery без плагинов
  • fancybox – Галерея и модальное окно

Как работают сайты

  • A fun and colorful explanation of how DNS works – Как работает DNS
  • Что на самом деле происходит, когда пользователь вбивает в браузер адрес google. com
  • Принципы работы современных веб-браузеров
  • Как зарегистрировать свой домен

Форматирование кода

  • HTML
  • CSS
  • JS
  • JSON
  • XML
  • Python
  • PHP
  • SQL

Библиотеки с анимациями

  • Animate.css – Библиотека CSS анимаций
  • It’s Tuesday. – Простые и приятные CSS анимации

Генераторы кода и CSS-свойства

  • Nth-child и nth-of-type
  • CSS Click Chart – Реализация действия на CSS
  • Генератор кода и примеры
  • Полная таблица CSS-свойств

Браузеры

  • Microsoft Edge
  • Google Chrome
  • Mozilla Firefox
  • Opera
  • Apple Safari
  • Яндекс. Браузер

Графические редакторы

  • Adobe Photoshop
  • Adobe Illustrator
  • Adobe Export Assets
  • Sketch
  • Zeplin
  • Avocode

Редакторы кода

  • VS Code
  • Sublime text 3
  • Atom
  • Brackets
  • Notepad ++
  • WebStorm
  • Обзор редакторов кода

Песочницы

  • JS fiddle
  • CodePen
  • CSS Desk

Платные курсы

  • Loftschool
  • Специалист
  • Хекслет
  • Нетология
  • Skillbox
  • GeekBrains
  • EpicSkills
  • HTML Academy
  • FructCode
  • Udemy
  • Яндекс. Практикум
  • JavaRush
  • ITVDN

Беслатные курсы

  • Codecademy
  • freeCodeCamp
  • Coursera
  • Stepik
  • Codewars
  • W3Schools

Полезные ресурсы

  • CSS-Tricks
  • MDN Web Docs
  • HTML.com
  • htmlbook.ru
  • WebReference
  • HTML5BOOK.RU
  • Про CSS
  • CSS Cheat Sheet
  • Индивидуальное обучение программированию с ментором
  • Спецификация HTML
  • Спецификация CSS
* Рекомендуемые ресурсы

Online CSS Minifier & Compressor Tool

  • Инструменты
  • Минификатор CSS

CSS Minifier мгновенно минимизирует и оптимизирует ваш CSS-код для более быстрой загрузки веб-страницы и снижения пропускной способности. Сжимает код CSS, удаляя все пробелы, новые строки, отступы и комментарии.

Настройки Номер строки Перенос строки Темный режим

Сократите код CSS для повышения производительности

Простой и легкий в использовании

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

Удаление ненужных элементов

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

Экономит время

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

Вопросы и ответы по минимизации CSS

Что такое минимизация CSS?

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

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

Как минимизация CSS ускоряет мой сайт?

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

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

  • Увеличить скорость загрузки.
  • LCP (самая большая содержательная картина) будет улучшена.
  • Более быстрая доставка за счет уменьшения размера файла.
  • Оптимизирует использование полосы пропускания CDN.

Влияет ли сжатие файла CSS на процесс синтаксического анализа в браузере?

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

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

Мы можем минимизировать файлы CSS, используя:

  • Онлайн-инструменты минификации
  • Инструменты командной строки
  • CDN
  • Плагины WordPress, если вы используете сайт WordPress

Почему вам следует использовать инструмент минимизации CSS?

Основные преимущества использования инструмента минимизации CSS:

  • Уменьшает размер файла CSS.
  • Удалить ненужные элементы.
  • Возвращает результаты через несколько секунд.

Как использовать онлайн-инструмент для минимизации CSS?

Использование нашего бесплатного минимизатора CSS очень просто и понятно.

  • Шаг 1: Вставьте скопированный код CSS в поле ввода или обновите файл CSS, который вы хотите минимизировать.
  • Шаг 2: Переключите параметр настроек и измените настройки в соответствии с вашими предпочтениями.
  • Шаг 3: Нажмите кнопку «Minfy CSS», и ваша минимизированная версия CSS будет отображаться в окне вывода.

Могу ли я загрузить и сжать файл CSS?

Да, нажмите кнопку «Выбрать файл» и выберите файл CSS, который вы хотите минимизировать из вашей системы.

Связанные инструменты

Минимизация CSS в Интернете с помощью CSS Minifier

Знаете ли вы, что минимизация CSS — это одна из основных оптимизаций, которые вам необходимо выполнить, чтобы сделать ваш веб-сайт или приложение поисковой системой и удобными для пользователя? Исследование показало, что если веб-сайт загружается более трех секунд, в 60% случаев посетитель бросает его и переходит на другой веб-сайт? Поэтому ускорение загрузки вашего веб-сайта или приложения имеет решающее значение. Для этого вам нужно выполнить несколько шагов, одним из которых является сжатие и минимизация вашего CSS-кода. Это не только для конечных пользователей, поисковые системы также отдают приоритет веб-сайту, который хорошо оптимизирован и требует меньше времени для отображения. Вот тут и приходит на помощь инструмент css minify.

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

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

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

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

Пример минимизации

До:

#лев {
  размер шрифта: 2em;
  цвет: стальной синий;
}
#первый {
  размер шрифта: 1em;
  красный цвет;
}
#linext {
  размер шрифта: 2em;
  черный цвет;
}
#следующий {
  размер шрифта: 1em;
  оранжевый цвет;
}
#литрет {
  размер шрифта: 2em;
  цвет синий;
}
#третий {
  размер шрифта: 1em;
  цвет: розовый;
}
#лиласт {
  размер шрифта: 2em;
  коричневый цвет;
}
#один {
  размер шрифта: 1em;
  цвет: зеленый;
}
После:

#lione{размер шрифта:2em;цвет:#4682b4}#first{размер шрифта:1em;цвет:красный}#linext{размер шрифта:2em;цвет:#000}#next{размер шрифта:1em;цвет:оранжевый}#li Third{размер шрифта:2em;цвет:#00f}#третий{размер шрифта:1em;цвет:розовый}#lilast{размер шрифта:2em; цвет: коричневый} # один {размер шрифта: 1em; цвет: зеленый}

Зачем использовать CSS Minifier?

Целью минификации является увеличение скорости веб-сайта.

No related posts.