■鐵生

工程師關(guān)于提升Web性能的建議

■鐵生

在互聯(lián)網(wǎng)盛行的今天，越來(lái)越多的在線用戶希望得到安全可靠并且快速的訪問(wèn)體驗(yàn)。針對(duì)Web網(wǎng)頁(yè)過(guò)于膨脹以及第三腳本蠶食流量等問(wèn)題，Radware向網(wǎng)站運(yùn)營(yíng)人員提出以下改進(jìn)建議，幫助他們?yōu)橛脩籼峁┳羁熳顑?yōu)質(zhì)的訪問(wèn)體驗(yàn)。

1.管理“頁(yè)面膨脹”

頁(yè)面大小與性能有著密切的關(guān)系。據(jù)調(diào)查顯示，100強(qiáng)電商頁(yè)面大小中位數(shù)達(dá)到了1492KB，比一年半之前增大了48%。

在研究報(bào)告里加載最快的10個(gè)頁(yè)面中，頁(yè)面包含的資源請(qǐng)求中位數(shù)為50個(gè)，頁(yè)面大小中位數(shù)為556KB。而加載最慢的10個(gè)頁(yè)面中，頁(yè)面包含的資源請(qǐng)求中位數(shù)為141個(gè)，頁(yè)面大小中位數(shù)為3289KB。換句話說(shuō)，加載最慢的頁(yè)面的資源中位數(shù)幾乎是加載最快的頁(yè)面的三倍，頁(yè)面大小則是六倍。

仔細(xì)研究頁(yè)面尺寸大小，我們可以得到更多的信息。加載最快的10個(gè)頁(yè)面所包含的資源總數(shù)范圍比較密集：在15個(gè)～72個(gè)之間；頁(yè)面尺寸最小的僅為251KB，最大的2003KB。而加載最慢的10個(gè)頁(yè)面所包含的資源總數(shù)范圍則比較廣泛：在89個(gè)～373個(gè)之間；頁(yè)面尺寸最小為2073KB，最大的則超過(guò)了10MB。

2.進(jìn)行圖像優(yōu)化

圖像是造成頁(yè)面膨脹的罪魁禍?zhǔn)字?，通常占?jù)頁(yè)面字節(jié)數(shù)的50-60%。在頁(yè)面中添加圖片或是將現(xiàn)有圖片放大，是迅速獲取用戶并提高業(yè)務(wù)轉(zhuǎn)化率的有效方式。但是這種方法會(huì)對(duì)性能造成嚴(yán)重的影響。

進(jìn)行圖像優(yōu)化是提升性能最簡(jiǎn)單的一種方法，它可以使頁(yè)面加載更快。為了更有效的完成圖像渲染，圖像必須經(jīng)過(guò)壓縮和整合、圖像的尺寸和格式必須經(jīng)過(guò)仔細(xì)調(diào)整，圖像質(zhì)量也必須經(jīng)過(guò)優(yōu)化，這樣才可以依據(jù)圖像的重要性進(jìn)行區(qū)別化的加載處理。

3.控制第三方腳本

在典型的頁(yè)面服務(wù)器請(qǐng)求中，來(lái)自于第三方腳本的請(qǐng)求占了其中的50%或更多。這些第三方腳本不僅會(huì)增加頁(yè)面的字節(jié)數(shù)，帶來(lái)延遲，而且也會(huì)成為Web頁(yè)面中最大的潛在故障點(diǎn)。無(wú)響應(yīng)、未經(jīng)優(yōu)化的第三方腳本會(huì)降低整個(gè)網(wǎng)絡(luò)的加載速度。

解決辦法是延遲第三方腳本的加載，將其放在關(guān)鍵頁(yè)面內(nèi)容之后進(jìn)行加載，更為理想的情況是放在頁(yè)面onLoad事件之后加載，這樣才不會(huì)影響企業(yè)的搜索排名(谷歌將onLoad事件作為加載時(shí)間指標(biāo))。對(duì)于一些分析工具和第三方廣告商而言，如果延遲第三方腳本加載的方法不可行，可以利用腳本的異步版本，與關(guān)鍵內(nèi)容的加載同步進(jìn)行。用戶必須了解網(wǎng)站中有哪些腳本，刪除那些無(wú)用的腳本，并對(duì)第三方腳本的性能進(jìn)行持續(xù)監(jiān)控。

4.真正做到移動(dòng)設(shè)備優(yōu)先

“移動(dòng)設(shè)備優(yōu)先”并不是一個(gè)全新的概念。早在2013年，移動(dòng)設(shè)備的使用量就已經(jīng)超過(guò)了臺(tái)式機(jī)，然而與眾多口頭承諾的移動(dòng)性能相比，真正專注于移動(dòng)設(shè)備的開發(fā)還是存在一定的差距。例如，2011年11月，移動(dòng)設(shè)備上的平均頁(yè)面大小為475KB，現(xiàn)在則增長(zhǎng)至897 KB。也就是說(shuō)，在短短三年之間，平均頁(yè)面大小幾乎翻了一番。

盡管移動(dòng)設(shè)備和網(wǎng)絡(luò)取得了一些進(jìn)展，但就性能而言，還是無(wú)法與大小已接近1MB的服務(wù)頁(yè)面需求保持同步。我們知道，頁(yè)面大小與加載時(shí)間息息相關(guān)，移動(dòng)用戶對(duì)緩慢的加載速度尤其敏感。如果企業(yè)希望網(wǎng)站可以真正做到“移動(dòng)設(shè)備優(yōu)先”，就必須正確處理這些問(wèn)題。

5.在進(jìn)行響應(yīng)式Web設(shè)計(jì)時(shí)兼顧性能

響應(yīng)式設(shè)計(jì)讓設(shè)計(jì)人員和開發(fā)人員可以更好地控制Web頁(yè)面的外觀和感覺。它可以使跨多平臺(tái)和設(shè)備上的頁(yè)面變得更漂亮。但同時(shí)也會(huì)帶來(lái)巨大的性能損失，這些性能損失并不能通過(guò)更快速的瀏覽器、網(wǎng)絡(luò)和小工具得到緩解。而且隨著時(shí)間的推移，這樣影響還將持續(xù)惡化。

響應(yīng)式設(shè)計(jì)建立在樣式表和JavaScript之上。然而，低效的CSS和JS所帶來(lái)的性能問(wèn)題遠(yuǎn)遠(yuǎn)大于其設(shè)計(jì)優(yōu)勢(shì)給我們帶來(lái)的好處。樣式表應(yīng)當(dāng)放在HEAD文檔中，用以實(shí)現(xiàn)頁(yè)面的逐步渲染。然而，樣式表卻經(jīng)常出現(xiàn)在頁(yè)面其它位置，這就阻礙了頁(yè)面的渲染速度。換句話說(shuō)，JavaScript文件應(yīng)當(dāng)放在頁(yè)面底部或在關(guān)鍵內(nèi)容加載完成之后再被加載才是合理的處理方式。

6.實(shí)時(shí)監(jiān)控性能

大家都知道要解決一個(gè)問(wèn)題就必須先對(duì)問(wèn)題有充分的了解。要解決頁(yè)面性能問(wèn)題，企業(yè)就必須知道用戶在什么時(shí)候可以看到主要頁(yè)面內(nèi)容并與之進(jìn)行交互；同時(shí)，企業(yè)還需了解性能和可用性問(wèn)題是如何影響業(yè)務(wù)指標(biāo)的。企業(yè)需要有方法獲取實(shí)際的性能指標(biāo)并對(duì)其進(jìn)行分析。實(shí)時(shí)用戶監(jiān)控(RUM)工具可以從真實(shí)用戶的角度實(shí)時(shí)獲取、分析并記錄網(wǎng)站的性能和可用性。

7.切勿過(guò)分依賴CDN解決所有性能問(wèn)題

使用內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)的網(wǎng)站完成主要內(nèi)容渲染所需的時(shí)間比未曾使用CDN的網(wǎng)站要長(zhǎng)的多。這是一個(gè)相關(guān)性問(wèn)題，而非因果關(guān)系：通常情況下，相較于未使用CDN的網(wǎng)站，使用CDN的網(wǎng)站頁(yè)面更大，也更復(fù)雜。頁(yè)面的大小和復(fù)雜程度才是造成性能問(wèn)題的元兇，而非CDN。但這一結(jié)果也表明，僅依靠CDN并不能解決所有的性能難題。

如果部署得當(dāng)，CDN會(huì)是解決延遲問(wèn)題非常有效的工具：縮短托管服務(wù)器接收、處理并響應(yīng)圖像、CSS文件等頁(yè)面資源請(qǐng)求所需的時(shí)間。但是，延遲僅僅只是現(xiàn)代電商網(wǎng)站的關(guān)鍵問(wèn)題之一。為了實(shí)現(xiàn)最佳的加速效果，網(wǎng)站運(yùn)營(yíng)人員可以采用組合解決方案：CDN+前端優(yōu)化+應(yīng)用交付控制器和內(nèi)部管理。

8.在企業(yè)內(nèi)部加強(qiáng)Web性能觀念的宣傳

大量研究證明，提高頁(yè)面速度可以對(duì)所有的關(guān)鍵性能指標(biāo)產(chǎn)生積極影響：頁(yè)面訪問(wèn)量、用戶粘連度、業(yè)務(wù)轉(zhuǎn)化率、用戶滿意度、客戶保持、購(gòu)物車的內(nèi)容多少和收入。

然而，正如上述建議中所表明的那樣，許多企業(yè)都犯了同樣的錯(cuò)誤，最終損害了Web性能。目前，企業(yè)應(yīng)該重點(diǎn)解決Web開發(fā)目標(biāo)和在線業(yè)務(wù)目標(biāo)之間的差距問(wèn)題，而且，每個(gè)企業(yè)都應(yīng)該至少擁有一個(gè)內(nèi)部性能專家，以便更好的解決Web性能問(wèn)題。