Выстраиваем процесс клиентского ускорения сайтов в компании: от KPI и мониторинга до используемых методов и внедрения.

1. ПРОМЫШЛЕННОЕ
УСКОРЕНИЕ
САЙТОВ

2. Мациевский Николай – владелец
www.webogroup.com, айри.рф
С 2007 года ускорено 5 836 сайтов
Посещаемость клиентских сайтов: 60М+ в день
Среднее ускорение сайта: 1,6 раза
2 книги, 16 наград (Microsoft MVP – 6 лет подряд,
Стартап года – 2 раза, WebReady, ROI, Окно в
Европу, YEES, Эврика, «Старт», CERPrize,
VCDay)

3. МЕТОДИКИ
ОПТИМИЗАЦИИ
ФРОНТЕНДА

4. W/Mustaches

5. Google PageSpeed Insights

6. WebPageTest.org

7. Google PageSpeed Module

8. CDN = Content Delivery Network

9. Правильное ускорение

10. Отображение сайта за 1 секунду

11. МОНИТОРИНГ
КЛИЕНТСКОЙ
ПРОИЗВОДИТЕЛЬНОСТИ

12. Google Analytics

13. Битрикс

14. NewRelic

15. mPulse

16. Айри.рф

17. Performance Timing API

18. Resource Timing API

19. Профилирование задержек

20. ВНЕДРЕНИЕ
УСКОРЕНИЯ

21. Выбор KPI по скорости
Время ответа сервера
Время отрисовки
Время полной загрузки – 50%
Процент загрузок до 4 секунд

22. KPI скорости сайта

23. “Бюджет” на ускорение
60% - на проверку гипотез ускорения
согласно ожидаемому эффекту
20% - на тестирование и анализ
20% - на внедрение лучших методов

24. Ускорение в виде “сборки”
Правила сборки файлов
Контроль клиентского кэширования
Контроль целостности серверного кэша
Тестирование ускоренной “сборки” сайта

25. Ускорение “на лету”
mod_pagespeed
200+ настроек
+50-150мс времени ответа сервера
eval() для JavaScript
нестабильная работа при нагрузке
собственная инвалидация кэша

26. Быстрое ускорение “на лету”
nginx + sub, subs, replace, gzip_static, brotli
gzip, zopfli, brotli, Closure Compiler, YUI
Compressor, HTML Compressor
optipng, pngcrush, pngout, pngwolf, gifsicle,
giflossy, convert, mozjpeg, subsampling,
webp, exiftool, zopflipng
scour, svgo, subset, smpdf, gs, ...

27. Ускорение со скоростью gzip

28. Отложенная загрузка

29. Параллельная загрузка

30. Оптимизация изображений

31. ПРОФИЛИРОВАНИЕ
КЛИЕНТСКОЙ
ПРОИЗВОДИТЕЛЬНОСТИ

32. Внедрение CDN

33. Мобильная производительность

34. Chrome: JavaScript CPU Profiler

35. РЕЗЮМЕ

36. Измерение производительности
Подключение (connect)
Сервер (server wait)
Канал (download)
Отрисовка (DOMready)
*Начало взаимодействия (interaction)
Загрузка (onload)

37. Правильная методика
Нагрузка
Частота
изменений
Ручная обработка Автоматизация
Динамическое
решение
Статическая
сборка

38. Комплексный подход
P = cПланировать
D = cДелать
S = соСчитать
A = проАнализировать

39. Спасибо!
Мациевский Николай
n@airee.ru
+7 926 7281964
Промо-код на 2500 рублей в Айри.рф
hl16