Web Performance в Казнете

Небольшой доклад на тему производительности сайтов в казнете. Проблемы и решения.

Transcript

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
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
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