Оптимизация загрузки навбара

Question

Есть сайт на котором есть 3 страницы: blog, video, gallery.

Каждая страница имеет один и тот же header navbar footer, соответственно, я вынес их в отдельный файл, а затем подключил на странице, но вот не задача, стили для этого навбара описаны в файле, который подключается уже на исходной странице, так, что когда происходит переход между страницами, видно как прогружаются стили CSS.

Пробовал исправить тем,что создавал отдельный файл со стилями конкретно для навбара, и подключал его в файле, куда вынесен этот навбар, да бы он уже подключался на страницу с прогруженными стилями, но разницы особо не видно, да и исходный код потом становиться не лаконичным из-за того, что <link href='...'> вставляется в body.

На некоторых сайтах переход вообще не виден, будто бы не новая страница открылась, а на той же контент другой подгрузился. Как быть?

.menu .container{
    margin-bottom: 20px;

    background: #fff;
    padding: 75px 0 60px;
    border-radius: 0 0 4px 4px;
}


.menu__title{
    margin-bottom: 45px;
}

.menu__title h1{
    /* margin-bottom: 12px; */

    color: #382f2f;
    font-family: "Corbel Bold",sans-serif;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    line-height: 1;
}

.menu__title h1 span{
    font-size: 60px;
    text-transform: uppercase;
}

/* line/nav */

.line{
    width: 100%;
    min-height: 1px;
    margin-bottom: 30px;

    background: #382f2f;
}

.menu__nav a.active{
    color: #fff;
    background: #382f2f;
    border-color: #382f2f;
}

.menu__nav a{
    margin: 0 5px;
    padding: 10px 15px;

    color: #382f2f;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: 6px;

    transition: all .2s;
}

.menu__nav a:last-child{
    margin: 0;
}

.menu__nav a:hover{
    color: #fff;
    background: #382f2f;
    border-color: #382f2f;
    text-decoration: none;
}

<section class="menu">
    <div class="container">
        <div class="row no-gutters justify-content-center">
            <div class="menu__title cl-xl-2">
                <h1 class="d-flex flex-column">my<span>Blog</span></h1>
            </div>
        </div>
        <div class="row no-gutters flex-column align-items-center">
            <div class="line col-xl-6 col-lg-6 col-md-8 col-10"></div>
            <nav class="menu__nav col-xl-6 d-flex justify-content-center">
                <a href="index.php" id="blog">Blog</a>
                <a href="video.php" id="video">Video</a>
                <a href="gallery.php" id="gallery">Gallery</a>
                <a href="https://vk.com/daladnzero" target="_blank">Vk</a>
                <a href="https://www.reddit.com/user/daladn0/posts/" target="_blank">Reddit</a>
            </nav>
        </div>
    </div>
</section>

БЛОГ НА HUSL

Оптимизация загрузки навбара

Ответы (0 шт):