Время загрузки страницы для нескольких изображений

Question

Я пытаюсь найти лучший способ загрузки многих (скажем, 100) изображений на веб-страницу. Некоторые изображения - большие фоновые изображения для эффекта параллакса, другие - изображения на кубах (поэтому все стороны кубов сделаны из элементов div); То, что я хочу знать, это то, что является лучшим подходом, так что пока у меня есть несколько идей:

метод A 1 лениво загружать все изображения и фоновые изображения, когда они появляются. 2 используйте спрайт-лист для небольших изображений. 3 сожмите все изображения для наилучшего сжатия, используйте Gzip.

метод B (экспериментальный) 1 создайте отдельную таблицу стилей с переменными для каждого изображения, преобразованного в base64 (например: root {- boxImage1: url ("data: image / jpeg; base64, / 9j / 4AAQSkZJRgABA .....) 2 создайте сервисный работник для css, поскольку он станет довольно большим 3 используйте сжатие для минимизации файла css. 4 используйте gzip для передачи с сервера .

Метод c сохраняет изображения как двоичные в базе данных (я беспокоюсь, что это на самом деле замедлит их, так как это будет поиск в базе данных, а не в файловой системе).

- это любые из этих методов стоит сделать или есть способ проще использовать?

Answer 1

В настоящее время я работаю над PWA с большим количеством загруженных пользователями изображений, и я могу с уверенностью сказать, что использование метода A удивило время загрузки нашего приложения.

Сжатие изображений при загрузке и преобразовании их в строки base64 резко уменьшается их размер, и в сочетании с ленивой загрузкой 5 изображений за раз приложение работает намного быстрее.

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