Оптимизация передачи данных: Gzip и минификация как эффективные методы сжатия файлов

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

Что такое Gzipping?

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

Для примера: при обращении к статической веб-странице, обычно выполняются три запроса, загружаются HTML, CSS и JavaScript файлы, суммарным размером около 40кб. При использовании gzipping, эти три файла могут быть сжаты в один, размером около 15кб, что существенно уменьшает как количество запросов, так и объем передаваемых данных.

Как включить Gzipping?

Для того чтобы включить gzipping на сервере, необходимо внести изменения в конфигурацию. Если используется сервер Apache, соответствующие настройки можно прописать в файле .htaccess, воспользовавшись шаблонами из HTML5 Boilerplate. Для сервера nginx нужно откорректировать конфигурационный файл.

Проверить, включен ли gzipping, можно с помощью вкладки Network в Инструментах разработчика Google Chrome. Если передаваемый размер файлов значительно меньше их реального объема, значит, gzip работает. Не забудьте перед тестированием отключить кэширование.

Минификация: что это и как она работает?

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

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

var add = function () {
var numbers = Array.prototype.slice.call(arguments);
var total = 0;
numbers.forEach(function (number) {
total = total + number;
});
return total;
};

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