如何克服在PageSpeed Insight中消除渲染 - 阻擋CSS

我執行了PageSpeed Insights測試我的網站使用WordPress創建的。如何克服在PageSpeed Insight中消除渲染 - 阻擋CSS

它顯示消除阻止呈現的JavaScript和CSS在上述屏內容

該錯誤消息消失，當我除去的style.css文件這是我的核心CSS文件包含7000行代碼。

參照Optimize CSS Delivery，我應用這個線路編碼的進入我<script>

<script> 
var cb = function() { 
    var l = document.createElement('link'); l.rel = 'stylesheet'; 
    l.href = 'small.css'; 
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); 
    }; 
    var raf = requestAnimationFrame || mozRequestAnimationFrame || 
     webkitRequestAnimationFrame || msRequestAnimationFrame; 
    if (raf) raf(cb); 
    else window.addEventListener('load', cb); 
</script>

應用此方法會導致更多的阻塞資源。

我可以知道如何解決這個問題？謝謝。

P/S：請提供一個原因，如果你downvote。所以我下次可以提高我的質量。

來源

2016-03-15 WeeHong

這裏的人Downvote只是爲了好玩。如果你回答了一個問題，並且有人不同意你的問題，或者他們有自己的答案......他們就以你的答案爲目標。 –

我認爲PageSpeed Insights在他們的算法中非常具有侵略性，即使你的頁面加載得太快，你可能會得到一個低分，爲了獲得高分，你應該內嵌你的CSS或者將它放在頁面底部但取決於你的網站的大小，它可能會導致另一個問題，如FOUC，這是一個非常糟糕的用戶體驗，所以我也考慮使用其他工具，如：https：//www.webpagetest.org/來檢查你的並且不會爭取只在PageSpeed Insights中獲得100％的分數，同時也考慮到高質量的內容和可用性。 –

您可以異步加載CSS，還是有需要的媒體查詢？

要做的最好的事情是內聯一些媒體查詢的東西，以便每個查詢都從HTML完成 - 這將消除渲染阻塞。

但是我會說，如果你的頁面加載速度在chrome中顯示得較低，那麼Pageinsights可以被忽略。這不是100％。這就是您真正想要關注的地方，因爲Google爲用戶反饋提供的信譽超過了bot的質量得分。如果你可以減少到0.5秒的負載，用戶將反彈得更少。

來源

2016-03-15 19:02:42

如何克服在PageSpeed Insight中消除渲染 - 阻擋CSS

回答

相關問題