前端SPOF調查

SPOF是指單點故障,其現象是 HTML文檔已經加載完畢,但其他資源例如(CSS,JS,字體文件)等加載出現了阻塞,導致頁面空白20秒甚至更長的時間!

前端SPOF最頻繁出現的原因是第三方內容,如果主站成功返回HTML文檔,從主站返回的其他相關資源應該都成功返回,但第三方內容往往不是由主站控制,因此會出現不可預期的錯誤,所以一個網站的第三方資源不應該在主站資源之前被加載,這將有可能引起前端SPOF。

在我的博客中,我曾經提及如何模擬前端SPOF以及如何避免它。但我沒有爲網站開發者提供一個方法去檢查網站是否存在前端SPOF的可能。Pat Meenan 建立了一個公共的黑洞服務器:blockhole.webpagetest.org72.66.115.13 。把網站用到的第三方資源指向這個IP,並刷新頁面就可以檢查出你的頁面是否存在前端SPOF。

以下是一些常用的第三方資源host,我已經把他們指向了Pat Meenan提供的黑洞服務

72.66.115.13 apis.google.com

72.66.115.13 www.google - analytics.com

72.66.115.13 connect.facebook.net

72.66.115.13 platform.twitter.com

72.66.115.13 s7.addthis.com

72.66.115.13 l.addthiscdn.com

72.66.115.13 cf.addthis.com

72.66.115.13 API - public.addthis.com

72.66.115.13 widget.quantcast.com

72.66.115.13 ak.quantcast.com

72.66.115.13 assets.omniture.com

72.66.115.13 www.omniture.com

72.66.115.13 scripts.omniture.com

72.66.115.13 b.voicefive.com

72.66.115.13 ar.voicefive.com

72.66.115.13 c.statcounter.com

72.66.115.13 www.statcounter.com

72.66.115.13 WWW - beta.statcounter.com

72.66.115.13 js.revsci.net

修改你的/etc/host文件保存後,重啓你的瀏覽器,這些資源將全部超時。Pat在文章中提到的20秒時間是因爲window系統運行的,而我在Macbook中運行的超時時間是75秒,任何使用了這些第三方資源的網站將會被堵塞75秒。

調查結果

配置完成後,我訪問了 美國前100家網站,令我感到驚喜的是,排名前20的網站沒有受到前端SPOF的影響,其中幾個網站他們雖然使用了這些第三方資源,但是他們存放在自己的域名下並自行維護。

MSN.com

引用ar.voicefive.com ,但它使用了document.write技術異步 。

AOL

引用platform.twitter.com,但把請求放在body最低底部,沒有影響頁面加載

IMDB

使用Google Analytics(分析)的異步版本,並把 platform.twitter.com 的widget放在在iframe中

LiveJournal

通過一個自行開發的異步加載器加載 Gooogle +1 和 Facebook插件

在前100名網站中我發現有5個存在前端SPOF

CNET

在HEAD加載了http://platform.twitter.com/widgets.js

StumbleUpon

在BODY頂部加載了http://connect.facebook.net/en_US/all.js

NFL

在HEAD加載了http://connect.facebook.net/en_US/all.js

Hulu

在HEAD加載了Google Analytics腳本

Expedia

在BODY中間加載了http://connect.facebook.net/en_US/all.js,導致右半邊空白

這些結果雖然比我預想的好,但仍然令人震驚。雖然我只找到5個網站,前端SPOF的總體樣本的5%。這一比例將有可能成爲指標,因爲減少加載量最好的做法是更廣泛地採用頂級網站提供的服務。另外,這份HOST只包括一部分常用的第三方資源而且我在這次測試中並沒有考慮 廣告是否加載。

讓您的網站因爲一個小小的widget按鈕或者一個分析腳本而無法訪問是否值得,特別是這個問題是可以被解決的時候。如果你是上述5個網站之一,爲了你和你的用戶,想辦法解決前端SPOF吧。如果你的排名在100之外,請通過編輯你的HOST 使用 Pat Meenan 的黑洞服務器去測試你的網站是否存在前端SPOF,並遵循WebPagetest.org的提示。

原文:http://article.yeeyan.org/view/258596/225158


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章