Lessons

Grouping CSS 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 CSS files into one large one. There are plugins that automatically group files.

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

Why enabling grouping can break a site

The reason may be a change in the order in which CSS files are connected. For example, your my_style.css file was connected inside the body tag after some inline code. Then, after enabling grouping, the files were merged into 1 and began to be connected in the head section. It turns out that the styles in the inline code have become a higher priority, because they follow the styles from the my_style.css file.

Why are not all files grouped

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

Use the following code: language-html <link href="/css/my_style.css" rel="stylesheet`> "` instead of this:language-php // For Bitrix Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . “/css/my_style.css”); // For WordPress wp_enqueue_style( ‘my-script-handle’, get_template_directory_uri() . ‘/css/my_style.css’, array(‘tmp’), ‘1.0’, true ); “` Each system has several ways to connect CSS 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
<?php
if(isset($_GET['big'])) {
    // Выводим сгруппированный, большой файл
    header('Content-Type: text/css');
    for($i = 0;$i < 100;$i++)
    echo file_get_contents('10-kb-css.css');
    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="./css_count.php">100 файлов по 10 КБ</a> <a class="btn <?=$mode === 'big' ? 'active' : ''?>" href="./css_count.php?mode=big">1 файл размером 1 МБ</a>
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
<?php
if($mode === 'big') {?>
        <link rel="stylesheet" href="./css_count.php?big=1"/>
<?php
} else {
    for($i = 0; $i < 100;++$i) { ?>
        <link rel="stylesheet" href="./10-kb-css.css?t=<?=microtime(true).'.'.$i?>"/>
    <?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="./css_count.php">100 файлов по 10 КБ</a> <a class="btn " href="./css_count.php?mode=big">1 файл размером 1 МБ</a>
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
        <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9784.0"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9784.1"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9784.2"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9784.3"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9784.4"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9784.5"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.6"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.7"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.8"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.9"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.10"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.11"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.12"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.13"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.14"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.15"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.16"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.17"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.18"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.19"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.20"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.21"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.22"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.23"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.24"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.25"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.26"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.27"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.28"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.29"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.30"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.31"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.32"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.33"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.34"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.35"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.36"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.37"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.38"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.39"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.40"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.41"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.42"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.43"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.44"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.45"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.46"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.47"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.48"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.49"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.50"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.51"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.52"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.53"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.54"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.55"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.56"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.57"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.58"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.59"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.60"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.61"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.62"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.63"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.64"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.65"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.66"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.67"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.68"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.69"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.70"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.71"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.72"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.73"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.74"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.75"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.76"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.77"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.78"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.79"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.80"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.81"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.82"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.83"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.84"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.85"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.86"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.87"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.88"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.89"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.90"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.91"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.92"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.93"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.94"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.95"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.96"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.97"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.98"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1770054982.9785.99"/>
        </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
We use cookies. By continuing to use the site, you agree to the processing of personal data in accordance with privacy policy. I agree