Асинхронное отображение фотографий на странице
Нужно оптимизировать загрузку статических файлов на сервере. При первой загрузке сайта очень долго загружаются файлы по типу фото, скриптов и шрифтов из-за своего веса (загрузка без кэша в режиме No Throttling):
Я пытался сделать ленивую загрузку, но это не привело к желательному результату загрузки
<img ... loading="lazy" decoding="async">
Можно ли сделать загрузку асинхронными методами html/css (без js), что бы загрузка фото не блокировала основной поток загрузки других статических файлов (возможно как-то не так сказал, не бейте тапками), а была максимально близка к загрузке из кэша?
Или всё же лучше сделать это через js?
UPD:
Waterfall загрузки:
Ответы (1 шт):
Судя по размеру отдаваемых изображений, вариант с отложенной отдачей изображений через JS (к примеру по скроллу) вам тоже не поможет. Если изображение весит 1,1Мб оно не сменит свой объем как вы над ним не издевайтесь. Я б рекомендовал вам пересобрать ваши изображения оптимизировав их правильным компрессором без потери качества. Как пример Squoosh
Если изображений прям очень много, то лучше выполните пакетное преобразование.
Как вариант можете перестроить с тега <img> на использование тега <picture> с нужными настройками и альтернативными форматами.