The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

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

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

;##

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

Чтобы добиться лучших результатов, необходимо совмещать все эти техники.

TL;DR

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

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

Чтобы показать ключевые принципы работы этих техник, рассмотрим, как можно оптимизировать простое текстовое сообщение.

# Внизу секретное сообщение, состоящее из наборов заголовков.
# После формата `ключ-значение` идет перевод строки и зашифрованное сообщение.
format: secret-cipher
date: 04/04/14
AAAZZBBBBEEEMMM EEETTTAAA
  1. В сообщениях могут содержаться комментарии, отмеченные префиксом #. Они не влияют на суть или отображение информации.
  2. В начале сообщений могут содержаться заголовки, то есть пары ключ-значение, отделенные символом :.
  3. В сообщениях могут содержаться полезные данные.

Как уменьшить размер сообщения выше, в котором сейчас 200 символов?

  1. Конечно, комментарий интересен, но он не влияет на суть сообщения, поэтому мы можем удалить его при передаче информации.
  2. Существуют эффективные методы для кодирования заголовков. В данном случае мы не знаем, все ли сообщения имеют заголовки format и date. Если это так, мы просто можем присвоить им короткие идентификаторы, использующиеся при передаче. Однако мы не уверены в этом, поэтому оставим все как есть.
  3. Полезные данные - это просто текст, и хотя мы не знаем, что на самом деле он значит (очевидно, это `секретное сообщение``), можно заметить, что в нем много лишних символов. Например, вместо отправки повторяющихся букв, мы можем просто указать их количество и создать более эффективный код.
    • Например, ААА становится , или последовательностью из трех А.

Сочетая несколько методов, мы получили следующий результат:

format: secret-cipher
date: 04/04/14
3A2Z4B3E3M 3E3T3A

В новом сообщении всего 56 символов. Нам удалось сжать исходную информацию на целых 72%, и это только начало.

Но как это поможет оптимизировать сайт? Неужели нам придется изобретать собственные алгоритмы сжатия? Конечно, нет. Но мы будем использовать те же техники и методы, как и при оптимизации различных ресурсов на страницах: предварительную обработку, оптимизацию на основе контекста и особые алгоритмы для определенных типов контента.

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

TL;DR

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

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

<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>…</div>
   <!-- awesome container content: END -->
   <script>
     awesomeAnalytics(); // beacon conversion metrics
   </script>
 </body>
</html>

Посмотрите на простую HTML-страницу сверху и на три типа контента, которые в ней содержатся: HTML-разметка, CSS-стили и JavaScript. Для всех этих типов есть разные правила написания, обозначения комментариев и т. д. Как уменьшить размер такой страницы?

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

^

<html><head><style>.awesome-container{font-size:120%;width: 50%}
</style></head><body><div>…</div><script>awesomeAnalytics();
</script></body></html>

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

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

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

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

Сжатие текста с помощью GZIP

TL;DR

  • GZIP лучше всего сжимает текстовые ресурсы: CSS, JavaScript и HTML.
  • Все современные браузеры поддерживают и автоматически запрашивают сжатие GZIP.
  • На сервере должно быть настроено сжатие GZIP.
  • В некоторых сетей доставки контента вы должны проверить, включено ли сжатие GZIP.

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

Современные браузеры поддерживают и автоматически применяют сжатие GZIP для всех HTTP-запросов. Вам требуется только убедиться, что на сервере настроена отправка сжатого ресурса по запросу клиента.

Библиотека Размер Размер после сжатия Коэффициент сжатия
jquery-1.11.0.js 276 КБ 82 КБ 70%
jquery-1.11.0.min.js 94 КБ 33 КБ 65%
angular-1.2.15.js 729 КБ 182 КБ 75%
angular-1.2.15.min.js 101 КБ 37 КБ 63%
bootstrap-3.1.1.css 118 КБ 18 КБ 85%
bootstrap-3.1.1.min.css 98 КБ 17 КБ 83%
foundation-5.css 186 КБ 22 КБ 88%
foundation-5.min.css 146 KB 18 КБ 88%

В таблице сверху показано, насколько уменьшился размер нескольких популярных библиотек JavaScript и CSS-фреймворков при использовании сжатия GZIP. Коэффициент сжатия составляет от 60 до 88%, а при обработке минифицированных файлов (в названии которых есть .min) он становится ещё выше.

  1. Сначала применяйте методы оптимизации для конкретного контента: CSS-, JS- или HTML-минификаторы.
  2. Используйте GZIP для сжатия минифицированных файлов.

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

Какая конфигурация подойдет вашему серверу лучше всего? В проекте HTML5 Boilerplate размещены примеры файлов конфигурации для самых популярных серверов с подробными комментариями для всех параметров и настроек. Найдите в списке нужный сервер, загляните в раздел GZIP и убедитесь, что на вашем сервере установлены рекомендованные настройки.

Сравнение фактического размера ресурса и размера при передаче в Инструментах разработчика

Чтобы посмотреть результаты работы GZIP, откройте инструменты разработчика в Chrome и найдите столбец Size/Content (Размер/контент) на панели Network (Сеть). Число Размер - это вес передаваемого ресурса, а контент - вес несжатого ресурса. Например, GZIP сжал передаваемый HTML-ресурс из примера выше на 24,8 КБ.

В завершении мы хотим предупредить вас. Большинство серверов автоматически сжимают ресурсы при передаче. Однако при использовании некоторых сетей доставки контента необходимо самостоятельно узнать, отправляется ли пользователю сжатый GZIP-ресурс. Проверьте ваш сайт и убедитесь, что все ресурсы действительно сжимаются.