Подобно .zip, файлы формата .gzip являются архивными. В среднем, размер таких файлов на 70% меньше исходного. И это весьма неплохой показатель.

В свою очередь, gzipping - это процесс передачи сжатого файла по сети.

Gzipping

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

Например, обращаясь к статической странице мы выполняем 3 запроса и получаем 3 файла: HTML, CSS и JavaScript, общий размер которых составляет около 40кб (значение в данном случае носит иллюстративный характер).

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

Как реализовать?

Нужно включить gzipping на сервере.

Если на сервере установлен apache, необходимо внести изменения в файл .htaccess. HTML5 бойлерплейт содержит необходимые настройки.

В случае использования nginx, нужно скорректировать конфигурационный файл

Как проверить, включен ли gzipping? Для этого достаточно запустить вкладку Network Инструментов разработчика Google Chrome. Вы увидите два значения: реальный суммарный размер файлов и объем переданной информации.

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

Перед тестированием не забудьте отключить кэширование (чекбокс Disable cache на вкладке Network).

Минификация

Минификация - процесс удаления комментариев и пробелов из Вашего кода.

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

Например, исходный код подобный этому:

/**
 * Add one or more numbers together
 * @param  {Number} The numbers to add
 * @return {Number} The total
 */
var add = function () {
 // Convert the arguments object to an array
 var numbers = Array.prototype.slice.call(arguments);
 // Setup a total
 var total = 0;
 // Loop through each number and add it to the total
 numbers.forEach(function (number) {
  total = total + number;
 });
 return total;
};

Terser вернет в следующем виде:

var add=function(){var r=Array.prototype.slice.call(arguments),a=0;return r.forEach(function(r){a+=r}),a};

Мы видим, что все комментарии удалены, переменные (number и total) переименованны (соответственно, в r и a).

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

Как минифицировать код?

Вы можете использовать решения для комадной строки, например, TerserJS, или инструменты с собственным GUI: CodeKit или Prepros.

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

Что использовать: gzip, минификацию или оба варианта?

Определенные группы разработчиков считают, что gzipping значительно эффективнее минификации, а сама минификация не приносит никакого результата.

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

Спасибо за внимание.

Перевод статьи “WTF is gzipping (and how is it different from minification)?”