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

Для начала

4

Качество сети

• Delay (+ jitter)

5

Качество сети

• Delay (+ jitter)

• Bandwidth

6

Качество сети

• Delay (+ jitter)

• Bandwidth

• Packet loss

7

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

8

Например

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

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

10

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

11

1. DNS lookup

12

Время DNS lookup

• есть в кеше клиента (0 мс)

13

Время DNS lookup

• есть в кеше клиента • есть в кеше DNS-сервера провайдера

(единицы мс)

14

Время DNS lookup

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

15

Время DNS lookup

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

16

17

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

18

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

19

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

= минимум 1 RTT до фронтенда Примеры: •  RTT из питерского офиса Яндекса до e1.ru ≈ 60мс

•  RTT из Екатеринбурга до московских серверов Яндекса ≈ 30мс

20

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

21

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

= 1 RTT до фронтенда + время обработки на сервере

22

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

23

Возьмем пример

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

24

MSS

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

25

MSS

26

Почему 1460?

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

27

Возьмем пример

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

28

Драматический момент

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

29

TCP Receive Window

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

30

Congestion Window

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

31

Вернемся к примеру

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

32

Вернемся к примеру

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

33

Потеря пакетов

•  пакет придется перепослать •  размер congestion окна будет уменьшен

P.S. 15 - 20 % потерь – практически неработающий интернет

34

Итого загрузка файла:

dns lookup + соединение + запрос + ответ = = 0 мс + 1 RTT + 8 RTT = = 0 + 60 + 480 = 540 мс

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

36

1. gzip

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

37

2. Минификация и обфускация

style_new.css:

•  сырой (до gzip): 17703 байт • минифицированный: 9350 байт • после gzip: 1830 байт • минифицированный + gzip: 1713 байт

38

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

39

100 байт разницы – много или мало?

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

40

3. Сжатие картинок

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

41

3. Сжатие картинок

51 Кб ≈ 35 сегментов ≈ 4 RTT ≈ 240 мс 4,4 Кб ≈ 3 сегмента ≈ 1 RTT ≈ 60 мс

42

4. Cookies для статики

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

43

5. География и CDN-ы

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

44

5. География и CDN-ы

CDN - Content Delivery Network или Content Distribution Network (собственные или коммерческие)

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

46

1. Одновременные загрузки

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

47

Одновременные загрузки

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

48

49

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

50

2. Склейка файлов

• объединять стили и скрипты

51

2. Склейка файлов

• объединять стили и скрипты

•  склеивать картинки в спрайты

52

3. Keep Alive

53

Keep Alive

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

54

4. Инлайн

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

55

5. Кеширование статики

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

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

57

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

58

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

59

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

Понимание того, что происходит в сети, очень важно

60

Рекомендуется к прочтению

http://chimera.labs.oreilly.com/books/1230000000545 Ilya Grigorik, “High Performance Browser Networking”