Ускорение показа превью изображений в Яндекс.Диске / Сергей Нечаев (Яндекс)

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

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

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

Как все работает

Фотоньки

Файлов в сутки

25.5M

15.2M

47.2M

загружается всегозагружается изображенийзапросов превью

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

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

? мс

Стадии загрузки и показа

DNS+TCP SSL request response delay before show

delay before request

Оптимизации• Задержки на клиенте• Генерация превью• Доставка

Что из этого вносит наибольший вклад в общее время?

Измерения на клиенте

Запрос списка Рендеринг сетки Загрузка всех картинок в

порции

Фотоньки Фотоньки Фотоньки

Измерения на клиенте – 2Для отдельной картинки– время установки ssl

соединения– время собственно

загрузки

Resource Timing API** Помним о Timing-Allow-Origin

Время показа превью

Запрос листинга

Получение порции превью

Рендеринг сетки

До: время показа порции

Время

3,200 мс

800 мс

200 мсРендерЛистинг

Загрузка порции

Генерация превью• Проверка валидности

ссылки• Проверка доступов• Получение большого

превью из хранилища• Собственно генерация

Генерация превью• Было:

• Генерация на машинах, обрабатывающих добавляемые файлы

• Кэш в рамках одной машины• Стало:

• Отдельный кластер для генерации

• Кэш в рамках ДЦ

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

Время для пользователя

Запрос листингаПолучение порции превью

Рендеринг сетки

Оптимизация доставкиУменьшить размер: jpeg quality

95% 92%

124КB 62KB

SPDYВнедрили

SPDY для >24 картинок

25% 50% 75% 95%

1.52.6

3.7

8.0

1.52.3

3.2

6.8

Время отдачи порции в секундах

SPDY и антивирусы

Фотоньки

АнтивирусX

Предзапросы превьюСгенерируй превью

Отдай превью

Клиент Сервер

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

Клиент Сервер

Качество по запросуДай превью

Клиент Сервер

Дай превью получше

До и после

До После

3,200 мс

1,800 мс

800 мс

1,230 мс

200 мс

220 мс

РендерЛистинг

Загрузка

порции

Выводы и рекомендации• Перед началом

оптимизации необходимо получить полную картину

• Разные сервисы нужно изолировать по ресурсам

• Для SPDY нужна служба поддержки :)

• После каждой оптимизации нужно заново профилировать

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

@spnechaev