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