render-blocking css - 로딩 CSS 파일 지연

내 사이트의 렌더링 블로킹 문제를 해결하려고하지만 문제가 있습니다. 내가 다음 코드를 사용하여 CSS 파일을로드 : render-blocking 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>

만에

"구글 페이지 속도 도구> 통찰력을"CSS 파일을 차단 렌더링입니다. 내가 그것을 해결하는 데 도움이^_^

출처

2017-02-26 profi

이 작품을 얻었습니까? –

당신은 다른 미디어에 대해 서로 다른 스타일을 가질 수

미디어

<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

출처

2017-02-26 12:21:12

당신이 먼저 CSS를 추가 한 다음 자바 스크립트를 실행하는 데 필요한 생각을 참조하십시오. 이 코드는 콘솔에서 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>

출처

2017-06-29 11:55:11 Debiprasad

render-blocking css - 로딩 CSS 파일 지연

답변

관련 문제