PageSpeed Insights

谷歌開發(fā)的一個免費的網(wǎng)頁分析工具，在地址欄中輸入被分析的網(wǎng)站 url 地址，點擊分析，

可模擬移動設(shè)備訪問頁面結(jié)果分析

桌面設(shè)備訪問頁面結(jié)果分析

前端開發(fā)工程師，可以根據(jù)這個報告進行頁面優(yōu)化

Lighthouse

簡介

Lighthouse 是谷歌開源的一款 Web 前端性能測試工具，用于改進網(wǎng)絡(luò)應(yīng)用的質(zhì)量，適用于網(wǎng)頁版和移動端。能生成一個包括頁面性能、PWA（Progressive Web apps，漸進式 Web 應(yīng)用）、可訪問性（無障礙）、最佳實踐、SEO 的報告清單提供參考，看看可以采取哪些措施來改進您的應(yīng)用。

使用方法

瀏覽器 F12 功能

在最新的谷歌瀏覽器 或 Edge 瀏覽器 訪問一個被測試網(wǎng)站，按 F12 ，打開開發(fā)者工具，看到最后一個項就是 Lighthouse

下載安裝到電腦

npm install -g lighthouse

測試某個網(wǎng)站

訪問被測網(wǎng)站，打開瀏覽器的開發(fā)者工具

點擊【生成報告】 就會自動分析你訪問的網(wǎng)站，得出性能分析報告

這款工具，大家在用瀏覽器訪問任意一個頁面（包括需要登錄，才能訪問的頁面），想要對這個頁面進行性能分析都非常簡單。

SiteSpeed

簡介

SiteSpeed 也是一款開源的，可以用于監(jiān)控和檢查網(wǎng)站性能的工具?？梢酝ㄟ^ docker 鏡像或 npm 方式來使用。這個工具，并不是單一的，而是一組工具集合，可以根據(jù)自己需要，選擇適合自己的工具。

安裝

docker 安裝使用

npm 安裝使用

測試結(jié)果

測試結(jié)束后，會把測試結(jié)果寫到 HTML 文件

可以通過頂部菜單，查看更多詳細信息

Speedcurve

Speedcurve 是一個前端性能綜合監(jiān)控網(wǎng)站，可以在網(wǎng)站輸入被測網(wǎng)站的 url 地址，進行測試

選擇要默認訪問網(wǎng)站的設(shè)備，進行模擬訪問

訪問后，網(wǎng)站會給出一份性能測試監(jiān)控報告

通過報告，可以看到詳細信息。

webpagetest

webpagetest 和上面的 speedcurve 相似，也是在一個網(wǎng)站中，輸入被測試的網(wǎng)站 ip 地址，就可以對被測網(wǎng)站頁面進行分析。但是，這個網(wǎng)站在國內(nèi)，被友好的和諧了，會出現(xiàn)無法正常進行測試的情況。

好了，這些是現(xiàn)在比較方便的前端性能測試工具，你都了解嗎？可能有同學(xué)會說為什么沒有 yslow，嗯，這個也是前端性能測工具，但是，你可以去搜索下，看下你現(xiàn)在的電腦上能非常方便的使用這個工具嗎？

yslow，不可否認，是一款經(jīng)典的 Web 端性能測試工具，但是現(xiàn)在使用起來非常的不方便，所以現(xiàn)在你想去學(xué)習(xí)這款工具，可能事被功半，收不到預(yù)期的效果，所以，個人不推薦大家學(xué)習(xí)這款工具了。

說明：本文為檸檬班Allen老師原創(chuàng)，轉(zhuǎn)載需注明出處