H5--性能測試(PageSpeed Insights )


中文網站(不需要翻牆): 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個內容加起來決定着一個頁面的請求加載速度。

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM