天天看點

Chrome對網頁性能的檢測--2015-05-05總結

Chrome浏覽器非常強大,使用Chrome浏覽器對頁面性能進行檢測,根據測試的結果進行優化。當然這個結果隻是參考,在實際的項目中肯定有特殊情況存在,并不能為了滿足某項測試結果而忽略特定情況的存在。

F12之後點選Audits然後出現了如下界面,選中重載頁面開始檢測按鈕,然後點選Run按鈕,之後就是等待結果。

Chrome對網頁性能的檢測--2015-05-05總結

這個檢測結果分為2類,一個是網絡,一個是網頁性能;

Chrome對網頁性能的檢測--2015-05-05總結

檢測結果不僅列出了問題,還定位問題在哪裡,可以很快入手解決對應的問題。

問題一:總共有29個可以壓縮的JS檔案

Chrome對網頁性能的檢測--2015-05-05總結

合并JS檔案:Combine external JavaScript

There are multiple resources served from same domain. Consider combining them into as few files as possible.一個域名有多個檔案,可以考慮将他們壓縮為盡可能少的檔案。

Chrome對網頁性能的檢測--2015-05-05總結

啟用gzip壓縮:Enable gzip compression

Compressing the following resources with gzip could reduce their transfer size by about two thirds (~715 B).啟用gzip壓縮降低傳輸大小。

Chrome對網頁性能的檢測--2015-05-05總結

浏覽器緩存:Leverage browser caching 

The following resources are missing a cache expiration. Resources that do not specify an expiration may not be cached by browsers。資源沒有指定過期時間,浏覽器可能不會緩存。

Chrome對網頁性能的檢測--2015-05-05總結

代理緩存:Leverage proxy caching (38) ?

Resources with a "?" in the URL are not cached by most proxy caching servers:

Chrome對網頁性能的檢測--2015-05-05總結

Minimize cookie size

The average cookie size for all requests on this page is 36 B

Chrome對網頁性能的檢測--2015-05-05總結

Serve static content from a cookieless domain (35)

12.8 KB of cookies were sent with the following static resources. Serve these static resources from a domain that does not set cookies:

Chrome對網頁性能的檢測--2015-05-05總結

Specify image dimensions (10)

A width and height should be specified for all images in order to speed up page display. The following image(s) are missing a width and/or height:

網頁性能部分

1、優化樣式和腳本的順序:Optimize the order of styles and scripts (4)

The following external CSS files were included after an external JavaScript file in the document head. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.

2、把CSS放到head中:Put CSS in the document head (3)

CSS in the document body adversely impacts rendering performance.

3、删除沒用的CSS:Remove unused CSS rules (44)

44 rules (19%) of CSS not used by the current page.

  4、Use normal CSS property names instead of vendor-prefixed ones (3)

繼續閱讀