渲染攔截的CSS - 推遲加載的CSS文件

Question

我想解決渲染bloking爲我的網站，但有問題與他們。 我加載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> 

但在「谷歌網頁速度的工具>見解」是渲染封鎖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"> 

媒體，你可以編寫最大寬度，最大高度，最小寬度，最小分辨率多見於https://www.w3schools.com/cssref/css3_pr_mediaquery.asp 也 https://www.w3schools.com/tags/att_link_media.asp

Answer 2

我想你需要先添加你的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>