render-blocking css - отложить загрузку файлов css

Я пытаюсь устранить блокировку рендеринга для своего сайта, но у меня проблема с ними. Я загружаю файлы css с помощью следующего кода:

<script>
  var loadDeferredStyles = function() {
    var addStylesNode = document.getElementById("deferred-styles");
    var replacement = document.createElement("div");
    replacement.innerHTML = addStylesNode.textContent;
    document.body.appendChild(replacement)
    addStylesNode.parentElement.removeChild(addStylesNode);
  };
  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
      webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
  else window.addEventListener('load', loadDeferredStyles);
</script>

<noscript id="deferred-styles">
  <link href="/template/styles/main.min.css" rel="stylesheet">    
  <link href="/template/styles/style.min.css" rel="stylesheet">
  <link href="/template/styles/bootstrap.min.css" rel="stylesheet">
  <link href="/template/styles/bootstrap-flipped.css" rel="stylesheet">
  <link href="/template/styles/swiper.min.css" rel="stylesheet" >
  <link href="/template/styles/fontiran.min.css" rel="stylesheet">
  <link href="/template/styles/font-awesome.min.css" rel="stylesheet">
  <link href="/template/styles/animate.min.css" rel="stylesheet">
  <link href="/template/styles/owl.carousel.css" rel="stylesheet">
  <link href="/template/styles/owl.transitions.css" rel="stylesheet">
  <link href="/template/styles/responsive.css" rel="stylesheet">
  <link href="/template/styles/theme-default.css" rel="stylesheet" type="text/css" />
</noscript>

но в «Инструменты скорости страницы Google> Insights» отображается блокировка файлов css. помогите мне решить эту проблему ^ _ ^


person profi    schedule 26.02.2017    source источник
comment
ты получил эту работу?   -  person Adrian Rodriguez    schedule 06.04.2017


Ответы (2)


У вас могут быть разные таблицы стилей для разных медиа,

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
<link rel="stylesheet" media="screen and (max-height:700px)" href="style-max-700-height.css">

на носителях вы можете писать, например, max-width, max-height, min-width, min-resolution. Подробнее см. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp, а также https://www.w3schools.com/tags/att_link_media.asp

person Khadka Pushpendra    schedule 26.02.2017

Я думаю, вам нужно сначала добавить свой CSS, а затем запустить JavaScript. Для этого кода в консоли могут появляться ошибки JavaScript.

<noscript id="deferred-styles">
  <link href="/template/styles/main.min.css" rel="stylesheet">    
  <link href="/template/styles/style.min.css" rel="stylesheet">
  <link href="/template/styles/bootstrap.min.css" rel="stylesheet">
  <link href="/template/styles/bootstrap-flipped.css" rel="stylesheet">
  <link href="/template/styles/swiper.min.css" rel="stylesheet" >
  <link href="/template/styles/fontiran.min.css" rel="stylesheet">
  <link href="/template/styles/font-awesome.min.css" rel="stylesheet">
  <link href="/template/styles/animate.min.css" rel="stylesheet">
  <link href="/template/styles/owl.carousel.css" rel="stylesheet">
  <link href="/template/styles/owl.transitions.css" rel="stylesheet">
  <link href="/template/styles/responsive.css" rel="stylesheet">
  <link href="/template/styles/theme-default.css" rel="stylesheet" type="text/css" />
</noscript>

<script>
  var loadDeferredStyles = function() {
    var addStylesNode = document.getElementById("deferred-styles");
    var replacement = document.createElement("div");
    replacement.innerHTML = addStylesNode.textContent;
    document.body.appendChild(replacement)
    addStylesNode.parentElement.removeChild(addStylesNode);
  };
  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
      webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
  else window.addEventListener('load', loadDeferredStyles);
</script>
person Debiprasad    schedule 29.06.2017