Картинки и аватары каналов MAX на datool.ru теперь идут через CDN

Все картинки витрины datool.ru — аватары каналов MAX, изображения из постов, обложки категорий, скриншоты документации — теперь раздаются через CDN, сеть доставки контента. Браузер получает файл с адреса media.datool.ru от ближайшего узла сети, а не напрямую из хранилища. Вместе с этим мы перевели все копии в формат WebP, сделали для списков маленькие аватары и настроили ленивую загрузку картинок ниже экрана.

Зачем это нужно: страница каталога, рейтинга или «Сегодня в MAX» показывает десятки каналов сразу, и каждый — со своим аватаром. Раньше именно картинки были самой тяжёлой частью таких страниц. Теперь их меньше по весу, они быстрее доходят до браузера и не тормозят показ текста и чисел, ради которых вы открыли страницу.

Что такое CDN и почему мы его используем

CDN (Content Delivery Network) — это сеть серверов, которые хранят копии файлов и отдают их посетителям. Когда вы открываете страницу канала, аватар приходит не из основного хранилища, а с узла CDN, где он уже лежит в кеше. Хранилищу не нужно отвечать на каждый запрос, а посетитель получает картинку быстрее.

Для нас это важно по трём причинам:

• Скорость. Узел CDN отдаёт файл из кеша, без похода в хранилище; повторные открытия страницы берут картинки ещё и из кеша браузера.
• Устойчивость. Пиковая нагрузка — например, когда много людей одновременно открывают популярный канал — ложится на сеть доставки, а не на хранилище.
• Порядок в адресах. Все картинки сервиса живут на одном адресе media.datool.ru, его же отдаёт и API: поле аватара в карточке канала ведёт на нашу копию через CDN.

Оригиналы копий хранятся в России, в объектном хранилище, а сайт работает на серверах в Москве.

Какие картинки идут через CDN

• Аватары каналов и ботов MAX. Копию аватара мы делаем сразу, как только читаем карточку канала, и храним постоянно. Если владелец сменил аватар в MAX, старая копия удаляется и появляется новая.
• Картинки постов. У постов младше 7 дней превью готовится сразу после сбора. У более старых постов копия делается в момент, когда картинку впервые открывает человек, — со следующего показа она уже наша.
• Изображения категорий. Картинки рубрик в каталоге категорий и на страницах категорий хранятся в двух размерах — до 800 и до 500 пикселей.
• Скриншоты документации и обложки блога. Иллюстрации на docs.datool.ru тоже лежат в хранилище и раздаются через CDN.

WebP и разумные размеры

Каждая копия сохраняется в формате WebP — он даёт заметно меньший файл, чем JPEG или PNG, при том же виде на экране. Размеры подобраны под то, как картинка показывается:

• превью картинки поста — до 800 пикселей по длинной стороне;
• аватар канала — до 320 пикселей для шапки канала и страницы поста;
• маленькая копия аватара — до 96 пикселей для списков;
• изображения категорий — до 800 и до 500 пикселей с сохранением пропорций.

Меньшая картинка при этом не растягивается: если исходник в MAX меньше предела, копия остаётся его размера.

Маленькие аватары для списков

В каталоге, рейтингах, на страницах «Статистика MAX» и «Сегодня в MAX» аватар — это кружок размером 26–48 точек. Показывать для него копию на 320 пикселей было расточительно. Поэтому из каждой скачанной картинки мы делаем ещё одну, маленькую копию — до 96 пикселей, это чёткий кружок даже на экране двойной плотности.

Вес такой копии — 1–2 КБ вместо 3–30 КБ. На странице «Сегодня в MAX» аватары раньше весили около 0,75 МБ, теперь примерно в 10 раз меньше. Шапка канала и страница поста по-прежнему показывают крупный аватар — там он действительно нужен.

Ленивая загрузка: сначала то, что на экране

Картинки, которые видны сразу при открытии страницы, загружаются первыми: победители «Лидеров дня», первые десять карточек каталога каналов и строк рейтингов. Всё, что ниже экрана или на скрытых вкладках, браузер загружает по мере прокрутки. Так первая часть страницы появляется быстрее, а картинки, до которых вы не долистали, не тратят трафик.

Если аватар не загрузился с первого раза, сайт запросит его ещё раз; если и повтор не удался, вместо значка битой картинки будет ровный круг.

Что мы не копируем

• Картинки закрытых каналов. Их мы в публичное хранилище не кладём никогда — на странице закрытого канала, которую видит его владелец, изображения показываются ссылкой MAX.
• Видео, аудио и файлы. Видео воспроизводится прямо с серверов MAX, у нас хранится только кадр-превью.
• Удалённые посты. Если пост удалён в MAX, мы стираем его из базы вместе с копиями картинок.

Кому это полезно

• Посетителям витрины — страницы с длинными списками каналов открываются быстрее, особенно на телефоне и мобильном интернете.
• Владельцам каналов — аватар и картинки канала на datool.ru выглядят аккуратно и не пропадают, когда временная ссылка MAX перестаёт работать.
• Разработчикам — в API поле аватара ведёт на постоянную копию через CDN, её можно спокойно показывать в своих интерфейсах.

Частые вопросы

Итог

По данным datool.ru, на витрине сотни тысяч открытых каналов MAX, и почти у каждого есть аватар. Теперь все эти картинки приходят через сеть доставки контента, в WebP и в размере, который нужен на экране. Откройте каталог каналов или страницу канала — и оцените скорость сами. О том, с чего начинался сервис, — в новости о запуске datool.ru.