Каталог расширений

Популярные теги

3gp       avi       fb2       jpg       mp3       pdf      

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


Как уменьшить размер CSS, JS и HTML файлов


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

Ниже приведены примеры того, что удаляется во время минификации файла:

  • Символы пробелов;
  • Комментарии;
  • Разрывы строк;
  • Разделители блоков.

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

Чтобы различать минифицированные файлы, в их имена добавляется расширение .min (например: foobar.min.css).

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

Следовательно, процесс сжатия осуществляется следующим образом:

  1. Файл сжимается с помощью алгоритма сжатия;
  2. Выполняется запрос для сжатой версии файла;
  3. Сжатый файл отправляется от сервера к клиенту;
  4. Клиент распаковывает файл и считывает информацию.

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

Если браузер не поддерживает конкретный алгоритм сжатия, сервер будет отправлять данные в первоначальном виде (без обработки).

В следующем примере показано, как CSS файл выглядит до и после минификации.

.entry-content p { font-size: 14px !important; } .entry-content ul li { font-size: 14px !important; } .product_item p a { color: #000; padding: 10px 0px 0px 0; margin-bottom: 5px; border-bottom: none; }
.entry-content p,.entry-content ul li{font-size:14px!important}.product_item p a{color:#000;padding:10px 0 0;margin-bottom:5px;border-bottom:none}

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

  • csscompressor.com — позволяет выбрать уровень минификации и размер файла на выходе:
  • cssminifier.com — инструмент довольно легкий в понимании. Введите существующий CSS и уменьшенная версия создается автоматически. После этого можно загрузить сжатый код CSS в виде файла:
  • yui.github.io: позволяет осуществлять процесс сборки в среде разработки, которая уменьшает, переименовывает и сохраняет оптимизированный файл в рабочем каталоге;
  • phpied.com: инструмент использует возможности минификации CSS и YUI Compressor, но он применяет JavaScript вместо Java.
  • closure-compiler.appspot.com: можно использовать как онлайн-инструмент и как API-интерфейс. Этот инструмент позволяет настроить оптимизацию и форматирование:
  • jscompress.com: позволяет минимизировать JS путем копирования/вставки кода. Дополнительно можно загрузить JavaScript-файл и выполнить процесс минификации нескольких файлов одновременно:
  • javascript-minifier.com: создан теми же разработчиками, что и cssminifier. JS Minifier позволяет скопировать минимизированный код или скачать его в виде файла. А также осуществить сжатие CSS и JS онлайн:
  • yui.github.io: предоставляет возможность минимизировать JS файлы для веб-проектов.
  • htmlcompressor.com: предоставляет возможность выбора между различными уровнями минификации HTML и встроенного в него кода CSS и JS:
  • minifycode.com: представляет собой текстовое поле, куда нужно вставить код HTML и сгенерировать его уменьшенную версию:

Существует множество инструментов для минификации файлов. Многие CMS также предлагают плагины и расширения для минификации CSS, JS и HTML — файлов.
  • Better WordPress Minify;
  • Autoptimize.

Многие плагины кэширования также предлагают возможность минификации. Например, Cache Enabler поставляется с возможностью включения минификации HTML и JS. Использование этой функции позволяет уменьшить время загрузки веб-страниц, но в некоторых случаях это может привести к конфликту с другим плагином сжатия CSS WordPress.

В сообществе Drupal популярным вариантом для минификации является модуль Minify. Он позволяет минимизировать HTML, JavaScript файлы и использует компилятор Google Closure, чтобы проанализировать минификацию. Конфигурация данного модуля проходит быстро.

CMS Joomla также предлагает расширение для оптимизации сайта под названием JCH Optimize, которое уменьшает размер JavaScript и производит сжатие CSS файлов. Оно также предоставляет возможность включить GZIP сжатие для агрегированных файлов.

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

Данная публикация является переводом статьи «How To Minify CSS, JS, and HTML» , подготовленная редакцией проекта.

Как сжать код HTML, CSS, JavaScript с помощью плагинов и без : WEBCodius

Когда вы сжимаете файлы CSS, HTML и JavaScript на своем веб-сайте, то вы тем самым ускоряете его. И хотя, в данном случае, речь не идёт о глобальном ускорении сайта на WordPress, но хоть и немного, но скорость сайта за счет этого увеличивается.

Термин сжатие или, по другому, «минимизация» (Minify) — это процессы удаления ненужных символов в исходном коде.

Эти символы включают в себя пробелы, разрывы строк, комментарии и разделители блоков, которые полезны для нас, людей, но не нужны для машин.

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

Вот пример того, как выглядит минимизация CSS.

До сжатия

После сжатия

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

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

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

Поэтому, такую оптимизацию лучше сделать с помощью специальных сервисов.

Как сжать HTML, CSS и JavaScript с помощью онлайн-инструментов.

Общий принцип работы онлайн инструментом для сжатие просты и обычно включают следующие шаги:

  • Вставка или загрузка исходного кода в окно сервиса.
  • Настройка оптимизации (если они доступны)
  • Отдача команды на сжатие.
  • Копирование или загрузка готового кода из окна сервиса.

В этом примере я использовал инструмент для минимизации кода с сайта minifycode.com. На этом сайте собраны инструменты сжатия кода сразу для всех трёх типов файлов: HTML, CSS, JavaScript.

Для начала, найдите и скопируйте нужные файлы и откройте его с помощью простого редактора (лучше всего использовать Блокнот или его аналоги, или специализированный софт для программистов, такой как Sublime Text. Программы наподобие Word, не пойдут).

После этого, выделите и скопируйте код. (Ctrl+A, Ctrl+C).

Перейдите на minifycode.com и откройте вкладку CSS minifier. Затем вставьте код CSS в поле ввода и нажмите кнопку «Minify CSS».

После того, как код будет готов, скопируйте его и вставьте обратно в свой текстовый редактор (только не забудьте перед этим удалить предыдущее содержимое файла).

Вот и всё! Теперь загрузите обратно файл на хостинг, и ваш сайт станет чуточку быстрее. Вот какой результат получился у меня.

Точно также, нужно поступить и с файлами JavaScript, HTML.

Другие сайты для сжатия.

Есть и другие сервисы для сжатия. Вот основные из них.

Closure Compiler (только JS) — является частью Closure Tools, набора инструментов от разработчиков Google. Он позволяет минимизировать Javascript файл и имеет ряд других полезных опций. Вы можете загрузить Javascript, введя URL-адрес файла, а затем выбрать способ оптимизации и форматирования кода. Например, вы можете выбрать оптимизацию своего кода путем удаления пробелов, только если вы это заходите.

cssminifier.com и javascript-minifier.com (CSS и JS) — эти два мини-сжимателя просты в использовании. Просто вставьте свой код и затем нажмите кнопку Minify для вывода сжатого кода.

csscompressor.net — только CSS.

jscompress.com — только JS.

refresh-sf.com — HTML, CSS и JS.

htmlcompressor.com — HTML, CSS и JS.

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

Сжатие файлов HTML, CSS и JavaScript с помощью плагинов WordPress.

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

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

Autoptimize

Это, пожалуй, самый популярный плагин для минимизирования HTML, CSS и JavaScript. Он популярен, прост в использовании и полон мощных функций для улучшения производительности. Он может объединять скрипты, минимизировать и кэшировать код сайта. В качестве бонуса у вас есть дополнительные опции для оптимизации Google Fonts, изображений и многое другое.

Чтобы использовать Autoptimize, его нужно скачать, установить и активировать плагин из панели инструментов WordPress в разделе «Плагины» — «Добавить новый».

Теперь переходим к пунктам: Оптимизировать код JavaScript?,

Оптимизировать код CSS?, Оптимизировать код HTML? и выставляем соответствующие галочки.

WP Fastest Cache

Это бесплатный плагин для кеширования WordPress, пользующийся огромной популярностью. Плагин выполняет различные оптимизации производительности, включая объединение и минимизацию файлов HTML, CSS и JavaScript для повышения производительности.

После того, как плагин установлен, просто перейдите на вкладку WP Fastest Cache на боковой панели управления сайтом WordPress Dashboard. На вкладке настроек вы найдете опции для объединения и минимизации файлов HTML и CSS. Хотя минимизация JavaScript доступна только в профессиональной версии.

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

W3 Total Cache

Это еще один популярный плагин для ускорения сайта. И здесь, для сжатия файлов HTML, CSS и JavaScript нужно выставить всего одну галочку.

Заключение.

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

И хотя они не дают прям совсем мощного прироста скорости, но прирост есть. А если учесть, насколько это просто сделать, то это нужно сделать.

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

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

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

Ну а если у вас остались еще вопросы, то задавайте их в разделе с комментариями

15 Сервисов сжатия CSS файлов

Вступление

В статьях о скорости загрузки сайта WordPress я часто писал о необходимости сжимать CSS файл(ы) сайта и проверять их на валидность. Пришло время поговорить, где сжимать файлы CSS.

Сжатие и валидность

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

Именно поэтому, все 15 Сервисов сжатия CSS файлов тестирую по простенькому алгоритму (пункты 1 и 2 в начале, пункты 3 и 4 для каждого сервиса сжатия):

  1. Беру контрольный CSS файл шаблона Twenty Seventeen. Его объем 84,8 кБ.
  2. Проверяю его на валидность тут (http://jigsaw.w3.org/css-validator/).
  3. Использую сервис сжатия из списка ниже.
  4. Опять проверяю на валидность.

Результаты и описания сервисов сжатия CSS файлов в этом обзоре.

Проверка валидности тестируемого файла

Проверяем фал на валидность на сервисе W3 (http://jigsaw.w3.org/css-validator/).

Результат: Проверка файла CSS шаблона Twenty Seventeen на валидность показала 10 ошибок и 106 предупреждений. Сервис сам исправляет эти ошибки, и отдает файл исправленным ниже ошибок. Теперь у нас есть валидный файл CSS для дальнейшего тестирования. Объем файла после исправления снизился до 67 кБ.

15 Сервисов сжатия CSS файлов

Инструмент css сжатия cy-pr.ru

https://www.cy-pr.com/tools/css/

Это единственный русскоговорящий сервис этого обзора. Набор инструментов cy-pr.ru tools пользуется хорошей популярностью среди веб-мастеров, для простого, можно сказать общего, анализа сайта. Есть среди инструментов и сжатие файлов css.

В контексте использования для сжатия CSS файлов WordPress, этот инструмент интересен, тем, что после сжатия не нарушает структуру файла. Такой файл удобнее читать и он не нарушает правила составления CSS файлов WordPress.

На сервисе есть детальные настройки сжатия (справа). Для примера использую стандартное сжатие без нарушения баланса сжатия и читаемости.

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

  • Тест с выбранным файлом дает такой результат:
  • Исходный код: 66.978 Кб, Оптимизированный код: 56.704 Кб, Коэффициент: 15.3% (-10274 байт)
  • Валидность после сжатия: вижу что ошибок не появилось.

  • Результат. Сжатие файла было хорошее (15,3%), валидность заранее исправленного файла после сжатия не пострадала.
  • Итог. Сервис тест прошел.
  • Примечание. Я специально так подробно показал это тестирование, чтобы вы поняли алгоритм оценки.

Для экономии, фото с результатами тестовых проверок других сервисов больше не будет (почти).

cssdrive.com

http://www.cssdrive.com/index.php/main/csscompressor/

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

Результат сжатия тест файла:

  • Оригинал: 70611 bytes
  • Сжатый файл: 62946 bytes
  • Сжато: 7665 bytes (11%).
  • Валидность w3: Ошибок не обнаружено.

cleancss.com

http://www.cleancss.com/

Сжатие файлов CSS это лишь один из инструментов этого ресурса. Здесь сжать можно всё (смотрим скрин).

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

Тестовый файл сжался, но информации о сэкономленном объеме я не получил. При этом полностью убралось структурное (каскадное) оформление файла, что в принципе не является ошибкой WordPress, но не рекомендовано для распространения.

Проверяю сжатый файл на валидность: ошибок НЕТ.

Смотрю объем сжатого файла в свойствах, вижу его новый объем 56,1 по сравнению с 65,4. А это сжатие на 14%. Неплохо.

csscompressor.com

http://www.csscompressor.com/

Вот что пишет автор в анонсе. Используйте CSS Compressor для сжатия CSS (CSS 1, CSS 2, CSS 2.1 и CSS 3), чтобы уменьшить размер CSS-кода и ускорить загрузку вашего сайта. Вы можете выбрать один из четырех уровней сжатия, в зависимости от того, насколько читаемым вам нужен сжатый CSS, и степень сжатия. Это быстро, легко и бесплатно!

Подтверждаю, отличный инструмент, с простым и современным дизайном сервиса. Работает просто, есть дополнительные настройки.

  • Из недостатков, отсутствие возможности проверить загрузочный файл CSS с компьютера.
  • Проверка тестового файла в режиме стандартного сжатия дала, экономию 10,23%.
  • Контрольная проверка файла на валидность ошибок не выявила.

Giftofspeed.com

https://www.giftofspeed.com/css-compressor/

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

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

Современный дизайн инструмента сочетается со скоростью работы. Сжатие тестового файла дали следующий результат:

  • Original size: 66979 bytes
  • Compressed size: 57097 bytes
  • You save: 14.75%
  • Валидатор сжатый файл прошел без ошибок.

pagecolumn.com

http://www.pagecolumn.com/tool/css_compressor.htm

Простой инструмент сжатия без лишних настроек. Работает мгновенно.

Тестовый результат:

  • Было: 64496 bytes
  • Стало: 56595 bytes
  • Сжатие: 12.3%

А вот проверка на валидность выявила одну критическую ошибку разбора.

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

lotterypost.com

http://www.lotterypost.com/css-compress.aspx

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

Этот инструмент не хранит копию вашего кода. Сервер обрабатывает его «на лету» и возвращает результат вам, не сохраняя ничего. Поэтому, если вы используете этот инструмент для сжатия суперсекретного CSS-кода (если есть такая вещь), он не сохраняется или не читается автором

Результаты теста:

  • Размер ввода: 64,495 байт
  • Размер выходного файла:57,059 байт
  • Сжатие:7 436 байт (вход уменьшен на 11,5%)
  • Время:0,9259 секунд

Валидность без ошибок.

Примечание: Я специально добавил столь подробное описание сервиса, чтобы подчеркнуть еще одну грань онлайн инструментов – безопасность информации.

phpinsider.com

http://www.phpinsider.com/compress_css.php

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

cssportal.com  

http://www.cssportal.com/css-optimize/

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

При сжатии контрольного файла получены результаты:

  • Input: 66.979KB,
  • Output: 60.764KB,
  • Compression Ratio: 9.3% (-6215 Bytes).

creativyst.com

http://www.creativyst.com/Prod/3/

Не интересно.

generateit.net

http://www.generateit.net/css-optimize/

Клон www.cssportal.com с кривой работой.

tools.arantius.com

http://tools.arantius.com/css-compressor

JavaScript инструмент, дающий на контрольном файле 11,19 % сжатия. Сносит структуру файла, но отдает валидный результат. Просто и не интересно.

refresh-sf.com

Инструмент сжатия: Online JavaScript/CSS/HTML Compressor

http://refresh-sf.com/

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

  • Вход: 64.50 KB
  • Выход: 55.08 KB
  • Gzip: 10.64 KB.

Общие выводы

Честно говоря, в начале статьи, для себя я бы остановился после первого компрессора. Однако, к выводам, рекомендую www.cssportal.com  и не столько для сжатия, сколько для комплексной работы с CSS файлами.

Итак, для сжатия рекомендую:

Для работы с CSS файлами:

Выбирайте, что вам больше нравиться, а сжимая файл, не забывайте про его валидность и проверяйте её до и после сжатия, тут:

http://jigsaw.w3.org/css-validator/

Обратите внимание, это важно!

  • Повторюсь. Файлы CSS, которые вы берете для сжатия, а это файл [style.css] шаблона WordPress, нужно обязательно проверять на валидность до сжатия (ошибки встречаются часто) и после сжатия.
  • После проверки валидности, если в файле найдены ошибки, сервис W3 отдает исправленный файл CSS ниже по странице проверки.
  • Всегда имейте под рукой копию сжимаемого файла CSS, на всякий случай.

©www.wordpress-abc.ru

Еще инструменты веб-мастера

Похожие посты:

Похожее

Как сократить размер CSS кода на сайте

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

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

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

Наиболее эффективный способ сокращения CSS — использование препроцессоров, таких как Sass, Less, Stylus. С их помощью код становится более читабельным.

Разгоняем сайт за счет уменьшения внешних файлов

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

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

Суть процесса сжатия

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

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

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

CSS компрессор

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

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

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

В настройки входят параметры сжатия с тремя значениями:

  • Light – в ходе обработки сервис реагирует только на пробелы, точки с запятой и табуляцию. Переносы строк в этом режиме игнорируются.
  • Normal – удаляются лишние переходы на новую строку таким образом, чтобы каждое правило начиналось с новой строки. Также сжатию подвергается кодировка цветов.
  • Super compact – сносит абсолютно все пробелы и переходы на новые строки.

Следующий момент, который можно контролировать с помощью настроек – комментарии:

  • Don't strip any comments – кто знает английский – догадался, комментарии пропускаются и не удаляются.
  • Strip ALL comments – удаление полностью всех комментариев.
  • Strip comments at least X chars long – устанавливается лимит комментария по количеству символов, остальное – удаляется.

В результате обработки кода в компрессоре можно сокращать объем CSS файла на целых 25%.

Для справки

Существует противоположный по действию сервис - CSS Uncompressor, который разжимает сокращенные файлы. При использовании этого сервиса стоит знать о том, что он сносит корректную форму записи data:url.

Оценок: 3 (средняя 5 из 5)

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

Как ускорить сайт с помощью gzip, brotli, минификации и других способов

Разбираемся, как уменьшить вес сайта и ускорить загрузку страниц: как использовать сжатие gzip и brotli, минифицировать CSS, HTML, JS, кэшировать страницы в браузере пользователя, как оптимизировать изображения и другую графику.

Зачем уменьшать размер HTML-страницы

С каждым годом вес HTML-страниц в среднем увеличивается. По данным MachMetrics, средний размер веб-страницы в 2018 году — 2МБ, это в три раза больше, чем три года назад. Это происходит, потому что на сайты добавляют более качественные и тяжелые изображения и видео, CSS или JS-файлы.

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

Пользователи не будут ждать долгой загрузки, максимум, который они ждут — 2-3 секунды на десктопе или 3-4 на мобильном устройстве. Если сайт так и не загрузился, пользователь закроет страницу — для поисковиков это будет значить, что сайт не удовлетворяет задачи пользователей. Поисковики стимулируют веб-мастеров ускорять и облегчать сайты. Обновление Google Speed Update занижает позиции очень медленных сайтов, к тому же Google переводит сайты в Mobile-first index — это значит, что mobile-friendly сайты получат преимущество, десктопная выдача будет строиться на основе мобильной, где особенно важен вес страницы.

Иногда незначительные задержки скорости не критичны, если посетители целенаправленно хотят получить услуги, товары или информацию с конкретного сайта. К примеру, по данным инструмента Google PageSpeed Insights, у сайта amazon.com довольно низкая скорость загрузки с мобильных устройств, но Amazon востребован: пользователи готовы ждать, чтобы делать выгодные заказы.

Анализ amazon.com

Скорее всего Amazon рассчитывает на то, что пользователи со смартфонов будут скачивать мобильное приложение, поэтому не работает над скоростью мобильной версии сайта.

Измерить скорость загрузки своего сайта и сравнить с конкурентными можно с помощью инструментов Google PageSpeed Insights или Проверка скорости сайта от PR-CY.

Фрагмент результатов проверки

Если хотите ускорить загрузку страницы, то рекомендуем уменьшить ее размер.

Как уменьшить размер HTML

Для уменьшения размера HTML-страницы нужно сжать код и облегчить элементы:

  1. Избавиться от переадресации с целевой страницы. Google пишет о том, что перенаправления типа example.com → www.example.com → m.example.com или example.com → m.example.com/home для мобильных пользователей замедляют загрузку страницы.
  2. Оформить HTML-элементы с помощью CSS, это ускорит загрузку и упростит работу с повторяющимися на страницах элементами.
  3. Сжать все текстовые файлы HTML, XML, CSS, Javascript, сжать HTML-код страниц.
  4. Использовать минификацию — удалить ненужные данные, которые увеличивают объем кода.
  5. Сжать все графические файлы, оптимизировать изображения — фотографии и графику.
  6. Использовать кэш браузера — кэшировать данные в браузере пользователя.
  7. Оптимизировать нефункциональные анимационные детали, отказаться от flash — такие элементы вредят безопасности сайта и могут не поддерживаться у пользователей.
  8. Оптимизировать количество рекламных блоков на странице.

Использовать сжатие gzip или brotli

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

Самый популярный алгоритм сейчас — gzip, он появился одним из первых. Gzip поддерживают все серверы и распространенные браузеры. После работы над gzip инженеры сосредоточились на алгоритме, который сжимал бы еще сильнее, и разработали brotli — у него больше степеней сжатия по сравнению с gzip, но на высоких уровнях сжатия его скорость чуть меньше.

Сжатие данных алгоритмами состоит из этапов:

  1. Клиент совершает запрос и оповещает сервер, какие данные может принять.
  2. Сервер обрабатывает запрос и определяет, какую версию отправить.
  3. Сервер отправляет файл клиенту.
  4. Клиент распаковывает и считывает информацию.

На втором этапе браузер сообщает серверу, какие методы сжатия поддерживает — посылает заголовки Accept-Encoding с кодом, где указаны алгоритмы сжатия, например, "accept-encoding: gzip, deflate, br". Сервер выбирает форматы из доступных: если клиент поддерживает brotli, то сервер ищет суффикс ".br" в заголовке и отправляет клиенту нужный файл. Если его нет, будет использовать другой алгоритм. Если клиент не поддерживает сжатие вообще, сервер отправит несжатую версию.

Какой алгоритм сжатия выбрать: gzip или brotli?

Многие веб-мастера используют оба способа, поскольку brotli позволяет сжимать сильнее, но gzip поддерживают больше браузеров, поэтому он будет использоваться чаще.

Почитать по теме:
Как оптимизировать показатель LCP | Ускоряем загрузку контента для пользователей

Как использовать сжатие gzip

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

Степень сжатия можно настраивать, gzip поддерживает уровень сжатия от 1 до 9. Обычно рекомендуют степень 4-7 в зависимости от ресурсов процессора, оптимальное значение 5. Подберите подходящую степень сжатия под свои ресурсы, чтобы процессор справлялся, иначе сжимать информацию будет бесполезно, если нагрузка на процессор сильно вырастет. Экономить ресурсы поможет использование заранее сжатых файлов, они имеют формат gzip с дополнительным расширением .gz. На такие файлы можно применять максимальную степень сжатия, дальше сервер будет использовать ее вместо обычной.

Сжатие gzip для Nginx

В новых версиях Nginx gzip сжатие включено по умолчанию, но если такого нет, его можно настроить. Чтобы запустить сжатие gzip для сервера Nginx, нужно включить сжатие в модуле /etc/nginx/nginx.conf: 

 gzip on;
 gzip_disable "msie6";
 gzip_vary on;
 gzip_proxied any;
 gzip_comp_level 6;
 gzip_buffers 16 8k;
 gzip_http_version 1.1;
 gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

Директива "gzip_disable «msie6»" отключает сжатие для эксплорера 5.5 и 6, "gzip_proxied any" позволяет сжимать данные для proxy-серверов.

Уровень сжатия указывают в директиве "gzip_comp_level 6".

Директива "gzip_types text/css text/javascript application/javascript" указывает типы файлов для сжатия на сервере. Перечислите те, которые вам нужны. Cжатие text/html подразумевается и не может быть отключено, если вы не установили gzip off, а text/css и application/x-javascript включает сжатие gzip для файлов CSS и javascript соответственно.

Сжатие gzip можно включать и выключать для каждого «сервера» Nginx — более мелкой структуры, и для конкретного location — еще меньшей, зачастую располагающейся внутри него.

Gzip-сжатие файлов SVG для Nginx

Сжатие gzip будет работать для SVG, если формат векторной графики SVG есть в файле, который обычно располагается по пути "/etc/nginx/mime.types". Добавьте строку изображения "image/svg+xml svg svgz"

В файле конфигурации Nginx найдите "gzip types" и добавьте "image/svg+xml" к концу строки. Получившаяся строка может выглядеть так:

gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
Сжатие gzip для Apache

Сервер Apache для работы со сжатыми ресурсами использует модуль mod_deflate или mod_gzip.

Если вы используете mod_gzip, в в файл .htaccess добавьте строки: 

 <ifmodule mod_gzip.c="">
 mod_gzip_on Yes
 mod_gzip_dechunk Yes
 mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
 mod_gzip_item_include mime ^application/x-javascript.*
 mod_gzip_item_include mime ^text/.*
 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
 mod_gzip_item_exclude mime ^image/.* 
 mod_gzip_item_include handler ^cgi-script$
 </ifmodule>

Если используете mod_deflate, для отгрузки сжатых файлов добавьте строки в файл .htaccess: 

 <ifmodule mod_deflate.c="">
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE text/javascript
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE image/x-icon
 AddOutputFilterByType DEFLATE image/svg+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml 
 AddOutputFilterByType DEFLATE application/x-font 
 AddOutputFilterByType DEFLATE application/x-font-truetype 
 AddOutputFilterByType DEFLATE application/x-font-ttf 
 AddOutputFilterByType DEFLATE application/x-font-otf 
 AddOutputFilterByType DEFLATE application/x-font-opentype 
 AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
 AddOutputFilterByType DEFLATE font/ttf 
 AddOutputFilterByType DEFLATE font/otf 
 AddOutputFilterByType DEFLATE font/opentype
 # For Older Browsers Which Can't Handle Compression
 BrowserMatch ^Mozilla/4 gzip-only-text/html 
 BrowserMatch ^Mozilla/4\.0[678] no-gzip
 BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
 </ifmodule>

Есть еще такой вариант перечисления типов файлов для сжатия в одной строке: 

<ifmodule mod_deflate.c="">
 AddOutputFilterByType DEFLATE text/html text/css text/javascript font/ttf application/javascript
 DeflateCompressionLevel 7
 </ifmodule>

В строке DeflateCompressionLevel 7 указывают степень сжатия. Сжатие будет работать после сохранения.

Gzip-сжатие файлов SVG для Apache

Векторную графику формата SVG можно сжать с помощью gzip. В файле .htaccess. должна быть строка "# Compress HTML, CSS, JavaScript, Text, XML and fonts", добавьте в .htaccess строчку кода: 

AddOutputFilterByType DEFLATE image/svg+xml

После вставки и сохранения функция должна работать. Следите, чтобы код в файле не повторялся. 

Как использовать сжатие brotli

Brotli поддерживают браузеры Chrome, Firefox и Edge 15 для SSL-соединений. В заголовках должен быть "Accept-Encoding: br". В brotli есть собственный словарь из более сотни тысяч фраз, который используется для сжатия данных. Он же встроен в браузеры, которые поддерживают алгоритм, поэтому словарь не передается в архиве, и архив весит меньше.

Алгоритм сжатия brotli сжимает файлы сильнее, чем gzip. Максимальная степень сжатия у gzip — 9, а у brotli 11, степень 11 brotli дает файл на 25% меньше, чем сжатый 9 степенью gzip.

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

Для динамических страниц рекомендуем использовать уровень 5-6, тогда скорость сжатия будет достаточно быстрой. Для статических страниц можно использовать скрипт для сжатия 11 уровня.

Сжатие brotli для Nginx

Сервер Nginx использует brotli при включенном модуле "brotli_static" в конфигурации "brotli_static on". Тогда сервер получит от браузера заголовок, проверит, есть ли в нем файл с расширением ".br" и отдаст нужный файл как архив, сжатый в brotli.

Brotli-архивы нужно установить из репозитория или собрать утилиты:

git clone https://github.com/badger/libbrotli
 cd libbrotli
 autoreconf -i
 make install
 git clone https://github.com/google/brotli
 cd brotli
 ./configure
 make
 chmod +x bro
 ./bro —quality 11 —input <filename> —output <filename.br></filename.br></filename>

Пересборка Nginx с поддержкой brotli на Github.

Для сжатия «на лету» можно установить дополнительный модуль nginx brotli. Модуль Nginx для сжатия brotli «на лету» на Github.

Сжатие brotli для Apache

Сжатие brotli поддерживает Apache версии 2.4.26 и выше.

Для Apache есть модуль mod_brotli.

Модуль mod_brotli by kjdev на Github.

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

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

Для проверки работы gzip есть Check GZIP compressed.

Фрагмент результатов проверки тестом

Google PageSpeed Insights оценит скорость загрузки и покажет список файлов, для которых не работает сжатие.

Фрагмент результатов проверки инструментом

Инструмент «Проверка скорости сайта» от PR-CY оценит скорость и покажет страницы, на которых не работает сжатие.

Фрагмент результатов проверки инструментом

Использовать минификацию HTML, CSS и JS

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

Минификация помогает уменьшить размер фрагментов кода JS, она не влияет на сам файл, но оптимизирует его и уменьшает размер, за счет чего повышается скорость загрузки. Файлы, прошедшие минификацию, получают расширение ".min". После минификации в CSS, HTML, JS-файле не будет разделителей, переносов, лишних пробелов, поэтому его будет сложнее читать.

Бесплатные инструменты для минификации CSS, JS, HTML-файлов

Собрали несколько бесплатных онлайн-инструментов для сокращения кода.

  • minifycode.com
    Простой бесплатный онлайн- инструмент для минификации кода HTML, CSS и JavaScript файлов в отдельных полях.
  • willpeavy.com/minifier
    Другой простой инструмент для минификации HTML, CSS или JS в один клик без дополнительных настроек.
  • letteros.com/compressor
  • Инструмент в два клика сжимает код JS, HTML и CSS, нужно только вставить код в поле и выбрать формат.
  • htmlcompressor.com
    Инструмент позволяет выбрать уровень минификации HTML и встроенного в него кода CSS и JS, отметить расширенные настройки.
  • jscompress.com
    Инструмент для сокращения файлов JS. Можно загружать файл и минифицировать несколько одновременно.
  • askapache.com/online-tools/compress-css
    Инструмент для быстрой минификации CSS без настроек — загружаете код и получаете результат.
  • csscompressor.com
    Инструмент дает установить одну из четырех степеней минификации CSS и размер итогового файла.

Использовать кэш браузера для ускорения

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

Google рекомендует настроить сервер так, чтобы он возвращал ответ с HTTP-заголовком Cache-Control, например:

Cache-Control: max-age=31536000

Директива "max-age" указывает, как долго браузер должен кэшировать ресурс в секундах. Значение 31536000 соответствует году: 60 секунд * 60 минут * 24 часа * 365 дней = 31536000 секунд.

Google советует применять "no-cache" для объектов, которые могут обновляться: тогда браузер по-прежнему будет кэшировать ресурс со значением "no-cache", но сначала проверит актуальность на сервере.

Кэширование для Nginx

Для сервера Nginx подходит модуль expires в файле конфигурации. Нужно перечислить форматы файлов для кэширования и указать время хранения кэша: 

location ~* \.(js|css|png|jpg|jpeg|gif)$ {
 expires 86400s;
 log_not_found off;
 }

Время можно указать в любом формате: секунды — s, часы — h, дни — d и месяцы — m, обозначение "max" указывает на кэширование навсегда.

Вместо времени хранения файла можно указать дату следующего обновления файла в кэше: 

expires Fri, 24 Nov 2017 01:01:01 GMT;

Строка log_not_found off нужна для снижения нагрузки на сервер, она отключает ведение лога сообщений с ошибкой 404 для перечисленных файлов. 

Кэширование для Apache

Метод Cache-Control

Метод позволяет указать для кэширования файлы конкретных форматов. В файле .htaccess в конструкции FilesMatch нужно указать расширения файлов для кэширования и время сохранения файла в кэше в секундах: 

# 1 Month for most static assets
 <filesmatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf)$"="">
 Header set Cache-Control "max-age=2592000"
 </filesmatch>

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

 <filesmatch ".(pl|php|cgi|spl|scgi|fcgi)$"="">
 Header unset Cache-Control
 </filesmatch>
Кэширование по времени

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

 ## EXPIRES CACHING ##
 <ifmodule mod_expires.c="">
 ExpiresActive On
 ExpiresByType image/jpg "access 1 year"
 ExpiresByType image/jpeg "access 1 year"
 ExpiresByType image/gif "access 1 year"
 ExpiresByType image/png "access 1 year"
 ExpiresByType text/css "access 1 month"
 ExpiresByType text/html "access 1 month"
 ExpiresByType application/pdf "access 1 month"
 ExpiresByType text/x-javascript "access 1 month"
 ExpiresByType application/x-shockwave-flash "access 1 month"
 ExpiresByType image/x-icon "access 1 year"
 ExpiresDefault "access 1 month"
 </ifmodule>
 ## EXPIRES CACHING ##

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

После сохранения нужно обновить страницу.

Проверить кэширование в Google Chrome можно с помощью веб-инспектора Chrome DevTools. Столбец Size в Chrome DevTools поможет убедиться, что ресурс в кэше:

Столбец Size в Chrome DevTool. Источник — Google

Вкладка Headers покажет, как установлен Cache-Control:

Проверка заголовка Cache-Control. Источник — Google

Сжать фотографии, иллюстрации и другую графику

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

Почитать по теме:
Большое руководство по SEO для картинок: как оптимизировать изображения на сайте

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

  1. Подберите разрешение.
    Незачем загружать изображение в большом разрешении, если оно будет отображаться в маленьком без увеличения по клику.
  2. Подберите формат.
    JPEG подходит для фотографий, PNG для дизайнерской графики, SVG для вектора. Google также индексирует формат WebP, который весит меньше, но не все браузеры его поддерживают. Яндекс не индексирует SVG и изображения в скриптах.
  3. Уменьшайте количество цветов.
    Изображения, где нет сложных градиентов, требуют меньшего количества цветов. Можно оптимизировать картинку без потери качества, выбрав палитру меньше, тогда изображение будет хранить меньшее количество битов на пиксель.
  4. Слева направо: 32 бита (16M цветов), 7 бит (128 цветов), 5 бит (32 цвета)
  5. Пропишите параметры в CSS.
    Укажите размеры в коде или в редакторе изображений CMS. Для разных экранов и дисплеев с матрицей Retina нужны дополнительные варианты изображения разных размеров, чтобы браузер загружал нужное для устройства.
  6. Используйте шрифты.
    Если вы еще используете графику вместо шрифтов для текста, замените надписи на шрифты, это удобнее и меньше весит. Такой текст можно скопировать, поменять, масштабировать в любой момент.
  7. Удалите лишние изображения.
    Неинформативные картинки, иллюстрации ради разбивки текста и непонятные схемы лучше заменить на качественные изображения, которые помогут понять тему материала, или вообще удалить, чтобы они не прибавляли вес странице.
  8. Минифицируйте.
    Удаляйте XML-разметку с лишними метаданными, она появляется при работе с картинками в некоторых графических приложениях. EXIF — информацию о геоданных, дате съемки, фотокамере тоже можно удалить.
  9. Используйте алгоритмы сжатия.
    Настройте на сервере gzip-сжатие для SVG-графики.

Инструменты и сервисы для оптимизации изображений на сайте:

  • CompressJPEG
    Сервис для сжатия JPEG и PNG без потерь качества.
  • PunyPNG
    Инструмент сжимает PNG, JPEG и GIF.
  • TinyPNG
    Инструмент для оптимизации изображений в PNG и JPEG.
  • Jpegtran
    Инструмент для оптимизации JPEG-изображений.
  • Optipng
    Инструмент для оптимизации PNG без потерь.
  • Pngquant
    Инструмент сжимает PNG-изображения.

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

Оптимизация

- Как сжать CSS

Переполнение стека
  1. Около
  2. Продукты
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании
.

c # - как сжать файлы css и js?

Переполнение стека
  1. Около
  2. Продукты
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании
.

Как сжать размер файла при попутном ветре с помощью postcss?

Переполнение стека
  1. Около
  2. Продукты
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании
.

Как сжать CSS / JavaScript перед публикацией / пакет

Инструменты WebDev

Сегодня я увидел сообщение на stackoverflow.com с просьбой об использовании Microsoft AJAX Minifier с Visual Studio 2010 для публикации в один клик. Это ответ на этот вопрос. Конвейер веб-публикации довольно обширен, поэтому нам легко подключиться к нему для выполнения подобных операций. Одна из таких точек расширения, о которой мы писали ранее, - это создание файла.файл wpp.targets. Если вы создадите файл с именем {ProjectName} .wpp.targets в том же каталоге вашего проекта, то этот файл будет автоматически импортирован и включен в процесс сборки / публикации. Это позволяет легко редактировать процесс сборки / публикации без необходимости всегда редактировать сам файл проекта. Я буду использовать этот метод, чтобы продемонстрировать, как сжимать файлы CSS и JavaScript, которые содержит проект, перед его публикацией / упаковкой.

Несмотря на то, что в вопросе конкретно говорится о Microsoft AJAX Minifier, я решил использовать компрессор, содержащийся в Packer.NET (ссылка в разделе ресурсов). Я сделал это, потому что, когда я посмотрел на задачу MSBuild для AJAX Minifier, мне не показалось, что я могу контролировать расположение вывода сжатых файлов. Вместо этого он просто будет записывать в ту же папку с расширением, например .min.cs или .min.js. В любом случае, когда вы публикуете / упаковываете свой проект веб-приложения (WAP), файлы копируются во временное расположение до того, как произойдет публикация / пакет. Значение по умолчанию для этого местоположения - obj {Configuration} PackagePackageTmp, где {Configuration} - это конфигурация сборки, которую вы в настоящее время используете для своего WAP.Итак, что нам нужно сделать, так это позволить WPP скопировать все файлы в это место, а затем после этого мы можем сжать CSS и JavaScript, которые находятся в этой папке. Целевой объект, который копирует файлы в это место, - CopyAllFilesToSingleFolderForPackage . (Чтобы узнать больше об этих целевых объектах, посмотрите файл% Program Files (x86)% MSBuildMicrosoftVisualStudiov10.0WebMicrosoft.Web.Publishing.targets.) Чтобы наша цель запускалась после этой цели, мы можем использовать атрибут MSBuild AfterTargets.Проект, который я создал для демонстрации этого, называется CompressBeforePublish, поэтому я создаю новый файл с именем CompressBeforePublish.wpp.targets для хранения моих изменений.

       <_JavaScriptFiles Include = "$ (_ PackageTempDir) Scripts ***.js "/> <_CssFiles Include = "$ (_ PackageTempDir) Content ***. Css" />         

Здесь я создал одну цель, CompressJsAndCss, и включил AfterTargets = ”CopyAllFilesToSingleFolderForPackage”, что заставляет ее выполняться после CopyAllFilesToSingleFolderForPackage. Внутри этой цели я делаю две вещи: собираю файлы, которые нужно сжать, а затем сжимаю их.

1. Собрать файлы для сжатия
 <Группа элементов> <_JavaScriptFiles Include = "$ (_ PackageTempDir) Scripts ***. Js" /> <_CssFiles Include = "$ (_ PackageTempDir) Content ***. Css" />  

Здесь я использую список элементов как для файлов JavaScript, так и для файлов CSS. Обратите внимание, что я использую свойство _PackageTempDir для получения файлов .js и .css во временной папке, в которой файлы записаны для упаковки. Причина, по которой я делаю это вместо того, чтобы собирать исходные файлы, заключается в том, что моя сборка может выводить другие.js и .css файлы, которые будут опубликованы. Примечание. Поскольку свойство _PackageTempDir начинается с символа подчеркивания, его поведение (или даже существование) в будущих версиях не гарантируется.

2. Сжать файлы

Я использую задачу Packer для сжатия файлов .js и .css. Для обоих наборов файлов использование очень похоже, поэтому я рассмотрю только первое использование.

  

Здесь задача скармливается всем своим.js файлы для сжатия. Обратите внимание на то, как я передал файлы в задачу, используя% (_ JavaScriptFiles.Identity), в данном случае это заставляет эту задачу выполняться один раз для каждого файла .js. Синтаксис% (abc.def) вызывает пакетную обработку, если вы не знакомы с пакетной обработкой, см. Ниже. В качестве значения выходного файла я снова использую свойство _PackageTempDir. В этом случае, поскольку элемент уже находится там, я мог бы упростить его до @ (_ JavaScriptFiles -> '% (FullPath)'), но я подумал, что вы можете найти это выражение полезным в случае, если вы сжимаете файлы, которые еще не существуют в папке _PackageTempDir.

Теперь, когда мы добавили эту цель в файл .wpp.targets, мы можем опубликовать / упаковать наш веб-проект, и содержащиеся в нем файлы .js и .css будут сжаты. Примечание. Каждый раз, когда вы изменяете файл .wpp.targets, вам придется выгрузить / перезагрузить веб-проект, чтобы изменения были сохранены, Visual Studio кэширует ваши проекты.

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

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

Сайед Ибрагим Хашими

Примечание. Кросс размещен на http://sedodream.com/2011/02/25/HowToCompressCSSJavaScriptBeforePublishpackage.aspx

Ресурсы
.

php - Лучший способ сжатия HTML, CSS и JS с отключенными mod_deflate и mod_gzip

Переполнение стека
  1. Около
  2. Продукты
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
.

windows - Форматирование файла CSS (сжатие / распаковка)

Переполнение стека
  1. Около
  2. Продукты
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи
.

Смотрите также