前端DevOps之PageSpeed Insights
使用 Google Cloud Scheduler， Pub/Sub， Functions ， Storage 等云服務，搭建 PageSpeed Insights 前端網站網頁的質量和性能 benchmark CI Job 工作流。
1. PageSpeed Insights
1.1 簡介
PageSpeed Insights 是 Google 提供的一款網頁性能檢測優化工具，能夠針對移動設備和桌面設備生成網頁的實際性能報告，并提供關于如何改進相應網頁的建議。它采用 Google Lighthouse 提供的各種最佳實踐作為測試基準，使用 Blink 渲染工具（即 Google Chrome 的渲染引擎），模擬移動設備和桌面設備，抓取目標網站網頁，進行優化分析。
以下簡稱PSI。
1.2 版本歷史
| V5 | 2018年Q4 | 當前最新版本。2019.05.08更新使用 Lighthouse 5.0 作為其分析引擎。 |
| V4 | 2018年1月 | 2019年Q3之前停用 |
| V2 | 2015年1月 | 已停用 |
| V1 | 更早期 | 已停用 |
1.3 分析報告組成
1.3.1 綜合速度得分
評分和等級：
- 快 90分以上
- 中等 50-90分
- 慢 50分以下
V5版本使用 Lighthouse 計算多項性能指標的綜合加權得分。
V4及之前版本結合 Chrome 用戶體驗報告數據庫中的真實用戶測速數據，計算評分和等級。主要參考以下兩項指標。
- FCP （First Contentful Paint）首次內容繪制，用于衡量用戶何時看到來自相應網頁的可見響應。所用時間越短，留住用戶的可能性就越大。
- DCL 文檔內容加載，用于衡量何時完成 HTML 文檔的加載和解析。所用時間越短，跳出率越低。
1.3.2 實測數據
結合 Chrome 用戶體驗報告中的其他網頁過去30天內的實測數據相比的得分。
1.3.3 實驗室數據
給出以下幾項指標的耗時絕對值數據：
- First Contentful Paint 首次內容繪制時間
- First Meaningful Paint 首次有效繪制時間
- Speed Index 速度指數
- First CPU Idle 首次 CPU 閑置時間
- Time to Interactive 可交互前的耗時
- Estimated Input Latency 最長的潛在FID
1.3.4 關于如何加快網頁加載速度的優化建議
1.3.5 關于Web開發最佳實踐的詳細診斷建議。
1.3.6 已通過的符合最佳實踐的審查項
1.4 實際案例
以攜程機票H5航班動態首頁的某線上版本為例，直觀的查看分析報告：
m.ctrip.com/webapp/flig…
1.5 使用方法
PSI API是Google RESTful APIs之一， 僅需一次 HTTP 請求 ，應答返回一個 JSON Ojbect。使用極其簡便。
HTTP Request
GET www.googleapis.com/pagespeedon…
必選參數1個：
- url: 目標分析網頁的鏈接
可選參數6個：
- category：accessibility，best-practices，performance，pwa，seo。默認是performance。
- locale：返回結果文本的本地化語言版本。目前支持40種。默認英語en。
- strategy：desktop 針對桌面瀏覽器進行優化分析，mobile 針對移動設備瀏覽器進行優化分析。
- utm_campaign：廣告系列名稱
- utm_source：廣告系列來源
- fields： 定制 Response 內容字段。
HTTP Response
返回一個 JSON Object ，字段內容較多，此處省略，詳見官網文檔。
最簡單命令行調用
curl www.googleapis.com/pagespeedon…
2. Google Cloude Platform (GCP)
2.1 系統流程圖
2.2 Cloud Scheduler
Cloud Scheduler 是 GCP 的一項全托管式企業級 cron 作業調度服務。支持 App Engine、Cloud Pub/Sub 和任意 HTTP 端點，允許作業觸發 Compute Engine、Google Kubernetes Engine 和本地資源。
使用 Google Cloud Console 創建Job。目標有3種：HTTP，Pub/Sub，App Engine HTTP。這里選擇 Pub/Sub 。設置每天22:00自動觸發。
創建成功后查看部署狀態，部署成功后可以直接“立即運行”，查看日志，確認運行正常。
2.3 Cloud Pub/Sub
Cloud Pub/Sub 是 GCP 的一項簡單、可靠、可伸縮，可以用作數據流分析和事件驅動型計算系統的基礎。
這里創建兩個主題，psi-job 用于 Cloude Scheduler Job 的事件數據中轉，psi-single 用于 Cloud Functions 的并發 HTTP 請求的事件數據中轉。
2.4 Cloud Functions
實現并發大量網頁的 PageSpeed Insights 檢查，有多種方式。可以使用 Google App engine， Google Compute Engine。鑒于 PSI API 是上下文無關的簡單 HTTP RESTful API，Cloud Functions Serverless 是最佳最簡實現。
Cloud Functions 是 GCP 的一項事件驅動型無服務器計算平臺。通過構建多個分別專注于做好一件事的小型獨立功能單元，再將這些功能單元組合成一個系統，實現快速開發和部署。支持在單個函數（而不是整個應用、容器或虛擬機）級構建和部署服務。
2.4.1 編寫 Function
目前支持以下幾種方案：
| 運行時 | Node.js 6(已棄用)、8、10（測試版） |
| HTTP 框架 | Express |
| HTTP 函數 | Express Request & Response Context |
| 后臺函數 | (data, context, callback) |
| 依賴項管理 | npm/yarn + package.json |
| 運行時 | 3.7.1 |
| HTTP 框架 | Flask |
| HTTP 函數 | 入參：Flask Request Object。返回值：符合 Flask.make_response() 的任意對象。 |
| 后臺函數 | (data, context) |
| 依賴項管理 | pip + requirements.txt |
| 運行時 | Go 1.11 |
| HTTP 框架 | http.HandlerFunc 標準接口 |
| HTTP 函數 | request: *http.Request. response: http.ResponseWriter. |
| 后臺函數 | (ctx, Event) |
| 依賴項管理 | go.mod/vendor |
2.4.2 部署 Function
目前支持以下幾種方式：
- 從本地機器部署。使用 gcloud 命令行工具。
- 通過源代碼控制系統部署。使用 Google Cloud Source Repositories ，通過 OAuth 關聯源代碼倉庫（如 GitHub 或 Bitbucket）。
- 通過 GCP Console 部署。
- 網頁內嵌編輯器.直接在線編寫函數代碼。
- 上傳本地ZIP文件。文件夾目錄結構與上述依賴性管理的源碼工程結構一致。
- 導入 Cloud Storage 中的 ZIP 文件。同上。
- 引用 Google Cloud Source Repositories的源代碼工程。
- 通過CI/CD部署。使用 Cloud Build 搭建持續集成和部署系統。
2.4.3 監控 Function
Google Stackdriver 提供了服務監控工具，包括 Debugger，Monitoring，Trace，Logging, Error Reporting，Profiler。
3. PSI Functions 實現
創建好一個 Scheduler Job 和兩個 Pub/Sub 主題后，接下來實現兩個對應的 Functions 。
3.1 psi-single function
psi-single() 負責針對具體單一 URL ，調用 PSI API 獲取 JSON 結果的功能。
Google APIs 支持多種調用方式。
3.1.1 使用 google api client 。
通過 Discovery API ，獲得已經封裝好的 Service ，再調用具體接口。
3.1.2 針對簡單接口，直接調用 HTTP RESTful API 。
import requests GAPI_PSI = "https://www.googleapis.com/pagespeedonline/v5/runPagespeed"def run(url):try:payload = {"url": url,"key": API_KEY}with requests.Session() as session:response = session.get(url=GAPI_PSI, params=payload)print(response.status_code)print(response.json())except requests.RequestException as _e:print(_e)return 'OK' 復制代碼3.1.3 實現 Pub/Sub 主題的訂閱
訂閱消息 event 的格式詳見官網文檔，其中 data 屬性是一段 base64 編碼的 ByteArray ，承載了實際的數據內容。
3.2 psi-job function
psi-job() 由 Scheduler Job 觸發，將所有需審查的 URL 以 Pub/Sub 事件形式，并行分發給 psi-single() 。
from google.cloud import pubsub_v1def run(event, context):publisher = pubsub_v1.PublisherClient()topic = publisher.topic_path(PROJECT_ID, TOPIC_NAME)for url in URL_DICT:data = url.encode('utf-8')publisher.publish(topic, data)return 'OK' 復制代碼3.3 環境變量和依賴項
為了避免安全敏感信息泄漏，可以將關鍵信息寫入 Functions 環境變量和本地環境變量（本地開發調試使用）。
上述代碼中 API_KEY, PROJECT_ID 等數據通過 os.getenv() 獲取。
Cloude Functions 已內置常用依賴庫，詳見官網文檔。如需增加依賴項，配置各語言對應的工程文件。上述代碼引用了兩個依賴庫。
4. Storage
上述代碼中的 print() 會寫入 StackDriver 日志庫，供后續過濾分析。鑒于每一個 URL 的審查結果是一個 JSON Object 字符串，可以進一步寫入 BigTable ， 使用 BigQuery 進行查詢分析，再進一步導入 Google Data Studio ， 進行可視化報表展示。
這里使用 Cloud Storage 存儲 JSON 字符串為單一文件。
添加依賴項。
# requirements.txt # Function dependencies google-cloud-storage==1.15.0 復制代碼5. 源代碼
github.com/9468305/pyt…
6. 文檔鏈接
developers.google.com/speed/pages…
developers.google.com/web/tools/l…
cloud.google.com/scheduler/
cloud.google.com/pubsub/
cloud.google.com/functions/
cloud.google.com/storage/
cloud.google.com/cloud-build…
cloud.google.com/stackdriver…
轉載于:https://juejin.im/post/5cdfd36a51882525a9439ff4
總結
以上是生活随笔為你收集整理的前端DevOps之PageSpeed Insights的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： nginx DNS 缓存问题
- 下一篇： 第12周学习进度总结