Вчера Эдди Османи твитнул про то, что на сайте web.dev появился новый интерактивный туториал про настройку сжатия brotli "Minify and compress network payloads with brotli".

Brotli – это относительно новый формат сжатия, который поддерживается во всех современных браузерах (кроме IE). Brotli обгоняет gzip на 14% при сжатии JS, на 21% при сжатии HTML, на 17% при сжатии CSS.

В туториале рассматривается два способа настройки сжатия для Express: динамичное сжатие ("на лету") и статичное сжатие. Для сжатия динамичных страниц подходит динамичная стратегия, для статичных страниц - статичная. Для последних можно выставить максимальное сжатие и эта настройка не будет влиять на время отклика сайта.

Примеры в статье очень понятные, объясняется чуть ли не каждая строка кода вплоть до конфигов Webpack. Сам по себе сайт тоже очень крут. Это интерактивная песочница, где можно поправить пример и сразу же посмотреть результат.

#brotli #compression #performance #nodejs

https://web.dev/fast/reduce-network-payloads-using-text-compression/codelab-text-compression-brotli

Гарри Робертс поделился своими мыслями по поводу влияния Brotli на производительность сайтов — "Real-World Effectiveness of Brotli".

Brotli — это алгоритм сжатия, который был представлен Google в 2013 году. На данный момент он поддерживается во всех актуальных браузерах. Использование Brotli вместо Gzip позволяет уменьшить объём передаваемых ресурсов до ~30%.

Внедрение Brotli иногда может быть гораздо сложнее, чем включение опции в панели CDN. Гарри провёл эксперимент, чтобы понять, стоит ли вкладывать в этом случае много сил для его поддержки, или можно обойтись обычным Gzip. Как оказалось, уменьшение объёма ресурсов на 30% не гарантирует, что на 30% улучшатся другие метрики. При сравнении работы разных сайтов переход с Gzip на Brotli не дал большого прироста производительности: общий объём передаваемых ресурсов снизился на 5.8%, а метрика First contentful paint (FCP) улучшилась всего лишь на 3.5%.

В конце статьи Гарри подводит итог. Если у вас есть возможность включить Brotli, этим стоит воспользоваться. Если же внедрение Brotli влечёт за собой недели разработки, то имеет смысл продолжать использовать Gzip.

#compression #performance #brotli

https://csswizardry.com/2020/04/real-world-effectiveness-of-brotli/

Денис Хрипков написал статью про оптимизацию генерируемого кода css-модулей — "Как уменьшить размер бандла — стратегия однобуквенных классов в css-modules".

По умолчанию в css-модулях генерируются имена классов, которые плохо сжимаются gzip/brotli. В статье предлагается альтернативный способ формирования имён. Каждый класс файле заменяется одной буквой, а после неё подставляется хэш от полного пути css-файла. Получаются такие имена:

/* first.css */
.a_k3bvEft8 { }
.b_k3bvEft8 { }
[...]
/* second.css */
.a_oRzvA1Gb { }
.b_oRzvA1Gb { }
[...]

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

Советую заглянуть в статью, если используете css-модули в своём проекте.

#css #compression #performance

https://habr.com/ru/post/499162/
https://dev.to/denisx/reduce-bundle-size-via-one-letter-css-classname-hash-strategy-10g6 (перевод на английский)