這次 Google 開發者大會請來了 Lighthouse 的工程師 - Eric Bidelman ,分享如何簡單地使用 Lighthouse, Puppeteer 來自動化我們日常的流程。它是一個開源的自動化工具,用於改進網路應用質量。您只需要提供網址,它就測試該頁面,並生成頁面效能報告。你看看可以採取哪些措施來改進您的應用。
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/961637d23836f1c626758fe1972dbbbe5c4f21737775b49d2bdb7ef177917d79.jpg)
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/0a4e9e0e73165047debc3784fafdc058c56bcd4a5ba3184ee551154960940600.jpg)
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/0c7186af0f9ed42363a356e2d7454d010fad030af7fd9519e205db5b42559335.jpg)
Lighthouse 重視使用者的首次載入頁面速度,頁面首次顯示內容速度,有意義的內容顯示速度,以及可以互動的時間。
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/3433c3520e5f4cdeddbc76f033b2a62de3ed2104238f0623ad47f49a8d1cb08c.jpg)
以一個頁面載入的週期為例,首先頁面會傳送第一個位元組給使用者,然後顯示一些非空白的影象,然後顯示有意義的內容,然後展示所有內容,允許使用者點選或其他操作,然後完結整個載入週期。
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/d669015cd2783a9ff20242081b10dbad53461fabfaa843686fea7fadaa2668f2.jpg)
使用方法
執行 Lighthouse 的方式有兩種:作為 Chrome 擴充套件程式執行,或作為命令列工具執行。Chrome 擴充套件程式提供了使用者友好的介面,方便讀取報告。而命令列工具允許您將 Lighthouse 整合到持續整合系統。
開發者工具
你只需要開啟 Chrome 的開發者工具,點選 Audits
,然後就可以看到 Lighthouse 介面:
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/24bf3566d6f6118775beb9707078ac5792b6683c398cb3443e594201d25d1b92.jpg)
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/ab6a46eaf0738611f4558029be25488671f1e745db28ba9bd8279e2a6a0898ed.png)
擴充套件程式
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/aa34b3179721d299df5e690997f4fffa62fca0277f3fcb11b6df4f16e19cc7b6.jpg)
你可以到 chrome web store 下載並安裝 Lighthouse Chrome 擴充套件程式。
命令列工具
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/aa20c0b36dddaa8a92bfde32bcebd9855744ba9a9f1894b032c731e05cff46fd.jpg)
需求:Node.js >= 5
- 全域性安裝 lighthouse
npm install -g lighthouse
複製程式碼
- 然後輸入你的頁面
lighthouse https://example.com
複製程式碼
lighthouse 會自動生成 HTML 報告,你也可以使用 JSON 格式。
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/b42f67b34bce79cfd7392f6ede0bbf1b0fd5ea691538a5e848fd64ba64338cf5.jpg)
自動化部分
你也可以利用 TravisCI 來自動分析改動後的程式碼對於頁面效能的影響。
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/4d05748b5f47bd49368a77e4556d8a34939ff01e982d3b99da54b3e9e3a0a7c1.jpg)
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/1631075700fa114c54bffb7594ffbbc4f56367348a16fa404c9e2051b64bfe4e.png)
你只需要在 .travis.yml
裡面加入以下程式碼:
language: node_js
script:
- npm run lint
- npm run build
after_success:
- ."./travis/deploy_pr_gae.sh"
- export LH_MIN_PASS_SCORE=96
- export LH_TEST_URL=https://your.staging.server.com/
- node travis/runlighthouse.js $LH_TEST_URL $LH_MIN_PASS_SCORE
複製程式碼
更多詳情可以觀看講師在 Github 上面的分享: ebidel/lighthouse-ci
Puppeteer
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/55b5d109fd7210763db14c5a484f9ce9404040a565cba61e37fc6e34f4a3e3d4.jpg)
底層
在談 Puppeteer 之前,我們需要提到上面是 Headless Chrome
。簡單來說,它是一個沒有檢視層的谷歌瀏覽器。
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/31b60efae181472f4a17e3910475025c49e4f2bbfee5da061d346cd75fea4a28.jpg)
它允許你使用最新的瀏覽器來測試頁面,使用所有最新的屬性,比如說 CSS Grid 格局,Web 推送通知等。
最重要的是,它暴露開發者工具的可程式設計介面,比如說網路狀況,模擬裝置,程式碼覆蓋率。
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/d6a168908a8307b77261bc935e1c8978e78667eceb22a8b0c230892491a9946d.jpg)
例如你可以開啟一個 WebSocket,然後監聽瀏覽器發生了什麼操作,比如說 CSS 的 getStyleSheetText
,DOM 的markUndoableState
等。
你也可以到官網閱讀更加豐富的文件:chromedevtools.github.io/devtools-pr…
實戰部分
大部分你手動在瀏覽器裡面做的事情,它都可以做到。例如:
- 截圖並生成 PDF
- 自動填寫表格,UI 測試,鍵盤輸入
- 測試 Chrome 外掛
安裝方法
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/93835eb3fc830f71af8e60886d1f9ce133b6d2b3a2b9aa7c3bc1c7062d547b40.jpg)
它會下載最新版本的 Chromium,以及暴露封裝好的介面出來給開發者使用。
值得注意的是,它的原始碼有很多 async/await
的操作,你也可以這樣操作你的程式碼。
npm i puppeteer --save
複製程式碼
講師也提供了很多例子,方便學習使用 Puppeteer。
截圖
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/9720b7af4b7f78544040a2b8fba4d6e612039fe4f044cc88387bf4880e8eaeb3.jpg)
比如說我要把 https://example.com
頁面截圖,儲存為 example.png
。我只需要寫幾行程式碼
:
const puppeteer = require("puppeteer");
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto("https://example.com");
await page.screenshot({ path: "example.png" });
await browser.close();
})();
複製程式碼
頁面資料
你只需要使用 page.metrics()
方法就可以了,它會返回一個頁面資料物件。
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/db2685c72e357f2ad59d9311098d212435d4c40d896550bcbd7618fef158dc51.jpg)
程式碼覆蓋率
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/0f9c8361f97c7937486c6aeb21a6afe03450c0a61bd1513628824fcb874a7a0f.jpg)
你可以使用 page.coverage
裡面的方法 startJSCoverage()
,startCSSCoverage()
來開始測試覆蓋率。以及使用 stopJSCoverage()
, stopCSSCoverage()
來結束測試。
攔截網路請求
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/585ff6f2f0fec3ef7577f09c06fb69c212267e4fd9cdb543b1c6e957087ec447.jpg)
你可以攔截圖片的請求,甚至是把圖片的請求換成其他請求,例如 http 直接上 https,或圖片換成佔點陣圖。
生成報告
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/d3358d7d3039d2002b52526247693b4af1434e58e216d29ca7d28762690d28e7.jpg)
你可以通過程式碼生成 PDF,例如使用page.pdf()
方法。
PPTRAAS
以上這些個案都是一些重複出現的日常例子。Puppeteer as a service ]就把以上這些程式碼做了封裝,只需在 url 後續加入 url
引數,便可使用服務。
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/70b3c70de5600214201e66d985e0ce368e5d3e79001c96410ef801fa2a3208bd.png)
例如你可以使用 https://pptraas.com/screenshot?url=https://example.com/
來截圖。
更多例子可以到 Puppeteer as a service 來使用服務。
其他優質的工具
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/3c2b7d999b968051a44b78689b4967da41c31d03ab45026b7e5c546fe522de62.jpg)
Node Debugger 可以讓你開啟瀏覽器裡面的開發者工具來除錯 Node 程式。
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/54ecbc7a9ec170126b844dc5e766fc5696f20433bd12b302fe17deb2d7e9148d.jpg)
Page Speed Insights 可以讓你透過谷歌的平臺來測試裡的網站,並生成報告。
後記
這次可謂乾貨滿滿,收穫豐富。我之前以為這些工具過於專業,艱澀難懂,沒想到只需要按幾個按鈕,寫幾行程式碼,甚至不需要寫程式碼便可以測試自己的網站。
就讓我好好地利用這些工具來優化我的個人部落格吧(笑
參考資料
- Github - ebidel/lighthouse-ci
- Github - GoogleChrome/lighthouse
- Puppeteer as a service
- Tools for Web Developers - Lighthouse
![網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018](https://i.iter01.com/images/1d7b3ae29f0b7894a69643b5e04e20a1bbcea8c91c92e145b745cfa0583c29da.png)