無法擺脫谷歌的pagespeed洞察警告（該網站有阻止css）

當檢查我的網站在谷歌的網頁速度的見解，它給了我警覺，該網站有阻止CSS：Google pagespeed insights。這是我的代碼：無法擺脫谷歌的pagespeed洞察警告（該網站有阻止css）

<head> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
</head>

我試圖把它移動到身體，</body>前的權利，但它並沒有幫助，甚至減少了點。可以做些什麼來解決這個問題？謝謝。

Turbolinks和PageSpeed混合不好。
從turbolinks
請注意，Turbolinks只會考慮跟蹤資產<head>而不是頁面上的其他位置。

從Google's Web Fundamentals
默認情況下，CSS被視爲渲染阻塞資源。

Rails默認會傷害PageSpeed。有些人把「關鍵」CSS內聯在<head>之內，並且在</body>之前鏈接到其餘的鏈接。但正如所述，turbolinks不會跟蹤<head>以外的資產。

一個解決方案，我已經看到了
application.html.erb

<style> 
    <%= raw File.read("public" + asset_path("application.css")) %> 
</style>

這使所有的CSS內聯。可能不是最好的解決方案，但它確實提高了PageSpeed。我見過用JS做的那些網站。

2017-09-08 02:29:50

回答