Как загружать CSS файлы асинхронно

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

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

Для сайтов с небольшим объемом контента этот способ может и не пригодиться, но если размер CSS велик (скажем, больше 50–60 КБ), это может помочь производительности скорости загрузки сайта. Разделите стили и загружайте менее критичный CSS в фоновом режиме – т.е., асинхронно. В сегодняшней практической статье мы рассмотрим оптимальный способ для асинхронной загрузки CSS стилей.

 

 

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

Существует несколько способов асинхронной загрузки CSS, но ни один из них не лежит на поверхности. В отличие от файлов JavaScript, здесь отсутствует атрибут async или defer, который можно просто применить к элементу ссылки (тег <link>). Однако в последнее время браузеры стандартизировали свое поведение при загрузке CSS, поэтому специальные скрипты (например, такой как loadCSS) вероятно, больше не нужны.

 

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

<link rel="stylesheet" href="{путь к css файлу}" media="print" onload="this.media='all'">

 

 

Что делает этот код

Эта HTML строка лаконична, но не очень понятна, поэтому давайте разберем, что здесь происходит.

Для начала атрибут media для ссылки установлен на печать (print). Печать – это тип носителя, который гласит: «применять правила этой таблицы стилей для печатных носителей» или, другими словами, применять их, когда пользователь пытается распечатать страницу. Следует признать, что мы хотим, чтобы наша таблица стилей применялась ко всем носителям (особенно к ПК и мобильным), а не только к печати, но, объявив тип носителя, который не соответствует текущей среде, мы можем получить интересный и полезный эффект: браузер загрузит таблицу стилей без задержки рендеринга страницы, т.е., асинхронно! Это полезно, но это не все, чего мы хотим. Мы также хотим, чтобы CSS действительно применялся к экранным устройствам (screen) после его загрузки. Для этого мы можем использовать атрибут onload, чтобы установить значение all для всех медиа, когда браузер завершит загрузку.

 

 

Можно ли этого добиться с использованием rel=preload?

Да, аналогично! В последнее время веб-мастера довольно активно использовали для ссылки rel=preload (вместо rel=stylesheet), чтобы получить аналогичное поведение, рассмотренное выше. Этот подход все еще хорошо работает, однако есть несколько недостатков, которые необходимо учитывать при использовании предварительной загрузки. Во-первых, поддержка предварительной загрузки в браузерах все еще невелика, поэтому необходимо использовать polyfill (например, такое, как у loadCSS), если вы хотите полагаться на этот способ в разных браузерах. Что еще более важно, предварительная загрузка извлекает файлы очень рано (с наивысшим приоритетом), потенциально лишая приоритета другие важные загрузки. Что может придавать более высокий приоритет, чем на самом деле нужен для некритического CSS.

 

К счастью, если вам нужен высокоприоритетный выбор, который обеспечивает rel=preload (в браузерах, которые его поддерживают), вы можете объединить его с приведенным выше шаблоном, например так:

<link rel="preload" href="{путь к css файлу}" as="style">
<link rel="stylesheet" href="{путь к css файлу}" media="print" onload="this.media='all'">

 

 

Учитывая простую и декларативную природу приведенного выше кода, этот подход с использованием media="print" имеет право на жизнь.

 

 

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

Да, можно использовать недействительный атрибут для media, например, такой как «only х», что позволит достичь того же эффекта, что и «print». Когда браузеры сталкиваются с типами media, которые не могут определить, они пока относятся к ним одинаково – все равно загружают эти файлы. Тем не менее, некоторые браузеры начинают различать несоответствующие типы мультимедиа и недопустимые (или которые вообще не распознаются браузером), и, возможно, не будут загружать эти файлы. В целях безопасности мы рекомендуем использовать допустимый, но не соответствующий текущему типу, такой как print например.

 

 

Вот и все.

Надеемся, что сегодняшняя практическая статья была вам полезна. Спасибо за внимание!