Асинхронная загрузка 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
