Обманчивая простота HTTP/2

Алексей Уколов, @alexey_m_ukolov

Обманчивая простота HTTP/2

Алексей Уколов, @alexey_m_ukolov
Айтигро, Екатеринбург

Доклад-покаяние

HTTP/0.9 — 1991 г.

HTTP/1.0 — 1996 г.

HTTP/1.1 — 1999 г.

SPDY — 2009 г.

HTTP/2 — 2015 г.

HTTP/2 глазами маркетологов

А на нашем проекте ≈91%

Ура!

Некоторые лучшие практики оптимизации скорости загрузки бесполезны или даже вредны при использовании HTTP/2.
Это — костыли, призванные бороться с недостатками и ограничениями HTTP/1.

Но отказ от этих оптимизаций ударит по тем, кто не поддерживает новый протокол.

Но их же у нас всего 9%…

Логи говорят, что HTTP/2 есть у 30% посетителей…

HTTP/2 исправил ошибки прошлого.
Но само "прошлое" никуда не делось…

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

И почему это должно волновать фронтендера?

Что влияет на скорость загрузки?

Пропускная способность канала (Bandwidth)

Сетевые задержки (Latency и RTT)

Сетевые задержки (Latency и RTT)

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

Но скорость света увеличить не получится…

Установка соединения — очень дорогая операция.

Анатомия TCP-соединения

High Performance
Browser Networking

В HTTP/1 с этим всё печально

* http://www.browserscope.org/?category=network

HTTP/2 решает эти проблемы

HTTP/2 решает эти проблемы

Server Push

В конфиге Apache заголовки можно установить вот так:

<Location /xxx.html>
    Header add Link "</xxx.css>; rel=preload; as=style"
</Location>

На PHP вот так:

header("Link: </xxx.css>; rel=preload; as=style", false);

Server Push

Rules of Thumb for HTTP/2 Push

Лучшие практики фронтенда
(не все)

Конкатенация

http://engineering.khanacademy.org/posts/js-packaging-http2.htm

Спрайты

http://blog.octo.com/en/http2-arrives-but-sprite-sets-aint-no-dead/

Спрайты

Кто-так ещё делает?

Gzip, сжатие изображений

Минификация

Версионирование

<link href="/styles/main.v42.css"/>
<link href="/styles/main.css?v=42"/>
<link href="/styles/main.b149bad6.css"/>

Инлайнинг ресурсов

.block {
	background-image:  url(
		data:image/gif;
		base64,
		PHN2ZVJlYWR5AP5JRE ... JRa2jEIzFoJHJoGa9Zn==
	);
}

Скрипты в конце body

<html>
	<head>
		<link rel="stylesheet" href="/styles/main.css"/>
	</head>
	<body>
		…
		<script src="/scripts/vendor/jquery.js"/>
		<script src="/scripts/app.js"/>
	</body>
</html>

Принципы работы современных веб-браузеров

Ленивая загрузка

<img src="loading.gif" data-src="real.jpg" />
…
<script>
$('img').each(function () {
	$(this).attr('src', $(this).data('src'));
});
</script>

Content Delivery Network

Шардинг доменов

Лучшие практики в свете HTTP/2

Лучшие практики в свете HTTP/2

Применять практики бездумно нельзя, нужно понимать, почему делается именно так.

Не всё устареет с приходом HTTP/2.

Что-то нужно убирать или оставлять в зависимости от конкретных условий проекта.

Так включать или не включать?

Так включать или не включать?

Если на проекте нет оптимизаций — получите наибольший профит.

Иногда оказывается медленнее, но редко и ненамного.

Рекомендую включать – хуже не будет, но может стать сильно лучше.

Включать можно
Менять процесс — с умом

Идеально – две версии фронтенда

Лучшая «лучшая практика» — пользоваться головой

Bonus Round

Рендер "первого экрана"

Заголовки кеширования

no-cache doesn't mean "don't cache", it means it must check (or "revalidate" as it calls it) with the server before using the cached resource. no-store tells the browser not to cache it at all. Also must-revalidate doesn't mean "must revalidate", it means the local resource can be used if it's younger than the provided max-age, otherwise it must revalidate.

Caching best practices & max-age gotchas

Домены без кук

Минимум запросов к DNS

Лучшие практики в свете бонус-раунда

Интересные ссылки

Вопросы?

Алексей Уколов, @alexey_m_ukolov
alexey-m-ukolov@gmail.com