Асинхронная загрузка CSS и JS скриптов на сайте
Асинхронная загрузка CSS и JavaScript файлов
При помощи асинхронной загрузки файлов CSS и JS ваш сайт сможет быстрее загружать страницы и это хорошо скажется на мобильном трафике.
Асинхронная загрузка CSS
При помощи кода, указанного ниже, мы добавляем в тег HEAD стили после полной загрузки страницы.
$(document).ready(function() { $("head").append("<link rel='stylesheet' type='text/css' href='/styles.css' />"); })
APPEND() - добавляет в конец выбранных элементов контент.
Советую
Не забудьте также засунуть все стили в тег <style></style>, необходимые для отрисовки верхней части страницы. Код будет выглядеть так:
<html> <head> <b><style> h1 { font-size:22px; color:<span class="comment"> #ccc; text-align:center;} </span></style></b> </head> <body> <h1>Заголовок</h1> <hr/> {ТЕЛО САЙТА} <script> $(document).ready(function() { $("head").append("<link rel='stylesheet' type='text/css' href='/styles.css' />"); }); </script> </body> </html>
Асинхронная загрузка JavaScript
При помощи асинхронной загрузки JavaScript браузер сперва начнет загрузку основного HTML кода и других ресурсов, а потом уже приступит к загрузке скриптов. А это значит увеличится скорость загрузки и работы сайта для посетителей.
Чтобы включить асинхронную загрузку скрипта, просто добавьте свойство "async":
<script src="/script.js" async></script>
Вот и все. Вот такие простыми действиями можно ускорить работу вашего ресурса. Конечно, хоть и не значительно, но все же не повредит.
Читайте также:
- Адаптивная таблица на CSS и HTML без Bootstrap
- Как сделать 301 редирект с HTTP на HTTPS и наоборот через htaccess
- Всплывающее окно при входе на сайт. Как сделать всплывающее окно для сайта при заходе на него
- Таблица с фиксированной шапкой на HTML при помощи CSS при скроллинге страницы
- Установка fancybox на сайт (блог) WordPress без плагина
- Кнопка вверх для сайта, как сделать кнопку наверх на сайте. Код (скрипт) кнопки вверх на Html, css и Jquery для блога WordPress