Joomla는 렌더링 차단 CSS를 제거합니다

Question

나는 https://www.giftofspeed.com/defer-loading-css/과 http://keithclark.co.uk/articles/loading-css-without-blocking-render/이라는 기사를 읽었습니다.

나는 $ 문서 수준> addStyleSheet

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.vnsinfo.com%2Fsilva%2F&tab=desktop

을 통해 일부 CSS를 추가하지만 일부 CSS를 차단 렌더링이 있습니다 참조하십시오.

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.vnsinfo.com%2Fsilva%2F&tab=desktop

가 어떻게 $ 문서 수준> addStyleSheet을 통해 라인 온로드 = "미디어 = '모든'경우 (! = '모든'미디어)"을 추가 할 수 있습니다 : 당신은에서 동일하게 확인할 수 있습니까?

다른 방법으로 Joomla CSS의 아래 코드를 외부 CSS를 사용할 수 있습니까?

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

Answer 1

$document = JFactory::getDocument();  
$document->addCustomTag('<noscript id="deferred-styles"><link rel="stylesheet" type="text/css" href="small.css"/></noscript>'); 
$document->addScriptDeclaration(" 
     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); 
    ");