Рассказ об оптимизации одного приложения

1. От 40 до 2 секунд
Увеличиваем скорость загрузки сайта
Колосов Павел, Тензор, 2015 год

2. Цель доклада
Как начать оптимизировать свой сайт?

3. Обо мне
Весь 2014 год работал в стартапе
“Веселый Жираф” ( www.happy-giraffe.ru )
Менеджером
Подписал NDA

4. http://www.happy-giraffe.ru/

5. Вводные данные проекта
● 3 500 000 уникальных пользователей в
месяц
● Примерно 250 000 уникальных
пользователей в день
● От 750 000 хитов в день
● 1 000 000+ страниц

6. Вводные данные проекта
http://www.happy-giraffe.ru/

7. Вводные данные проекта
● Никто из программистов упорно не
замечал проблем
● Руководство не понимало что делать

8. Первая проблема
У ведущего разработчика
iMac 27 дюймов и 24GB памяти
Решение:
● Celeron Core2 Duo T5550 3GB

9. Первая проблема
Правило 1:
тестируйте на разных устройствах

10. С чего начали
● PageSpeed:
o Desktop 70-80
o Mobile 50-60
● На “тестовой” машине
o OnLoad 40+ сек
o DOMContentLoaded 6+ сек
o Первый нормальный render 8+ сек

11. Задача от руководства
● OnReady 0.1 секунда
● OnLoad 0.4 секунды
● Добиться за 1 месяц

12. Правило 2:
Не беритесь за проект, который не
осилите
Правило 3:
Проект, вероятнее всего, займет много времени, очень много времени

13. Правило 4:
Инфраструктурные изменения
планируйте на лето, так как бизнес-
активность минимальная

14. Теория
На что мы можем влиять:
● время ответа сервера (ping)
● время генерации файла
● время передачи файла
● последовательность загрузки файлов
● используемые технологии на клиенте
● количество контента
Critical Render Path

15. Правило 5:
Начинайте работы с поиска узких мест

16. Анализ - Что будем наблюдать?
● Браузер:
o DOMContentLoaded
o OnLoad
● request time (access.log)

17. Анализ - Что будем наблюдать?
Правило 6:
Не меряйте средние величины, делите
на группы

18. Анализ - Что будем наблюдать?
Пример:
1 000 000 страниц и 50+ типов страниц:
● Тип А - 50% просмотров
● Тип B - 30% просмотров
● Тип C - 10% просмотров
● …

19. Анализ - Что будем наблюдать?
Правило 7:
Идите от просмотров, а не от
количества

20. Как мерим?
Сначала все руками, чтобы понять причины:
● Консоль разработчика
Потом статистический анализ:
● kibana(elasticsearch) для nginx
● RUM (real user measurement)

21. Что не является поводом к действию?
● Google analitics и Яндекс.метрика не
подошли
● PageSpeed, YSlow

22. JS
Разбираемся с JS:
● 80+ файлов
● В head
● Синхронно
● Около 40 вставок в body

23. JS
http://www.reporter.com.ua/

24. JS
http://www.reporter.com.ua/
http://tattooirovki.com/

25. JS
Правило 8:
Не давать PHP программистам писать
JS код

26. JS - Что можно сделать?
● RequireJS, browserify, webpack
● По максимуму использовать асинхронную
загрузку
● Убрать скрипты в конец body

27. JS
Правило 9:
Организовывайте js код правильно с
самого начала
Правило 10:
Планируйте жизнь в двух состояниях кода

28. JS - Результат
● Browserify лучше
● Максимальный прирост
производительности - если скрипты в
конце body
● Используйте google tag для маркетинга
● DOMContentLoad - responseEnd < 0.7
● Реклама - зло, так как российские
системы себя не оптимизируют

29. <div>
<script>
…
document.write(‘<script src=”...”></script>’)
…
</script>
</div>
JS - Результат

30. JS почему common лучше?
knockout
jQuery

31. CSS
● Убрать не используемые селекторы
● Отказаться от поддержки IE8
● Разделить на файлы по статистике
посещения (страницы A,B,C)
● Уменьшить количество подключаемых
файлов, в том числе изображений

32. CSS - Результат
● Очистка css от неиспользуемых
селекторов дало плохой результат
● Разбить по статистике - уменьшило файл
в 4 раза
● Уменьшения количества изображений
(объединение в спрайты) - хорошо
● Загружать шрифты - плохо

33. CSS - Результат
http://sourcejs.com/

34. Сеть
ping
● vk, odnoklassniki - 40 мс
● happy-giraffe.ru - 80 мс
Можно переносить сервера, можно ставить
кеш сервер в России

35. Сеть - CDN
1930 год - максимальная скорость 125км/час
http://www.rgo-sib.ru/

36. Сеть - CDN
1930 год - max скорость 125 км/час
1957 год - max скорость 175 км/час
http://www.rgo-sib.ru/

37. Сеть - CDN
1930 год - max скорость 125 км/час
1957 год - max скорость 175 км/час
2000 год - 120 км/час

38. Сеть - CDN
Правило 11:
Деньгами сайт ускорить нельзя

39. Backend
● Профилирование XHprof
● Архитектура
● Правильное кеширование

40. Backend - кеширование
● Учитывать время жизни объектов
● Разбивать на максимально
переиспользуемые куски
● Разрабатывайте, чтобы работало без
кеша
● Старайтесь отсрочить момент, когда кеш

41. Backend - Результаты
● Request time уменьшился до 0,6
● С включенным кешем до 0,3
● Кеширование на nginx до 0,05

42. Итог
● HTML отдается <2 секунды
● DOMContentLoaded <3 секунд
● OnLoad <10 секундЛучшие результаты:
● HTML отдается 0,35 секунды
● DOMContentLoaded <1 секунд
● OnLoad <7 секунд

43. А почему долгое время OnLoad?
А потому что AMD и 90+ файлов js

44. Апрель-май обучающий курс
https://hexlet.io/

45. Контакты
pavshuk@gmail.com
Skype: pavshukk

46. Вопросы?