/ /
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;
                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>
        <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;
                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=1770054155.1678.0"/></script>
<script src="./10-kb-js.js?t=1770054155.1678.1"/></script>
<script src="./10-kb-js.js?t=1770054155.1678.2"/></script>
<script src="./10-kb-js.js?t=1770054155.1678.3"/></script>
<script src="./10-kb-js.js?t=1770054155.1678.4"/></script>
<script src="./10-kb-js.js?t=1770054155.1678.5"/></script>
<script src="./10-kb-js.js?t=1770054155.1678.6"/></script>
<script src="./10-kb-js.js?t=1770054155.1678.7"/></script>
<script src="./10-kb-js.js?t=1770054155.1678.8"/></script>
<script src="./10-kb-js.js?t=1770054155.1678.9"/></script>
<script src="./10-kb-js.js?t=1770054155.1678.10"/></script>
<script src="./10-kb-js.js?t=1770054155.1678.11"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.12"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.13"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.14"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.15"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.16"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.17"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.18"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.19"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.20"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.21"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.22"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.23"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.24"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.25"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.26"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.27"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.28"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.29"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.30"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.31"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.32"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.33"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.34"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.35"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.36"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.37"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.38"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.39"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.40"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.41"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.42"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.43"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.44"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.45"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.46"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.47"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.48"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.49"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.50"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.51"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.52"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.53"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.54"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.55"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.56"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.57"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.58"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.59"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.60"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.61"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.62"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.63"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.64"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.65"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.66"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.67"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.68"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.69"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.70"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.71"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.72"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.73"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.74"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.75"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.76"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.77"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.78"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.79"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.80"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.81"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.82"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.83"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.84"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.85"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.86"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.87"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.88"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.89"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.90"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.91"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.92"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.93"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.94"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.95"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.96"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.97"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.98"/></script>
<script src="./10-kb-js.js?t=1770054155.1679.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>
        <p>Обратите внимание на разницу во времени загрузки изображения.</p>
        <div class="product">
            <img src="./photo.jpg?t=1770054155.1679" onload="endLoading(this)" />
        </div>
    </body>
    </html>

PRO subscription for working with the service

Promo
To prepare a commercial offer.
190 ₽
50 pages for 10 days
  • 1 page gives 1 tool launch Checking the page.
  • Purchased for a specific site
  • Restrictions on other tools remain the same
PRO subscription
For regular work on a site or a group of sites.
1 580 ₽
3,500 pages per week. The subscription period is 1 month.
Wallet
A separate page balance that complements the PRO subscription balance.
190 ₽
Number of pages
  • An active PRO subscription is required to use the wallet balance
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