本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。

我們可以編寫(xiě)一些漂亮，且吸引人的網(wǎng)站，但如果該網(wǎng)站無(wú)法快速加載到瀏覽器中，人們往往會(huì)跳過(guò)它。盡管有許多性能規(guī)則，但歸根結(jié)底，這全都取決于加載時(shí)間。

根據(jù) Jakob Nielson說(shuō)法，在網(wǎng)建的網(wǎng)站時(shí)，需要注意以下幾點(diǎn)：

• 小于100毫秒加載速度才是爽的
• 100ms到300ms 感覺(jué)良好
• 一秒鐘大概是用戶(hù)思路不被打斷的極限。用戶(hù)會(huì)感覺(jué)到延遲，但還可以接受
• 47%的用戶(hù)希望網(wǎng)頁(yè)能在兩秒或更短的時(shí)間內(nèi)加載
• 40% 的用戶(hù)如果網(wǎng)頁(yè)加載超過(guò) 3 秒，表示會(huì)放棄該網(wǎng)站
• 10秒左右是用戶(hù)注意力的極限。大多數(shù)用戶(hù)會(huì)在10秒后離開(kāi)你的網(wǎng)站

如上所述，即使在最差的網(wǎng)絡(luò)帶寬上，也需要確保頁(yè)面盡快加載。但這個(gè)說(shuō)起來(lái)容易做起來(lái)難。

為了能幫助更好的實(shí)現(xiàn)這一目標(biāo)，這里推薦了幾個(gè)性能分析工具。

1. PageSpeed Insights

這是一個(gè)免費(fèi)的服務(wù)，分析網(wǎng)頁(yè)的內(nèi)容，然后提出建議，使該網(wǎng)頁(yè)更快。它為您提供了關(guān)鍵指標(biāo)，如第一個(gè)內(nèi)容繪制，總阻塞時(shí)間和更多。度量標(biāo)準(zhǔn)被分類(lèi)為Field Data、Origin Summary,Lab Data,Opportunities、Diagnostics 和Passed Audits。它還為我們提供了進(jìn)一步改進(jìn)的建議。

2. Lighthouse

Lighthouse是一個(gè)開(kāi)源的自動(dòng)化工具，用于改進(jìn)網(wǎng)絡(luò)應(yīng)用的質(zhì)量。你可以將其作為一個(gè) Chrome 擴(kuò)展程序運(yùn)行，或從命令行運(yùn)行。你為 Lighthouse 提供一個(gè)您要審查的網(wǎng)址，它將針對(duì)此頁(yè)面運(yùn)行一連串的測(cè)試，然后生成一個(gè)有關(guān)頁(yè)面性能的報(bào)告。

從此處，您可以失敗的測(cè)試為指示器，看看可以采取哪些措施來(lái)改進(jìn)您的應(yīng)用。

注意: Lighthouse 目前非常關(guān)注 Progressive Web App (PWA) 功能，如“添加到主屏幕”和離線支持。不過(guò)，此項(xiàng)目的首要目標(biāo)是針對(duì)網(wǎng)絡(luò)應(yīng)用質(zhì)量的各個(gè)方面提供端到端審查。

運(yùn)行 Lighthouse 的方式有兩種：作為 Chrome 擴(kuò)展程序運(yùn)行，或作為命令行工具運(yùn)行。Chrome 擴(kuò)展程序提供了一個(gè)對(duì)用戶(hù)更友好的界面，方便讀取報(bào)告。命令行工具允許您將 Lighthouse 集成到持續(xù)集成系統(tǒng)。

3. WebPageTest

WebPageTest是一個(gè)在線的免費(fèi)性能評(píng)測(cè)網(wǎng)站，支持IE，Chrome，使用真正的瀏覽器(IE和Chrome)和真實(shí)的消費(fèi)者連接速度，從全球多個(gè)地點(diǎn)運(yùn)行免費(fèi)網(wǎng)站速度測(cè)試?？梢赃\(yùn)行簡(jiǎn)單的測(cè)試或執(zhí)行高級(jí)測(cè)試，包括多步驟事務(wù)、視頻捕獲、內(nèi)容阻塞等等。還將依據(jù)測(cè)試結(jié)果提供豐富的診斷信息，包括資源加載瀑布圖，頁(yè)面速度優(yōu)化檢查和改進(jìn)建議，會(huì)給每一項(xiàng)內(nèi)容一個(gè)最終的評(píng)級(jí)。

WebpageTest 主要提供了Advanced Testing、simple Testing、Visual Comparison、Traceroute四個(gè)功能，我們主要關(guān)注Advanced Testing。

如何使用WebPageTest：

• 填寫(xiě)需要測(cè)試的URL
• 填寫(xiě)Test Location，下拉選擇即可，可選移動(dòng)端設(shè)備(包括Android、IOS)，可選PC端(分地區(qū)，每個(gè)地區(qū)可支持的瀏覽器不同)
• 可選支持的瀏覽器
• 點(diǎn)擊右側(cè)START TEST

4. Pingdom

Pingdom:在線網(wǎng)站速度檢測(cè)工具是由一家網(wǎng)站監(jiān)測(cè)服務(wù)公司推出的網(wǎng)頁(yè)速度檢測(cè)工具，幫助用戶(hù)找出影響網(wǎng)站速度的原因，并給出改善網(wǎng)頁(yè)性能的可行性方案，對(duì)于有網(wǎng)站的用戶(hù)來(lái)說(shuō)非常實(shí)用。

我最喜歡的功能是分析后的的摘要，其中會(huì)為我們提供有關(guān)網(wǎng)站內(nèi)容和請(qǐng)求的摘要。我發(fā)現(xiàn)這對(duì)于了解網(wǎng)頁(yè)上提供的內(nèi)容有很大幫助。

5. Sitespeed.io

Sitespeed.io 是一款開(kāi)源的Web性能測(cè)試工具，用來(lái)衡量Web網(wǎng)站的綜合性能，幫助開(kāi)發(fā)和測(cè)試人員分析網(wǎng)頁(yè)的加載速度和渲染性能。

Sitespeed.io通過(guò)驅(qū)動(dòng)瀏覽器(如：Chrome、Firefox)進(jìn)行測(cè)試，然后從開(kāi)發(fā)者的站點(diǎn)收集多個(gè)頁(yè)面的數(shù)據(jù)，并根據(jù)最佳實(shí)踐等規(guī)則來(lái)分析這些網(wǎng)頁(yè)，然后將結(jié)果以HTML報(bào)告的形式輸出。

Sitespeed.io 滿(mǎn)足了一個(gè)完整的Web性能測(cè)試工具所需的3個(gè)關(guān)鍵功能：

• 使用真實(shí)的瀏覽器測(cè)試Web站點(diǎn)，模擬真實(shí)的用戶(hù)進(jìn)行請(qǐng)求連接，收集以用戶(hù)為中心的重要指標(biāo)，如：響應(yīng)速度指標(biāo)、第一視覺(jué)呈現(xiàn)
• 可分析頁(yè)面的組成，并給出相應(yīng)性能反饋，增加終端用戶(hù)的使用體驗(yàn)友好性
• 通過(guò)收集和保存頁(yè)面組成的數(shù)據(jù)，便于跟蹤定位

6. Calibre

Caliber 是一款多功能的性能監(jiān)控套件，可幫助你監(jiān)控和審核網(wǎng)站的性能。它還允許你通過(guò)指定測(cè)試服務(wù)器的位置，管理模擬的廣告首選項(xiàng)甚至模擬移動(dòng)設(shè)備來(lái)模擬現(xiàn)實(shí)條件。它還允許你設(shè)置預(yù)算，并通過(guò)為你提供性能下降來(lái)幫助你將預(yù)算保持在預(yù)算之內(nèi)。

7. SpeedCurve

SpeedCurve 既可以讓你追蹤競(jìng)爭(zhēng)對(duì)手的性能表現(xiàn)，也可以追蹤自己的性能表現(xiàn)。

使用 SpeedCurve 時(shí)，你可以查看某個(gè)因素在不同站點(diǎn)的速度表現(xiàn)。對(duì)于移動(dòng)用戶(hù)來(lái)說(shuō)，他們希望網(wǎng)站在手機(jī)上加載起來(lái)要快于電腦，如果感到加載遲緩，往往會(huì)迅速關(guān)上網(wǎng)頁(yè)，所以，網(wǎng)站的響應(yīng)速度對(duì)他們很重要。

SpeedCurve 還提供了綜合監(jiān)控。綜合監(jiān)控是在受控環(huán)境中模擬你的網(wǎng)站。你可以自定義選項(xiàng)，比如網(wǎng)絡(luò)速度、設(shè)備、操作系統(tǒng)等等。

8. SpeedTracker

SpeedTracker是一個(gè)運(yùn)行在WebPageTest之上的工具，可在你的網(wǎng)站上進(jìn)行定期的性能測(cè)試，并直觀顯示各種性能指標(biāo)隨時(shí)間變化的方式。這使你可以不斷評(píng)估網(wǎng)站，并查看新功能如何影響網(wǎng)站的性能。你還可以定義預(yù)算并通過(guò)電子郵件和Slack獲取警報(bào)。