- PVSM.RU - https://www.pvsm.ru -

Зачем нужен HTTP-2 для сайтов

Зачем нужен HTTP-2 для сайтов - 1

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

Что такое HTTP/2 и зачем он нужен

Протокол HTTP/1.1 используется с 1999 года и со временем обрел одну существенную проблему. Современные сайты, в отличие от сайтов прошлого века, используют множество различных элементов: скрипты на Javascript, стили на CSS, шрифты, видео, а иногда еще и flash-анимацию. При передаче всего этого хозяйства между браузером и сервером создаются несколько соединений.

Зачем нужен HTTP-2 для сайтов - 2

Протокол HTTP/2 [1] существенно ускоряет открытие сайтов за счет следующих особенностей:

  • соединения: несколько запросов могут быть отправлены через одно TCP-соединение, и ответы могут быть получены в любом порядке. Отпадает необходимость держать несколько TCP-соединений;
  • приоритеты потоков: клиент может задавать серверу приоритеты — какого типа ресурсы для него более важны, чем другие;
    сжатие заголовка: размер заголовка HTTP может быть сокращен;
  • push-отправка данных со стороны сервера: сервер может отправлять клиенту данные, которые тот еще не запрашивал, например, на основании данных о том, какую следующую страницу открывают пользователи.

Разработка протокола HTTP/2 основывалась на другом протоколе SPDY, который был разработан Google [2], но компания Google уже объявила [3] о том, что откажется от дальнейшей поддержки SPDY в пользу более многообещающего HTTP/2.

Действительно ли HTTP/2 работает быстрее?

Специалисты из HttpWatch провели несколько тестов [4] и выявили серьезное ускорение от использования HTTP/2.

На скриншоте ниже показана скорость загрузки страницы с использованием HTTP/1.1:

Зачем нужен HTTP-2 для сайтов - 3

А на этом скриншоте — результат с использованием HTTP/2:

Зачем нужен HTTP-2 для сайтов - 4

Скорость загрузки выросла на 23%. Эксперты HttpWatch также отмечают, что технология пока не до конца оптимизирована, и ожидают реальное ускорение в районе 30%.

Существует еще несколько сервисов, которые предоставляют демо или дают возможность проверить разницу в скорости на живом сайте: HTTPvsHTTPS [5] и LoadImpact [6].

Специалисты Айри.рф [7] также провели тестирование в январе-феврале 2016 года, чтобы выяснить, сколько может выиграть реальный (небольшой или средний) сайт после перевода на протокол HTTPS + HTTP/2. В среднем по нескольким сайтам, которые уже прошли предварительную оптимизацию по скорости (сжатие и объединение файлов, сетевая оптимизация), клиентская скорость загрузки выросла на 13-18% только за счет включения HTTP/2.

Стоит упомянуть, что не все эксперименты были столь однозначны. На Хабре уже был описан эксперимент, поставленный командой Яндекс.Почты [8]. Тестировался протокол SPDY, но напомним, что HTTP/2 разрабатывался на основе SPDY и очень близок к нему в плане используемых методов.

Команда «Яндекс.Почты», протестировав SPDY на части своих реальных пользователей, установила, что среднее время загрузки изменилось всего лишь на 0,6% и не превысило статистической погрешности. Однако специалисты «Яндекс.Почты» обнаружили, тем не менее, положительный момент от использования SPDY. Поскольку число соединений с серверами уменьшилось (это ключевая особенность SPDY и HTTP/2), то нагрузка на серверы заметно сократилась).

Почему важно искать возможности ускорить загрузку страниц сайта?

Джон Мюллер, аналитик из команды Google Webmaster Trends, в своем блоге Google+ написал [9], что наличие на сайте поддержки HTTP/2 не является напрямую ранжирующим фактором в Google. В то же время, скорость загрузки — сама по себе значительный фактор ранжирования, поэтому имеет смысл начать использовать HTTP/2 для SEO-продвижения.

Он добавил, что само по себе ускорение работы сайта должно положительно влиять на ранжирование за счет поведенческих факторов. У более «быстрой» страницы меньше процент отказов — скорее всего, больше пользователей что-то сделают на такой странице, и это повлияет на ранжирование в поиске.

Джон Мюллер также сообщил [10], что Googlebot скоро начнет поддерживать HTTP/2. И кто знает — может, в будущем наличие HTTP/2 на сайте и станет ранжирующим фактором. Ведь поисковики постоянно меняют алгоритмы.

Какие браузеры уже поддерживают HTTP/2?

Согласно данным CanIUse.com, это следующие браузеры:

IE 11 в Windows 10;
Edge 12 и 13;
Firefox 36 — 45;
Chrome 41 — 49;
Safari 9;
Opera 28 — 34;
Safari для iOS 9.1;
Opera 30 для Android;
Chrome 46 для Android;
Firefox 41 для Android.

По данным CanIUse.com, это составляет порядка 70% трафика [11].

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

Безопасность сайтов

Переход на HTTP/2 (сейчас) автоматически означает переход на HTTPS (защищенный режим работы сайта), другие режимы не поддерживаются браузерами. HTTPS шифрует весь трафик сайта и требует установленного сертификата (нормальный DV-сертификат можно получить и абсолютно бесплатно, например, через WoSign [12] или Let's Encrypt [13]).

Шифрование сайта поможет не только HTTP/2. Google уже объявил, что шифрование сайта является положительным сигналом ранжирования [14].

Дает ли что-то HTTP/2 веб-разработчикам?

Да! HTTP/2 позволяет избавиться от целого вагона старых трюков, призванных ускорить загрузку страниц без HTTP/2. Перечислим их:

  • домен-шардинг или использование множественных родственных доменов для скачивания файлов, чтобы позволить установить большее число TCP-соединений;
  • спрайты из картинок — объединение картинок в один файл для снижения числа запросов. Однако такой файл должен сначала загрузиться целиком, прежде, чем будет показана хоть одна картинка. К тому же, обработка больших файлов съедает больше памяти;
  • объединение файлов CSS и Javascript, что также делается для снижения количества запросов, и также увеличивает занимаемую память (и потенциально, объем загружаемых данных);
  • инлайн-включения или помещение CSS и Javascript, а иногда даже и картинок внутрь HTML-файла, чтобы снизить число соединений (например, через base64). В то же время приводит к тому, что страница не показывается, пока весь файл не загрузится;
  • домены без cookie: загрузка картинок, CSS и Javascript с другого домена, где не используются cookie.

Как подключить HTTP/2

Эпоха HTTP/2 совсем близко: многие браузеры уже поддерживают этот протокол [11]. Его внедрение не требует никаких изменений в самом сайте: не нужно менять URL страниц, не нужно менять ссылки, ставить редиректы, добавлять или менять какую-то разметку или указывать дополнительные данные для Google Search Console или «Яндекс.Вебмастер» (если ваш сайт уже используется HTTPS). Если ваш сайт пока не использует защищенный режим, то для использования HTTP/2 нужно будет подключить HTTPS (со всеми сопутствующими действиями).

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

Если вы используете собственный виртуальный или выделенный сервер [15], то поддержка HTTP/2 добавляется на уровне модуля к nginx (дополнительно потребуется установить SSL-сертификат и ключ на сервер): на Хабре уже публиковали неплохую инструкцию [16] и здесь [17].

Проверить поддержку HTTP/2 можно либо через браузерные расширения для Firefox [18] или Chrome [19], либо через проверку скорости на сайте Айри.рф [7]: в случае поддержки HTTP/2 в результатах проверки будет зеленая плашка [HTTP/2.0].

Автор: sunnybear

Источник [20]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/poiskovaya-optimizatsiya/120561

Ссылки в тексте:

[1] Протокол HTTP/2: https://http2.github.io/

[2] который был разработан Google: https://developers.google.com/speed/spdy/

[3] компания Google уже объявила: http://blog.chromium.org/2016/02/transitioning-from-spdy-to-http2.html

[4] провели несколько тестов: https://blog.httpwatch.com/2015/01/16/a-simple-performance-comparison-of-https-spdy-and-http2/

[5] HTTPvsHTTPS: https://www.httpvshttps.com/

[6] LoadImpact: http://http2.loadimpact.com/entry/

[7] Айри.рф: https://xn--80aqc2a.xn--p1ai/

[8] был описан эксперимент, поставленный командой Яндекс.Почты: https://habrahabr.ru/company/yandex/blog/222951/

[9] в своем блоге Google+ написал: https://plus.google.com/+JohnMueller/posts/VZnmctnJV3v

[10] Джон Мюллер также сообщил: https://www.seroundtable.com/google-http2-21152.html

[11] По данным CanIUse.com, это составляет порядка 70% трафика: http://caniuse.com/#feat=http2

[12] через WoSign: https://buy.wosign.com/free

[13] Let's Encrypt: https://letsencrypt.org/

[14] шифрование сайта является положительным сигналом ранжирования: https://webmasters.googleblog.com/2014/08/https-as-ranking-signal.html

[15] хостинге: https://www.reg.ru/?rlink=reflink-717

[16] на Хабре уже публиковали неплохую инструкцию: https://habrahabr.ru/company/infobox/blog/268599/

[17] и здесь: https://habrahabr.ru/company/selectel/blog/278167/

[18] браузерные расширения для Firefox: https://addons.mozilla.org/ru/firefox/addon/spdy-indicator/

[19] Chrome: https://chrome.google.com/webstore/detail/http2-and-spdy-indicator/mpbpobfflnpcgagjijhmgnchggcjblin

[20] Источник: https://megamozg.ru/post/26218/