Группировка CSS файлов

Чтобы загрузить файл, браузер тратит время на служебные операции: установка соединения, отправка запроса, получение ответа, закрытие соединения. Это время постоянно и не зависит от скорости интернет соединения. Например, при очень быстром интернет соединении на загрузку содержимого файла уйдёт 1 миллисекунда, а на служебные операции до 100. Время выполнения служебных операций зависит от сетевой задержки — пинга, а не от скорости интернет соединения.

Чтобы ускорить сайт, программисты группируют множество маленьких CSS файлов в один большой. Существуют плагины, автоматически группирующие файлы.

Для одной страницы, приемлемо использование не более 3 CSS файлов.

Содержание

Почему включение группировки может сломать сайт

Почему не все файлы группируются

Почему включение группировки может сломать сайт

Причиной может послужить изменение порядка подключения CSS файлов. Например, ваш файл my_style.css подключался внутри тега body после какого-то inline кода. Затем после включения группировки, файлы объединились в 1 и стали подключаться в секции head. Получается, что стили в inline коде стали более приоритетными, потому что следуют после стилей из файла my_style.css.

Почему не все файлы группируются

Самая частая причина — это подключение CSS файлов через HTML код, вместо использования API метода вашей системы управления сайтом.

Используют такой код:

<link href="/css/my_style.css" rel="stylesheet">

вместо такого:

// Для Битрикс
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/css/my_style.css");
// Для WordPress
wp_enqueue_style( 'my-script-handle', get_template_directory_uri() . '/css/my_style.css', array('tmp'), '1.0', true );

В каждой системе есть несколько способов подключать CSS код. Нужно использовать тот, что соответствует ситуации.

Ниже пример того, как группировка ускоряет загрузку страницы:

Демонстрация

PHP код

HTML код

Открыть демонстрацию Скачать код примера

<?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;
                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>
            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>
        <br />
        <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;
                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>
            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>
        <br />
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
        <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4818.0"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4818.1"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4818.2"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4818.3"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4818.4"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4818.5"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4818.6"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4818.7"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4818.8"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4818.9"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4818.10"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4818.11"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4818.12"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4818.13"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4818.14"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4818.15"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4818.16"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.17"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.18"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.19"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.20"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.21"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.22"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.23"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.24"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.25"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.26"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.27"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.28"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.29"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.30"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.31"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.32"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.33"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.34"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.35"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.36"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.37"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.38"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.39"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.40"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.41"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.42"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.43"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.44"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.45"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.46"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.47"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.48"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.49"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.50"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.51"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.52"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.53"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.54"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.55"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.56"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.57"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.58"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.59"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.60"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.61"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.62"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.63"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.64"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.65"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.66"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.67"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.68"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.69"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.70"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.71"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.72"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.73"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.74"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.75"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.76"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.77"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.78"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.79"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.80"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.81"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.82"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.83"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.84"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.85"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.86"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.87"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.88"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.89"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.90"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.91"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.92"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.93"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.94"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.95"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.96"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.97"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.98"/>
            <link rel="stylesheet" href="./10-kb-css.css?t=1773036787.4819.99"/>
        </body>
</html>

ПРО подписка для работы с сервисом

Подробнее о тарифах