nepster-web

Преждевременная оптимизация это не очень хорошо.
Обычно за каждый байтом гоняются на высоких нагрузках.

Скорее всего в вашем случае нет жесткого хайлоада, просто включите gzip сжатие на сервере и сожмите сам css, если он не сжат и этого на долго хватит.

Если очень сильно хочется заморочиться:
- Перейдите на http2 протокол
- Разбейте этот файл на много мелких смысловых файлов, типа (grid.css, account.css, button.css ...)
- Подключайте вместо одного файла 10 мелких, только те, что требует страница (асинхронность http2 порешает)
- Включите кеш, gzip и сожмите файла.

https://jsfiddle.net/9gdL9oum/3/

В таком случае вы можете чуть-чуть накостылять. Например когда вам нужно открыть окно, вы с помощью js выносите код окна в конец body например и только потом открываете.

DPI - это понятие в типографии.
Если вы верстали все в px, то нужно заканчивать делать заказы и идти месяцок подучиться. Откройте для себя www.w3schools.com/cssref/css3_pr_mediaquery.asp и %, em, vw, vh и другие относительные величины.

Сетка бутстрапа жто самая кривая штука для адаптивности. Это тупо рав разработка, которая постоянно ломаетя на кастомных разрешениях.

Я ы вам рекомендовал уйти вообще от сеток бутстрапа в пользу флек бокс. В данном случае решить вопрос адаптивности самостоятельно.

https://philipwalton.github.io/solved-by-flexbox/d...

Скачать где-то в нескольких форматах и подключить:
www.w3schools.com/cssref/css3_pr_font-face_rule.asp

"Учу JavaScript". - ну по часиков 10 в день и уже через 5 лет вы будете средним js разработчиком. Тогда AngularJS и прочее будет не проблема. Особенно если хорошо пойдет Node.js, то и php может не пригодиться.

https://habrahabr.ru/post/259223/

Вообще на сегодняшний день самый крутой js framework - это vanilla.
vanilla-js.com

Если вы изучите его в идеале, то все будет шикарно.

У вас знания js примерно на уровне 0.
Для начала посмотрите пару курсов, почитайте документацию и вообще приступайте к изучению.
https://learn.javascript.ru

Сделайте ее отдельным div или hr. У вас жестко вбито top: 110px;

Вы удивитесь что можно делать обычным border ну и еще больше возможностей у css3:
habrahabr.ru/post/126207

Еще просьба что-то типа такого не предлагать.

.block {
            width: 500px;
            height: 500px;
            margin: auto;
            border: solid 1px red;
        }

        .separator {
            width: 10000px;
            border: solid 2px blue;
            margin: 100px 0;
            margin-left: -9500px;
        }

<div class="block">
        Текст
        <div class="separator"></div>
    </div>

решено с помощью padding