Задача. Бренд наушников (его я придумала для этого демо) хочет первый экран, который запомнится. Но живые эффекты обычно делают сайт тяжёлым и медленным на телефонах.
Решение. На первом экране живой градиент и логотип из «жидкого металла», дальше обычные быстрые разделы. Сначала посетитель видит картинку с тем же кадром, а код эффекта загружается после страницы. На слабых телефонах, в режиме экономии трафика или при включённом уменьшении движения код эффекта не загружается вовсе.
Замер на профиле телефона при медленном 4G: основное содержимое появляется за 0,8 с и с эффектом, и без него. До загрузки эффекта страница весит 79 КБ, сам эффект добавляет ещё 79 КБ уже после неё. Добавить такой экран на новый сайт стоит 120 USD, на готовый — 180 USD.