Одним з найбільш ефективних способів підвищити продуктивність та швидкість завантаження сторінок сайту є асинхронне завантаження CSS файлів. При використанні цього способу не буде відбуватися зайва затримка для завантаження сторінки через рендеринг цих файлів.
Затримка пов’язана з тим, що за замовчуванням браузери завантажують підключені CSS-файли синхронно – зупиняючи весь рендеринг сторінки, поки кожен CSS-файл завантажується та аналізується. Звичайно, хоча б невелика частина CSS стилів сайту повинна бути завантажена до того, як сторінці буде дозволено розпочати рендеринг.
Для сайтів з невеликим обсягом контенту цей спосіб може і не знадобитися, але якщо розмір CSS великий (скажімо, більше 50-60 КБ), це може допомогти продуктивності і швидкості завантаження сайту. Розділіть стилі та завантажуйте менш критичний 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
наприклад.
От і все.
Сподіваємося, що сьогоднішня практична стаття була вам корисна. Дякуємо за увагу!
Якщо хочеш пізнати людину, не слухай, що про неї говорять інші, послухай, що вона говорить…
Вибачення — не означає, що ти не правий, а інша людина має рацію. Це всього…
Атмосферу паперової книги, запах свіжого чорнила і паперу, що трохи залежався, складно замінити гаджетами. Але…