Как определить, когда нужны спрайты а когда LazyLoading?

Question

[Nayro TV]

Как определить, когда нужны спрайты а когда LazyLoading?
Ну допустим ты делаешь сайт Большой и ты хочешь оптимизировать его, и как определить что лучше тебе подойдёт ll или
css спрайты?

Answer 1

[Вадим]

Оно другому не мешает. Спрайт тоже можно грузить лениво.

Спрайты, как правило, используются либо для загрузки большого количества небольших изображений - иконок. Это было более актуально до http2. Сейчас нужно проверять, даёт ли это действительно прирост. Либо когда нужно сделать анимацию. Суть оптимизации - сокращение количества сетевых запросов.

Лэйзи лоад - способ оптимизации, когда пользователю грузится только то, что у него во вьюпорте и где-то недалеко за ним, чтобы не грузить лишнего. Суть оптимизации - экономия трафика (хотя сетевые запросы конечно в конечном итоге тоже сокращает).

Таким образом - если контентные тяжёлые изображения - лэйзи лоад.
Если много небольших или кадры анимации - спрайт.

Таким образом. если изображений из спрайта нет во вьюпорте и рядом с ним, то и спрайт можно грузить лениво.

Answer 2

[Stalker_RED]

Когда страница без скролла, то лейзилоад не особо поможет.

Для иконок:
Если можете в иконочные шрифты - используйте.
Не получается иконочные - отдельные векторные иконки.
Если векторные никак- спрайты.
Если мы не о иконках, а о достаточно больших фоточках на длинной странице - лейзи.

Comments

[Nayro TV]

ясно, спасибо, а вот допустим у меня достаточно большие фоточки на длинной странице, НО они как бы загружаются через css т е бэграундом, то это не считается спрайтом конечно, значит lazyzoad нужен, а как вот бэграунд загрузить lazyzoad(ом)?
Это возможно?

[WapSter]

Сергей Молвов, я же уже тебе давал пример как это делается

[Stalker_RED]

Сергей Молвов, чисто css-ом наверное невозможно, но если скриптом менять класс - то можно.
https://stackoverflow.com/a/67075173

[Nayro TV]

WapSter, вот, я всё сразу понял
https://stackoverflow.com/questions/12014606/how-t...
такую ссылку бы скинул и я бы понял сразу бы))

Answer 3

[Sanes]

Для иллюстраций/фоток LazyLoading. Для элементов дизайна/иконок спрайты.