Сжать код

Большинство текстовых данных в интернете это файлы HTML, JavaScript и CSS. Эти файлы не теряют своё свойство после сжатия. В этой статье вы узнаете: какие бывают веб-форматы, зачем нужно сжатие и как правильно это сделать.

Веб-форматы: gzip и Deflate

Для веб, широко используют два формата сжатия: deflate и gzip. deflate это очень популярный алгоритм сжатия без потерь, который использует комбинацию алгоритма LZ77 и алгоритм Хаффмана. Формат файлов gzip, использует для сжатия и восстановления, алгоритм deflate.

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

PHP, Apache, Nginx даже Google App Engine поддерживают формат сжатия gzip, они сжимают файлы на стороне сервера больше чем в два раза. Если файлы HTML, JavaScript и CSS превышают размер 5кб, они будут сжаты, а браузер пользователя, на лету распакует сжатые файлы.

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

Протоколы следующего поколения для передачи данных, такие как SPDY и HTTP 2.0 будут с поддержкой сжатия gzip, многие будут работать именно с этим алгоритмом сжатия.

к меню ↑

Сжатие файлов

Большинство разработчиков, на сервер Apache загружают несжатые файлы, думая что веб-сервер сам их сожмёт, и многие не знают, что по умолчанию уровень для gzip на большинстве серверов установлен 6, а максимальный уровень 9. Этот специальный параметр: он позволяет сжимать данные на серверах быстрее для большего размера файла.

В автономном режиме, программой для сжатия, можно сделать лучше сжатие файлов в формат gzip, а после загрузить сжатые файлы на сервер. Для сжатия файлов в gzip существуют компрессоры Zopfli и 7zip, в них есть возможность указать степень сжатия.

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

к меню ↑

Как работать с готовыми сжатыми файлами на Apache

В разных уголках сети интернет, есть много примеров и фрагментов о том, как сделать это, но удивительно то, что трудно найти реально работающие примеры. Вот фрагмент из конфигурации Apache, который будет работать с предварительно сжатыми файлами gzip для HTML, JavaScript, CSS и установит нужный Content-Type и Content-Encoding. Например, если пользователь запросил myfile.js он получит сжатый файл gzip, потому что Apache будет искать файл с названием myfile.js.gz и отправит содержимое сжатого файла. А если такой файл не существует, он отправит несжатую версию файла.

Также обратите внимание, что этот прокси-сервер кэшируется.

# Netscape 4.x has some problems... only compress html files
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 has problems... don't compress anything
BrowserMatch ^Mozilla/4\.0[678] no-gzip

# MSIE masquerades as Netscape
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

RewriteEngine on

# If the browser accepts gzip and the requested file exists with
# a .gz appended, then rewrite the request to the .gz file
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.*\.(css|js))$ $1\.gz [L]

#Set content type to JavaScript and the encoding to gzip
<FilesMatch ".*\.js\.gz$">
        ForceType application/x-javascript
        Header set Content-Encoding gzip
</FilesMatch>

#Set content type to CSS and the encoding to gzip
<FilesMatch ".*\.css\.gz$">
        ForceType text/css
        Header set Content-Encoding gzip
</FilesMatch>

# Tell caching proxy servers to cache the file based on both
# browser type and encoding
Header append Vary User-Agent
Header append Vary Accept-Encoding

# Do this to set proper ETags for server clusters
FileETag MTime Size
к меню ↑

Другие форматы сжатия

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

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

К сожалению, эти два формата не поддерживают браузеры. Но такие популярные форматы можно распаковать на стороне пользователя с помощью JavaScript. Из-за кода JavaScript декомпрессия в браузере проходит медленнее чем с gzip, это значит, что такой способ подходит не для всех данных. BZIP часто критикуют, из-за большой потребности памяти.

LZMA можно считать похожим на gzip. Они используют словарь LZ, сжатие сопровождается статистическим диапазоном кодирования. LZMA создает файлы меньшего размера, чем gzip!

к меню ↑

Подготовить текст для лучшего сжатия

Обычно сжатие текста для веб проходит два этапа.

к меню ↑

Уменьшить размер текста

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

к меню ↑

CSS Minifiers

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

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

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

к меню ↑

JavaScript Minifiers

Как и в случае с CSS minifiers, все инструменты Javascript Minifiers работают так же, поэтому выбирайте тот, который работает с построенным циклом и имеет особенности, которые вам подходят.

Некоторые наиболее популярные из них:

Большинство таких инструментов компилируют JavaScript в Abstract Syntax Tree, и более компактный код JavaScript. В том числе минимизация пробелов, сокращение названий переменных, и переписывание выражений в более короткие формы. Например, foo.bar вместо foo[“bar”]

к меню ↑

Сжатие без потерь моделирование

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

  • Некоторые символы в текстовых данных, могут быть удалены и восстановленны в браузере пользователя, например, пробелы которые могут уменьшить общий размер файла, и это никак не повлияет на производительность браузера на стороне пользователя.
Сначала После
“1,2,3,4,5,6,7,8,0,2,3,4,2,1,2” “123456780234212”0

На примере видно, что можно убрать запятые и восстановить их позже на стороне пользователя.

  • Если много чисел с плавающей точкой, можно, уменьшить количество уникальных символов, а также сократить некоторые точности, которые напрасно добавлены в файл.
Сначала После
0.123, 1.2345, 21.2165, 21.999, 12.123 0,0,20,20,10

Значение параметров в соответствии с наименьшее кратное 10. Это преобразование не может быть отменено.

  • Часто, разработчики отправляют массивы указателей, которые, как правило, в любом порядке. Если в индексе нет пробелов (т.е. всех значения X,Y, без каких-либо пропусков) вы можете сортировать информацию, и дельта-кодирование вам в помощь.
Сначала После
[8,2,1,5,3,7,6,3,2,9,0,4] отсортированы = [0,1,2,3,4,5,6,7,8,9,0]
delta закодированные = [0,1,1,1,1,1,1,1,1,1,1]

Сначала данные сортируются, а потом за кодируются, таким образом, каждый элемент отличается от предыдущего элемента. Обратите внимание, как в delta закодированном виде содержится много повторяющихся символов.

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

  • XMILL —  конкретная система сжатия XML, которая извлекает разные типы данных, группирует их вместе, и выполняет для них различные алгоритмы сжатия.
  • Еще одно удивительное приложение JSZap, которое будет анализировать ваш JavaScript в абстрактное синтаксическое дерево, а затем отделит похожие типы данных на отдельные потоки, для сжатия каждого потока отдельно, используя оптимизацию для каждого сжатия.
  • Вы легко можете найти несколько ссылок и применить эту идею к данным JSON; снова и снова, вы можете предварительно обработать JSON перед передачей их в gzip, чтобы сохранить оригинал.
к меню ↑

Заключение

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

Поэтому каждый раз когда вы запускаете сайт в работу, убедитесь:

  1. Сначала для мобильного соединения
    1. Какой размер страниц сайта? Вы можете уменьшить его?
    2. Сколько пользователю потребуется времени для загрузки вашей страницы на среднее число соединений?
  2. Минимизировать всё содержимое, которое может быть только минимизировано.
    1. Используйте оптимизаторы CSS и Javascript они легкие в использовании.
    2. Как можно больше предварительной обработки данных.
  3. Использовать сжатия gzip для текстовых данных.
    1. Убедитесь, что на вашем сервере включено сжатие gzip.
    2. С генерировать более сильное сжатые gzip данных в автономном режиме, используя Zopfli или 7zip.
  4. Если вам нужно больше сжатие, примените код Javascript, для BZIP2 и LZMA.