中文網站(不需要翻牆): http://www.googlespeed.cn
主要可實現:
1、測試手機與電腦打開的速度對比。
2、詳細的測試結果
3、直觀的統計數據,查看頁面的共xx個請求、總共大小、image、script、font等等各占多少個請求數量及大小。
使用總結:
(1)頁面的顯示介紹如下截圖:
二、具體的使用介紹
1、分類介紹
(1)移動設備:指的是在手機上打開此頁面的測試結果
(2)桌面設備:指的是電腦打開此頁面的測試結果
2、功能使用介紹(默認加載的是第一頁的內容)
(1)分析:在文本框中輸入需要測試的鏈接,點擊”分析“等待執行完成即可看到測試的數據
(2)測試結果的分析
1、實驗室數據:
這里記錄的數據只是參考,不作為我們查看的重點。
2、優化建議:
我們關注的部分,這里的數據具體可跟開發溝通下,根據這里記錄的結果查看參考價值有多大,是否適合自己的項目去做優化
3、診斷結果:
可作為我們重點關注的部分。這里有我們測試主要去查看的數據。
性能分析說明與解決方案:
《1》采用高效的緩存策略提供靜態資源:此處標注了 45項資源,也就意味着當前的這個頁面並未做緩存。
要求:一般的頁面都會做緩存,避免再次請求時的耗時過大
《2》Keep request counts low and transfer sizes small中的Image數量過大。意味着這個頁面首次在加載時一次加載了第一頁所需的所有圖片
要求:一般可做懶加載,當頁面滑動下去時在加載出圖片,已此來降低首次請求時的時間過長。
《3》other:此處記錄的other為5。跟開發溝通后的結果是:此處本可將后端去處理的請求放在了前段在處理,因此在耗時上也有一定的增加。
要求:
<1>一般為接口請求。可以對照項:用瀏覽器打開分析的鏈接。右鍵”檢查“---》network---》XHR,查看請求的數量是否與other統計的一致。
<2>不應該把過多的請求處理放在前段去做,否則會耗時太多。可以將這些處理放在后端實現。
《4》Script和Stylesheet:可以看到Script為7,Stylesheet為0,跟開發溝通后的結果是CSS的樣式也寫在了JS中,並未做分離。
要求:一般情況下Script和Stylesheet會隔離開寫。在頁面加載時會優先加載CSS,再次加載js腳本。已此來節省時間
《5》注意點:雖加載此頁面時你看到了此頁面未使用的腳本或者樣式。但是此部分內容可能是公共項,因此同樣會加載出來。
重要提示:
1、將測試的結果可與對應的開發溝通。查看測試結果和優化項是否適合你們的項目。並且已此來做參考項優化代碼,提升頁面加載速度
2、頁面的加載速度相關連性:網絡的帶寬(2G、3G、4G)、后端的慢請求、前段或者客戶端工程師實際可優化的項。此3個內容加起來決定着一個頁面的請求加載速度。