レンダリングブロッキングCSS - ローディングCSSファイルを遅らせます

Question

私は自分のサイトのレンダリングを解決しようとしていますが、問題はあります。 私は次のコードでCSSファイルを読み込む：「洞察> Googleのページスピードツール」

<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> 

が、中には、CSSファイルをブロックするレンダリングです。 私はそれを解決するのに役立つ^ _^

Answer 1

あなたは異なるメディアごとに異なるスタイルシートを持つことができ、メディアで

<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"> 

あなたは、最大幅、最大高さ、最小幅、最小分解能のように書くことができます私はあなたが最初にあなたのCSSを追加し、JavaScriptを実行する必要があると思うhttps://www.w3schools.com/cssref/css3_pr_mediaquery.asp とも https://www.w3schools.com/tags/att_link_media.asp

Answer 2

でより多くを参照してください。このコードでは、コンソールで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>