Самый простой способ реализации асинхронной загрузки CSS

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

Код

Зная, как браузер обрабатывает разные атрибуты тега link, мы можем добиться асинхронной загрузки CSS при помощи короткой строки HTML-кода:

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

Разбираемся…

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

При этом таблица стилей должна применяться ко всем элементам страницы, а не только к печатным. Но установив значение media, которое не соответствует текущей среде, можно легко заставить браузер загрузить CSS без задержки рендеринга страницы – асинхронно!

Также надо, чтобы CSS-код применялся к версии файла, отображаемой на экране. Для этого можно использовать атрибут onload, чтобы установить атрибут media в значение all после окончания загрузки.

Разве rel=preload не может сделать то же самое?

Последние пару лет мы использовали link[rel=preload] вместо rel=stylesheet, чтобы реализовать переключение атрибута rel после загрузки вместо атрибута media.

Но этот способ имеет в себя пару недостатков, которые надо учитывать при использовании preload. Не все браузеры поддерживают <link rel=»preload»>. Так что для извлечения и применения CSS в различных браузерах необходимо использовать полифилл. Такой, как используется в loadCSS.

Кроме этого preload извлекает файлы слишком рано, откладывая загрузку иных важных ресурсов. Извлечению файлов отдается слишком высокий приоритет, который не слишком важен для критического CSS.

Но если надо высокоприоритетное извлечение, которое обеспечивает rel=preload, его можно легко объединить с кодом, который мы рассмотрели ранее:

<link rel="preload" href="/path/to/my.css" as="style"><link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

Этот код прост и понятен, так что мы предпочитаем использовать его вместо полифила.

Почему не следует использовать атрибут media?

Когда браузеры сталкиваются с неподходящими типами медиа, они обрабатывают их одинаково – загружают файл. Но некоторые браузеры начинают учитывать различие между несоответствующими и недопустимыми типами медиа. Так что они не запрашивают файлы, связанные с использованием недопустимых типов медиа. Но в целях безопасности мы рекомендуем использовать несоответствующее типу содержимого значение атрибута media. К примеру, print.

loadCSS может не понадобиться…

Мы продолжаем поддерживать loadCSS и считаем его полезным в некоторых ситуациях. Особенно для программного извлечения CSS-файла из Java Script. Например: loadCSS(«/path/to/my.css»). Если вы используете loadCSS или шаблон его полифилла rel=preload, не необходимо ничего менять. Он использует ту же технику, которая была описана в данной статье.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *