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

При оптимизации доставки CSS отсрочка загрузки больших файлов CSS после загрузки страницы может значительно улучшить производительность страницы. Хотя пример, предоставленный разработчиками Google, демонстрирует встраивание небольших файлов CSS для критического стиля, он оставляет открытым вопрос о том, как отложить файлы CSS большего размера.

Доступ к исходному файлу CSS после загрузки

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

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

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

Проверка результатов отсрочки

Для проверки Если файл CSS действительно загружается после загрузки страницы, вы можете отключить JavaScript в своем браузере. Если файл CSS не отображается на странице, это подтверждает, что он загружается динамически. Кроме того, рекомендуется протестировать улучшение производительности с помощью такого инструмента, как Google PageSpeed ​​Insights, чтобы количественно оценить влияние на время загрузки страницы.

Применяя этот метод, мы можем оптимизировать доставку CSS и повысить общую производительность нашего Интернета. страницы. Отсрочка загрузки больших файлов CSS позволяет быстрее отображать страницу и обеспечивает более плавное взаимодействие с пользователем.