HTTP/2 ⸺ последняя версия протокола передачи данных в сети Интернет․ Эта версия была разработана как улучшение производительности и безопасности веб-сайтов․ В этой статье мы рассмотрим, как готовиться к переходу на HTTP/2, важные изменения и нововведения, а также то, какие преимущества она предоставляет для веб-дизайнеров и разработчиков․
- Основные преимущества HTTP/2
- Готовность к переходу на HTTP/2
- Изменения во веб-разработке
- Краткая история протокола HTTP
- SPDY
- HTTP/2
- Вам придется изменить страницы?
- Что нужно изменить, чтобы использовать HTTP/2?
- Переход на TLS
- Преобразование нескольких файлов изображений в спрайты
- Встраивание изображений с использованием URI данных
- Комбинирование CSS и JavaScript
- Совместное использование ресурсов между хостами: Sharding
- Как подготовиться к HTTP/2
- Создание автономных изображений в дополнение к спрайтам и встроенным изображениям
- Организация файлов по разделам сайта
- Управление разделением доменов
- Дальнейшие шаги
- Когда переходить?
- Ваша дорожная карта к HTTP/2
- Узнать больше
- Как подготовить макет к верстке? За что верстальщики не любят дизайнеров? Часть 1
Основные преимущества HTTP/2
HTTP/2 был разработан для улучшения производительности веб-сайтов и снижения задержки во время загрузки страниц․ Вот некоторые из основных преимуществ этой версии⁚
- Мультиплексирование⁚ HTTP/2 поддерживает мультиплексирование, что позволяет одновременно отправлять несколько запросов и получать несколько ответов․ Это увеличивает скорость загрузки страниц и снижает задержки․
- Сжатие заголовков⁚ HTTP/2 сжимает заголовки, отправляемые между клиентом и сервером, что уменьшает объем передаваемых данных и повышает эффективность․
- Приоритизация запросов⁚ в HTTP/2 можно устанавливать приоритеты для запросов, что позволяет серверу отправлять наиболее важные ресурсы в первую очередь․ Это гарантирует более быструю загрузку основного контента страницы․
- Серверные запушенные события (Server Push)⁚ HTTP/2 позволяет серверу активно запушивать ресурсы на клиентскую сторону без посылки запроса от клиента․ Это позволяет улучшить производительность и уменьшить время загрузки․
- Поддержка старых версий протокола⁚ HTTP/2 поддерживает обратную совместимость с предыдущей версией протокола HTTP/1․1, поэтому несовместимые клиенты и серверы могут продолжать работу․
Готовность к переходу на HTTP/2
Перейти на HTTP/2 можно только в том случае, если клиент (браузер) и сервер поддерживают эту версию протокола․ Вот несколько шагов, которые помогут вам подготовиться к переходу на HTTP/2⁚
- Обновите сервер⁚ убедитесь, что ваш веб-сервер (например, Apache, Nginx) поддерживает HTTP/2․ Многие современные серверы уже имеют встроенную поддержку для этой версии протокола․
- Узнайте о поддержке клиента⁚ проверьте, поддерживает ли браузеры ваших посетителей версию HTTP/2․ Подавляющее большинство современных браузеров уже поддерживает HTTP/2, однако есть некоторые старые версии, которые не совместимы․
- Активируйте HTTPS⁚ HTTP/2 рекомендуется использовать с протоколом HTTPS для обеспечения безопасности передачи данных․ Поэтому убедитесь, что ваш сайт работает по протоколу HTTPS․
Изменения во веб-разработке
HTTP/2 вносит некоторые изменения в процесс разработки веб-сайтов․ Вот некоторые из них⁚
- Объединение файлов⁚ вместо использования нескольких файлов (например, CSS или JavaScript), при разработке под HTTP/2 рекомендуется объединять их в один файл․ Это помогает уменьшить количество запросов к серверу и ускорить загрузку страницы․
- Оптимизация изображений⁚ HTTP/2 более эффективно передает данные, что позволяет снизить размер изображений без потери качества․ Используйте сжатие и форматы изображений, которые лучше подходят для HTTP/2․
- Асинхронная загрузка ресурсов⁚ HTTP/2 позволяет параллельно загружать несколько ресурсов, поэтому можно загружать необходимые ресурсы асинхронно․ Это помогает снизить ожидание и повысить производительность страницы․
HTTP/2 ⸺ это более современная и эффективная версия протокола передачи данных٫ которая значительно улучшает производительность веб-сайтов․ Готовность к переходу на HTTP/2 позволит вам использовать все ее преимущества и улучшить пользовательский опыт․ Соблюдение указанных выше рекомендаций поможет вам успешно подготовиться к переходу на HTTP/2․
Протокол передачи гипертекста () управляет соединением между сервером и браузерами. Впервые с 1999 года мы получили новая версия, и обещает гораздо более быстрые страницы для всех.
Я буду говорить о Ключевые особенности нового протокола, Учитывайте его совместимость с браузерами и серверами.
Краткая история протокола HTTP
— это старый протокол, первоначально определена в 1991 году, и когда в последний раз происходило значительное изменение версии HTTP/1.1.
Веб-сайты в 1999 году сильно отличались от тех, которые мы создаем сегодня. Теперь вам нужен 1.9 МБ для отображения главной страницы среднего веб-сайта. Загружается более 100 отдельных ресурсов, от изображений и шрифтов до файлов JavaScript и .
HTTP/1.1 не очень хорошо работает с большими объемами ресурсов. Поэтому лучшие практики оптимизации направлены на улучшение производительности этой версии протокола.
SPDY
В 2009 году. два корпоративных инженера Google рассказал об исследовательском проекте под названием . Этот проект был направлен на решение проблем с протоколом HTTP/1.1. SPDY позволяет:
Использование конкурирующих запросов в одном соединении (мультиплексирование).Браузеры расставляют приоритеты так, чтобы ресурсы, важные для отображения страницы, загружались в первую очередь.Сжатие и сокращение заголовков Внедрение технологии толчок сервера, когда сервер может передать браузеру важные ресурсы до того, как они будут запрошены.
Кроме того, он обязывает вас шифровать соединение (HTTPS) между браузером и сервером.
не заменяет . Это больше похоже на туннель протокола и изменяет процесс отправки запросов и ответов . Требуется поддержка как на стороне сервера, так и на стороне клиента. С поддержкой, доступной в NGNIX и пакеты с Google для Apache, используется довольно широко. При этом Современные версии основных браузеров Поддерживает их в полном объеме.
Поддержка браузеров в соответствии с «
HTTP/2
Поддержка была прекращена, поскольку эксперты Microsoft Поддержка HTTP/2 — Последняя версия протокола . Однако другие современные браузеры по-прежнему поддерживают .
Поддержка /2 браузер в соответствии с «
HTTP/2 Протокол основан на успехе протокола , который был использован в качестве стартовой платформы для нового. Таким образом, большинство задач также реализована в HTTP/2. Требуется подключение через HTTPS была отменена. Несмотря на это, разработчики всех браузеров решили реализовать поддержку для ПРОТОКОЛ HTTP/2 для (https) соединения. Поэтому использование HTTP/2 подразумевает использование HTTPS.
Спецификация HTTP/2 Завершена в феврале 2015 года. Через год он прекрасно поддерживается браузерами. А также , 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 Очереди запросов на ресурсы больше не являются проблемой. Предоставление изображений по отдельности лучше по нескольким причинам: вам нужно будет загрузить только то, что требуется.
Но спрайт может уменьшить размер загружаемых данных. Особенно если все эти изображения используются в загружаемой странице. Однако использование спрайтов больше не является лучшим решением.
Встраивание изображений с использованием URI данных
Другой способ решения проблемы множественных запросов в HTTP/1.1 — Встраивание изображений в CSS с помощью URI данных. Встраивание изображений таким образом значительно увеличивает размер таблицы стилей. Если сочетать этот метод с другой техникой оптимизации, браузер будет загружать все ? даже если пользователь не посещает страницы, на которых находятся эти изображения. В HTTP/2 это «передовой опыт» скорее навредит, чем улучшит производительность.
Комбинирование CSS и JavaScript
На заключительном этапе создания сайта многие объединяют все мелкие файлы и добавляют их на сайт JavaScript, использованный на ней. Мы часто разделяем их во время разработки, чтобы ими было легче управлять. Однако доставка одного файла в браузер более эффективна с точки зрения производительности, чем доставка пяти файлов. Опять же, мы пытаемся уменьшить количество HTTP-запросы.
Если вы сделаете это, посетителям придется загружать все стили и JavaScript сайт. Вы можете обойти эту проблему, включив только определенные файлы для каждой области вашего сайта по мере его создания.
Запросы HTTP «дешево«в мире HTTP/2. Гораздо лучшей идеей было бы организовать ресурсы, использованные во время разработки, по страницам. Таким образом, в браузер может быть загружен только код, необходимый для отображения текущей веб-страницы.
Совместное использование ресурсов между хостами: Sharding
При использовании протокола HTTP/1.1 Количество одновременно открытых соединений ограничено. Если загрузка большого количества ресурсов неизбежна, один из способов обойти это ограничение — загружать их из разных доменов. Этот метод известен как Разделение домена. Вы можете использовать его для уменьшения времени загрузки страницы. Однако это может вызвать проблемы, не говоря уже о затратах на подготовку инфраструктуры участка.
Протокол HTTP/2 устраняет необходимость использования Домен шардинг: Вы можете запросить столько ресурсов, сколько пожелаете. Однако это снижает производительность, так как создает дополнительные соединения и не позволяет определить приоритет раздела HTTP/2.
Как подготовиться к HTTP/2
Несколько советов о том, как подготовиться к переходу на HTTP/2.
Создание автономных изображений в дополнение к спрайтам и встроенным изображениям
Оптимизируйте спрайты и отдельные изображения, используемые на уровне страницы, если вы считаете, что использование спрайтов улучшит производительность сайта. Упростить переход от больших спрайтов к маленьким.
Организация файлов по разделам сайта
При переключении на HTTP/2 вы Повышение производительности за счет тщательного управления ресурсами, когда отправляется только то, что требуется конкретной странице.
Управление разделением доменов
В настоящее время наилучшей практикой является HTTP/1.1 — Ограничение разделения двумя именами хостов. В HTTP/2 существует способ объединить эти соединения, если сертификат действителен для обоих хостов и хосты находятся на одном сервере IP-адрес. Требуется сертификат TLS Чтобы узнать больше о HTTP/2.
Дальнейшие шаги
В этой статье я не рассказываю о том, как использовать новые инструменты HTTP/2, например толчок сервера. Эта технология позволяет вам решить, какие ресурсы являются приоритетными, и заставляет сервер передавать их перед менее важными ресурсами.
Когда переходить?
Принятие решения о переходе на HTTP/2 сводится к, Поддерживается ли этот протокол большинством браузеров ваших пользователей?. Помните, что HTTP/2 обратная совместимость, поэтому вам не нужно делать ничего особенного.
Если большинство ваших посетителей используют браузеры с поддержкой HTTP/2, пришло время оптимизировать ваш сайт для этих пользователей. Например, многочисленные преимущества HTTP/2 больше всего пострадают пользователи мобильных устройств. Если на вашем сайте высокий процент мобильных пользователей — это может быть сигналом для перехода на HTTP/2.
Ваша дорожная карта к HTTP/2
- Запустите свой сайт с помощью защищенного соединения или перейдите в раздел Сейчас.Будьте готовы к HTTP/2 В процессе создания вашего сайта. Используйте приведенные выше советы для создания сайта, оптимизированного для обеих версий протокола.Проверьте свой хостинг. Убедитесь, что ваш сервер поддерживает HTTP/2.Внедрение оптимизации для HTTP/2. Прекратите использовать устаревшие методы и перейдите на новые.
После посещения HTTP/2, стоит проверить, насколько увеличится скорость работы сайта.
Узнать больше
Растущее количество информации о HTTP/2 доступны в Интернете. Ниже я перечисляю некоторые ресурсы, на которые я ссылался при написании этой статьи.
«Протокол передачи гипертекста версии 2 (HTTP/2)» (спецификация).
Это для тех, кто любит читать спецификации или для тех, кому нужно понять мелкие детали. Для всех остальных FAQ ПО HTTP/2 — Это отличный обзор основных возможностей.Индикатор HTTP/2 и : Хром.
Этот плагин сообщает вам, работает ли сайт, на котором вы находитесь, в режиме HTTP/2.