Наш кейс — оптимизация иллюстраций на сайте⁠⁠

Наш кейс — оптимизация иллюстраций на сайте

На фото сами стенды в школах, а в реплае — главная страница сайта. Позже выложу самые интересные страницы. Сейчас хочется сказать про боль с иллюстрациями и как она решается.

Визуальная часть X-Ray стендов — это около сотни иллюстраций, карточек и фонов. На старте это давало заметную нагрузку на трафик и первый рендер, особенно на телефонах.

Мы прошлись по всему пути доставки изображений и даже избавились от них там, где можно было заменить на Canvas или просто HTML/CSS. Теперь у нас такой средний показатель — 1,350-1,500мс💪🏻 по всем страницам. Ничего нового не использовали. Прошлись по классике:

— AVIF оказались тяжелее, прям не понравилось мне. Оставили PNG
— Сделали отдельные версии иллюстраций под ширину экрана: десктоп и мобильная версия
— Ленивая загрузка и предзагрузка тяжелых иллюстраций
— Весь контент кэшируется для повторных заходов