Как лесно да направите асинхронно зареждане на JavaScript и CSS

Здравей, читателю! При повечето от нас в шапката на сайта или футъра се намират много и различни скриптове. При някой те са изнесени в отделни файлове, а има и сайтове, в които JavaScript кода е внедрен направо в HTML страницата. Скриптовете въпреки че изпълняват много полезни функции, тяхното негативно влияние върху скоростта на зареждане на страниците е очевидно. Как да оставите скриптовете и във същото време да ускорите зареждането на сайта?

Какво са JavaScript скриптовете?

Да започнем със обясненията за тези, които за пръв път чуват за JS и CSS скриптове. На повечето сайтове има някакви интересни бутони, които след като се натиснат отварят/затварят плавно различни панели, меню с различна анимация, броячи или нещо подобно. Когато се зарежда страница винаги се изпълняват скриптове, и докато те не бъдат изпълнени, страницата няма да се зареди. Ето нагледен пример за това, как се зарежда страница и скриптовете в нея:

page loading

Както виждате, зареждането на страницата се прекъсва, за да започне зареждането на скриптовете. И след като скриптовете са заредени, започва тяхното изпълнение. И само след това продължава да се зарежда страницата.

Скрипта се включва много просто:

<script src="main.js"></script>

Мисля, че след това обяснение на всички става ясно, колко е лошо, когато във сайта са включени множество скриптове.

Асинхронно зареждане на JavaScript в сайта

С излизането на HTML5 стана възможно асинхронното зареждане на скриптовете във сайта. Какво означава това? Означава, че може да се направи така, че първо страницата да се зарежда, а след това да започнат да се изпълняват скриптовете. Това е полезно да се прави, ако включените скриптове са много.

Освен стандартния тип за зареждане има още два: async и defer.

Тип async зареждане на скрипт

Включва се ето така:

<script async src="main.js"></script>

Включвайки файловете със async вие разрешавате на браузъра паралелно със зареждане на страницата да се зареждат и скриптовете. Тоест, отваряйки сайта, вместо една обичайна операция, започват да се изпълняват две паралелни задачи: върви зареждането на всички скриптове и зареждането на самата страница.

Но след като са заредени скриптовете, зареждането на страницата се прекратява. Започват да се изпълняват скриптовете, които вече са заредени. След това, когато всички скриптове са изпълнени, зареждането на страницата ще продължи. Ето нагледно как изглежда:

асинхронно зареждане на скрипт

Тип defer зареждане на скрипт

Включва се ето така:

<script defer src="main.js"></script>

Моя любим начин, макар че не става за всички скриптове. В този случай зареждането на страницата и зареждането на скриптовете става паралелно като не се прекъсва работата на страницата и скриптовете. Във това defer напълно си прилича със async.

Но в сравнение със async, defer отначало позволява на страницата напълно да се зареди, и когато посетителя вече вижда сайта и може да работи с него, започва изпълнението на скриптовете. Това забележимо намалява времето за зареждане на сайта.

Ако вашите скриптове променят външния вид на сайта, то бъдете готови за това, че посетителя след зареждане на страницата ще вижда сайта без никакви промени, които правят скриптовете. И само след малко тези промени ще започнат да се виждат и стават.

Да видим нагледно как става това във схемата:

defer

Разширение за асинхронно зареждане за WordPress

Проблема на WordPress е в това, че във шапката се зареждат всички скриптове, даже и тези, които се използват само на някой определени страници. И за да поправяте всичко това, се налага да редактирате всички файлове на разширенията и темата.

Но поради честите обновления на разширенията, всички промени ще се изтрият. Затова няма смисъл да поправяте каквото и да е. Единственото решение е използването на разширение. А разширението се нарича Async JavaScript. Може да използвате и Async JS and CSS, който за разлика от първото разширение позволява асинхронно да зареждате не само JavaScript но и CSS.

Изводи

Какъв тип за асинхронно зареждане ще изберете, зависи единствено от вас. Аз предпочитам defer. Вече знаете, как да направите асинхронно зареждане на скриптовете във сайта. Снижавайте натоварването и вашите позиции в Google ще се подобрят, а посетителите ще ви бъдат благодарни! Успех.

С уважение, Николай Томов.

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *