>
Последовательность подключения JavaScript файлов

Уроки

Последовательность подключения JavaScript файлов

Страница состоит из десятков файлов. Они загружаются в той последовательности в которой перечислены в HTML коде страницы. JavaScript отвечает за интерактивную часть страницы, а CSS и картинки за визуальную.

Чем раньше пользователь увидит графические элементы и контент, чем раньше он приступит к его изучению, тем выше будет конверсия страницы. Чтобы JavaScript файлы не откладывали показ графики страницы, перенесите подключение JavaScript файлов в конце страницы, после CSS файлов и картинок.

Ниже пример разницы между подключением JavaScript в начале и в конце страницы.

Демонстрация
PHP код
HTML код
Открыть демонстрациюСкачать код примера
<?php
$mode = $_GET['mode'] ?? 'start';

$jsHtml = '';
for($i = 0; $i < 100;++$i) {
    $jsHtml .= '<script src="./10-kb-js.js?t='.microtime(true).'.'.$i.'"/></script>'."\n";
}

?><!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .product img {
                max-width:100%;
            }
            .product {
                position: relative;
            }
            .product .time {
                position: absolute;
                left: 5px;
                top: 5px;
                background-color: #fff;
                padding: 1px 4px;
            }
            .btn {
                color: #000;
                display: inline-block;
                margin-bottom: 5px;
                text-decoration: none;
                padding: 5px 10px;
                border: 1px solid #000;
                border-radius: 5px;
            }
            .btn:hover {
                background-color: #ddd;
            }
            .btn.active {
                background-color: #000;
                color: #fff;
            }

        </style>
        <script>
            // Функция, которая добавляет на изображение время окончания загрузки
            function endLoading(el) {
                var time = performance.now()/1000;
                el.parentNode.insertAdjacentHTML("beforeend", '<div class="time">'+time+' с</div>');
            }
        </script>
        <?php
        if($mode === 'start')
            echo $jsHtml;
        ?>
    </head>
    <body style="font-family: sans-serif;">
        Режим: <a class="btn <?=$mode === 'start' ? 'active' : ''?>" href="./js_not_at_end.php">Подключение JavaScript в head</a> <a class="btn <?=$mode === 'end' ? 'active' : ''?>" href="./js_not_at_end.php?mode=end">Подключение JavaScript в конце страницы</a>
        <br />
        <p>Обратите внимание на разницу во времени загрузки изображения.</p>
        <div class="product">
            <img src="./photo.jpg?t=<?=microtime(true)?>" onload="endLoading(this)" />
        </div>
    </body>
    <?php
    if($mode === 'end')
        echo $jsHtml;
    ?>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .product img {
                max-width:100%;
            }
            .product {
                position: relative;
            }
            .product .time {
                position: absolute;
                left: 5px;
                top: 5px;
                background-color: #fff;
                padding: 1px 4px;
            }
            .btn {
                color: #000;
                display: inline-block;
                margin-bottom: 5px;
                text-decoration: none;
                padding: 5px 10px;
                border: 1px solid #000;
                border-radius: 5px;
            }
            .btn:hover {
                background-color: #ddd;
            }
            .btn.active {
                background-color: #000;
                color: #fff;
            }

        </style>
        <script>
            // Функция, которая добавляет на изображение время окончания загрузки
            function endLoading(el) {
                var time = performance.now()/1000;
                el.parentNode.insertAdjacentHTML("beforeend", '<div class="time">'+time+' с</div>');
            }
        </script>
        <script src="./10-kb-js.js?t=1788257555.5988.0"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.1"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.2"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.3"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.4"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.5"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.6"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.7"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.8"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.9"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.10"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.11"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.12"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.13"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.14"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.15"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.16"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.17"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.18"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.19"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.20"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.21"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.22"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.23"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.24"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.25"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.26"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.27"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.28"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.29"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.30"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.31"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.32"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.33"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.34"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.35"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.36"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.37"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.38"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.39"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.40"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.41"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.42"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.43"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.44"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.45"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.46"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.47"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.48"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.49"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.50"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.51"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.52"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.53"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.54"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.55"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.56"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.57"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.58"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.59"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.60"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.61"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.62"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.63"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.64"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.65"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.66"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.67"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.68"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.69"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.70"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.71"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.72"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.73"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.74"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.75"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.76"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.77"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.78"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.79"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.80"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.81"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.82"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.83"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.84"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.85"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.86"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.87"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.88"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.89"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.90"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.91"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.92"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.93"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.94"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.95"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.96"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.97"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.98"/></script>
<script src="./10-kb-js.js?t=1788257555.5988.99"/></script>
    </head>
    <body style="font-family: sans-serif;">
        Режим: <a class="btn active" href="./js_not_at_end.php">Подключение JavaScript в head</a> <a class="btn " href="./js_not_at_end.php?mode=end">Подключение JavaScript в конце страницы</a>
        <br />
        <p>Обратите внимание на разницу во времени загрузки изображения.</p>
        <div class="product">
            <img src="./photo.jpg?t=1788257555.5988" onload="endLoading(this)" />
        </div>
    </body>
    </html>

Тарифные планы для работы с сервисом

Выбрать
Выбрать

Доп. страницы

Для активной подписки
тратьте в течение года
Любой сайт
*0.3 - 3₽ / 1 страница

Дополнительные страницы для тарифа «Подписка».

Пополнение через личный кабинет.

*Цена зависит от активной подписки. Чем дороже тариф — тем дешевле дополнительные страницы.

x

Мы используем cookie. Продолжая пользоваться сайтом, вы соглашаетесь на обработку персональных данных в соответствии с политикой конфиденциальности. Соглашаюсь