“消除阻塞渲染的CSS和JavaScript”。 這一條Google Page Speed Insights的建議總讓我困惑。當一個網頁被訪問時，Google希望它僅載入對初始檢視有用的內容，並使用空閒時間來載入其他內容。這種方式可以使使用者儘可能早地看到頁面。
我們可以做很多事情來減少阻塞渲染的JavaScript，例如code splitting、tree shaking，快取等。
但是如何減少阻塞渲染的CSS？為此，可以拆分並優先載入首次渲染所需要的CSS（關鍵CSS)，然後再載入其它CSS。
可以通過程式設計的方式篩選出關鍵CSS，在本文中，我將向你展示如何通過Webpack的自動化流程來實現該方案。
什麼是阻塞渲染
如果資源是“阻塞渲染”的，則表示瀏覽器在資源下載或處理完成之前不會顯示該頁面。
通常，我們在html的head標籤中新增CSS樣式表，這種方式會阻塞渲染，如下所示：
|
1 2 3 4 |
<head> <link rel="stylesheet" href="/style.css"> ...</head><body> <p>在style.css下載完之前，你看不到我！！！</p></body> |
當這個html頁面被網路瀏覽器載入時，它將從上到下被逐行解析。當瀏覽器解析到link標籤時，它將立即開始下載CSS樣式表，在完成之前不會渲染頁面。
對於一個大型網站，尤其是像使用了Bootstrap這種龐大框架的網站，樣式表有幾百KB，使用者必須耐心等待其完全下載完才能看到頁面。
那麼，我們是否應該把link標籤放到body中，以防止阻塞渲染？你可以這麼做，但是阻塞渲染也不是全無優點，我們實際上可以利用它。如果頁面渲染時沒有載入任何CSS，我們會遇到醜陋的”內容閃現”。
我們想要的完美解決方案就應該是：首屏相關的關鍵CSS使用阻塞渲染的方式載入，所有的非關鍵CSS在首屏渲染完成後載入。
關鍵CSS
這裡是我用Webpack和Bootstrap編寫的一個簡單的網頁, 下面的截圖是首次渲染後的樣式。
點選Sign Up today按鈕會彈出一個模態框, 模態框彈出時的樣式如下:
首次渲染需要的樣式包括導航條的樣式、超大螢幕樣式、按鈕樣式、其它佈局和字型的公用樣式。但是我們並不需要模態框的樣式，因為它不會立即在頁面中顯示。考慮到這些，下面是我們拆分關鍵CSS和非關鍵CSS的可能的方式：
critical.css
|
1 2 3 4 5 6 7 8 9 10 11 |
.nav { ... } .jumbtron { ... } .btn { ... } |
non_critical.css
|
1 2 3 |
.modal { ... } |
如果你已經有這個概念，那麼你可能會提出兩個疑問：
- 我們如何用程式區分關鍵CSS和非關鍵CSS?
- 如何讓頁面在首次渲染之前載入關鍵CSS，之後載入非關鍵CSS？
示例專案
我將簡要介紹一下這個專案的基本配置，這樣我們在遇到解決方案時，方便快速消化。
首先, 在入口檔案中引入Bootsrap SASS。
main.js
|
1 |
require("bootstrap-sass/assets/stylesheets/_bootstrap.scss"); |
我使用sass-loader來處理sass，與Extract Text Plugin一起使用，將編譯出來的css放到單獨的檔案中。
使用HTML Webpack Plugin來建立一個HTML檔案，它引入編譯後的CSS。這在我們的解決方案中是必需的，你馬上就會看到。
webpack.config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
module.exports = { module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) }, ... ] }, ... plugins: [ new ExtractTextPlugin({ filename: 'style.css' }), new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }) ] }; |
執行構建之後，這裡是HTML檔案的樣子。請注意，CSS檔案在head標籤裡引入，因此將會阻塞渲染。
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>vuestrap-code-split</title> <link href="/style.css" rel="stylesheet"> </head> <body> <!--App content goes here, omitted for brevity.--> <script type="text/javascript" src="/build_main.js"></script> </body> </html> |
程式設計識別關鍵CSS
手動區分關鍵CSS維護起來會非常痛苦。以程式設計方式來實現的話，我們可以使用Addy Osmani的Critical。這是一個Node.js模組，它將讀入HTML文件，並識別關鍵CSS。Critical能做的還不止這些，你很快就能體會到。
Critical識別關鍵CSS的方式如下：指定螢幕尺寸並使用PhantomJS載入頁面，提取在渲染頁面中用到的所有CSS規則。
以下為對專案的設定:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
const critical = require("critical"); critical.generate({ /* Webpack打包輸出的路徑 */ base: path.join(path.resolve(__dirname), 'dist/'), src: 'index.html', dest: 'index.html', inline: true, extract: true, /* iPhone6的尺寸，你可以按需要修改 */ width: 375, height: 565, /* 確保呼叫打包後的JS檔案 */ penthouse: { blockJSRequests: false, } }); |
執行時，會將Webpack打包輸出檔案中HTML更新為:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Bootstrap Critical</title> <style type="text/css"> /* 關鍵CSS通過內部樣式表方式引入 */ body { font-family: Helvetica Neue,Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.42857; color: #333; background-color: #fff; } ... </style> <link href="/style.96106fab.css" rel="preload" as="style" onload="this.rel='stylesheet'"> <noscript> <link href="/style.96106fab.css" rel="stylesheet"> </noscript> <script> /*用來載入非關鍵CSS的指令碼*/ </script> </head> <body> <!-- 這裡是App的內容 --> <script type="text/javascript" src="/build_main.js"></script> </body> </html> |
它還將輸出一個新的CSS檔案，例如style.96106fab.css（檔案自動Hash命名）。這個CSS檔案與原始樣式表相同，只是不包含關鍵CSS。
內聯嵌入關鍵CSS樣式
你會注意到，關鍵CSS已經嵌入到文件的頭部。這是最佳的，因為頁面不必從伺服器載入它。
預載入非關鍵CSS
你還會注意到，非關鍵CSS使用了一個看起來更復雜的link標籤來載入。rel="preload"通知瀏覽器開始獲取非關鍵CSS以供之後用。其關鍵在於，preload不阻塞渲染，無論資源是否載入完成，瀏覽器都會接著繪製頁面。
link標籤中的onload屬性允許我們在非關鍵CSS載入完成時執行指令碼。Critical模組可以自動將此指令碼嵌入到文件中，這種方式提供了將非關鍵CSS載入到頁面中的跨瀏覽器相容方法。
|
1 |
<link href="/style.96106fab.css" rel="preload" as="style" onload="this.rel='stylesheet'"/> |
把Critical元件新增到webpack打包流程中
我建立了一個名為HTML Critical Webpack Plugin的外掛，該外掛僅僅是Critical模組的封裝。它將在HTML Webpack Plugin輸出檔案後執行。
你可以在Webpack的專案中這樣引入：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const HtmlCriticalPlugin = require("html-critical-webpack-plugin"); module.export = { ... plugins: [ new HtmlWebpackPlugin({ ... }), new ExtractTextPlugin({ ... }), new HtmlCriticalPlugin({ base: path.join(path.resolve(__dirname), 'dist/'), src: 'index.html', dest: 'index.html', inline: true, minify: true, extract: true, width: 375, height: 565, penthouse: { blockJSRequests: false, } }) ] }; |
注意：你應該只在生產版本中使用，因為它將使你的開發環境的構建很慢
表現結果
現在已經抽離了關鍵CSS，並且把非關鍵CSS的載入放到空閒時間，這在效能方面會有怎樣的提升呢?
我使用Chrome的Lighthouse擴充套件外掛進行測試。請記住，我們嘗試優化的指標是“首次有效繪製”，也就是使用者需要多久才能看到真正可瀏覽的頁面。
不使用區分關鍵CSS技術的表現
使用區分關鍵CSS技術的表現
正如你所看到的，我的應用程式First Meaningful paint時間縮短了將近1秒，到達可互動狀態的時間節省了0.5秒。實際中，你的應用程式可能無法獲得如此驚人的改善，因為我的CSS很笨重（我包含了整個Bootstrap庫），而且在這樣一個簡單的應用程式中，我沒有很多關鍵CSS規則。