Як завантажувати 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 наприклад.

 

 

От і все.

Сподіваємося, що сьогоднішня практична стаття була вам корисна. Дякуємо за увагу!