谷歌的PageSpeed - 渲染阻擋內容

好......所以我運行一個小測試，試圖從谷歌的PageSpeed獲得100/100。我們有以下網站 - https://redwing.media 谷歌的PageSpeed - 渲染阻擋內容

我還有一件事要做，那就是將CSS從頭開始（作爲它的呈現阻止內容），允許加載內容，然後使用JavaScript來拉入CSS。如果我沒有加載在所有的CSS，我得到100/100的PageSpeed。我把所有關鍵的CSS都放在了頭上。

<style> 
    BODY { background-color: #1B1719; } 
    BODY > * { display: none; } 
</style>

所以，我使用谷歌的建議加載CSS的方法在內容加載後（see here） -

<noscript id="deferred"> 
    <link rel="stylesheet" type="text/css" href="assets/css/screen.css"> 
</noscript> 
<script> 
    var loadDeferredStyles = function() { 
     var addStylesNode = document.getElementById("deferred"); 
     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>

現在，當我運行的PageSpeed見解，我直接回具有移動的85/100因爲我screen.css是呈現明顯阻止頁面速度...

怎麼會這樣呢？我正在使用Google推薦的解決方案！

這是我建立的網站 - https://redwing.media/

來源

2017-02-13 Chris

CSS是始終呈現阻塞的話，你已經做得很好，你加載它可能是最好的方法外部CSS文件。

你可以改進你的pagespeed的唯一方法是在你的html頭部內嵌你的css文件內容，這樣做，你會節省一些時間來保存瀏覽器來搜索外部文件，但是這將是一個小小的改進。

來源

2017-02-13 13:11:55

感謝霍爾迪弗洛雷斯。所以在最後還有一點，我還能比在線所有的代碼做其他的。這解決了一個 - 它的一個恥辱谷歌似乎並非如此！謝謝你的幫助。 Upvoted並標記爲答案:) – Chris

谷歌的PageSpeed - 渲染阻擋內容

回答

相關問題