Comments 4
Вы показываете снижение температуры с 42 до 30 градусов как результат перехода на видео. Но по ходу ещё отключаете скрытые анимации, ограничиваете CSS-подсказку и заменяете часть иконок статикой. А сколько останется от этих 12 градусов разницы, если оставить Lottie, но убрать ту же лишнюю работу? Без такого замера непонятно, что именно выиграло: видео или исправленная реализация.
Оба замера после оптимизации. Для тестов и написания этой статьи я заменил Lottie на спрайты только на одной странице, поэтому прочая оптимизация справедлива к обоим вариантам. Первично, телефон грелся гораздо сильнее по ощущениям, его реально невозможно в руках было держать) Но я не проводил замеры на тот момент, к сожалению. Что жаль, кейс мог бы получиться ещё более интересным и показательным.
А не пробовали нарезку видео не внутри кадра, а по таймлайну? Я в курсе проблем с позиционированием точно в кадр (хотя вроде решается кодированием частыми I-фреймами), но при прочих равных будет сильно мельче декодируемая площадь в каждый момент времени.
Для ПК норм, но в safari менее предсказуемое поведение. Мой вариант вообще не даёт задержки (кроме первичной загрузки, которая скрывается шиммером).
Также нарезка по таймлайну может привести к микрофризам + вес файла обычно больше (из-за I-фреймов) = дольше первичная загрузка и отрисовка экрана. Но идея хорошая.
Как виджет для интернет‑магазина чуть не спалил мой iPhone: Lottie vs видео‑спрайты на телефонах