1. Картинки можно загружать не сразу, а после выполнения JS, для этого указываем путь к файлу в data-src.
<img src="//:0" data-src="{path}">В этом случае загрузка картинки не мешает загрузке страницы, стилей и скриптов.
2. Используйте //:0 для пустых src (но он не считается валидным значением для W3 Validator). Если указать пустое значение или #, это может вызывать повторную загрузку страницы (она не будет видна в браузере, но фактически браузер направит запрос к серверу).
либо - src="data:," (считается валидным для W3 Validator).
Не используйте javascript:void(0) - иначе будут ошибки в Console и картинка будет показываться как битая на странице.
https://stackoverflow.com/questions/19126185/setting-an-image-src-to-empty/19126281
https://stackoverflow.com/questions/5775469/whats-the-valid-way-to-include-an-image-with-no-src
У картинок желательно ставить размер (этого требует PageSpeed). Можно это делать следующим образом:
Ставим у картинки реальные размеры через width, height атрибуты.
И создаем такое правило CSS:
img {
max-width: 100%;
height: auto;
}Если вы хотите улучшить показатели Pagespeed, то имеет смысл задействовать формат webp.
Используйте сервис для ручной конвертации картинок в webp https://products.aspose.app/imaging/conversion/jpeg-to-webp
Затем на странице вы указывается следующую разметку для вывода картинки:
<picture>
<source srcset="/uploads/rs/landImages/5/mainphoto.webp" type="image/webp" loading="lazy" alt="">
<img src="/uploads/rs/landimages/5/mainphoto.png" alt="" width="900" height="625">
</picture>Для современных браузеров будет использован вариант с webp, а для остальных браузеров будет подгружаться картинка в png или jpg.