Как ускорить сайт с помощью HTTP сжатия

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

Эта статья основана на двух ключевых идеях, и мы рассмотрим, как они приблизят нас к нашей цели – сайту с отличной производительностью:

  • уменьшение количества HTTP-запросов, производимых веб-страницей;
  • уменьшение размера запросов, которые отправляет веб-страница.

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

Что такое сжатие?


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

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

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

Типичный HTTP-запрос и ответ для сайта Bing.com. Обратите внимание на заголовки Accept-Encoding и Content-Encoding.

Если вы присмотритесь к HTTP-запросу, приведенному на рисунке выше, то вы заметите, что браузер отправляет в запросе такой заголовок, как Accept-Encoding. Этот заголовок уведомляет сервер, что браузер поддерживает сжатие. На самом деле, вы можете заметить, что указан не один тип сжатия, а несколько – заголовок сообщает серверу, что поддерживаются Gzip, Deflate и SDCH сжатие.

В зависимости от типа сжатия, который поддерживает ваш браузер, сервер будет соответствующим образом сжимать контент и вернет заголовок в HTTP-ответе. Этот заголовок называется Content-Encoding, и в случае выше, сервер вернул ответ с уведомлением, что данные были сжаты по Gzip формату.

Почему нужно использовать сжатие?

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

Влияние сжатия алгоритмом Gzip на размер файлов

Тип файла Размер до сжатия Размер после сжатия алгоритмом Gzip Экономия
HTML 6,52 кБ 2,43 кБ 62,74%
CSS 91,57 кБ 21,12 кБ 76,93%
CSS 13,51 кБ 3,89 кБ 71,21%
JavaScipt 1,75 кБ 1,18 кБ 32,58%
Image 6,76 кБ 6,51 кБ 3,7%

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

Повторяющиеся строки

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

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

Chrome Developer Tools имеет встроенный инструмент, который позволяет увидеть и сравнить разницу в размерах файлов до и после применения сжатия. Эта разница показана на рисунке ниже.

Разница в размере файлов до и после применения Gzip-сжатия

Twitter Bootstrap – это популярный CSS — фреймворк, который поможет вам быстро разработать стили CSS и моментально запустить ваш проект. Данный фреймворк был разработан командой Twitter, и может оказать реальную помощь в настройке CSS.

Применяемые в Twitter Bootstrap CSS файлы содержат большое количество пробелов и style тегов, делающих их отличными экземплярами для сжатия. Нам удалось сократить размер главного файла bootstrap.css до 21,12 кБ и сэкономить почти 76%! Это отличный пример того, зачем нужно сжимать ваши файлы CSS и JavaScript.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

  bigmir)net TOP 100  - .  E-mail: sitesnulyaru@gmail.com