/ /
The sequence of connecting JavaScript files

Lessons

The sequence of connecting JavaScript files

The page consists of dozens of files. They are loaded in the order in which they are listed in the HTML code of the page. JavaScript is responsible for the interactive part of the page, and CSS and images for the visual.

The sooner the user sees the graphic elements and content, the sooner he starts studying it, the higher the page conversion will be. To prevent JavaScript files from delaying the display of page graphics, transfer the connection of JavaScript files at the end of the page, after CSS files and images.

Below is an example of the difference between enabling JavaScript at the beginning and at the end of a page.

Demonstration
PHP code
HTML code
Open a demoDownload the example code
<?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=1783155939.3575.0"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.1"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.2"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.3"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.4"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.5"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.6"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.7"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.8"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.9"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.10"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.11"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.12"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.13"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.14"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.15"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.16"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.17"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.18"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.19"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.20"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.21"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.22"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.23"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.24"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.25"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.26"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.27"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.28"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.29"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.30"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.31"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.32"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.33"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.34"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.35"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.36"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.37"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.38"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.39"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.40"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.41"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.42"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.43"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.44"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.45"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.46"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.47"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.48"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.49"/></script>
<script src="./10-kb-js.js?t=1783155939.3575.50"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.51"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.52"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.53"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.54"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.55"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.56"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.57"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.58"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.59"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.60"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.61"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.62"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.63"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.64"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.65"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.66"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.67"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.68"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.69"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.70"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.71"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.72"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.73"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.74"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.75"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.76"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.77"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.78"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.79"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.80"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.81"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.82"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.83"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.84"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.85"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.86"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.87"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.88"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.89"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.90"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.91"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.92"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.93"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.94"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.95"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.96"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.97"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.98"/></script>
<script src="./10-kb-js.js?t=1783155939.3576.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=1783155939.3576" onload="endLoading(this)" />
        </div>
    </body>
    </html>

Tariff plans for working with the service

Learn more about pricing plans
x

We use cookies. By continuing to use the site, you agree to the processing of personal data in accordance with privacy policy. I agree