Разрабатываю сайт на vueJS, на сайте много изображений (около 100) и видео (около 10). Изображение храню и загружаю из VueX. Изображения/видео разделены на группы, пользователя выбирает соответствующие разделы и фото/видео обновляются. Видео загружаю через iframe c ютуба. Видна задержка между переключениями, сайт подвисает. Как можно оптимизировать загрузку фото и видео, чтобы пользователь не видел задержек? папка dist весит 98 мб. Буду благодарна за любые советы!
1 ответ
Не грузи iframe без надобности, грузи только тогда, когда пользователь нажмет на нужное видео, на любом видео хостинге ты не найдешь сразу загрузку iframe или видео, они грузят превью (есть в апихе ютуба), с изображениями вообще легко, observer делаешь и грузишь если в поле видимости (так же и с видео можно), если изображения миниатюрные, к примеру 200х200, то зачем грузить самую большую картинку и стилями её уменьшать, кропни ее заранее и грузи, а как пользователь захочет увидеть на весь экран изображение (при клике открыть на весь экран) - тогда и грузи полномасштабное.
Или lazy load, но ее нужно все равно прогнать через сжатие без потери качества, вес как минимум х2 уйдет.
Плюс можно CDN использовать для медиа файлов, настроить кэширование.
loadend
, а вот с embedded-видео вероятно единственным вариантом является использование YouTube API).