Документ описывает оптимизацию процесса генерации превью изображений в Яндекс.Диске. Основное внимание уделяется улучшению времени загрузки и отображения превью через использование кластера для генерации и внедрение SPDY. Рекомендации включают необходимость изоляции сервисов и повторного профилирования после каждой оптимизации.

2. Ускорение генерации
превью в
Яндекс.Диске
Сергей Нечаев

3. Что может быть хуже?

4. Те самые фотоньки

5. Как все работает
Фотоньки

6. Файлов в сутки
25.5M
15.2M
47.2M
загружается всего
загружается изображений
запросов превью

7. Статические превью
+ Нет расходов
на генерацию

8. Динамические превью
? мс

9. Стадии загрузки и показа
DNS+TCP SSL request response delay before showdelay before request

10. Оптимизации
• Задержки на клиенте
• Генерация превью
• Доставка
Что из этого вносит
наибольший вклад в общее
время?

11. Измерения на клиенте
Запрос списка Рендеринг сетки Загрузка всех картинок в порции
Фотоньки Фотоньки Фотоньки

12. Измерения на клиенте – 2
Для отдельной картинки
– время установки ssl
соединения
– время собственно загрузки
Resource Timing API*
* Помним о Timing-Allow-Origin

13. Время показа превью
Запрос листинга
Получение порции превью
Рендеринг
сетки

14. До: время показа порции
3,200 мс
800 мс
200 мс
Время
Рендер
Листинг
Загрузка
порции

15. Генерация превью
• Проверка валидности ссылки
• Проверка доступов
• Получение большого превью
из хранилища
• Собственно генерация

16. Генерация превью
• Было:
• Генерация на машинах,
обрабатывающих добавляемые
файлы
• Кэш в рамках одной машины
• Стало:
• Отдельный кластер для генерации
• Кэш в рамках ДЦ

17. Время на сервере

18. Время для пользователя
Запрос листинга
Получение порции превью
Рендеринг
сетки

19. Оптимизация доставки
Уменьшить размер: jpeg quality
95% 92%
124КB 62KB

20. SPDY
Внедрили

21. SPDY для >24 картинок
1.5
2.6
3.7
8.0
1.5
2.3
3.2
6.8
25% 50% 75% 95%
Время отдачи порции в секундах

22. SPDY и антивирусы
Фотоньки
Антивирус
X

23. Предзапросы превью
Сгенерируй превью
Отдай превью
Клиент Сервер

24. Склеивать картинки
Дай пачку превью
Клиент Сервер

25. Качество по запросу
Дай превью
Клиент Сервер
Дай превью получше

26. До и после
3,200 мс
1,800 мс
800 мс
1,230 мс
200 мс
220 мс
До После
РендерЛистинг
Загрузка
порции

27. Выводы и рекомендации
• Перед началом
оптимизации необходимо
получить полную картину
• Разные сервисы нужно
изолировать по ресурсам
• Для SPDY нужна служба
поддержки :)
• После каждой оптимизации
нужно заново
профилировать

28. Сергей Нечаев
Менеджер технических проектов
Яндекс.Диска
@spnechaev