Як підключити асинхронно CSS і Javascript.

5/52 ratings

Вітаю шановний відвідувач. Сьогодні я хотів би поговорити про такий важливий момент як оптимізація, прискорення сайту. Швидкість завантаження сайту дуже сильно впливає на його просування, якщо користувач приходить на ваш сайт і не дочекавшись завантаження сторінки вийшов, це негативно впливає на поведінковий фактор на який пошуковики дуже сильно звертають свою увагу, відповідно кожен веб майстер при разробці сайту просто зобов'язаний стежити за тим наскільки його дітище швидко і стабільно працює.

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

Ми ж сьогодні все це розглядати не будемо, а поговоримо про те як зробити завантаження стилів і скриптів Javascript асинхронними, тобто при відвідуванні сайту користувач не чекає послідовного завантаження сторінки де спочатку вантажаться всі стилі і скрипти і тільки після вантажиться ваш код HTML, даний метод я часто застосовую до якихось окремих css і js які не важливі на етапі завантаження сторінки сайту.

І так почнемо і розглянемо приклади як для css так і для скриптів Javascript:

Асинхронне завантаження CSS на сайті:

Асинхронне завантаження файлів стилів css дає можливість вашому сайту швидше завантажувати сторінки з вашим вмістом, і тільки після того як вся сторінка завантажена, буде довантажуватись сам файл CSS зі стилями. Особливо корисно завантажувати стилі css асинхронно на мобільних пристроях, адже не у всіх є супер швидкий інтернет.

І так почнемо, для того що б використовувати описаний нижче метод асинхронного завантаження файлів css, у вас на сайті повинен бути підключений jQuery. Завантажити css стилі асинхронно можна використовуючи наступний метод:

$("head").append("<link rel='stylesheet' type='text/css' href='/stylesheet.css' />")

1	$("head").append("<link rel='stylesheet' type='text/css' href='/stylesheet.css' />")

Завантаження даного коду обов'язково повинно здійснюватися після завантаження jQuery і самої сторінки. Наприклад використовуючи метод ready, нижче повний приклад використання:

<script>
 $(document).ready(function() {
 $("head").append("<link rel='stylesheet' type='text/css' href='/stylesheet.css' />");
 });
</script>

$(document).ready(function() {

$("head").append("<link rel='stylesheet' type='text/css' href='/stylesheet.css' />");

});

</script>

Ось такий нескладний метод асинхронного завантаження css. Хочу відразу зазначити що даний метод не є панацеєю від усіх хвороб, і для кожного сайту потрібно індивідуально дивитися кожен файл завантаження стилів.

Також в даному методі є невеликий недолік, а саме: Так як Ви зробили завантаження css після завантаження самої розмітки html ваш сайт буде не гарно виглядати в момент завантаження сторінки. Для того щоб таке не відбувалося вам потрібно або промальовувати кілька основних стилів прям в тілі сторінки HTML і таким чином Ви збережете зовнішній вигляд сайту в момент завантаження, або ж не застосовувати цю умову до основного файлу CSS і залишити його синхронним, а застосувати цю умову саме до тих стилів які не грають великого значення в момент завантаження сайту.

Ну ось власне і все, тепер Ви знаєте як зробити асинхронним завантаження css файлів. У мережі можна звичайно знайти і інші методи але я завжди користуюся цією інструкцією власне її Вам і пропоную.

Асинхронне завантаження javascript

Так само як і для CSS асинхронне завантаження скриптів Javascript дозволяє браузеру не чекати завантаження скриптів, завантажуючи основний код HTML після якого тільки буде завантажений сам Javascript. Завдяки таким діям сторінки вашого сайту завантажуються набагато швидше. Дану дію знову ж потрібно застосовувати до якихось окремих скриптів JS особливо для тих які гальмують завантаження сторінки і на які лається перевірка Google PageSpeed.

І так що б зробити завантаження Javascript асинхронним все що вам потрібно так це додати властивість "asyc" в підключаємий файл, наприклад так:

<script async src="https://web-ukraine.com/main.js"></script>

1	<script async src="https://web-ukraine.com/main.js"></script>

Зверніть увагу що при використанні даного методу у Вас не буде працювати звичайне послідовне завантаження скрипта:

<script src="/jquery.js" async></script>
<script>$('a').addClass('ajax');</script>

1 2	<script src="/jquery.js" async></script> <script>$('a').addClass('ajax');</script>

Даний варіант працювати не буде у зв'язку з тим що jQuery буде завантажуватися у фоновому режимі а функція "$" ще не визначена.

Тому для правильної роботи скрипту рекомендується використовувати подію onload.

<script>function init() {
 $('a').addClass('ajax');
}</script>
<script src="/jquery.js" async onload="init()"></script>

$('a').addClass('ajax');

}</script>

Таким чином функція init буде викликана відразу після завантаження jQuery. Ось власне і все, таким чином Ви зможете зробити у себе на сайті асинхронним завантаження javascript скриптів.

Загалом пробуйте, і у Вас все вийде. Удачі Вам у нашій нелегкій справі.