Радость моя

PageSpeed - не панацея. Если следовать всему что он говорит - так это только статика нужна без картинок и стилей. У вас и так отличный результат.

62я строка это

overlay.addEventListener('click', function () {
        document.querySelector('.modal.active').classList.remove('active');
        this.classList.remove('active');
    });

смотрим что такое overlay? (9я строка)

overlay = document.querySelector('.js-overlay-modal'),

но класса js-overlay-modal я не вижу в html разметке.

поэтому и ошибка. попытка привязать слушатель событий к несуществующему объекту.

Скорее всего вы в разметке забыли добавить div с оверлеем

может это поможет

github.hubspot.com/pace/docs/welcome похожа на эту

У меня нет никакой рамки в вашем примере. браузер хром.

У меня такой же бутстрап-эффект со слайдером на странице. Только моргает лого сайта в футере. Привык уже к этому, так и не поправил.

Вообще они могут дергаться из за того что во время анимации у них промежуточное состояние со своими значениями, а по завершении - финальное, и значения параметров на конец анимации могут на 0.000х отличаться, и последним действием идет "подгон" промежуточного до финального значения. Должно помочь небольшая корректировка времени.

для игр советую для начала ознакомиться с phaser.io

Сразу после первого клика делайте ей статус disabled.

Все вроде двигается https://jsfiddle.net/1spcorfj/

вообщем сама purecss этого сделать не может... я так понял

у меня вообще ничего не скроллится :)

я сохраняю через фотошоп "сокранить для web". достаточно настроек. Либо если надо динамически, то достаточно imagemagick.

PS. На g page speed особо внимание не заостряйте. Он свои же ресурсы ругает что они у него не оптимизированны, так же он не может сделать анализ человечности (некоторые картинки нельзя сжимать чтобы не потерять нужное качество, а ему по*й)

Прям такого я не встречал. Но если вспомните страницу где видели подобное, то можно попробывать узнать самопис это или плагин.

А если я учусь и всё ручками пишу ?

Никто вас не ограничивает в обучении :) Ничто вам не мешает использовать профессиональный шаблонизатор (twig к примеру) и писать самому. Можете учиться прямо на нем, дописывать, дополнять, переписывать и так далее, авось когда и переплюнете его и сделаете что-то круче, но на данном этапе он вам сэкономит кучу времени. огромную кучу времени на обучение. Заодно посмотрите как он работает изнутри, и возможно какие-то идеи возьмете для своего детища.

Хорошего кодинга.