Асинхронная загрузка CSS: способы и примеры

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

Сущность асинхронной загрузки CSS

Асинхронная загрузка CSS - это метод, позволяющий загружать таблицы стилей в фоновом режиме без блокировки отображения страницы. В отличие от стандартного подключения CSS через тег <link>, асинхронный метод не останавливает рендеринг контента до полной загрузки и обработки CSS-файла браузером.

Асинхронная загрузка важна по нескольким причинам:

• Ускоряет отображение страницы для пользователя
• Оптимизирует восприятие контента
• Экономит трафик на мобильных устройствах
• Повышает позиции в поисковом ранжировании
• Улучшает показатели производительности сайта

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

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

Способы асинхронной загрузки CSS

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

1. Через тег <link> с атрибутом media
2. Через тег <link> с атрибутом rel
3. С помощью JavaScript
4. С помощью библиотеки jQuery
5. Используя готовые инструменты вроде loadCSS

Каждый из способов имеет свои особенности и нюансы использования, которые мы подробно разберем далее в статье на конкретных примерах. В целом все методы можно разделить на две группы:

• Без использования JavaScript
• С использованием JavaScript

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

Асинхронная загрузка через атрибут media

Один из самых простых способов асинхронной загрузки CSS - использование атрибута media в теге <link>. Атрибут media позволяет указать, для каких типов устройств применяется данная таблица стилей.

Например:

 <link href="print.css" rel="stylesheet" media="print"> 

Это подключит print.css только при печати документа. Для асинхронной загрузки CSS используется несуществующее медиа-значение, например media="preload". Такой файл будет загружен асинхронно, но не применен, так как браузер не распознает такой тип устройства.

Чтобы применить загруженные стили, необходимо с помощью JS изменить атрибут media на корректное значение, после загрузки CSS. Например, на media="all" или media="screen".

Главный недостаток этого метода в том, что требуется дополнительный JS код для смены атрибута media. К тому же поддержка обработчика onload на теге <link> не идеальна в разных браузерах.

Асинхронная загрузка через атрибут rel

Более современный способ асинхронной загрузки CSS - использование атрибута rel со значением preload:

 <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'"> 

Атрибут rel="preload" сообщает браузеру, что данный ресурс нужно загрузить как можно раньше, но не применять сразу. После загрузки стилей, обработчик onload изменяет rel на stylesheet для применения CSS.

Поддержка этого метода пока не идеальная. Например, Firefox отключил поддержку rel=preload из-за проблем с реализацией. Но в целом браузеры движутся в сторону полной поддержки этого способа асинхронной загрузки CSS.

Для cross-browser совместимости можно использовать полифилы, например библиотеку loadCSS, которая обеспечит работу rel=preload во всех браузерах.

Асинхронная загрузка CSS через JS

Еще один распространенный способ - асинхронная загрузка CSS с помощью JavaScript. Принцип работы:

1. С помощью JS динамически создается тег <link> для загрузки CSS
2. Созданный тег добавляется в раздел <head>
3. Браузер асинхронно загружает и применяет CSS

Рассмотрим пример реализации асинхронной загрузки CSS через JS:

 function loadCSS(href, callback) { // Создаем link let link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; // Добавляем в head document.head.appendChild(link); // Обработчик загрузки link.onload = callback; } // Используем loadCSS('style.css', function() { // Callback после загрузки }); 

Этот код нужно разместить перед закрывающим тегом </body>, чтобы скрипт выполнился после загрузки DOM.

Плюсы JS метода в гибкости и возможности написать сложную асинхронную логику загрузки CSS. Минусы - необходимость поддержки JS и отсутствие кеширования в некоторых браузерах.

Асинхронная загрузка через jQuery

Для асинхронной загрузки CSS часто используется библиотека jQuery и ее метод $.getCSS():

 $.getCSS('style.css', function() { // Код после загрузки CSS }); 

Этот метод автоматически создаст тег <link>, загрузит CSS и выполнит коллбек после завершения.

jQuery упрощает реализацию асинхронной загрузки CSS, но требует подключения библиотеки на страницу. Также существуют отдельные jQuery плагины для загрузки CSS, например jquery-css-loader.

Инструменты для асинхронной загрузки CSS

Помимо "ручной" реализации, существуют готовые инструменты для асинхронной загрузки CSS:

• loadCSS
• css-chunks
• Others

Эти инструменты автоматизируют асинхронную загрузку CSS с помощью JavaScript. Например, популярная библиотека loadCSS позволяет легко реализовать асинхронную загрузку простой инициализацией скрипта:

 loadCSS('style.css'); 

Готовые решения экономят время разработки и предоставляют дополнительные возможности оптимизации загрузки CSS. Но зависят от поддержки JavaScript в браузере пользователя.

Лучшие практики асинхронной загрузки CSS

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

1. Определить критический путь рендеринга и инлайнить соответствующие стили
2. Разделить CSS на несколько небольших файлов
3. Минимизировать и конкатенировать CSS
4. Загружать файлы в оптимальном порядке
5. Использовать медиа-запросы и preload
6. Избегать FOUC
7. Тестировать на реальных устройствах

К примеру, критически важные стили, необходимые для первоначального отображения контента, лучше инлайнить прямо в HTML-коде страницы. А неосновные таблицы стилей загружать асинхронно.

Тщательно продуманный подход к асинхронной загрузке CSS позволяет минимизировать задержки отображения страницы и сделать сайт максимально быстрым для пользователей.

DOMContentLoaded vs load

При асинхронной загрузке CSS возникает вопрос - в какой момент подключать стили на страницу? Существует два основных события:

• DOMContentLoaded - DOM загружен, можно манипулировать элементами
• load - страница полностью загружена вместе с изображениями, скриптами и т.д.

Событие DOMContentLoaded срабатывает быстрее, как только HTML загружен и построено DOM-дерево. Но в этот момент еще могут загружаться внешние ресурсы скриптов и картинок.

Событие load ждет полной загрузки всего - изображений, шрифтов, JS файлов. Оно срабатывает позже DOMContentLoaded, когда весь контент готов.

Плюсы и минусы DOMContentLoaded

Использование DOMContentLoaded для подключения асинхронного CSS дает следующие преимущества:

• Стили применяются быстрее, не дожидаясь загрузки скриптов и картинок
• Контент виден раньше для пользователя

Но есть и минусы:

• Возможно мигание контента при последующей загрузке изображений
• Скрипты могут не заработать, если зависят от CSS

Плюсы и минусы load

Подключение асинхронного CSS на событии load дает следующие преимущества:

• Гарантия, что весь контент загружен
• Избегание миганий контента

К минусам можно отнести:

• Более долгое отображение контента
• Задержка в начале работы скриптов

Выбор оптимального варианта

Идеального решения нет - нужен баланс между скоростью и стабильностью отображения. На простых страницах можно использовать DOMContentLoaded. На сложных с большим количеством скриптов и медиа лучше подходит load.

Также вариант - использовать комбинацию событий. Сначала на DOMContentLoaded применить базовые стили. А на load догрузить остальные таблицы для финального отображения страницы.

Асинхронный CSS и HTTP/2

Появление протокола HTTP/2 с поддержкой мультиплексирования снижает актуальность асинхронной загрузки CSS. В HTTP/2 множество ресурсов могут загружаться параллельно.

Однако асинхронный CSS все еще имеет ряд преимуществ:

• Позволяет управлять очередностью загрузки ресурсов
• Дает приоритет критическим стилям
• Оптимизирует работу на слабых устройствах

Поэтому асинхронный CSS остается актуальным даже при использовании HTTP/2. Главное - правильно сочетать эти технологии.