Joomlaはレンダリングブロックを排除します。

Question

私はhttps://www.giftofspeed.com/defer-loading-css/とhttp://keithclark.co.uk/articles/loading-css-without-blocking-render/の記事を読んでいます。

私は$ document-> 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

がどのように私は$ document-> addStyleSheet介してラインのonload = "メディア= 'すべて' の場合（！= 'すべてのメディア）" を追加することができます：あなたはから同じことを確認することができますか？

また、以下のコードを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); 
    ");