Что такое Compression Ratio?

Compression Ratio — это отношение размера исходных данных к размеру сжатых данных.

Формула:

Compression Ratio = исходный размер / сжатый размер

Пример:

1. Исходный файл: 100 КБ
2. После сжатия: 20 КБ
3. Коэффициент сжатия = 100 / 20 = 5:1 (или просто 5)

Чем выше коэффициент, тем сильнее сжатие и тем меньше данных передаётся по сети

HTTP-сжатие (Gzip, Brotli, Deflate)

Сервер сжимает текстовые файлы (HTML, CSS, JS, JSON) перед отправкой клиенту.

Пример заголовка HTTP-ответа

Content-Encoding: gzip

Сжатие изображений (WebP, AVIF, JPEG XL)

Форматы изображений используют алгоритмы сжатия:

1. Lossless (без потерь) — PNG, WebP (в режиме без потерь)
2. Lossy (с потерями) — JPEG, WebP, AVIF

Пример:

Исходное PNG: 500 КБ → Сжатое WebP: 100 КБ (CR = 5:1)

Видео и аудио (H.265, Opus, AAC)

Видеокодеки (например, H.265) могут давать коэффициент сжатия 10:1 и выше по сравнению с несжатым видео

Базы данных и API-ответы

1. JSON-ответы API можно сжимать через gzip/brotli
2. Некоторые **NoSQL БД (например, MongoDB) поддерживают сжатие данных на лету

Алгоритмы сжатия

Как включить сжатие на сервере?

nginx

gzip on;
gzip_types text/html text/css application/javascript;
gzip_min_length 256;
gzip_comp_level 6;  # Уровень сжатия (1-9)

Node.js (Express)

const compression = require('compression');
app.use(compression({ level: 6 })); // Уровень сжатия Gzip

Практический пример: сравнение Gzip vs Brotli

Допустим, у нас есть файл bundle.js размером 1МБ

Вывод: Brotli даёт лучшее сжатие, но требует больше CPU

Как измерить Compression Ratio?

Chrome DevTools

1. Откройте вкладку Network.
2. Найдите файл (например, .js, .css).
3. Посмотрите заголовки:
   • Content-Length (сжатый размер)
   • X-Original-Size (если сервер его отправляет)

Инструменты для аудита

1. Lighthouse (вкладка “Performance”)
2. WebPageTest (показывает экономию трафика)

Оптимизация сжатия в веб-проектах

✅ Используйте Brotli для статических файлов (лучшее сжатие)

✅ Gzip — для динамического контента (быстрее)

✅ Оптимизируйте изображения (WebP/AVIF + sharp в Node.js)

✅ Минифицируйте JS/CSS (Terser, CSSNano) перед сжатием

✅ Настройте кэширование (Cache-Control + CDN)

Пример оптимизации Vue.js проекта

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import viteCompression from 'vite-plugin-compression';

export default defineConfig({
  plugins: [
    vue(),
    // Базовый вариант (Gzip)
    viteCompression(),
    
    // Или расширенная настройка для Brotli + Gzip
    viteCompression({
      algorithm: 'brotliCompress', // 'gzip' по умолчанию
      ext: '.br', // Расширение для Brotli
      threshold: 10240, // Минимальный размер файла (в байтах)
      verbose: true, // Логировать процесс
      deleteOriginFile: false, // Удалять оригинальные файлы после сжатия
      filter: /\.(js|css|json|html|ico|svg)(\?.*)?$/i, // Какие файлы сжимать
    }),
    viteCompression({ algorithm: 'gzip' }), // Дублируем для Gzip
  ],
  build: {
    // Дополнительные настройки сборки
    chunkSizeWarningLimit: 1600, // Увеличиваем лимит для чанков
  },
});

Вывод

Compression Ratio — ключевой показатель эффективности сжатия данных в вебе.

Правильное сжатие ускоряет загрузку сайта и снижает затраты на трафик

1. Хороший коэффициент для текста: 5:1 – 10:1 (Brotli)
2. Для изображений: 3:1 – 20:1 (WebP/AVIF)
3. Для видео: 10:1 – 100:1 (H.265)