Готовимся к HTTP/2. руководство для веб-дизайнеров и разработчиков
Протокол передачи гипертекста (HTTP) управляет соединением между сервером и браузерами. Впервые с 1999 года мы получили новую версию этого протокола, и она обещает существенно более быстрые сайты для всех.
Я расскажу о ключевых особенностях нового протокола, рассмотрю его совместимость с браузерами и серверами.
Краткая история HTTP
HTTP – это старый протокол, изначально определённый в 1991 году, и в последний раз серьёзно изменённый в версии HTTP/1.1.
Сайты в 1999 году сильно отличались от тех, которые мы разрабатываем сегодня. Сейчас, чтобы отобразить домашнюю страницу среднего сайта, требуется 1,9 Мб. При этом загружается более 100 отдельных ресурсов, от изображений и шрифтов до файлов JavaScript и CSS.
HTTP/1.1 плохо работает с большим количеством ресурсов. Поэтому лучшие практики оптимизации направлены на повышение производительности этой версии протокола.
SPDY
В 2009 году два инженера корпорации Google рассказали про исследовательский проект под названием SPDY. Этот проект был нацелен на решение проблем, связанных с работой протокола HTTP/1.1. SPDY позволяет:
- Использовать конкурирующие запросы в одном соединении TCP (мультиплексирование).
- Браузерам устанавливать приоритеты так, чтобы ресурсы, важные для отображения страницы, загружались первыми.
- Сжимать и уменьшать заголовки HTTP
- Реализовать технологию server push, в рамках которой сервер может пересылать браузеру важные ресурсы, прежде чем его об этом попросят.
В добавление к этому SPDY обязывает шифровать соединение (HTTPS) между браузером и сервером.
SPDY не заменяет HTTP. Он скорее является туннелем для протокола и изменяет процесс отправки запросов и ответов HTTP. Для него обязательна поддержка, как на стороне сервера, так и на стороне клиента. Благодаря поддержке, доступной в NGNIX и пакетах от Google для Apache, SPDY применялся достаточно широко. При этом современные версии основных браузеров поддерживают его в полном объеме.
Поддержка SPDY браузерами по данным «Can I Use»
HTTP/2
Поддержка SPDY была прекращена в Edge из-за того, что специалисты Microsoft реализовали в новом браузере поддержку HTTP/2 – последней по времени выхода версии протокола HTTP. Но другие современные браузеры всё ещё сохраняют поддержку SPDY.
Поддержка HTTP/2 браузерами по данным «Can I Use»
HTTP/2 строится на успехе SPDY, который был использован как стартовая платформа для нового протокола. При этом большинство задач SPDY так же реализовано в HTTP/2. Требование соединения по HTTPS было отменено. Несмотря на это, разработчики всех браузеров решили реализовать поддержку HTTP/2 только для TLS (https) соединений. Поэтому использования HTTP/2 подразумевает использование сайтом HTTPS.
Спецификация HTTP/2 была завершена в феврале 2015 года. Спустя год он прекрасно поддерживается браузерами. Так же, как и SPDY, HTTP/2 предполагает поддержку, как в браузере, так и на сервере.
Уже существует много его реализаций для серверов. Вы можете следить за ними в справочнике по HTTP/2.
Придётся ли изменять сайты?
HTTP/2 обратно совместим с HTTP/1.1, поэтому есть возможность его проигнорировать, и всё продолжит работать, как раньше. Изменение протокола незаметно для пользователей. Многие из читателей этой статьи уже используют протокол, отличный от HTTP/1.1 многие годы. Например, если у вас есть аккаунт в почтовом сервисе Gmail, и вы используете браузер Google Chrome для доступа к нему.
Но с течением времени, когда многие серверы и браузеры обновляются до HTTP/2, ваш сайт, однажды оптимизированный в соответствии с лучшими практиками, начнёт казаться медленным по сравнению с интернет-ресурсами, оптимизированными под новый протокол.
Что нужно изменить, чтобы использовать преимущества HTTP/2?
Прежде чем вносить изменения, необходимые для перехода сайта на HTTP/2, нужно определить, используют ли посетители вашего ресурса браузеры, которые поддерживают этот протокол.
Переходите на TLS
Для многих ресурсов наиболее сложным при переходе на HTTP/2 может быть вовсе не сам протокол, а требование о работе сайта через защищённое соединение. Если вы разрабатываете новый сайт или обновляете старый, первым шагом должен быть переход на https.
Это важно не только для HTTP/2. Google использует защищённое соединение как сигнал при ранжировании сайта, а браузеры начинают отмечать не https сайты как «небезопасные».
Преобразование нескольких файлов изображений в спрайты
При использовании протокола HTTP/1.1 получение одного большого изображения гораздо более эффективно для браузера, чем совершение множества запросов к маленьким файлам. Чтобы обойти это, можно включить иконки в один спрайт-файл.
Получающийся в результате этого спрайт возвращался в единственном HTTP-запросе, предотвращая возникновение очереди из запросов. Но даже если посетитель находился на странице, показывающей только одну из этих иконок, ему всё равно приходилось загружать гораздо больший файл, чтобы увидеть одну конкретную картинку.
Благодаря мультиплексированию в HTTP/2 очереди запросов к ресурсам больше не являются проблемой. Предоставление изображений по отдельности лучше по нескольким причинам: нужно будет отправить только то, что запрошено.
Но спрайт может уменьшить размер загружаемых данных. Особенно когда все эти изображения используются на загружаемой странице. Однако использование спрайтов больше не является лучшим вариантом.
Встраивание изображений с помощью Data URI
Другой метод решения проблемы множественных запросов в HTTP/1.1 – встраивание изображений в CSS, используя data URI. Встраивание изображений таким образом сильно увеличивает размер файла стилей. Если вы сочетаете этот метод с другой техникой оптимизации, то браузер загрузит весь этот CSS? даже если пользователь не посетит страницы, на которых используются эти изображения. В HTTP/2 эта «лучшая практика» скорее будет вредить, чем улучшать производительность.
Соединение CSS и JavaScript
На финальной стадии сборки сайта многие соединяют все мелкие файлы CSS и JavaScript, используемые на нем. Мы зачастую разделяем их при разработке, чтобы было легче управлять ими. Но доставка одного файла браузеру более эффективна в плане производительности, чем доставка пяти. И мы снова пытаемся сократить количество HTTP-запросов.
Если вы это делаете, то посетителям придётся загрузить все стили CSS и JavaScript сайта. Можно обойти эту проблему, подключая только определённые файлы для каждой области сайта в процессе его сборки.
Запросы HTTP «дёшевы» в мире HTTP/2. Постраничная организация используемых ресурсов при разработке сайта будет гораздо лучшей идеей. Так можно будет загружать в браузер только тот код, который требуется отображения текущей веб-страницы.
Разделение ресурсов между хостами: Sharding
При использовании протокола HTTP/1.1 вы ограничены в количестве одновременно открытых соединений. Если загрузка большого количества ресурсов неизбежна, один из методов обхода этого ограничения заключается в том, чтобы получать их с разных доменов. Этот метод известен как domain sharding. С его помощью можно сократить время загрузки. Но он может создать проблемы, не говоря уж о затратах на подготовку инфраструктуры сайта.
HTTP/2 устраняет необходимость использования domain sharding: можно запрашивать любое количество ресурсов. Но это навредит производительности: создаются дополнительные соединения TCP, и препятствует расстановке приоритетов в HTTP/2.
Как подготовиться к HTTP/2
Несколько советов, как подготовиться к переходу на HTTP/2.
Создавайте отдельные изображения в дополнение к спрайтам и встраиванию изображений
Оптимизируйте спрайты и отдельные изображения, использующихся на уровне страницы, если вы думаете, что при использовании спрайтов производительность сайта повысится. Это облегчит переход от больших спрайтов к маленьким.
Организуйте файлы по секциям сайта
При переходе на HTTP/2 вы получите лучшую производительность при аккуратном управлении ресурсами, когда только то, что требуется определённой странице, отправляется этой странице.
Управляйте разделением между доменами
На данный момент лучшая практика для HTTP/1.1 – ограничить разделение двумя именами хостов. В HTTP/2 существует способ объединить эти соединения, если сертификат TLS действителен для обоих хостов и хосты находятся на одном IP-адресе. TLS сертификат необходим для работы через HTTP/2.
Дальнейшие действия
В этой статье я не рассказываю о том, как получить преимущество от новых инструментов HTTP/2, таких как server push. Эта технология позволяет решать, какие ресурсы являются приоритетными, и заставляет сервер передавать их перед менее важными ресурсами.
Когда совершать переход?
Решение о переходе на HTTP/2 сводится к тому, поддерживается ли этот протокол большинством браузеров ваших пользователей. Помните, что HTTP/2 обратно совместим, поэтому вам не придётся делать ничего особенного.
Если большинство посетителей используют браузеры, поддерживающие HTTP/2, настал момент для оптимизации под этих пользователей. Например, многие преимущества HTTP/2 наиболее остро ощутят пользователи мобильных устройств. Если у вашего сайта большой процент мобильного трафика – это может быть сигналом к переходу на HTTP/2.
Ваш план действий в отношении HTTP/2
- Запустите сайт с безопасным соединением или перейдите на TLS прямо сейчас.
- Подготовьтесь к HTTP/2 в процессе сборки сайта. Используйте советы, приведенные выше, чтобы создать сайт, оптимизированный под обе версии протокола.
- Проверьте хостинг. Удостоверьтесь в том, что ваш сервер поддерживает HTTP/2.
- Разверните оптимизацию под HTTP/2. Прекратите использовать устаревшие практики и переходите к применению новых.
После того, как вы перейдёте на HTTP/2, стоит проверить, насколько увеличится скорость вашего сайта.
Узнайте больше
Растущий объём информации о HTTP/2 доступен в сети. Ниже я перечислила некоторые ресурсы, к которым я обращалась при написании этой статьи.
- “Hypertext Transfer Protocol Version 2 (HTTP/2)” (спецификация).
Это для людей, получающих удовольствие от чтения спецификаций, или тех, кому требуется понимание тонких моментов. Для всех остальных HTTP/2 FAQ – это прекрасный обзор основных функций. - Индикатор HTTP/2 и SPDY: Chrome.
Этот плагин позволяют узнать, предоставляется ли сайт, на котором вы находитесь, через HTTP/2.