Автор Никита Баев

1. Web Performance*
* В Казнете
1

2. Никита Баев
Менеджер по туризму
Front-end Developer в Kosmoport.kz
2

3. Google
“The Web should be fast.”
3

4. Реальность
4

5. Топ 5 сайтов Казнета*
1. nur.kz
2. kolesa.kz
3. zakon.kz
4. tengrinews.kz
5. kset.kz
*по zero.kz**
**исключая внешние сайты5

6. NUR.kz
• 145 HTTP-запросов
• 985KB трафика
• 4.12s — время загрузки
6

7. kolesa.kz
• 220 HTTP-запросов
• 1.9MB трафика
• 4.11s — время загрузки
7

8. zakon.kz
• 110 HTTP-запросов
• 2.3MB трафика
• 5.80s — время загрузки
8

9. tengrinews.kz
• 184 HTTP-запроса
• 3.3MB трафика
• 9.68s — время загрузки
9

10. kset.kz
• 52 HTTP-запроса
• 772KB трафика
• 821ms — время загрузки
10

11. 11

12. Проблемы
12

13. Максимальное количество подключений
• Chrome: 10 (6 — per Hostname) (51.04%)
• Firefox: 17 (6 — per Hostname) (13.72%)
• Safari: 17 (6 — per Hostname) (5.51%)
• IE9: 35 (6 — per Hostname) (IE = 7.98%)
• IE11: 17 (13 — per Hostname)
• Opera: 16 (6 — per Hostname) (8.94%)
13

14. Расширения
(adblock, iNikolayev и т.д)

15. Низкая скорость загрузки
• EDGE: 474 Кбит/с
• 3G: ~2048 Кбит/с
• 4G (теоретически): 100 Мбит/с
• ADSL (Megaline, Hit): ~512 Кбит/с
15

16. На примере kolesa.kz
(1.9MB, no-cache, first load)
• DSL: 11.43s — полная загрузка (5.66 DOM)
• 3G: 23.51s — полная загрузка (8.57 DOM)
• EDGE: 1.2min — полная загрузка (26.31 DOM)
• GPRS: ~никогда (6.3min) — полная загрузка
(1.8min DOM)
16

17. 17

18. Способы борьбы
с лишними килобайтами
18

19. Минификация и
оптимизация
Всего и вся
(styles, scripts, html, images, fonts)

20. CDN-изация
Решаем проблему ограничений на параллельные
загрузки

21. Клиентская
оптимизация• Уменьшить количество DOM-элементов на
странице
• Асинхронная загрузка не важных для вида скриптов
и стилей
• Всегда задавайте размеры изображений
• Не добавляйте @import
• Элементы дизайна добавляйте в спрайты
• Webp-изображения (Доступно 64.08% юзеров)

22. Серверная
оптимизация
• TTFB (Time To First Byte)
• Кэширование всего и вся
• Уменьшить количество DNS lookups
• Gzip (gzip_static)

23. Спасибо
Вопросы?
«May the speed be with you»
twitter.com/bayevn
telegram.me/drugoi
github.com/drugoi
bayev.kz

24. Front-end Kazakhstan