В последнее время обеспечение лучшего клиентского опыта стало центром бизнес-стратегий, и чтобы обеспечить лучший клиентский опыт, необходимо загрузить ваш веб-сайт в кратчайшие возможные сроки.
Принимая во внимание этот факт, вам необходимо использовать несколько различных стратегий для более быстрой загрузки вашего сайта. Возможных решений может быть множество, один из быстрых и быстрых способов быстрой загрузки веб-сайта - это сжатие. Сжатие - это процесс уменьшения размера ресурсов, чтобы они занимали меньше времени на передачу по сети. Google выпустил новый алгоритм сжатия Brotli, он обеспечивает лучшие результаты сжатия, чем текущий стандарт (Gzip), а результаты тестирования показали на 20–26% более высокую степень сжатия при сравнении Brotli с Zopfli (еще один современный алгоритм сжатия).
Есть два способа сжать ваши активы:
i) Статически - создавать сжатые ресурсы Brotli и Gzip во время сборки и предоставлять ресурсы Brotli всем пользователям, у которых есть браузер, поддерживающий Brotli. в противном случае вернитесь к Gzip.
ii) Динамически - во время выполнения сжимайте запрошенные ресурсы на основе браузера. Если браузер поддерживает Brotli, используйте Brotli в качестве алгоритма сжатия при отправке ответа, в противном случае используйте gzip.
Статическая генерация
Установка будет включать следующие компоненты
- Экспресс-сервер для обслуживания активов.
- Webpack как сборщик модулей.
- Docker как наш инструмент для создания, развертывания и запуска приложений с использованием контейнеров.
- AWS EC2.
- Cloudfront в качестве нашей CDN.
Это типичная установка, которая может быть у большинства из нас, Express в качестве Frontend-сервера для SSR (рендеринга на стороне сервера), который используется для обслуживания отрисованного на стороне сервера HTML, когда пользователь впервые попадает на веб-сайт. Webpack - самый известный и часто используемый сборщик модулей. Мы запустим сервер Express в контейнере докеров, разместим эти контейнеры в экземплярах EC2 и поставим CloudFront перед нашей настройкой EC2 для кэширования наших ресурсов.
Настройка Webpack для Brotli
Есть два плагина, которые нам нужно использовать для создания статических ресурсов: brotli-webpack-plugin и сжатие-webpack-plugin. Подключаемый модуль сжатия используется для создания ресурсов gzip, а подключаемый модуль Brotli используется для создания сжатых ресурсов Brotli.
После того, как активы были сгенерированы, следующая часть - их обслуживание. Во время выполнения, когда вы обслуживаете запрос, вам необходимо проверить, поддерживает ли браузер, из которого возник запрос, сжатие Brotli. Браузеры отправляют Accept-Encoding заголовки, которые указывают, поддерживает ли браузер Brotli или нет. Чтобы упростить часть обслуживания запросов, мы будем использовать экспресс-плагин express-static-gzip, который сделает все это за нас.
Теперь осталось только кэшировать наши активы. CloudFront используется для кеширования наших активов, это просто пара ключ-значение, где каждый ключ является уникальным идентификатором для каждого актива. Для лучшего кэширования Cloudfront нормализует заголовок Accept-Encoding, удаляя все типы кодирования, кроме gzip, а сервер Express всегда обслуживает gzip ресурсы. Таким образом, независимо от типа браузера, он будет обслуживать все браузеры с одними и теми же gzip ресурсами. Это хорошо, но мы хотим, чтобы CloudFront обслуживал Brotliassets браузерам, которые поддерживают Brotli, в противном случае - к gzip. Для этого вам нужно внести заголовок Accept-Encoding в белый список в CloudFront, это заставит CloudFront учитывать заголовок Accept-Encoding при создании уникального ключа для каждого актива.
Результаты
- Размер: Webpack сгенерирует два сжатых файла для каждого ресурса, версию gzip и версию brotli. Как видите, сжатая версия brotli на ~ 25% меньше, чем ее аналог с gzip.
2. Время. Давайте посмотрим на изображениях до и после того, как долго загружаются одни и те же объекты.
3. Производительность. Lighthouse - это наиболее часто используемый инструмент для измерения производительности веб-сайта. Ниже приведены до и после аудитов, проведенных Lighthouse. Просто обслуживая сжатые ресурсы brotli, мы можем получить 10 баллов по производительности.
Динамическая генерация
Для обслуживания сжатых ресурсов brotli во время выполнения необходимо просмотреть заголовок Accept-Encodingrequest, если в качестве формата кодирования присутствует brotli, сжимайте ответ, используя brotli, в противном случае откат к gzip
Для сжатия во время выполнения мы будем использовать промежуточное программное обеспечение Express shrink-ray-current, это поддерживаемая версия shrink-ray.
Результаты: аналогичные результаты наблюдались с точки зрения размера, времени и производительности.
Попался примерно сжатие во время выполнения
Размер сборки. Создание сжатых ресурсов brotli во время выполнения приводит к уменьшению размера пакета, поскольку количество генерируемых ресурсов меньше. Сжатие во время выполнения также легко использовать с дифференциальными сборками. Для обслуживания дифференциальных сборок создаются две сборки. Один для современных браузеров, а другой для устаревших браузеров. Если мы не используем сжатие во время выполнения, то при дифференциальных сборках размер сборки будет огромным, так как для каждого файла будет 6 вариантов. Например - для runtime.js будут созданы следующие файлы
а) runtime.mjs (для современных браузеров)
б) runtime.mjs.br (сжатая версия Brotli),
c) runtime.mjs.gz (сжатая версия)
г) runtime.js (для устаревших браузеров)
д) runtime.js.br (сжатая версия Brotli)
е) runtime.mjs.gz (сжатая версия).
Повышенная нагрузка на серверы: для каждого обслуживаемого ресурса сервер будет использовать некоторую вычислительную мощность, поскольку он будет сжимать этот ресурс во время выполнения. С этим можно справиться, используя CDN для хранения сжатых ресурсов, поэтому фактически нагрузка на серверы сохраняется в течение определенного времени после развертывания.
