xmoonlight

Я всегда делаю 100/100.
Разумеется, свой фреймворк.
Никаких проблем с тем, чтобы выполнить все требования, у меня не возникало.

Относительно поисковой выдачи: гугл ОЧЕНЬ ЦЕНИТ! труд вебмастеров, которые соответствуют его правилам оптимизации кода сайта и серверных настроек.

Проблема у Вас в том, что код должен быть "чистым" ДО разных минификаторов и оптимизаторов.
Тогда, они могут и не понадобиться от слов совсем+никогда... (я ими не пользуюсь вообще, т.к. не могу полностью контролировать логику исполнения минификации, да и зачем?...)

setInterval() внутри requestAnimationFrame()
используйте для этого (проверки с задержкой) переменную key

Создайте доп. папки в /images/ с сегментацией под каждое стоп-поинт разрешение (для разных устройств) и сконвертируйте через ImageMagick все оригинальные изображения.
Для загрузки нужного - указывайте нужное через тег srcset.
Полифил для старых браузеров - здесь.

Здесь написано как: https://habr.com/post/261625/

Советую подобные списки подгружать постепенно по мере необходимости отображения (скролла страницы и т.д.) через AJAX.
А для тех, которых нет в зоне видимости viewport - ставить любую анимацию/воспроизведение на паузу.

Режим "лупы" нужно использовать:
1. Что ближе к viewport-у, то "оживляем": по периметру реального viewport-а берём 1 viewport для предзагрузки и пререндеринга (квадрат 3x3, в центре - реальный viewport).
2. Что дальше этой зоны (3x3) - вообще удаляем из памяти DOM.

Чтобы было быстро, нужно правильно распределить загрузку стилей и не забыть закешировать на стороне клиента:
1. Стили основной сетки разметки (который inline-ом: critical) - <=2кб
2. Все остальные стили (те, что внизу перед body) - любой.

Рекомендации с Google: здесь

Разделите (если это ещё не сделано в самом шаблоне) и будет всё ОК.

1. Установите инструменты анализа скорости от Google и протестируйте: что именно замедляет загрузку. Действуйте указаниям и подсказкам системы.
2. Активируйте gzip: инструкция