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