Загружам сss Асинхронно

PageSpeed Insights от google рекомендует загружать скрипты и css асинхронно, но как же это работает?

868 jquery Aвтор:
Рейтинг: 0/5 - 0 голосов

Загружам сss Асинхронно

PageSpeed Insights от google рекомендует загружать скрипты и css асинхронно, но как же это работает?

А работает это так

Синхронная загрузка страници сайта

Все загражается постепенно, и пока не загрузится все что в шапке, содержимое отображатся не будет. Чтобы ускорить страницу, будем загружать css (что находится в шапке сайта ) асинхронно.

Вот так

Таким образом страница не будет ждать пока станица загрузит все содержемое css.

( Но есть нюанс что страница загрузится а стили еще нет. И вы будете наблюдать скачки блоков на странице).

Чтобы таке сделать есть вот такой скрипт.

head.load.min.js

Далее вставляем этот код в footer.


<script type="text/javascript" async="async">

var script = document.createElement("script");

script.src="/js/head.load.min.js";

script.onload=function() { head.load(['/css/bootstrap.css','/slick/slick.css'], function() {

      

})};

document.getElementsByTagName("head")[0].appendChild(script);

</script>

3 случайных Поста

Card image cap
Contact form 7- редирект на страницы при разных значения полей-
Card image cap
Разбиваем строку название товара woocommerce
Card image cap
Как спарсить погоду с sinoptik и отправить через бота телеграмм

коммент.

Contact

info@pechenki.top

Начать чат со мной

© SiteBlog designer