Оптимизация кодирования и размера передачи текстовых ресурсов.

Ilya Grigorik

Jeremy Wagner

Помимо исключения ненужных загрузок ресурсов, лучшим способом повысить скорость загрузки страницы является минимизация общего размера загружаемых файлов за счет оптимизации и сжатия оставшихся ресурсов.

Основы сжатия данных

После того, как вы настроили свой веб-сайт таким образом, чтобы он не загружал неиспользуемые ресурсы, следующим шагом является сжатие оставшихся доступных ресурсов, которые браузер должен загрузить. В зависимости от типа ресурса — текст, изображения, шрифты и т. д. — существует множество различных методов на выбор: универсальные инструменты, которые можно включить на веб-сервере, оптимизация предварительной обработки для конкретных типов контента и оптимизация, специфичная для ресурсов, требующая участия разработчика.

Для достижения наилучших результатов необходимо сочетание всех следующих методов:

• Сжатие — это процесс кодирования информации с использованием меньшего количества битов.
• Удаление ненужных данных всегда дает наилучшие результаты.
• Существует множество различных методов и алгоритмов сжатия.
• Для достижения наилучшего эффекта сжатия вам потребуется использовать различные методы.

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

Подробное обсуждение сжатия данных выходит за рамки данного руководства. Однако важно понимать — в общих чертах — как работает сжатие и какие методы можно использовать для уменьшения размера различных ресурсов, необходимых для ваших страниц.

Чтобы проиллюстрировать основные принципы этих методов, рассмотрим процесс оптимизации простого формата текстового сообщения, который был изобретен специально для этого примера:

# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 08/25/16
AAAZZBBBBEEEMMM EEETTTAAA

1. Сообщения могут содержать произвольные аннотации — иногда называемые комментариями — которые обозначаются префиксом "#". Аннотации не влияют на смысл сообщения или его поведение.
2. Сообщения могут содержать заголовки , представляющие собой пары ключ-значение (разделенные ":" в приведенном выше примере), которые располагаются в начале сообщения.
3. Сообщения содержат текстовый контент.

Что можно сделать, чтобы уменьшить размер предыдущего сообщения, которое начинается с 200 символов?

1. Комментарий интересен, но он не влияет на смысл сообщения. Удалите его при отправке сообщения.
2. Существуют эффективные методы кодирования заголовков. Например, если известно, что все сообщения содержат поля «формат» и «дата», можно преобразовать их в короткие целочисленные идентификаторы и отправлять только их. Однако это может быть не всегда возможно, поэтому лучше пока оставить всё как есть.
3. Полезная нагрузка представляет собой только текст. Хотя мы не знаем, что именно она содержит (по-видимому, используется "secret-cipher" ), даже просто взглянув на текст, можно заметить в нём много избыточности. Возможно, вместо отправки повторяющихся букв можно просто подсчитать их количество и закодировать их более эффективно. Например, "AAA" превращается в "3A" , что представляет собой последовательность из трёх букв «А».

Сочетание этих методов приводит к следующему результату:

format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A

Новое сообщение состоит из 56 символов, что означает, что вы сжали исходное сообщение на 72%. Это существенное сокращение!

Это простой пример того, как алгоритмы сжатия могут эффективно уменьшать размер передаваемых текстовых ресурсов. На практике алгоритмы сжатия гораздо сложнее, чем показано в предыдущем примере, и в интернете их можно использовать для значительного сокращения времени загрузки ресурсов. Применяя сжатие к текстовым ресурсам, веб-страница может тратить меньше времени на загрузку ресурсов, так что пользователи смогут увидеть результаты их использования быстрее, чем без сжатия.

Минимизация: предварительная обработка и оптимизация в зависимости от контекста.

Первый метод, рассматриваемый здесь, — это минификация . Хотя минификация не является строго алгоритмом сжатия, это способ удаления ненужных и избыточных символов, используемых в исходном коде, чтобы сделать ресурсы более читабельными для человека. Однако такая читабельность не является необходимой для сохранения функциональности исходного кода на работающих веб-сайтах и ​​может замедлять загрузку ресурсов в сети.

Минификация — это тип оптимизации, специфичный для контента, который может значительно уменьшить размер предоставляемых ресурсов, и такие оптимизации лучше всего применять в рамках процесса сборки и развертывания. Например, сборщики — это широко используемый тип программного обеспечения, который может автоматически минифицировать ресурсы непосредственно перед развертыванием нового производственного кода на веб-сайте.

Лучший способ сжать избыточные или ненужные данные — это удалить их. Однако просто удалить произвольные данные невозможно. Тем не менее, в некоторых контекстах, где у нас есть специфические знания о формате данных и их свойствах, можно значительно уменьшить размер полезной нагрузки, не влияя на её фактическое значение или возможности.

<html>
  <head>
    <style>
      /* awesome-container is only used on the landing page */
      .awesome-container {
        font-size: 120%;
      }

      .awesome-container {
        width: 50%;
      }
    </style>
  </head>
  <body>
    <!-- awesome container content: START -->
    <div>
      This is my awesome container, and it is <em>so</em> awesome.
    </div>
    <!-- awesome container content: END -->
    <script>
      awesomeAnalytics(); // Beacon conversion metrics
    </script>
  </body>
</html>

Рассмотрим приведенный выше HTML-фрагмент и три различных типа контента, которые он содержит:

1. HTML-разметка.
2. CSS для настройки внешнего вида страницы.
3. JavaScript для обеспечения интерактивности и других расширенных возможностей страницы.

Для каждого из этих типов контента существуют разные правила определения допустимого контента, разные правила для указания комментариев и так далее. Однако остается вопрос: «Как уменьшить размер этой страницы?»

• Комментарии в коде — лучшие друзья разработчика, но браузеру они не нужны! Удаление комментариев CSS ( /* ... */ ), HTML ( <!-- ... --> ) и JavaScript ( // ... ) уменьшает общий размер страницы и её подресурсов.
• «Умный» CSS-компрессор мог бы заметить, что мы используем неэффективный способ определения правил для .awesome-container , и объединить два объявления в одно, не затрагивая другие стили, что позволило бы сэкономить байты. При работе с большим набором CSS-правил удаление подобной избыточности может существенно повлиять на результат, но это не всегда можно применять агрессивно, поскольку селекторы часто дублируются в разных контекстах, например, в медиа-запросах.
• Пробелы и табуляция — это удобные инструменты для разработчиков в HTML, CSS и JavaScript. Дополнительный компрессор мог бы удалить все табуляции и пробелы. В отличие от других методов дедупликации, подобная оптимизация может применяться довольно агрессивно, если такие пробелы или табуляция не нужны для отображения страницы — например, вы захотите сохранить пробелы внутри фрагментов текста в HTML-документе, поскольку они обеспечивают читаемость контента, который пользователи действительно увидят.

<html><head><style>.awesome-container{font-size:120%;width:50%}</style></head><body><div>This is my awesome container, and it is <em>so</em> awesome.</div><script>awesomeAnalytics()</script></body></html>

После выполнения предыдущих шагов размер страницы сокращается с 516 до 204 символов, что составляет примерно 60% экономии. Конечно, она не очень читабельна, но это и не обязательно для удобства использования. Современные методы разработки также позволяют хранить хорошо отформатированные и читаемые версии исходного кода отдельно от хорошо оптимизированного кода, который вы отгружаете в продакшн. В сочетании с картами исходного кода — которые обеспечивают читаемое представление преобразованного кода в продакшн, что упрощает поиск и устранение ошибок в продакшене — вы можете обеспечить удобство работы для разработчиков и одновременно оптимизировать производительность ради удобства пользователя.

Приведенный выше пример иллюстрирует важный момент: универсальный компрессор — скажем, предназначенный для сжатия произвольного текста — мог бы неплохо сжать страницу в предыдущем примере, но он никогда бы не догадался удалить комментарии, свернуть правила CSS или выполнить десятки других оптимизаций, специфичных для контента. Именно поэтому важны предварительная обработка, минификация и другие оптимизации, учитывающие контекст.

Аналогичным образом, описанные выше методы могут быть распространены не только на текстовые ресурсы. Изображения, видео и другие типы контента содержат свои собственные формы метаданных и различные полезные данные. Например, при съемке фотографии файл обычно содержит много дополнительной информации: настройки камеры, местоположение и так далее. В зависимости от вашего приложения эти данные могут быть критически важными (например, для сайта обмена фотографиями) или совершенно бесполезными. Вам следует подумать, стоит ли их удалять. На практике эти метаданные могут составлять десятки килобайт для каждого изображения.

Вкратце, в качестве первого шага к оптимизации эффективности ваших ресурсов составьте перечень различных типов контента и подумайте, какие оптимизации, специфичные для каждого типа контента, вы можете применить для уменьшения его размера. Затем — после того, как вы определите эти оптимизации, автоматизируйте их, добавив в этапы сборки и выпуска, чтобы гарантировать их согласованное применение при каждом новом релизе в продакшн.

Сжатие текста с помощью алгоритмов сжатия

Следующий шаг к уменьшению размера текстовых файлов — применение к ним алгоритма сжатия. Этот алгоритм идёт ещё дальше, активно ища повторяющиеся шаблоны в текстовых файлах перед отправкой пользователю и распаковывая их после попадания в браузер пользователя. В результате происходит дальнейшее и значительное сокращение этих ресурсов и, как следствие, ускорение загрузки.

• gzip и Brotli — это широко используемые алгоритмы сжатия, которые лучше всего работают с текстовыми ресурсами: CSS, JavaScript, HTML.
• Все современные браузеры поддерживают сжатие gzip и Brotli и сообщают о поддержке обоих в заголовке HTTP-запроса Accept-Encoding .
• На вашем сервере должна быть включена функция сжатия. Программное обеспечение веб-сервера часто включает модули для сжатия текстовых ресурсов по умолчанию.
• Как gzip, так и Brotli можно точно настроить для повышения коэффициента сжатия, регулируя уровень сжатия. Для gzip значения сжатия варьируются от 1 до 9, где 9 — оптимальная величина. Для Brotli этот диапазон составляет от 0 до 11, где 11 — оптимальная величина. Однако более высокие значения сжатия требуют больше времени. Для ресурсов, которые сжимаются динамически — то есть в момент запроса — значения в середине диапазона, как правило, обеспечивают наилучший компромисс между коэффициентом сжатия и скоростью. Однако возможно и статическое сжатие , когда ответ сжимается заранее, и, следовательно, могут использоваться наиболее агрессивные настройки сжатия, доступные для каждого алгоритма сжатия.
• Сети доставки контента (CDN) обычно предлагают автоматическое сжатие соответствующих ресурсов. CDN также могут управлять динамическим и статическим сжатием, избавляя вас от одной из проблем, связанных со сжатием.

gzip и Brotli — это распространённые компрессоры, которые можно применять к любому потоку байтов. По сути, они запоминают часть ранее проанализированного содержимого файла и затем пытаются эффективно найти и заменить повторяющиеся фрагменты данных.

На практике gzip и Brotli показывают наилучшие результаты при работе с текстовым контентом, часто достигая степени сжатия до 70-90% для больших файлов. Однако применение этих алгоритмов к ресурсам, уже сжатым с использованием альтернативных алгоритмов — например, к большинству форматов изображений, использующих методы сжатия без потерь или с потерями, — практически не дает улучшений.

Все современные браузеры указывают на поддержку gzip и Brotli в заголовке HTTP-запроса Accept-Encoding . Однако ответственность за обеспечение правильной настройки веб-сервера для предоставления сжатого ресурса по запросу клиента лежит на хостинг-провайдере.

В приведенной выше таблице показана экономия, которую могут обеспечить алгоритмы сжатия Brotli и gzip для нескольких известных библиотек JavaScript. Экономия варьируется от 65% до 86% в зависимости от файла и алгоритма. Для справки, для каждого файла был применен максимальный уровень сжатия как для Brotli, так и для gzip. По возможности отдавайте предпочтение Brotli перед gzip.

Включение сжатия — одна из самых простых и эффективных оптимизаций. Если ваш веб-сайт не использует его, вы упускаете прекрасную возможность улучшить производительность для пользователей. К счастью, многие веб-серверы предоставляют конфигурации по умолчанию, которые позволяют реализовать эту важную оптимизацию, а CDN, в частности, очень эффективно реализуют её таким образом, чтобы сбалансировать скорость и степень сжатия.

Чтобы быстро увидеть сжатие в действии, откройте инструменты разработчика Chrome, панель «Сеть» , загрузите выбранную вами страницу и посмотрите на самый нижний угол панели «Сеть».

Как и на предыдущем изображении, вы должны увидеть следующую разбивку:

• Количество запросов, то есть число ресурсов, загруженных на страницу.
• Размер передаваемых данных по всем запросам. Этот показатель отражает эффективность сжатия, применяемого к любому из ресурсов страницы.
• Размер ресурсов всех запросов. Это отражает размер ресурсов страницы после их декомпрессии.

Влияние на основные веб-показатели

Улучшения производительности невозможно измерить без метрик, отражающих эти улучшения. Инициатива Core Web Vitals существует для того, чтобы создавать и повышать осведомленность о метриках, отражающих реальный пользовательский опыт. Это отличается от метрик — таких как, например, простое время загрузки страницы, — которые не имеют четкого представления о качестве пользовательского опыта.

Применение описанных в этом руководстве оптимизаций к ресурсам вашего веб-сайта может повлиять на показатели Core Web Vitals в зависимости от оптимизируемых ресурсов и используемых метрик. Однако вот несколько примеров, когда применение этих оптимизаций может улучшить показатели Core Web Vitals вашего веб-сайта:

• Сжатие и минимизация HTML-ресурсов могут улучшить скорость загрузки этого HTML-кода, доступность его подресурсов и, следовательно, скорость их загрузки. Это может быть полезно для максимального количества отображаемых элементов на странице (Largest Contentful Paint, LCP) . Хотя подсказки ресурсов, такие как rel="preload" могут влиять на доступность ресурсов, их чрезмерное использование может вызвать проблемы с конкуренцией за пропускную способность. Обеспечивая сжатие HTML-ответа на запрос навигации, сканер предварительной загрузки сможет как можно быстрее обнаружить содержащиеся в нем ресурсы.
• Некоторые изображения , подходящие под критерии LCP, также могут загружаться быстрее за счет сжатия. Например, для изображений SVG, являющихся кандидатами на критерии LCP , время загрузки ресурсов может быть сокращено за счет текстового сжатия. Это отличается от оптимизации, которую можно применять к другим типам изображений, которые по своей природе сжимаются другими методами сжатия, например, как изображения JPEG используют сжатие с потерями.
• Кроме того, текстовые узлы также могут быть кандидатами на роль LCP-элементов. Эффективность описанных в этом руководстве методов зависит от того, используете ли вы веб-шрифт для текста на своих веб-страницах. Если вы используете веб-шрифт, то применяются лучшие практики оптимизации веб-шрифтов . Однако, если вы используете не веб-шрифты, а системные шрифты, которые отображаются без каких-либо затрат ресурсов, то минимизация и сжатие CSS-кода сокращают это время, что означает, что рендеринг потенциальных LCP-текстовых узлов может происходить быстрее.

Заключение

Оптимизация кодирования и передачи текстовых данных — это базовый показатель производительности, но он имеет большое значение. Убедитесь, что вы делаете все возможное, чтобы ресурсы, подлежащие минификации и сжатию, получали выгоду от этих оптимизаций.

Что еще более важно, убедитесь, что эти процессы автоматизированы. Для минификации используйте сборщик ресурсов, чтобы применить минификацию к соответствующим ресурсам. Убедитесь, что конфигурация вашего веб-сервера поддерживает сжатие, но, что еще важнее, используйте наиболее эффективное из доступных методов сжатия. Чтобы максимально упростить этот процесс, используйте CDN для автоматизации сжатия, поскольку они не только могут сжимать ресурсы, но и делают это очень быстро.

Внедрив эти базовые концепции производительности в архитектуру вашего веб-сайта, вы можете гарантировать, что ваши усилия по оптимизации производительности будут иметь прочную основу, а последующие оптимизации будут опираться на надежные базовые практики.