Оптимизация доставки CSS: понимание техники отложенной загрузки CSS

Чтобы улучшить производительность веб-сайта, разработчики часто оптимизируют доставку CSS. Одна из стратегий, упомянутая в документации Google Developers, предполагает встраивание критического CSS в раздел

Однако возникает вопрос: как мы можем загрузить большой CSS-файл после загрузки страницы?

Решение: отложить загрузку больших файлов CSS

Чтобы отложить загрузку большого файла CSS, мы можем использовать простой фрагмент кода jQuery:

    function loadStyleSheet(src) {
    if (document.createStyleSheet){
        document.createStyleSheet(src);
    }
    else {
        $("head").append($("<link rel='stylesheet' href='" src " />"));
    }
};

Вызывая эту функцию в функции $(document).ready() или window.onload, мы можем динамически загружать файл CSS после завершения загрузки страницы.

Проверка метода

Чтобы убедиться, что этот метод работает, попробуйте отключить JavaScript в браузере, а затем перезагрузить страницу. Если страница по-прежнему загружается правильно с примененными таблицами стилей, это свидетельствует об успешной отсрочке загрузки CSS.

Альтернативные методы

Существуют альтернативные методы отсрочки загрузки CSS, например как при использовании элемента