2017-03-24 10 views
2

내 프로젝트 (Preloaders.net)에는 웹 응용 프로그램이므로 많은 스크립트가 있습니다. "some"css와 js를 가질 방법이 없습니다. 모든 파일을 하나의 파일에 병합했지만 Google Pagespeed는 여전히 "CSS 및 JS 차단 렌더링"을 제거하라고했습니다. 그래서 CSS와 JS를 HTML로 인라인으로 표시했습니다. 인라인 CSS에 대한 Google 페이지 속도는 이제 만족 스럽지만 실제로는 JS와 CSS는 다른 모든 페이지에 캐시되지 않으므로 어리석은 것처럼 보입니다. CSS와 JS를 구분하는 것은 웹 앱이 작동하는 데 필요한만큼 거의 쓸모없고 불가능합니다.Google pagespeed가 인라인 자바 스크립트를 사용한다고 말합니다.

그럼 이제 내가 찢어졌습니다. 이는 사용자 성능에 가장 적합합니다. Google "어리 석음"또는 CSS 및 js 차단 렌더링?

미리 감사드립니다. 대신 자바 스크립트 그냥 연기 플래그 또는 비동기로로드 인라인의

답변

1

다음 JS 문제를 해결할 수

<script src="whatever.js" async></script> 

. CSS에 관해서는

- 인라인은 무엇을 각 페이지에 대한 배 이상이며, (https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery에서) 비동기 방식으로 스타일의 나머지를로드

<html> 
    <head> 
    <style> 
    .blue{color:blue;} 
    </style> 
    </head> 
<body> 
    <div class="blue"> 
    Hello, world! 
    </div> 
    <noscript id="deferred-styles"> 
    <link rel="stylesheet" type="text/css" href="small.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> 
</body>