鄭州SEO優化公司

Google網站速度優化工具-Page Speed使用手冊

瀏覽:/ 2014-06-06

什麽是 Page Speed?
Page Speed 是開源 Firefox/Firebug 插件。網站管理員和網絡開發人員可以運用 Page Speed 來評價他們網頁的功能,並取得有關如何改良功能的建議。
上麵是Google官方引見Page Speed的功用,以及站長如何運用Page Speed進步網站功能

Page Speed 是如何任務的?
Page Speed 對網站的網絡效勞器配置和前端代碼執行若幹測試。這些測試基於一組已知可加強網頁功能的最佳理論。在網頁上運轉 Page Speed 的網站管理員會取得一組針對各網頁的分數,以及有關如何改善網頁功能的有用建議。
為什麽要運用 Page Speed?

應用 Page Speed,您可以:
使您的網站更疾速;
使互聯網用戶一直關注您的網站;
增加您的帶寬本錢和托管本錢;
改善網絡!


Page Speed的裝置

以火狐閱讀器為例子:首先,在火狐的附件組建,下搜索裝置firebug,之後“”插件停止裝置.

Page Speed的運轉

在運轉Page Speed這個工具時,它會基於頁麵的情況生成剖析後果。為了確保最準確的剖析後果,你最好在頁麵完全載入完成後再運轉Page Speed。 否則,Page Speed無法剖析那些還沒有載入的資源的狀況,或許你可以選擇激活,當載入完成後自動運轉選項 而讓Page Speed在任何頁麵載入完成後自動停止剖析。 詳細可參照下文:

· 運轉Firefox;
· 選擇 工具 > Firebug > 翻開Firebug;
· 在FireBug窗口中, 選擇 Page Speed 頁簽。

拜訪你需求停止剖析的頁麵。等到閱讀器形態欄裏顯示完成,並且進度條消逝的時分開端運用Page Speed,假如頁麵上由於有流媒體視頻而沒有顯示完成信息的狀況下,等到視頻開端播放時就可以開端運用Page Speed了。

點擊功能剖析(Analyze Performance),當頁麵剖析完成時,Page Speed會顯示 網頁功能最佳理論 的列表和以後頁麵針對每項後果的得分, 後果是依照以後頁麵的重要性和優先級陳列的。

接上去就可以做以下這些事情了:

· 點擊翻開恣意規則來看可改良的建議;
· 點擊任何規則的標題來看針對該規則的文檔;
· 點擊 資源展現以後頁麵援用的資源的詳細列表;
· 選擇導出 > 生成JSON文件 把剖析後果導出成為JSON格式的文件;
· 選擇導出 > 發送得分到www. showslow.com 把剖析的得分傳送給show slow網站,show slow是一個開源的基於web的工具,用來搜集從Page Speed取得的功能參數。假如想曉得更多關於發送給Show Slow的數據的信息的話,可以參考Page Speed開源項目的 minimalBeacon頁麵上的Beacon文檔。

關於Page Speed功能得分的注解
關於每個規則,Page Speed都會給出針對性的改良建議,並且會給以後頁麵一個基於一些要素的算法的”分數”,當然它也會給出以後頁麵的一個全體功能得分。
關於每個規則得分的注解
關於每個規則,都會有兩種得分: 一個100以內的數字分數;和一個綠、黃、紅的顏色分數,數字分數是一種原始得分,用來標注以後頁麵在以後規則下的表現, 得分基於某些量化的維度,例如:DOM元素的總數、 或許下載的文件數、顏色分數是綜合了數字得分和該條規則的權重,這是一個綜合了潛在影響要素和施行難度的複合參數。這就意味著沒無數值得分和顏色得分之間一對一的對應關係,比方,一個得分是0/100的狀況轉換到顏色得分是是一個黃色的顏色分值,假如該條規則的權重沒有那麽高的話。因而,你應該總是以顏色分數作為更威望的判別根據。
以下是顏色得分的闡明:

· 高優先級(白色原點): 這些建議意味著絕對小的開發本錢就能換來十分大的潛在功能提升,你應該首要關注這些條目;
· 中優先級(白色三角形):這些建議意味著較小的產出或許比擬大的施行難度,你該當主要關注這些條目;
· 情況良好的或許低優先級的(綠色勾):假如有顯示相關建議的 (顯示一個+號),那他們或許隻要十分小的產出,你可以在你完成了更高優先級的建議之後再來審視這些條目。
· 僅僅隻是些信息(藍色歎號),能夠是這些條目無法在以後頁麵使用或許在測試進程中出了些小成績。

提示:假如你測試的後果中有少量的信息的話,很能夠是由於你在完全載入前就試著剖析這個頁麵了, 這時可以點擊 重新剖析 來重新停止頁麵剖析。
關於總體得分的注解
Page Speed還給出了一個總體的數字得分和顏色得分,數字得分是以後頁麵一切數字得分的結算後果,基於一切規則的權重(包括和藍色的信息, 就是沒有得分的條目)。顏色得分是基於綠、黃、白色後果的數量依據一定規則計算出來的。
記載活動
Page Speed 活動麵板展現了一切閱讀器活動的工夫線,包括了網絡事情和JavaScript處置,你可以依據這個麵板結合Page Speed的功能剖析後果和真實的計時數據進一步剖析你的頁麵。
留意: Page Speed活動的特性和HTTPWatch不兼容,在運用它之前,要保證禁用掉HTTPWatch:在Firefox中,可以經過工具 > 附加組件,從附加組件的列表中,點擊禁用HTTPWatch。
留意Page Speed 活動麵板會顯示閱讀器一切線程的閱讀器事情,那我們可以經過上麵的步驟讓它隻記載單頁麵的活動。
如何記載單頁麵活動:
啟動(重啟) Firefox並封閉一切的頁簽。
1、肅清閱讀器緩存;
2、經過在地址欄輸出 about:blank 來拜訪一個空白頁麵以肅清一切會被記載的閱讀器活動;
3、選擇 工具 > firebug > 翻開firebug;
4、在Firebug窗口中,選擇 Page Speed活動 頁簽;

5、點擊 記載活動;
6、拜訪你想要記載的頁麵,事情就以工夫線的方式顯示出來了;

7、任何工夫想要檢查後果的話,隻需求點擊 中止 讓挪動的工夫線中止上去。
提示:你也可以運用鍵盤的快捷方式來中止記載: Linux和Mac OS X上用Ctrl+R,Windows上用Alt+R。鼠標挪動到資源信息上可以經過信息提示的方式檢查資源的相對地址。
8、要理解展現出來的工夫的更多信息請持續往下看。
Page Speed活動事情的注解
活動麵板依據工夫線展現閱讀器事情,以後頁麵所需求的每個資源都會被記載。以10毫秒的頻率記載事情,假如閱讀器事情沒有運用完好的10毫秒的話,事情會以比擬淡的暗影展現,在工夫線中被展現成沒有顏色的區塊意味著閱讀器正在處置其他的進程,比方DOM和CSS的解析, Flash ActionScript進程, 繪製, 操作零碎工夫等等。
上麵的表格詳細的描繪了事情類型:
網絡事情

· DNS:閱讀器正在執行DNS查詢資源的進程
· Wait:閱讀器正在等候樹立和網絡效勞器之間的網絡(TCP)銜接。由於閱讀器限製了銜接的下限,並不斷處於翻開形態,假如抵達了限製的下限的話,那閱讀器就必需等候有一個銜接封閉才幹重新翻開一個銜接。(假如想理解更多的閱讀器銜接信息, 可以參考後續的跨域名並行下載。) 這個事情顯示了閱讀器等候其他事情完畢的工夫。
· Connect:閱讀器和網絡效勞器之間正在樹立網絡(TCP)銜接。這個事情隻會呈現在發生新的銜接時,而不會呈現在銜接被重用時。
· Send:閱讀器曾經發送了HTTP懇求,僅僅是GET類型的懇求會被展現。
· Connected:閱讀器正在等候網絡數據傳輸,閱讀器完畢TCP銜接時這個事情完畢。假如資源顯示了漫長的已銜接形態就意味著可以經過優化來增加荷載大小以取得更好的收益,比方緊縮。

本地事情

· Cache Hit:閱讀器成功的在緩存中定位到資源。
· Data Available:數據可被閱讀器解析。當網絡效勞器少量前往數據時嗎,假如數據是個很大的文件時,很多這樣的事情會展現在單個資源上。
· Paint:閱讀器正在渲染頁麵上的元素。
· JS Parse:閱讀器正在解析JavaScript,這個事情可以和其他事情堆疊,當這種狀況發作時,這個事情以子行的方式在這個資源上展現。
· JS Execute:閱讀器正在執行 JavaScript,這個事情可以和其他事情堆疊,當這種狀況發作時,這個事情以子行的方式在這個資源上展現,假如你能看到在JS解析和JS執行之間有固定的延遲,這意味著這個資源中包括的辦法能夠是延時的。

搜集完好的JavaScript辦法執行信息
默許形態下,Page Speed活動搜集淺調用圖,在每個調用堆棧的境地記載了辦法的進入和加入的工夫,這樣把監控的影響最小化,改良了工夫線的準確水平。但是,你能夠想要搜集完好的記載了一切辦法調用的執行圖。那顯示未被執行辦法的選項就可以滿足你的要求。
獲取一個未被調用辦法的列表,有些辦法被聲明(解析)但是在你中綴記載之前都沒有被調用。
獲取一個可延遲的辦法列表,有些辦法在你中綴記載之前被調用了,它會顯示每個辦法實例化的工夫和初次調用的工夫之間的差值,以從最大到最小的方式陳列。
在Linux和Mac OS X零碎下,可以把完好的辦法調用樹,包括理解析和聲明的工夫的信息以Protocol buffer的格式保管到磁盤上的文件中,那麽你可以對這些調用圖停止更深化的剖析,可以看後續的活動麵板保管文件 以取得更多的關於文件的格式和如何從中獲取數據的辦法的信息。
比方:上麵的截圖是攝於7800ms,並且展現了在那個點上沒有被調用的辦法的列表, 以及它們被解析的工夫:

上麵的截圖攝於7800ms,顯示了在那個點上已被調用了的辦法的列表,依照從最大到最小延遲的順序展現;就是這些辦法從解析到第一次調用的工夫差從最大到最小的排序。

如何記載單個頁麵的活動和搜集完好的執行圖:

啟動(重啟)Firefox並且封閉一切的頁簽;
肅清閱讀器的緩存;
經過在地址欄輸出 about:blank 來拜訪一個空白頁麵以肅清一切會被記載的閱讀器活動;
選擇 工具 > firebug > 翻開firebug;
在Firebug窗口中,選擇 Page Speed活動頁簽,點擊下拉箭頭來展現一個選項彈出菜單;
在彈出菜單中,選擇完好執行視圖;
點擊記載活動;
拜訪你想要記載的頁麵,事情以工夫線的方式被顯示。

在任何時分, 做以下恣意事情(會中綴記載):

· 點擊顯示沒有執行的辦法 來展現還沒有被執行到的辦法列表;
· 點擊顯示延遲的辦法來展現被執行了但是延遲了的辦法列表(提示: 把鼠標挪動到 原型 列經過提示框的方式可以看到辦法的完好定義);
· 點擊保管將辦法的完好調用數經過protocol buffer格式保管到文件(在window下有效)

檢查繪製快照
從Page Speed 1.3(Firefox 3.5)開端,活動麵板還可以展現出閱讀器如何逐漸渲染一個頁麵的快照。當繪製快照是激活形態的,並且你開端記載活動時,Page Speed用黃色高亮顯示出它曾經渲染完成的元素,以灰色顯示的元素表示的是在以後窗口下沒有滾動滾動條的狀況下看不到的那局部元素,你可以用這些快照來協助處理逐漸渲染中發生的成績,優化頁麵上元素的渲染,假如想曉得更多相關信息的話,可以檢查 運用Page Speed 活動捕獲和剖析閱讀器繪製事情。
例如,上麵的截屏顯示了文字和圖標元素最先被繪製,然後是表單輸出域,在然後是表單的按鈕:

如何記載活動和檢查繪製事情:

啟動(重啟)Firefox並且封閉一切的頁簽;
肅清閱讀器的緩存;
經過在地址欄輸出 about:blank 來拜訪一個空白頁麵以肅清一切會被記載的閱讀器活動;
選擇 工具 > firebug > 翻開firebug;
在Firebug窗口中,選擇 Page Speed活動 頁簽,點擊下拉箭頭來展現一個選項彈出菜單;
在彈出菜單中,選擇 繪製快照;
點擊記載活動;
拜訪你想要記載的頁麵,事情以工夫線的方式被顯示,繪製快照在左邊以一個別離的麵板展現。

在任何時分, 想要檢查後果, 點擊 中止 來中綴工夫線。

Page Speed初級選項

選擇 Page Speed 頁簽, 點擊下拉箭頭展現一個選項彈出菜單, 在那裏可以看到 Page Speed 的附加選項:

其中的每一項將在上麵停止解釋:
頁麵加載完成時自動運轉
這個選項可以讓 Page Speed 可以在頁麵加載完成的同時開端自動剖析,隻需這個選項是被激活的,Page Speed會在後續拜訪的每個頁麵中自動執行。
如何讓Page Speed 在頁麵載入完成時自動運轉:

· 翻開Firefug,選擇 Page Speed 頁簽,然後點擊下拉箭頭展現一個選項彈出菜單;
· 在彈出菜單中,選擇 頁麵加載完成時自動運轉;
· 拜訪你想要剖析的頁麵,當頁麵完成加載時,Page Speed 就開端自動剖析了。

記載延遲的JavaScript
這個選項用來測試延遲加載的JavaScript,它普通是默許封閉的,這個測試從Firefox的JavaScript調試器中搜集JavaScript掩蓋的範圍內反省以後頁麵中在 onload 事情觸發時哪些辦法被調用,哪些沒有,調試器效勞在單塊全局內存中跟蹤完好的Firefox Session的形態,這個形態不是基於每個頁麵的加載,也不會在頁麵被重載時肅清,這意味著你在firefox 一次會話中第一次拜訪這個頁麵時,記載器會準確的算出的得分,但是假如你持續運用這個頁麵,額定的JS被載入和執行,記載器就不會後續報告準確的後果了。而且,假如多個頁麵援用了同一個外鏈JS文件的話,記載器隻會報告其中第一頁麵的後果。
為了保證你的功能得分的準確性, 你必需在剛翻開Firefox時就要啟用它:

啟動(重啟) Firefox;
選擇 工具 > firebug > 翻開firebug;
在firebug窗口中,選擇 Page Speed 頁簽,然後點擊下拉箭頭展現一個選項彈出菜單;
在彈出菜單中,選擇 記載延遲的JavaScript;
拜訪你想要剖析的頁麵;
當頁麵完成加載後, 點擊 剖析功能;
想要在另一個頁麵下運用記載器的話,封閉Firefox偏重啟順序。

留意:這個選項會讓Firefox變慢甚至會讓Firefox宕機,特別是你想要用多頁簽閱讀,建議直到你預備好運用它再激活它,並且在用完後馬上禁用它。
保管優化好的文件
Page Speed會在剖析頁麵的時分自動優化頁麵上援用的 JavaScript,CSS以及圖片, 默許形態下, 優化好的文件會保管到如下目錄:

· Linux: /tmp/page-speed-[css | javascript | images]/
· Windows: C:\Documents and Settings\username\Local Settings\Temp\page-speed-[css | javascript | images]\
· Mac OS X: /Users/username/Library/Caches/page-speed=[css | javascript | images]/

但是,你可以更改Page Speed保管文件的途徑:

翻開Firebug,選擇 Page Speed 頁簽,然後點擊下拉箭頭展現一個選項彈出菜單;
在彈出菜單中,選擇 保管優化後的文件到,然後從預定義選項中選擇一個目錄,或許選擇一個自定義途徑來製定一個途徑。

設置用戶代理
Page Speed是經過頁麵在Firefox中載入來評判得分的,但是,為了順應更多的閱讀器行為,很多網站針對用戶本身的閱讀器提供了不同的內容,網絡效勞器會依據閱讀器發送的每個懇求中的用戶代理字符串來反省收回懇求的閱讀器,假如你的網站會依據用戶代理來輸入不同的內容,而你又想要Page Speed針對不同閱讀器來給出評定,那你可以運用 設置用戶代理 選項。
留意一個頁麵是在其他閱讀器下任務,那他不一定可以在Firefox下任務,所以能夠存在的狀況是你運用不同的用戶代理記載下的記載不一定是用戶端運用同一個用戶代理的閱讀器所看到的後果。但是,通常狀況下,這些差別隻是點綴門麵用的,所以 Page Speed給出的建議異樣適用。
如何選擇不同的用戶代理:

翻開Firebug, 選擇 Page Speed 頁簽,然後點擊下拉箭頭展現一個選項彈出菜單;
選擇 顯示一切用戶代理 來看看其他的用戶代理選項;
在彈出窗口菜單中,選擇你想要測試的用戶代理;
當頁麵載入完成後,點擊剖析功能;
要先擇其他的用戶代理, 請反複第2到第4步。

留意:用戶代理選項在某些頁麵會形成Firefox宕機. 所以我們引薦在根底使用中保存默許的設置。

Page Speed的卸載


在Firefox中,選擇 工具 > 附加組件;
再呈現的窗口中選擇 Page Speed 並點擊 卸載;
重啟Firefox。

閱讀"Google網站速度優化工具-Page Speed使用手冊"的人還閱讀

上一篇:返回列表

下一篇:Google網站分析工具功能詳解

Google網站速度優化工具-Page Speed使用手冊資訊