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

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

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

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

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

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

Разница между минификацией и сжатием

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

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

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

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

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

Пример минификации

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

ДО 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;}

ПОСЛЕ CSS минификации:

.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 онлайн.

Минификация CSS

Онлайн

  • csscompressor.com — может выбрать уровень минификации и размер файла на выходе:
Как уменьшить размер CSS, JS и HTML файлов
  • cssminifier.com — инструмент довольно легкий в понимании. Введите существующий CSS и уменьшенная версия создается автоматически. После этого можно загрузить сжатый программный код CSS в виде файла:
Как уменьшить размер CSS, JS и HTML файлов

Инструменты разработки

  • yui.github.io: может осуществлять процесс сборки в среде разработки, которая уменьшает, переименовывает и сохраняет оптимизированный файл в рабочем каталоге;
  • phpied.com: инструмент использует функции минификации CSS и YUI Compressor, но он применяет JavaScript вместо Java.

Минификация JS

Онлайн

  • closure-compiler.appspot.com: можно легко использовать как онлайн-инструмент и как API-интерфейс. Этот инструмент может изменить оптимизацию и форматирование:
Как уменьшить размер CSS, JS и HTML файлов
  • jscompress.com: может минимизировать JS путем копирования/вставки кода. Дополнительно можно загрузить JavaScript-файл и выполнить процесс минификации нескольких файлов одновременно:
Как уменьшить размер CSS, JS и HTML файлов
  • javascript-minifier.com: создан теми же разработчиками, что и cssminifier. JS Minifier может скопировать минимизированный код или скачать его в виде файла. А также осуществить сжатие CSS и JS онлайн:
Как уменьшить размер CSS, JS и HTML файлов

Инструменты разработки

  • yui.github.io: предлагает функция минимизировать JS файлы для веб-проектов.

Минификация HTML

  • htmlcompressor.com: предлагает функция выбора между разными уровнями минификации HTML и встроенного в него кода CSS и JS:
Как уменьшить размер CSS, JS и HTML файлов
  • minifycode.com: представляет собой текстовое поле ввода, куда необходимо вставить программный код HTML и сгенерировать его уменьшенную версию:

Как уменьшить размер CSS, JS и HTML файлов Существует несколько инструментов для минификации файлов. Многие CMS также предоставляют плагины и расширения для минификации CSS, JS и HTML — файлов.

WordPress плагины для минификации

  • Better WordPress Minify;
  • Autoptimize.

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

Drupal модуль минификации

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

Joomla! Расширение для минификации

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

Преимущества уменьшения файлов

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

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

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