網(wǎng)頁(yè)的載入時(shí)間:一秒鐘幾十萬(wàn)上下

申請(qǐng)免費(fèi)試用、咨詢電話：400-8352-114

Amazon 的網(wǎng)頁(yè)載入時(shí)間每多一秒，該公司的年度營(yíng)收就減少 16 億美元;Google 的搜索時(shí)間每多 0.4 秒，每天的搜尋次數(shù)就會(huì)減少 8 百萬(wàn)。這些都告訴我們網(wǎng)頁(yè)的載入時(shí)間長(zhǎng)短非常重要，而 i黑馬 先前也寫過(guò)一篇“科技發(fā)展使人們開始失去耐心?”談?dòng)捌妮d入時(shí)間與使用者行為的關(guān)系，那么網(wǎng)頁(yè)的載入時(shí)間是不是也是這樣子呢?

Cucumbertown 用了許多不同的策略，以確保網(wǎng)頁(yè)可以在 2 秒內(nèi)載完，最多 3 秒。我們非常熱衷于改善這件事，甚至還設(shè)定了一些提醒機(jī)制以防載入時(shí)間超過(guò) 3 秒。

然而，就在 Chris Zacharias 寫了“Page Weight 很重要(Page Weight 只的不單是網(wǎng)頁(yè)檔案大小，還包括網(wǎng)頁(yè)自動(dòng)執(zhí)行的動(dòng)作多寡等)”(注一)這篇文章之前，一封 Google Analytics 寄來(lái)的信通知了我們，網(wǎng)頁(yè)的載入時(shí)間超過(guò)了 20 秒，我們立刻放下手邊的一切去找出究竟發(fā)生了什么事。

通常網(wǎng)頁(yè)載入的延遲發(fā)生之后，就會(huì)馬上被隨機(jī)測(cè)試或是我們的重度使用者給發(fā)現(xiàn)，但這次并沒(méi)有，提醒機(jī)制甚至隔了一天才啟動(dòng)。這把你嚇壞了，一個(gè)你還沒(méi)有搞清楚的未知問(wèn)題，比起一些大的臭蟲來(lái)說(shuō)更加危險(xiǎn)。

我們便開始進(jìn)行探測(cè)，而結(jié)果就如下圖所看到的：

當(dāng)然，Google Analytics 分析了平均載入時(shí)間，而這分析影響了結(jié)果。但將這與其他分析結(jié)果放在一起看，似乎還是可以得出一些結(jié)果。Cucumbertown 的連結(jié)被放在一個(gè)奈及利亞的美食頻道和一個(gè)泰國(guó)的知名博客上，導(dǎo)致大量的流量湧入。網(wǎng)頁(yè)載入速度在這些國(guó)家就如同你所看到的，可笑的慢。

我們的 Cucumbertown 是一個(gè)內(nèi)容很多的網(wǎng)站，即便利用 requireJS 延遲以及基于使用者需求來(lái)載入 JavaScript，與網(wǎng)頁(yè)腳本載入有關(guān)的成本還是相當(dāng)顯著。即便載入文件物件模型(Document Object Models)都要花時(shí)間。

在美國(guó)地區(qū)的網(wǎng)頁(yè)載入時(shí)間為 2.5 秒證實(shí)了這件事，DSL 裝置的 43 毫秒載入時(shí)間普及全球(注二)，現(xiàn)在是時(shí)候開始考慮內(nèi)容傳遞網(wǎng)絡(luò)(Content Delivery Network)了。

我們?cè)?Zynga 一開始是依賴 Akamai(編按：作者為前 Zynga 資深軟件工程師)，隨后換成 LimeLight 。但最近我們發(fā)現(xiàn) CloudFlare 在 Hacker News 上有一些活動(dòng)，而且他們提供的功能也很吸引人去一探究竟，于是我就決定做個(gè)小小嘗試。

現(xiàn)在這個(gè)博客(gigpeppers)就是通過(guò) CloudFlare 來(lái)提供的服務(wù)，并透過(guò)內(nèi)容傳遞網(wǎng)絡(luò)來(lái)傳遞內(nèi)容。當(dāng)網(wǎng)站有大量的流量湧入的時(shí)候，這個(gè)模式帶來(lái)的體驗(yàn)非常的棒，但如果沒(méi)有持續(xù)的請(qǐng)求時(shí)，這個(gè)模式反而會(huì)讓之后的網(wǎng)頁(yè)載入效率變差，但效率依然還是可以漸漸回到 1.5~2 秒之間。(編按：有點(diǎn)類似靜摩擦力的啟動(dòng)阻力比動(dòng)摩擦力還要大的概念。)

我依然認(rèn)為內(nèi)容傳遞網(wǎng)絡(luò)是一種企業(yè)用的昂貴方式。但我們這樣一個(gè)新創(chuàng)公司現(xiàn)在就正在使用，并把服務(wù)提供給全世界，而且這似乎是一個(gè)很重要的解決方法。

(注一)Page Weight Matters

(注二)What the FCC’s new metrics tell us about U.S. broadband

Via i黑馬 By Eason