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

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

793 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
Мини галерея товара в категории Opencart 2.x
Card image cap
Перевод из доллара в гривну по курсу НБУ в woocommerce
Card image cap
UTM метки Modx

коммент.

Контакти

Contact

info@pechenki.top

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

© SiteBlog designer