CSS優化和PageSpeed Insights的

我在我的網站上運行谷歌PageSpeed Insights的 - www.gpsheatmap.com，並且它建議從改變我的樣式表的加載（https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example） -CSS優化和PageSpeed Insights的

<link href="/static/css/landing-page.css" rel="stylesheet">

要 -

<script> 
    var cb = function() { 
    var l = document.createElement('link'); 
    l.rel = 'stylesheet'; 
    l.href = '/static/css/landing-page.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>

我嘗試了我的樣式表，它明顯地改變了加載，所以你會看到pre-css視圖，然後一秒鐘後你會看到樣式表應用。這是在Firefox中

我應該忽視這種方法，還是可以解決這個問題？

來源

2016-03-15 farrellmr

看看[這個]（http://stackoverflow.com/a/35691921/3828573） – Shayan

第一次加載後，css和js文件存儲在緩存中，所以我不認爲運行腳本來加載它任何差異。如果全部，它會更快，如果你存儲在本地存儲的CSS文件 - https://www.smashingmagazine.com/2014/09/improving-smashing-magazine-performance-case-study/ – Tasos

我認爲這是一個真的狗屎推薦谷歌。當DOM準備好javascript函數時加載CSS真的很煩人。它創造了farrellmr描述的問題：你會看到稍後應用樣式。爲什麼谷歌推薦這種胡扯？這不是谷歌推薦的第一件事情（比如，使用'-webkit-'作爲所需功能的前綴） –

你應該考慮的關鍵路徑，並把所有的必要的風格在你head部分，以避免FOUC（只是風格的摺疊上述內容）。這既可以做一個自動任務一飲而盡提取用手或較大的站點—風格—像critical-path-css-demo

無論如何，如果你選擇加載所有的樣式表與JavaScript的考慮仍包括他們<noscript>塊內，所以當JS不可用時，它們也可以加載。

<noscript> <link rel="stylesheet" ...> </noscript>

作爲進一步優化for near-future browser（此時它僅適用於Chrome Canary版）也將有可能early preload stylesheets使用

<link rel="preload" href="..." as="style">

，並創造一個更簡單的方式異步加載

<link rel="preload" href="..." as="style" onload="this.rel='stylesheet'">

另一個有趣的和最近的方法是described by Jake Archibald，它被稱爲「多階段CSS加載」：它需要在標記之前加載一小段CSS，因此需要對樣式進行標記，從而避免需要關鍵CSS。

<link rel="stylesheet" href="/site-header.css"> <header>…</header> <link rel="stylesheet" href="/article.css"> <main>…</main> <link rel="stylesheet" href="/comment.css"> <section class="comments">…</section>

的計劃是爲每個阻斷而樣式表載荷後續內容呈現，但是允許的內容呈現之前。樣式表並行加載，但是它們是以系列方式應用的。這使得行爲類似於<script src="…"></script>。

來源

2016-03-15 09:11:57 fcalderan

CSS優化和PageSpeed Insights的

回答

相關問題