D.iK.iJ

Это вполне себе стандартные функции браузера. Тот же Хром грузит изображения в пределах примерно 3 экранов в высоту.

В других - может вообще не работать. Так что я бы не беспокоился сильно.

Берете любой сайт вроде https://iconifier.net/ и генерируете. Все! )) Правда, я обычно оставляю только одну фавиконку и apple-touch-icon в 144x144.

Для картинок сам Гугел как-то рекомендовал https://squoosh.app/ но можно и тем же Фотошопом обойтись.

Метрику и рекламу - грузить асинхронно через lazyload. Картинкам проставить loading="lazy" decoding="async"

+ CSS для 1 экрана вывести в тело страницы. Лишние шрифты или удалить или перенести на сайт.

Но с 96% я бы не заморачивался сильно уж.

Ну как бы... да. Сайт скорее всего не адаптирован. Поэтому показывается вот так. Нужно доадаптировать и шрифт для мобильной версии подобать по размеру. Через те же @media запросы.

Сайт значит не адаптирован и у вас будет показываться практически полная версия.  И да, она будет довольно мелкая.

Адаптируйте сайт нормально под нормальный мета-тег, который рекомендуем Гугл:

<meta name="viewport" content="width=device-width, initial-scale=1">

Тогда берем блок с картинками, ставим ему overflow: hidden; и легкую тень внизу через <DIV>

А при загрузке уже ограничиваем высоту. Разворачиваем при клике на тот же DIV. Анимировать можно через  transition.

Получится, что картинки и не закрыты полностью (как с display: none;) и развернуть можно по клику. Меня это успокоило )))