關(guān)鍵CSS和Webpack: 減少阻塞渲染的CSS的自動(dòng)化解決方案
"消除阻塞渲染的CSS和JavaScript"。 這一條Google Page Speed Insights的建議總讓我困惑。
當(dāng)一個(gè)網(wǎng)頁被訪問時(shí)，Google希望它僅加載對(duì)初始視圖有用的內(nèi)容，并使用空閑時(shí)間來加載其他內(nèi)容。這種方式可以使用戶盡可能早地看到頁面。
我們可以做很多事情來減少阻塞渲染的JavaScript，例如code splitting、tree shaking，緩存等。
但是如何減少阻塞渲染的CSS?為此，可以拆分并優(yōu)先加載***渲染所需要的CSS(關(guān)鍵CSS)，然后再加載其它CSS。
可以通過編程的方式篩選出關(guān)鍵CSS，在本文中，我將向你展示如何通過Webpack的自動(dòng)化流程來實(shí)現(xiàn)該方案。
什么是阻塞渲染
如果資源是“阻塞渲染”的，則表示瀏覽器在資源下載或處理完成之前不會(huì)顯示該頁面。
通常，我們?cè)趆tml的head標(biāo)簽中添加CSS樣式表，這種方式會(huì)阻塞渲染，如下所示：
- <head>
- <link rel="stylesheet" href="/style.css">
- ...
- </head>
- <body>
- <p>在style.css下載完之前，你看不到我?。?！</p>
- </body>
當(dāng)這個(gè)html頁面被網(wǎng)絡(luò)瀏覽器加載時(shí)，它將從上到下被逐行解析。當(dāng)瀏覽器解析到link標(biāo)簽時(shí)，它將立即開始下載CSS樣式表，在完成之前不會(huì)渲染頁面。
對(duì)于一個(gè)大型網(wǎng)站，尤其是像使用了Bootstrap這種龐大框架的網(wǎng)站，樣式表有幾百KB，用戶必須耐心等待其完全下載完才能看到頁面。
那么，我們是否應(yīng)該把link標(biāo)簽放到body中，以防止阻塞渲染?你可以這么做，但是阻塞渲染也不是全無優(yōu)點(diǎn)，我們實(shí)際上可以利用它。如果頁面渲染時(shí)沒有加載任何CSS，我們會(huì)遇到丑陋的"內(nèi)容閃現(xiàn)"。
我們想要的***解決方案就應(yīng)該是：首屏相關(guān)的關(guān)鍵CSS使用阻塞渲染的方式加載，所有的非關(guān)鍵CSS在首屏渲染完成后加載。
關(guān)鍵CSS
這里是我用Webpack和Bootstrap編寫的一個(gè)簡(jiǎn)單的網(wǎng)頁, 下面的截圖是***渲染后的樣式。
點(diǎn)擊Sign Up today按鈕會(huì)彈出一個(gè)模態(tài)框, 模態(tài)框彈出時(shí)的樣式如下:
***渲染需要的樣式包括導(dǎo)航條的樣式、超大屏幕樣式、按鈕樣式、其它布局和字體的公用樣式。但是我們并不需要模態(tài)框的樣式，因?yàn)樗粫?huì)立即在頁面中顯示?？紤]到這些，下面是我們拆分關(guān)鍵CSS和非關(guān)鍵CSS的可能的方式：
critical.css
- .nav {
- ...
- }
- .jumbtron {
- ...
- }
- .btn {
- ...
- }
non_critical.css
- .modal {
- ...
- }
如果你已經(jīng)有這個(gè)概念，那么你可能會(huì)提出兩個(gè)疑問：
- 我們?nèi)绾斡贸绦騾^(qū)分關(guān)鍵CSS和非關(guān)鍵CSS?
- 如何讓頁面在***渲染之前加載關(guān)鍵CSS，之后加載非關(guān)鍵CSS?
示例項(xiàng)目
我將簡(jiǎn)要介紹一下這個(gè)項(xiàng)目的基本配置，這樣我們?cè)谟龅浇鉀Q方案時(shí)，方便快速消化。
首先, 在入口文件中引入Bootsrap SASS。
main.js
- require("bootstrap-sass/assets/stylesheets/_bootstrap.scss");
我使用sass-loader來處理sass，與Extract Text Plugin一起使用，將編譯出來的css放到單獨(dú)的文件中。
使用HTML Webpack Plugin來創(chuàng)建一個(gè)HTML文件，它引入編譯后的CSS。這在我們的解決方案中是必需的，你馬上就會(huì)看到。
webpack.config.js
- 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
- })
- ]
- };
運(yùn)行構(gòu)建之后，這里是HTML文件的樣子。請(qǐng)注意，CSS文件在head標(biāo)簽里引入，因此將會(huì)阻塞渲染。
index.html
- <!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>
編程識(shí)別關(guān)鍵CSS
手動(dòng)區(qū)分關(guān)鍵CSS維護(hù)起來會(huì)非常痛苦。以編程方式來實(shí)現(xiàn)的話，我們可以使用Addy Osmani的Critical。這是一個(gè)Node.js模塊，它將讀入HTML文檔，并識(shí)別關(guān)鍵CSS。Critical能做的還不止這些，你很快就能體會(huì)到。
Critical識(shí)別關(guān)鍵CSS的方式如下：指定屏幕尺寸并使用PhantomJS加載頁面，提取在渲染頁面中用到的所有CSS規(guī)則。
以下為對(duì)項(xiàng)目的設(shè)置:
- 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,
- /* 確保調(diào)用打包后的JS文件 */
- penthouse: {
- blockJSRequests: false,
- }
- });
執(zhí)行時(shí)，會(huì)將Webpack打包輸出文件中HTML更新為:
- <!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">
- /* 關(guān)鍵CSS通過內(nèi)部樣式表方式引入 */
- 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>
- /*用來加載非關(guān)鍵CSS的腳本*/
- </script>
- </head>
- <body>
- <!-- 這里是App的內(nèi)容 -->
- <script type="text/javascript" src="/build_main.js"></script>
- </body>
- </html>
它還將輸出一個(gè)新的CSS文件，例如style.96106fab.css(文件自動(dòng)Hash命名)。這個(gè)CSS文件與原始樣式表相同，只是不包含關(guān)鍵CSS。
內(nèi)聯(lián)嵌入關(guān)鍵CSS樣式
你會(huì)注意到，關(guān)鍵CSS已經(jīng)嵌入到文檔的頭部。這是***的，因?yàn)轫撁娌槐貜姆?wù)器加載它。
預(yù)加載非關(guān)鍵CSS
你還會(huì)注意到，非關(guān)鍵CSS使用了一個(gè)看起來更復(fù)雜的link標(biāo)簽來加載。rel="preload"通知瀏覽器開始獲取非關(guān)鍵CSS以供之后用。其關(guān)鍵在于，preload不阻塞渲染，無論資源是否加載完成，瀏覽器都會(huì)接著繪制頁面。
link標(biāo)簽中的onload屬性允許我們?cè)诜顷P(guān)鍵CSS加載完成時(shí)運(yùn)行腳本。Critical模塊可以自動(dòng)將此腳本嵌入到文檔中，這種方式提供了將非關(guān)鍵CSS加載到頁面中的跨瀏覽器兼容方法。
- <link href="/style.96106fab.css" rel="preload" as="style" onload="this.rel='stylesheet'">
把Critical組件添加到webpack打包流程中
我創(chuàng)建了一個(gè)名為HTML Critical Webpack Plugin的插件，該插件僅僅是Critical模塊的封裝。它將在HTML Webpack Plugin輸出文件后運(yùn)行。
你可以在Webpack的項(xiàng)目中這樣引入：
- 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,
- }
- })
- ]
- };
注意：你應(yīng)該只在生產(chǎn)版本中使用，因?yàn)樗鼘⑹鼓愕拈_發(fā)環(huán)境的構(gòu)建很慢
表現(xiàn)結(jié)果
現(xiàn)在已經(jīng)抽離了關(guān)鍵CSS，并且把非關(guān)鍵CSS的加載放到空閑時(shí)間，這在性能方面會(huì)有怎樣的提升呢?
我使用Chrome的Lighthouse擴(kuò)展插件進(jìn)行測(cè)試。請(qǐng)記住，我們嘗試優(yōu)化的指標(biāo)是“***有效繪制”，也就是用戶需要多久才能看到真正可瀏覽的頁面。
不使用區(qū)分關(guān)鍵CSS技術(shù)的表現(xiàn)
使用區(qū)分關(guān)鍵CSS技術(shù)的表現(xiàn)
正如你所看到的，我的應(yīng)用程序First Meaningful paint時(shí)間縮短了將近1秒，到達(dá)可交互狀態(tài)的時(shí)間節(jié)省了0.5秒。實(shí)際中，你的應(yīng)用程序可能無法獲得如此驚人的改善，因?yàn)槲业腃SS很笨重(我包含了整個(gè)Bootstrap庫)，而且在這樣一個(gè)簡(jiǎn)單的應(yīng)用程序中，我沒有很多關(guān)鍵CSS規(guī)則。
