1 of 17

Обзор форматов сжатия протокольного уровня в http.

​

Бусырев Михаил

2 of 17

Зачем

  • Каналы всё ещё медленные
  • Данные растут
  • Frontend может загружаться быстрее
  • Но работы прибавится у backend

2

Бусырев Михаил, busyrev@gmail.com

3 of 17

Content-encoding

Для клиентского кода и вёрстки всё прозрачно

3

Browser

accept-encoding: gzip, deflate, br

Server

content-encoding: gzip

Бусырев Михаил, busyrev@gmail.com

4 of 17

Какие форматы могут быть

  • Без сжатия
  • deflate 1993
  • gZip 1992, c 2000 в браузерах
  • zopfli 2013
  • sdch 2009-2017 (Shared Dictionary Compression for Http)
  • brotli 2016 (120kb Pre shared dict)

4

Бусырев Михаил, busyrev@gmail.com

5 of 17

Что с поддержкой

  • gZip c 2000 все давно
  • Brotli с 2016 Chrome и FF
  • С 2017 Edge и Safari
  • Brotli 89% Http requests, на наших данных
  • Внимание в chrome brotli работает только на https. Будьте осторожны на деве

​

5

Бусырев Михаил, busyrev@gmail.com

6 of 17

Распаковка

  • Незначительно относительно времени закачки
  • У всех потоково
  • У всех распаковка не зависит от степени сжатия
  • deflate, gZip, zopfli примерно одинаково
  • brotli на 30% быстрее остальных

6

Бусырев Михаил, busyrev@gmail.com

7 of 17

ngx_http_gzip_module

gzip on;

​

7

Бусырев Михаил, busyrev@gmail.com

8 of 17

ngx_http_gzip_module

  • gZip 1
  • не кеширует сжатое состояние
  • будет сжимать каждый раз заново
  • можно включить gzip 9 но уложить сервер по CPU (нагрузка x10)

8

Бусырев Михаил, busyrev@gmail.com

9 of 17

16Mb json (быстрое сжатие)

​

​

9

gzip 1

0.13 s

1.8 M

brotli 0

0.03 s

1.5 M

brotli 4

0.15 s

0.8 M

Бусырев Михаил, busyrev@gmail.com

10 of 17

16Mb json (лучшее сжатие)

​

​

10

brotli 4

0.15 s

0.8 M

gzip 9

0.9 s

0.98 M

brotli 9

0.5 s

0.55 M

brotli 11

33.8 s

0.44 M

zopfli

4.5 m

0.9 M

Бусырев Михаил, busyrev@gmail.com

11 of 17

4.6 Mb dds

​

​

11

gzip 1

0.052 s

804 K

gzip 9

0.778 s

668 K

brotli 0

0.014 s

813 K

brotli 4

0.046 s

504 K

brotli 9

0.229 s

445 K

brotli 11

4.876 s

382 K

zopfli

Долго, не засёк

623 K

Бусырев Михаил, busyrev@gmail.com

12 of 17

Предварительное сжатие

  • Один раз потратим время при экспорте релиза
  • Подготовим сразу две версии (gZip 9 и Brotli 11)
  • ngx_http_gzip_static_module
  • ngx_brotli
  • в 99% вам этого хватит
  • а можно просто руками прописать в конфиге

12

Бусырев Михаил, busyrev@gmail.com

13 of 17

Что как сжимается

  • Нельзя сжимать уже сжатое:

png, jpg, video, audio, swf, docx, zip, 7z

  • Можно и нужно сжимать:

html, js, css, dds, svg, json, txt.

  • На самом деле стоит изучить что вы загружаете и провести эксперименты.

13

Бусырев Михаил, busyrev@gmail.com

14 of 17

Итого

  • Для динамики: brotli 0-4, fallback gzip 1
  • Для статики: brotli 11, fallback gzip 9
  • Сжимайте сжимаемое и не сжимайте не сжимаемое

14

Бусырев Михаил, busyrev@gmail.com

15 of 17

Как это устроено у нас

15

caching nginx

nginx

Контент с разным сжатием по одному url?

С точки зрения http это разный контент

Серверу нужно проверить есть ли файл?

На стороне JS нельзя узнать какие сжатия поддерживаются

caching nginx

caching nginx

file

file.gz

file.br

Бусырев Михаил, busyrev@gmail.com

16 of 17

Как это устроено у нас

16

client

dynamic server

accept-encoding: gzip, deflate, br

main iframe

available: gzip, br

accept-encoding: gzip, deflate, br

gameFile.br

content-encoding: br

nginx

caching nginx

file

file.gz

file.br

17 of 17

Ссылки

Эта презентация https://goo.gl/TDU1QL

Док, из которого родилась презентация https://goo.gl/zNkpwB

Большая таблица сравнение https://goo.gl/fUmoUu

Будет пост на хабре, ждите

Бусырев Михаил

@aquahawk - телеграм

busyrev@gmail.com

17