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

Linux loves

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

Совместное использование ресурсов между хостами: Sharding

При использовании протокола HTTP/1.1 Количество одновременно открытых соединений ограничено. Если загрузка большого количества ресурсов неизбежна, один из способов обойти это ограничение — загружать их из разных доменов. Этот метод известен как Разделение домена. Вы можете использовать его для уменьшения времени загрузки страницы. Однако это может вызвать проблемы, не говоря уже о затратах на подготовку инфраструктуры участка.

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

Как подготовиться к HTTP/2

Несколько советов о том, как подготовиться к переходу на HTTP/2.

ЧИТАТЬ ЕЩЁ:  Карта сайта в форматах html и xml - создание и настройка

Создание автономных изображений в дополнение к спрайтам и встроенным изображениям

Оптимизируйте спрайты и отдельные изображения, используемые на уровне страницы, если вы считаете, что использование спрайтов улучшит производительность сайта. Упростить переход от больших спрайтов к маленьким.

Организация файлов по разделам сайта

При переключении на 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.

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