Денис Инешин

Пусть будет не больше 100кб. без картинок.

Ариал есть везде. Вот почитайте еще: webstudio2u.net/ru/site-develop/312-win-mac-fonts.html

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

Можно вообще не париться с z-index если сделать правильно. Например поместить элементы в конце html-кода. Вот так:

... контент сайта

    <div id="invise-block"></div>
    <div class="popup-block">
        Popup Content
    </div>
</body>

div {
    width: 100px;
    margin: 0 auto;
}

Поймите следующее, если вы просто подмените картинку, то эффект будет как у вас, увеличение в 2 раза.
Ваша же задача сделать так, чтобы ваша х2 картинка, занимала визуально ровно ту же область что и раньше.
Этого эффекта очень легко добиться для тегов IMG просто прописав ширину, например width: 100px; и всё, ретина картинка встанет как надо.

Для фоновых же изображений, все не так просто, нужно использовать background-size
В вашем случае нужно написать что-то вроде:

&--yt {
      background: url('../img/yt-x2.png');
      background-size: 50% 50%;
    }

Это называется parallax-scroll. Делается очень просто.
Контент справа прокручивается на нативной прокрутке, а контент в левом столбике находится на отдельном слое, который крутится на JavaScript. Например так: jsfiddle.net/IonDen/m1s8889u

var $win = $(window),
    $content = $(".js-content"),
    $parallax = $content.find(".js-parallax"),
    baseHeight = $content.outerHeight(),
    maxScroll = baseHeight - $win.innerHeight(),
    parallaxHeight = $parallax.outerHeight(),
    parallaxDiff = parallaxHeight - baseHeight,
    scrollTop, scrollPercent, parallaxTop;

$win.on("scroll", function () {
    scrollTop = $win.scrollTop();
    scrollPercent = scrollTop / maxScroll * 100;
    
    parallaxTop = parallaxDiff / 100 * scrollPercent;
    $parallax[0].style.top = -parallaxTop + "px";
});