在(zai)互聯網盛行的(de)今天，越(yue)來越(yue)多的(de)在(zai)線用戶希望得到安全可靠并且(qie)快(kuai)速的(de)訪問(wen)體(ti)驗(yan)。針對Web網頁過(guo)于(yu)膨脹(zhang)以及第三腳本蠶食流(liu)量等(deng)問(wen)題，Radware向網站運營人員提出以下改進建議，幫助(zhu)他們為用戶提供最快(kuai)最優(you)質的(de)訪問(wen)體(ti)驗(yan)。

1、 管理“頁面(mian)膨脹”頁面(mian)大(da)(da)小與性(xing)能(neng)有著密切的關系。據調查顯示，100強(qiang)電商頁面(mian)大(da)(da)小中位數達(da)到了1492KB，比一(yi)年半(ban)之前(qian)增大(da)(da)了48%。

在研究報告里加(jia)載最(zui)(zui)快的(de)(de)10個(ge)(ge)頁(ye)(ye)面中(zhong)，頁(ye)(ye)面包含的(de)(de)資(zi)源請求中(zhong)位(wei)(wei)(wei)(wei)(wei)數為(wei)(wei)50個(ge)(ge)，頁(ye)(ye)面大(da)(da)小中(zhong)位(wei)(wei)(wei)(wei)(wei)數為(wei)(wei)556KB。而加(jia)載最(zui)(zui)慢(man)的(de)(de)10個(ge)(ge)頁(ye)(ye)面中(zhong)，頁(ye)(ye)面包含的(de)(de)資(zi)源請求中(zhong)位(wei)(wei)(wei)(wei)(wei)數為(wei)(wei)141個(ge)(ge)，頁(ye)(ye)面大(da)(da)小中(zhong)位(wei)(wei)(wei)(wei)(wei)數為(wei)(wei)3289KB。換(huan)句話說，加(jia)載最(zui)(zui)慢(man)的(de)(de)頁(ye)(ye)面的(de)(de)資(zi)源中(zhong)位(wei)(wei)(wei)(wei)(wei)數幾乎是(shi)(shi)加(jia)載最(zui)(zui)快的(de)(de)頁(ye)(ye)面的(de)(de)三倍，頁(ye)(ye)面大(da)(da)小則是(shi)(shi)六倍。

仔細研究頁(ye)面(mian)尺(chi)寸大(da)小，我(wo)們可以得到(dao)更多的(de)信息(xi)。加載最(zui)快的(de)10個(ge)頁(ye)面(mian)所包含的(de)資(zi)源(yuan)總數范(fan)圍(wei)比(bi)較密(mi)集：在15個(ge)~72個(ge)之(zhi)間(jian)；頁(ye)面(mian)尺(chi)寸最(zui)小的(de)僅(jin)為(wei)251KB，最(zui)大(da)的(de)2003KB。而加載最(zui)慢的(de)10個(ge)頁(ye)面(mian)所包含的(de)資(zi)源(yuan)總數范(fan)圍(wei)則(ze)比(bi)較廣(guang)泛：在89個(ge)~373個(ge)之(zhi)間(jian)；頁(ye)面(mian)尺(chi)寸最(zui)小為(wei)2073KB，最(zui)大(da)的(de)則(ze)超過了10MB。

2、進行圖像優化

圖(tu)(tu)像(xiang)是(shi)(shi)造成頁面膨脹(zhang)的罪魁(kui)禍首(shou)之一，通常(chang)占據頁面字(zi)節(jie)數的50-60%。在頁面中添加圖(tu)(tu)片或(huo)是(shi)(shi)將現有(you)圖(tu)(tu)片放大，是(shi)(shi)迅速獲取用戶并提(ti)高(gao)業務轉(zhuan)化率的有(you)效方式。但是(shi)(shi)這種方法會對性能造成嚴重(zhong)的影(ying)響。

進(jin)行圖(tu)(tu)像(xiang)(xiang)(xiang)優化(hua)是提升性(xing)能最簡單(dan)的(de)一種方法，它可以使頁(ye)面加載更快。為(wei)了更有效的(de)完成圖(tu)(tu)像(xiang)(xiang)(xiang)渲(xuan)染，圖(tu)(tu)像(xiang)(xiang)(xiang)必須經(jing)過壓縮和(he)整(zheng)(zheng)合、圖(tu)(tu)像(xiang)(xiang)(xiang)的(de)尺(chi)寸和(he)格式必須經(jing)過仔細調整(zheng)(zheng)，圖(tu)(tu)像(xiang)(xiang)(xiang)質量也必須經(jing)過優化(hua)，這樣才可以依(yi)據圖(tu)(tu)像(xiang)(xiang)(xiang)的(de)重要(yao)性(xing)進(jin)行區別化(hua)的(de)加載處理。

3、 控制第三方(fang)腳本

在典型(xing)的(de)頁面服(fu)務器(qi)請(qing)(qing)求中(zhong)，來(lai)自于第(di)三方腳本的(de)請(qing)(qing)求占了其中(zhong)的(de)50%或更多(duo)。這些第(di)三方腳本不僅(jin)會增(zeng)加頁面的(de)字(zi)節數，帶來(lai)延(yan)遲(chi)，而(er)且也會成為Web頁面中(zhong)最大的(de)潛(qian)在故障點。無響應、未(wei)經優(you)化的(de)第(di)三方腳本會降低整個網(wang)絡的(de)加載速度。

解(jie)決辦法是延(yan)遲第三方(fang)(fang)(fang)腳(jiao)本(ben)(ben)的(de)(de)加載(zai)，將其(qi)放在關鍵(jian)頁(ye)面(mian)內容(rong)之后進(jin)行加載(zai)，更為(wei)(wei)理想的(de)(de)情況是放在頁(ye)面(mian)onLoad事件之后加載(zai)，這樣才不(bu)會影響企(qi)業的(de)(de)搜索排名(谷歌將onLoad事件作為(wei)(wei)加載(zai)時間指(zhi)標)。對于(yu)一些(xie)分析(xi)工具和第三方(fang)(fang)(fang)廣告(gao)商而言(yan)，如果延(yan)遲第三方(fang)(fang)(fang)腳(jiao)本(ben)(ben)加載(zai)的(de)(de)方(fang)(fang)(fang)法不(bu)可(ke)行，可(ke)以利(li)用(yong)腳(jiao)本(ben)(ben)的(de)(de)異步(bu)版本(ben)(ben)，與關鍵(jian)內容(rong)的(de)(de)加載(zai)同(tong)步(bu)進(jin)行。用(yong)戶必須了解(jie)網站中(zhong)有(you)哪些(xie)腳(jiao)本(ben)(ben)，刪除那些(xie)無(wu)用(yong)的(de)(de)腳(jiao)本(ben)(ben)，并對第三方(fang)(fang)(fang)腳(jiao)本(ben)(ben)的(de)(de)性能進(jin)行持(chi)續監(jian)控。

4、真正(zheng)做(zuo)到(dao)移動設備(bei)優先

“移(yi)(yi)動設備(bei)優先”并不是(shi)一(yi)(yi)個全新的(de)概念。早在2013年，移(yi)(yi)動設備(bei)的(de)使用量就(jiu)已經超過了臺式(shi)機，然而與(yu)眾多口頭承諾的(de)移(yi)(yi)動性能(neng)相(xiang)比，真正專注于移(yi)(yi)動設備(bei)的(de)開發(fa)還是(shi)存(cun)在一(yi)(yi)定的(de)差距(ju)。例如，2011年11月(yue)，移(yi)(yi)動設備(bei)上(shang)的(de)平(ping)均頁面大小為475KB，現(xian)在則增長至(zhi)897 KB。也就(jiu)是(shi)說，在短短三年之間，平(ping)均頁面大小幾乎翻了一(yi)(yi)番。

盡管移(yi)(yi)動(dong)設備和網(wang)絡(luo)取得了(le)一些(xie)進展，但(dan)就性(xing)能(neng)而言，還是無法與大(da)小已接近1MB的(de)服務頁(ye)面(mian)需求保持同步(bu)。我(wo)們知道，頁(ye)面(mian)大(da)小與加(jia)(jia)載時間息息相關，移(yi)(yi)動(dong)用戶對(dui)緩慢的(de)加(jia)(jia)載速(su)度(du)尤其敏(min)感(gan)。如果(guo)企業希(xi)望網(wang)站可以真正(zheng)做到“移(yi)(yi)動(dong)設備優先”，就必須正(zheng)確處理這些(xie)問(wen)題(ti)。

5、在(zai)進行響應(ying)式(shi)Web設計時兼顧性能(neng)

響應式設(she)(she)計讓設(she)(she)計人員(yuan)和(he)開發人員(yuan)可(ke)以更好(hao)地控制Web頁面的外觀和(he)感覺。它可(ke)以使(shi)跨多平臺(tai)和(he)設(she)(she)備上的頁面變得(de)更漂亮。但同(tong)時也會帶來巨(ju)大的性能損失，這(zhe)些性能損失并(bing)不(bu)能通過更快速的瀏覽器、網(wang)絡和(he)小工具得(de)到緩解。而且(qie)隨著時間的推移，這(zhe)樣(yang)影響還將持續惡化。

響(xiang)應(ying)(ying)式(shi)設計建立在樣(yang)式(shi)表(biao)和JavaScript之上。然而(er)，低效的(de)(de)CSS和JS所帶(dai)來的(de)(de)性(xing)能問題遠遠大于其(qi)設計優(you)勢給我們帶(dai)來的(de)(de)好處(chu)。樣(yang)式(shi)表(biao)應(ying)(ying)當(dang)放在HEAD文(wen)檔中(zhong)，用以實現(xian)頁面的(de)(de)逐步渲染(ran)。然而(er)，樣(yang)式(shi)表(biao)卻經常出(chu)現(xian)在頁面其(qi)它位置，這就阻(zu)礙(ai)了頁面的(de)(de)渲染(ran)速度。換句(ju)話說(shuo)，JavaScript文(wen)件(jian)應(ying)(ying)當(dang)放在頁面底部或在關鍵內(nei)容加載完成之后再(zai)被(bei)加載才是合(he)理(li)的(de)(de)處(chu)理(li)方式(shi)。

6、 實時監(jian)控性能(neng)

大(da)家都知(zhi)道(dao)要(yao)(yao)解(jie)決(jue)一個(ge)問題就(jiu)必須(xu)先對問題有充分的了(le)解(jie)。要(yao)(yao)解(jie)決(jue)頁面性(xing)能問題，企業(ye)就(jiu)必須(xu)知(zhi)道(dao)用(yong)戶(hu)在什么時(shi)候可(ke)以看到主要(yao)(yao)頁面內容并與之進(jin)行交互；同時(shi)，企業(ye)還需了(le)解(jie)性(xing)能和(he)(he)可(ke)用(yong)性(xing)問題是(shi)如(ru)何(he)影響業(ye)務(wu)指標(biao)的。企業(ye)需要(yao)(yao)有方法獲取實際的性(xing)能指標(biao)并對其進(jin)行分析(xi)。實時(shi)用(yong)戶(hu)監(jian)控(RUM)工具可(ke)以從真實用(yong)戶(hu)的角度實時(shi)獲取、分析(xi)并記錄(lu)網站的性(xing)能和(he)(he)可(ke)用(yong)性(xing)。

7、切(qie)勿過(guo)分依賴CDN解決所有性能(neng)問題(ti)

使用(yong)內容分發網絡(CDN)的(de)(de)網站完成主要內容渲染所需的(de)(de)時間比未曾使用(yong)CDN的(de)(de)網站要長的(de)(de)多。這是一(yi)(yi)個(ge)相關性問(wen)題(ti)，而(er)非(fei)因(yin)果(guo)關系：通(tong)常情況下，相較(jiao)于未使用(yong)CDN的(de)(de)網站，使用(yong)CDN的(de)(de)網站頁面(mian)更(geng)大，也更(geng)復雜。頁面(mian)的(de)(de)大小和復雜程度才是造成性能(neng)問(wen)題(ti)的(de)(de)元兇，而(er)非(fei)CDN。但這一(yi)(yi)結果(guo)也表明，僅依靠CDN并不能(neng)解(jie)決所有的(de)(de)性能(neng)難題(ti)。

如(ru)果部署得(de)當，CDN會(hui)是(shi)解決(jue)延遲(chi)問題非(fei)常有效的工(gong)具：縮短托管服務器接收、處(chu)理并(bing)響應圖(tu)像、CSS文件等頁面(mian)資源請求所需的時間(jian)。但是(shi)，延遲(chi)僅僅只(zhi)是(shi)現(xian)代電商網站的關鍵(jian)問題之(zhi)一。為了實現(xian)最佳的加速(su)效果，網站運營人員可以采用組合解決(jue)方案(an)：CDN+前端(duan)優化+應用交付控制器和內部管理。

8、在(zai)企業內部加強Web性(xing)能(neng)觀念的(de)宣傳

大量(liang)研究證明，提高頁面(mian)速度(du)(du)可以對所(suo)有的關(guan)鍵性能指標(biao)產生(sheng)積(ji)極影(ying)響：頁面(mian)訪(fang)問量(liang)、用戶粘連度(du)(du)、業務轉化率、用戶滿(man)意度(du)(du)、客戶保持、購物車的內容多少和收入。

然而(er)，正如上述7個(ge)(ge)建(jian)議中所(suo)表明的(de)(de)那樣，許多企業(ye)都犯了同樣的(de)(de)錯誤，最(zui)終(zhong)損害(hai)了Web性能(neng)。目(mu)前(qian)，企業(ye)應該重點解(jie)決Web開發目(mu)標和在線(xian)業(ye)務目(mu)標之間的(de)(de)差距(ju)問題，而(er)且，每個(ge)(ge)企業(ye)都應該至(zhi)少擁有一個(ge)(ge)內部性能(neng)專家，以便更好的(de)(de)解(jie)決Web性能(neng)問題。