Подгрузка чанков по мере прокрутки страницы

Добрый вечер. Работаю в ModX 2.8.7
В ходе оптимизации сайта для Google столкнулся с проблемой — слишком длинная главная страница.

Сама страница состоит из большого и длинного шаблона с разными html блоками. В итоге Google ругается, что слишком длинная страница, долгое время загрузки и так далее…

Если бы на стр были всплывающие окна, блоки типа блога, товаров, новостей — видел варианты их подгрузки по мере прокрутки страницы.
НО
КАК организовать подгрузку ЧАНКОВ по мере прокрутки страницы?
Т.е. пример: Google загружает слайдер, меню и еще какой-то блок. Прокручиваем дальше… На Ajax происходит подгрузка блока О компании, проматываем, подгружается Преимущества, продолжаем спускаться… подгружаются… Загружается блок Footer. Страница кончилась…

const resultBlock = document.querySelector('#wrapper'); 
const observer = new IntersectionObserver(scrollHandler, {
    threshold: 0.5
});
observer.observe(resultBlock.lastElementChild);
function scrollHandler(entries, observer) {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
             // тут отправка запроса на сервер за следующим блоком.
            observer.unobserve(entry.target); // после получения следующего блока нужно привязать к нему наблюдателя           
         }
    })
}