2. Верстка.
Вид снизу.

3. Для начала

4. Качество сети
• Delay (+ jitter)
4

5. Качество сети
• Delay (+ jitter)
• Bandwidth
5

6. Качество сети
• Delay (+ jitter)
• Bandwidth
• Packet loss
6

7. Они сильно влияют на скорость
7

8. Например
«Драматическая история одной маленькой
промостраницы», Олег Мохов
8

9. Загрузка одного файла

10. Скриншот из wireshark-а
10

11. 1. DNS lookup
11

12. Время DNS lookup
• есть в кеше клиента (0 мс)
12

13. Время DNS lookup
• есть в кеше клиента
• есть в кеше DNS-сервера провайдера
(единицы мс)
13

14. Время DNS lookup
• есть в кеше клиента
• есть в кеше DNS-сервера провайдера
• DNS-сервер знает про зону (+RTT от
провайдера до NS)
14

15. Время DNS lookup
• есть в кеше клиента
• есть в кеше DNS-сервера провайдера
• DNS-сервер знает про зону
• DNS-сервер вообще ничего не знает (+RTT
до root server, +RTT до NS)
15

16. 16

17. 2. Установка соединения
17

18. Установка соединения
18

19. Установка соединения
= минимум 1 RTT до фронтенда
Примеры:
• RTT из питерского офиса Яндекса до e1.ru
≈ 60мс
• RTT из Екатеринбурга до московских
серверов Яндекса ≈ 30мс
19

20. 3. Отправка запроса и начало
получения данных
20

21. Отправка запроса и начало получения
данных
= 1 RTT до фронтенда + время обработки на
сервере
21

22. 4. Передача данных
22

23. Возьмем пример
Сырой HTML (до сжатия) www.e1.ru: 109699
байт. (+ ≈ 200 байт заголовков).
23

24. MSS
MSS – maximum segment size
(максимальный размер сегмента).
Определяется при установке соединения
24

25. MSS
25

26. Почему 1460?
MTU (maximum transmission unit) –
максимальный размер блока данных одного
пакета, который может быть передан без
фрагментации. Ограничен снизу допустимой
длиной кадра.
26

27. Возьмем пример
Сырой HTML (до сжатия) www.e1.ru: 109699
байт (+ ≈ 200 байт заголовков).
Это 76 пакетов по 1460 байт.
27

28. Драматический момент
Если бы мы отправляли по пакету за раз,
это заняло бы 76 RTT или 4560 мс
28

29. TCP Receive Window
Количество данных, которые машина готова
принять за раз.
29

30. Congestion Window
Определяет количество байт, которые могут
быть посланы за раз.
30

31. Вернемся к примеру
Размер окна: 15744 байт
В него влезет 10 целых сегментов.
31

32. Вернемся к примеру
≈ 110Кб HTML ≈ 76 пакетов ≈ 8 RTT ≈ 480 мс
(если размер окна не будет меняться)
32

33. Потеря пакетов
• пакет придется перепослать
• размер congestion окна будет уменьшен
P.S. 15 - 20 % потерь – практически
неработающий интернет
33

34. Итого загрузка файла:
dns lookup + соединение + запрос + ответ =
= 0 мс + 1 RTT + 8 RTT =
= 0 + 60 + 480 = 540 мс
34

35. Теперь про
оптимизации

36. 1. gzip
Для нашего примера:
≈ 110Кб -> ≈ 20.5Кб
≈ 76 сегментов -> ≈ 15 сегментов
≈ 8 RTT -> 2 RTT
≈ 480 мс -> 120 мс
36
или
или
или

37. 2. Минификация и обфускация
style_new.css:
• сырой (до gzip): 17703 байт
• минифицированный: 9350 байт
• после gzip: 1830 байт
• минифицированный + gzip: 1713 байт
37

38. 100 байт разницы
38

39. 100 байт разницы – много или мало?
• лишние байты каждый раз
• могут добавить +1 сегмент и +1 RTT
39

40. 3. Сжатие картинок
Пример (самый простой):
http://www.e1.ru/news/images/
398/325/398325/70x46_1.jpg
• jpeg: 51Кб, при размере 70x46
• jpeg без профиля, EXIF и т д: 4,4 Кб
40

41. 3. Сжатие картинок
51 Кб ≈ 35 сегментов ≈ 4 RTT ≈ 240 мс
4,4 Кб ≈ 3 сегмента ≈ 1 RTT ≈ 60 мс
41

42. 4. Cookies для статики
• 205 байт (лишних) для каждого запроса
• 50-60 запросов за статикой
42

43. 5. География и CDN-ы
Чем ближе к пользователю – тем меньше
RTT, а значит, тем быстрее будет грузиться
контент.
43

44. 5. География и CDN-ы
CDN - Content Delivery Network или Content
Distribution Network (собственные или
коммерческие)
44

45. Загрузка нескольких
файлов

46. 1. Одновременные загрузки
http://www.browserscope.org/?category=network
46

47. Одновременные загрузки
www.e1.ru: 85 запросов
Из них к одному хосту: 66 запросов
47

48. 48

49. Раздавать статику с нескольких
доменов
49

50. 2. Склейка файлов
• объединять стили и скрипты
50

51. 2. Склейка файлов
• объединять стили и скрипты
• склеивать картинки в спрайты
51

52. 3. Keep Alive
52

53. Keep Alive
В указанном примере: 13 запросов за одно
соединение.
Экономим на 12 соединениях, т. е. на 12 RTT
53

54. 4. Инлайн
• увеличивает вес основной страницы
• уменьшает количество запросов
54

55. 5. Кеширование статики
Профит от кеширования очевиден.
55

56. Некоторое резюме

57. Сеть - это очень дорого
57

58. Сеть - это очень дорого
58

59. Сеть - это очень дорого
Понимание того, что происходит в сети, очень
важно
59

60. Рекомендуется к прочтению
http://chimera.labs.oreilly.com/books/
1230000000545
Ilya Grigorik,
“High Performance
Browser Networking”
60