Готовимся к HTTP2. руководство для веб-дизайнеров и разработчиков

Linux loves

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

Основные преимущества HTTP/2

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

  1. Мультиплексирование⁚ HTTP/2 поддерживает мультиплексирование, что позволяет одновременно отправлять несколько запросов и получать несколько ответов․ Это увеличивает скорость загрузки страниц и снижает задержки․
  2. Сжатие заголовков⁚ HTTP/2 сжимает заголовки, отправляемые между клиентом и сервером, что уменьшает объем передаваемых данных и повышает эффективность․
  3. Приоритизация запросов⁚ в HTTP/2 можно устанавливать приоритеты для запросов, что позволяет серверу отправлять наиболее важные ресурсы в первую очередь․ Это гарантирует более быструю загрузку основного контента страницы․
  4. Серверные запушенные события (Server Push)⁚ HTTP/2 позволяет серверу активно запушивать ресурсы на клиентскую сторону без посылки запроса от клиента․ Это позволяет улучшить производительность и уменьшить время загрузки․
  5. Поддержка старых версий протокола⁚ HTTP/2 поддерживает обратную совместимость с предыдущей версией протокола HTTP/1․1, поэтому несовместимые клиенты и серверы могут продолжать работу․

Готовность к переходу на HTTP/2

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

  1. Обновите сервер⁚ убедитесь, что ваш веб-сервер (например, Apache, Nginx) поддерживает HTTP/2․ Многие современные серверы уже имеют встроенную поддержку для этой версии протокола․
  2. Узнайте о поддержке клиента⁚ проверьте, поддерживает ли браузеры ваших посетителей версию HTTP/2․ Подавляющее большинство современных браузеров уже поддерживает HTTP/2, однако есть некоторые старые версии, которые не совместимы․
  3. Активируйте HTTPS⁚ HTTP/2 рекомендуется использовать с протоколом HTTPS для обеспечения безопасности передачи данных․ Поэтому убедитесь, что ваш сайт работает по протоколу HTTPS․

Изменения во веб-разработке

HTTP/2 вносит некоторые изменения в процесс разработки веб-сайтов․ Вот некоторые из них⁚

  • Объединение файлов⁚ вместо использования нескольких файлов (например, CSS или JavaScript), при разработке под HTTP/2 рекомендуется объединять их в один файл․ Это помогает уменьшить количество запросов к серверу и ускорить загрузку страницы․
  • Оптимизация изображений⁚ HTTP/2 более эффективно передает данные, что позволяет снизить размер изображений без потери качества․ Используйте сжатие и форматы изображений, которые лучше подходят для HTTP/2․
  • Асинхронная загрузка ресурсов⁚ HTTP/2 позволяет параллельно загружать несколько ресурсов, поэтому можно загружать необходимые ресурсы асинхронно․ Это помогает снизить ожидание и повысить производительность страницы․
ЧИТАТЬ ЕЩЁ:  Карта сайта в форматах html и xml - создание и настройка

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, используется довольно широко. При этом Современные версии основных браузеров Поддерживает их в полном объеме.

SPDY

Поддержка браузеров в соответствии с «

HTTP/2

Поддержка была прекращена, поскольку эксперты Microsoft Поддержка HTTP/2 — Последняя версия протокола . Однако другие современные браузеры по-прежнему поддерживают .

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. Гораздо лучшей идеей было бы организовать ресурсы, использованные во время разработки, по страницам. Таким образом, в браузер может быть загружен только код, необходимый для отображения текущей веб-страницы.

ЧИТАТЬ ЕЩЁ:  Низкий уровень сигнала Wi-Fi. Что делать

Совместное использование ресурсов между хостами: 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.

Как подготовить макет к верстке? За что верстальщики не любят дизайнеров? Часть 1

Оцените статью