HighLoad++ 2017 Зал «Москва», 8 ноября, 17:00 Тезисы: http://www.highload.ru/2017/abstracts/2880.html Поисковая выдача Яндекса (СЕРП) - сложное многофункциональное веб-приложение с высокими требованиями к скорости загрузки. По ряду причин мобильный веб медленнее десктопа: ограничения по CPU/памяти в телефонах, нестабильность мобильных сетей. В докладе расскажем, как с учётом этих особенностей, мы ускоряем мобильный СЕРП.

2. Оптимизации поисковой
выдачи Яндекса

3. Время до первой отрисовки (TTFP) в Рунете
Агрегированные анонимные данные Яндекс.Метрики. Россия (домены в зоне .RU). Октябрь 2017. 3
Платформа Медиана (50%)
Десктопы 1015 ms
Телефоны,
Wi-Fi
1474 ms
Телефоны, Сотовая связь 1969 ms

4. 〉Большая латентность (RTT)
〉Узкий канал (bandwidth)
〉Нестабильность характеристик, потери пакетов (плохо для
TCP)
〉Ограничения по железу (процессор, память, хранилище)
Особенности мобильного веба
4

5. 〉Установка соединения (DNS, TCP, TLS) и отправка запроса
〉Обработка запроса на сервере
〉Доставка контента (TTFB)
〉Разбор ответа и отрисовка (TTFP)
Этапы загрузки страницы
5

6. Этапы загрузки страницы
Анонимные агрегированные данные мобильных пользователей Яндекс.Поиска. Срезы по скорости сети на основе
данных с front-end серверов Яндекса, по технологии сети — Network Information API. 6
0 %
25 %
50 %
75 %
100 %
Wi-Fi 3G
DNS
TCP
TLS
TTFB
TTFP

7. 〉DNS — 1 RTT
〉TCP — 1 RTT
〉TLS — 2 RTT (возможно, больше)
〉Запрос — 1 RTT
При холодной загрузке необходимо 5 RTT.
Установка соединения и задание запроса
7

8. RTT в мобильных сетях
Агрегированные данные с front-end серверов Яндекса. 8
Перцентиль RTT, ms
25 % 33
50 % 77
80 % 537
90 % 1983

9. Медианный RTT в срезах по типу соединения
Агрегированные данные с front-end серверов Яндекса. Определение технологии сети по данным Network
Information API. 9
Технология сети median RTT, ms
Wi-Fi 36
4G 77
3G 146
2G 2211

10. $ ping yandex.ru
64 bytes from yandex.ru (5.255.255.70): icmp_seq=1 ttl=52 time=651 ms
64 bytes from yandex.ru (5.255.255.70): icmp_seq=2 ttl=52 time=512 ms
…
64 bytes from yandex.ru (5.255.255.70): icmp_seq=12 ttl=52 time=6506 ms
64 bytes from yandex.ru (5.255.255.70): icmp_seq=13 ttl=52 time=5506 ms
…
64 bytes from yandex.ru (5.255.255.70): icmp_seq=20 ttl=52 time=626 ms
RTT зависит от загруженности канала
RTT в мобильной 2G-сети до и во время загрузки страницы. 10

11. Оптимизации установки соединения

12. 〉Не устанавливать соединение на критичном пути
〉Не делать редиректов
〉Оптимизации TLS
Оптимизации установки соединения
12

13. 〉Переиспользовать соединения (keepalive)
〉preconnect
Загрузка первой поисковой подсказки через прогретое
соединение увеличило показы сервиса на 4.8%.
Не устанавливать соединение на критическом
пути
13

14. 〉301 Moved Permanently
〉HSTS — HTTP Strict Transport Security
Редиректы — зло
14

15. TLS Session Ticket & TLS False Start
https://habrahabr.ru/company/yandex/blog/249771/ 15
ServerHello
Certificate
…
ClientHello
…
CCS
…
Finished
App Data
App Data
0 ms
100 ms
150 ms
CCS
…
Finished

16. Уменьшает установку TLS-соединения на 1 RTT.
Включается, если сервер:
〉использует Perfect Forward Secrecy (PFS)
〉поддерживает Application Level Protocol Negotiation (ALPN)
Ускорение установки TLS на 13% на yandex.ru на мобильных.
TLS False Start
https://habrahabr.ru/company/yandex/blog/249771/ 16

17. 〉Удалили корневой сертификат из ECC-цепочки
сертификатов
〉Отключили OCSP stapling
Размер данных уменьшился с 7.3 КБ до 4.3 КБ (с 5 до
3-х пакетов при MTU 1500).
Ускорение TLS на 7% на yandex.ru на мобильных.
Минимизация передаваемых данных при
TLS-хэндшейке
17
ServerHello
Certificate
OCSP stapling
…

18. Загрузка контента

19. Оптимизации:
› Параллельно с тяжелыми операциями
отдавать данные клиенту для первой
отрисовки (поисковая стрелка)
› Chunked-Encoding
Обработка запроса на сервере
19

20. 〉Все необходимые ресурсы для отрисовки находятся в начале
HTML
〉Оптимизация картинок (WebP, SVG)
〉Максимальное сжатие статики Zopfli/Brotli
〉Загрузка статики не на критическом пути отрисовки
Загрузка контента
20

21. 70% потока картиночных тумбов в формате WebP.
Плюсы:
На 20% больше полностью загруженных выдач
На 14% меньше трафика в сторону пользователей
Минусы:
Снизился кэш-хит на кэширующих прокси
WebP
21

22. Сложные оптимизации могут ухудшить UX.
Главное — не перестараться
22

23. Разбор ответа и отрисовка
23
0
575ms
1s 150ms
1s 725ms
2s 300ms
Scripting Painting
Macbook Pro (3,1 GHz)
Samsung J1 (1,3 GHz)

24. Лёгкая версия поисковой
выдачи для медленных
соединений

25. 〉Определение медленного соединения
〉Специальная вёрстка для медленных соединений
Адаптация страницы под характеристики
соединения
25

26. Доступные источники:
〉Метрики ядра по TCP (TCP_INFO)
〉Время установки TLS-соединения
〉Метрики от клиентов (Save-Data)
Определение медленного соединения
26

27. TCP_INFO
linux/include/uapi/linux/tcp.h 27
getsockopt(fd, IPPROTO_TCP, TCP_INFO, &tcpinfo, &len);
tcpinfo:
__u32 tcpi_rtt;
__u32 tcpi_rttvar;
__u32 tcpi_total_retrans;
__u32 tcpi_segs_out; /* RFC4898 tcpEStatsPerfSegsOut */
__u32 tcpi_segs_in; /* RFC4898 tcpEStatsPerfSegsIn */
…

28. TCP_INFO
https://nginx.ru/ru/docs/http/ngx_http_core_module.html 28
proxy_set_header X-TCP-Info “rtt=$tcpinfo_rtt, rttvar=$tcpinfo_rttvar”;
Часть метрик доступна в переменных nginx:
X-TCP-Info: rtt=74299, rttvar=3372

29. Время установки TLS со стороны сервера
29
SSL_accept() // 100ms
ServerHello
Certificate
…
ClientHello
…
CCS
…
Finished
App Data
App Data
0 ms
100 ms
150 ms
CCS
…
Finished

30. 〉Размер данных для первой отрисовки (pre-search): 0.8 КБ
〉HTML/CSS меньше 14 КБ (одно TCP-окно)
〉Inplace CSS (стили в HTML расположены перед
непосредственным использованием)
〉Нет AJAX
〉Лёгкий JS
Вёрстка для медленных соединений
https://habrahabr.ru/company/yandex/blog/336952/ 30

31. Увеличение показов СЕРПа на 2.2%.
Профит от лёгкой версии поиска
По данным A/B эксперимента в мобильном поиске Яндекса. Март 2017. 31

32. Ускорение первой отрисовки от начала
запроса в поиске (нормированное)
% уменьшения задержки от начала поискового запроса до первой отрисовки мобильной поисковой выдачи среди
пользователей Яндекс.Браузера. 32
0 %
15 %
30 %
45 %
60 %
Окт. Нбр. Дек. Янв. Фев. Мрт. Апр. Май Июн. Июл. Авг. Сен.
1
2
3

33. Иван Хватов
Ведущий разработчик
ivaxer@yandex-team.ru lyadzhin@yandex-team.ru
Сергей Ляджин
Руководитель отдела
разработки поисковой
инфраструктуры
Спасибо