imgix блог | Как HTTP / 2 может ускорить ваш сайт

1. Что такое HTTP / 2?
2. Каковы преимущества HTTP / 2?
3. Заключение

Мы получили отличный отклик, когда в январе imgix запустил поддержку HTTP / 2. Обсуждая это с нашими клиентами, мы заметили, что люди счастливы иметь HTTP / 2, но не все полностью понимают, как это может улучшить их сайт. Вот краткое объяснение того, что делает HTTP / 2 и как вы можете извлечь из этого пользу.

Что такое HTTP / 2?

Сначала немного истории. В 1991 году был выпущен протокол HTTP / 1.0, позволяющий использовать связанные гипертекстовые документы - фактически начало веб-сайтов, какими мы их знаем сегодня. Он был разработан в основном для текста, но мог запрашивать изображения, создавая несколько соединений, по одному на изображение. Дополнительные запросы изображений, необходимые для современных визуально сложных и насыщенных изображений сайтов, вызвали перегрузку в браузере, что привело к снижению времени загрузки страницы и необходимости обходных путей.

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

Эти анимации показывают последовательность загрузки 100 различных изображений, которые составляют логотип. Верхний пример загружается с использованием HTTP / 1.x. Эти изображения загружаются по частям и запускаются, потому что браузер должен выполнить 100 отдельных запросов изображений, которые выполняются с разной скоростью. В нижнем примере показаны те же 100 изображений, которые загружаются с использованием одного соединения HTTP / 2. Все они загружаются одновременно, поэтому полный визуальный элемент появляется мгновенно.

Это просто краткое объяснение того, что он делает - есть гораздо больше, если вы хотите копаться в этом. Смотрите конец для некоторых дополнительных ссылок.

Каковы преимущества HTTP / 2?

HTTP / 2 ускоряет изображения, что является отличной причиной для возбуждения, но также устраняет необходимость в ранее использовавшихся обходных решениях и имеет некоторые дополнительные преимущества.

Нет больше источника Sharding

HTTP / 1.x ограничивает количество открытых соединений, которые вы можете иметь из одного источника, что привело к тому, что разработчики создали несколько разных источников (разметка источников) для обработки страниц с большим количеством изображений. Примером этого может быть создание нескольких URL-адресов для разделения запросов, например: images01.imgix.net, images02.imgix.net и images03.imgix.net.

Поскольку HTTP / 2 устанавливает только одно соединение и не ограничивает запросы, вы можете упростить и использовать один источник, такой как images.imgix.net. Разделение на источник всегда было чем-то вроде взлома, оно имитировало несколько соединений для более быстрой загрузки, и устранение этого сразу улучшит производительность вашего изображения.

Нет больше спрайтов

На вашем веб-сайте может быть 50 различных значков для вашего логотипа, логотипов социальных сетей и другой небольшой графики. Чтобы загружать их все более эффективно под HTTP / 1.x, многие разработчики объединяли эти меньшие изображения в большое изображение (спрайт-лист), поэтому для загрузки всех значков одновременно требовалось только одно изображение.

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

Возможные SEO выгоды

Хотя это не влияет на SEO напрямую HTTP / 2 имеет косвенные преимущества, которые улучшат ваше SEO. HTTP / 2 обычно повышает производительность и скорость работы с изображениями, которые являются важными факторами, влияющими на эффективность страницы в рейтинге поиска. Если вы в настоящее время пользуетесь шардингом источника, то устранение этой практики также может значительно повысить вашу SEO. Удаление исходного шардинга позволяет всем изображениям поступать с одного URL-адреса, поэтому они чаще появляются в результатах поиска.

Заключение

HTTP / 2 доступен для всех пользователей imgix. Если вы используете https в URL-адресах вашего изображения, значит, ваши изображения уже используют HTTP / 2. Если вы хотите проверить для себя, есть хороший Плагин Chrome Вы можете использовать для проверки ваших изображений.

Надеемся, что этот нетехнический взгляд на HTTP / 2 дал вам лучшее понимание того, как он может повысить производительность вашего сайта. Для получения дополнительной информации, вот полезный раздел часто задаваемых вопросов Github , великий гид веб-дизайнера в Smashing Magazine и глубокая статья от эксперта по веб-производительности Илья Григорик ,

Хотите продолжить разговор? Я более чем рад поболтать больше о HTTP / 2 или о любых проблемах с изображениями / успехах / пожеланиях, которые у вас есть, так что не стесняйтесь напишите мне , Если вы не являетесь клиентом imgix и хотите показывать изображения HTTP / 2 прямо сейчас, зарегистрироваться очень легко ,