Grouping JavaScript files

To download a file, the browser spends time on service operations: establishing a connection, sending a request, receiving a response, closing a connection. This time is constant and does not depend on the speed of the Internet connection. For example, with a very fast Internet connection, it will take 1 millisecond to download the contents of the file, and up to 100 for service operations. The execution time of service operations depends on the network latency — ping, and not on the speed of the Internet connection.

To speed up the site, programmers group many small JavaScript files into one large one. There are plug-ins that automatically connect files.

For one page, it is acceptable to use no more than 3 JavaScript files.

Content

Why enabling grouping can break a site

Why are not all files grouped

Why enabling grouping can break a site

The reason may be a change in the order in which JavaScript files are connected. For example, your script depends on jQuery. But after enabling grouping, the order of the files has changed, and in the final merged file, your script goes first, and only then the jQuery library code. This situation can be easily identified, as errors appear in the browser console.

Why are not all files grouped

The most common reason is to connect JavaScript files via HTML code, instead of using the API method of your site management system.

Use the following code: language-html <script src="/js/my_script.js"></script> instead of this: “language-php // For Bitrix Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . “/js/my_script.js”); // For WordPress wp_enqueue_script( ‘my-script-handle’, get_template_directory_uri() . ‘/js/my_script.js’, array(‘tmp’), ‘1.0’, true ); “` Each system has several ways to connect JavaScript code. You need to use the one that suits the situation.

Below is an example of how grouping speeds up page loading:

Demonstration

PHP code

HTML code

Open a demo Download the example code

<?php
if(isset($_GET['big'])) {
    // Выводим сгруппированный, большой файл
    header('Content-Type: text/js');
    for($i = 0;$i < 100;$i++)
    echo file_get_contents('10-kb-js.js');
    die;
}
$mode = $_GET['mode'] ?? '';
?><!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .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>
            window.addEventListener("load", (event) => {
                document.querySelector('#page-load').innerHTML = 'Страница загрузилась (событие window.onload) за <b>'+(performance.now()/1000)+'с</b>.';
            });
        </script>
    </head>
    <body style="font-family: sans-serif;">
        Режим: <a class="btn <?=$mode === '' ? 'active' : ''?>" href="./js_count.php">100 файлов по 10 КБ</a> <a class="btn <?=$mode === 'big' ? 'active' : ''?>" href="./js_count.php?mode=big">1 файл размером 1 МБ</a>
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
<?php
if($mode === 'big') {?>
        <script src="./js_count.php?big=1"></script>
<?php
} else {
    for($i = 0; $i < 100;++$i) { ?>
        <script src="./10-kb-js.js?t=<?=microtime(true).'.'.$i?>"/></script>
    <?php }
}?>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .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>
            window.addEventListener("load", (event) => {
                document.querySelector('#page-load').innerHTML = 'Страница загрузилась (событие window.onload) за <b>'+(performance.now()/1000)+'с</b>.';
            });
        </script>
    </head>
    <body style="font-family: sans-serif;">
        Режим: <a class="btn active" href="./js_count.php">100 файлов по 10 КБ</a> <a class="btn " href="./js_count.php?mode=big">1 файл размером 1 МБ</a>
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
        <script src="./10-kb-js.js?t=1770055030.8092.0"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.1"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.2"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.3"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.4"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.5"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.6"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.7"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.8"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.9"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.10"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.11"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.12"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.13"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.14"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.15"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.16"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.17"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.18"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.19"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.20"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.21"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.22"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.23"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.24"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.25"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.26"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.27"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.28"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.29"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.30"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.31"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.32"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.33"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.34"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.35"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.36"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.37"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.38"/></script>
            <script src="./10-kb-js.js?t=1770055030.8092.39"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.40"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.41"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.42"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.43"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.44"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.45"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.46"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.47"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.48"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.49"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.50"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.51"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.52"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.53"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.54"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.55"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.56"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.57"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.58"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.59"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.60"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.61"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.62"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.63"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.64"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.65"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.66"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.67"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.68"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.69"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.70"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.71"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.72"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.73"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.74"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.75"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.76"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.77"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.78"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.79"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.80"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.81"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.82"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.83"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.84"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.85"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.86"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.87"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.88"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.89"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.90"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.91"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.92"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.93"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.94"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.95"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.96"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.97"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.98"/></script>
            <script src="./10-kb-js.js?t=1770055030.8093.99"/></script>
        </body>
</html>

Lessons

Grouping JavaScript files

Why enabling grouping can break a site

Why are not all files grouped

PRO subscription for working with the service