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

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

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

仔細研(yan)究頁(ye)面尺寸(cun)大(da)小(xiao)，我們可以(yi)得(de)到更多的信息(xi)。加載最快的10個頁(ye)面所包(bao)含的資(zi)源總(zong)數(shu)范(fan)圍(wei)(wei)比較(jiao)密集：在(zai)15個~72個之間(jian)；頁(ye)面尺寸(cun)最小(xiao)的僅為(wei)251KB，最大(da)的2003KB。而加載最慢的10個頁(ye)面所包(bao)含的資(zi)源總(zong)數(shu)范(fan)圍(wei)(wei)則比較(jiao)廣泛：在(zai)89個~373個之間(jian)；頁(ye)面尺寸(cun)最小(xiao)為(wei)2073KB，最大(da)的則超過了10MB。

2、進行(xing)圖像優(you)化(hua)

圖(tu)像是造(zao)成(cheng)頁(ye)面(mian)(mian)膨(peng)脹的罪(zui)魁禍(huo)首之一，通常占據頁(ye)面(mian)(mian)字(zi)節(jie)數的50-60%。在頁(ye)面(mian)(mian)中(zhong)添加圖(tu)片(pian)或(huo)是將(jiang)現有(you)圖(tu)片(pian)放(fang)大，是迅(xun)速獲取(qu)用(yong)戶(hu)并提高(gao)業務(wu)轉化率的有(you)效(xiao)方式。但(dan)是這種方法會對性能造(zao)成(cheng)嚴重(zhong)的影響(xiang)。

進行圖(tu)像優(you)(you)化是提升性(xing)能(neng)最(zui)簡(jian)單(dan)的一(yi)種(zhong)方法，它(ta)可(ke)以使頁面加載更快。為了更有效的完(wan)成圖(tu)像渲(xuan)染，圖(tu)像必須(xu)經(jing)過壓縮(suo)和(he)整(zheng)合(he)、圖(tu)像的尺寸和(he)格式必須(xu)經(jing)過仔細(xi)調整(zheng)，圖(tu)像質量(liang)也必須(xu)經(jing)過優(you)(you)化，這樣(yang)才可(ke)以依據圖(tu)像的重要性(xing)進行區別化的加載處(chu)理。

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

在典型的(de)(de)(de)頁面服務(wu)器請求中，來自于第三(san)方腳(jiao)本(ben)的(de)(de)(de)請求占了其(qi)中的(de)(de)(de)50%或更(geng)多。這(zhe)些第三(san)方腳(jiao)本(ben)不僅(jin)會增加頁面的(de)(de)(de)字節數，帶(dai)來延遲，而且也會成(cheng)為Web頁面中最大(da)的(de)(de)(de)潛在故障點。無響應、未經優(you)化的(de)(de)(de)第三(san)方腳(jiao)本(ben)會降低整個網絡(luo)的(de)(de)(de)加載速度(du)。

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

4、真正做到移(yi)動設備(bei)優(you)先

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

盡管移動(dong)設(she)備和網絡取得了(le)一些進展，但就性能而(er)言，還是無法與大小(xiao)已接近(jin)1MB的(de)服務頁(ye)面需(xu)求保持同步。我們知(zhi)道，頁(ye)面大小(xiao)與加(jia)載(zai)時間息息相關(guan)，移動(dong)用戶(hu)對(dui)緩慢的(de)加(jia)載(zai)速度尤其敏感。如果企業(ye)希(xi)望網站(zhan)可以真(zhen)正做到(dao)“移動(dong)設(she)備優(you)先”，就必須(xu)正確處理這些問(wen)題。

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

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

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

6、 實時監控性能

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

7、切勿過分依(yi)賴CDN解決所有(you)性能問(wen)題

使用內容分(fen)發網(wang)絡(CDN)的(de)(de)網(wang)站(zhan)完成(cheng)(cheng)主要內容渲染所需的(de)(de)時間比未曾使用CDN的(de)(de)網(wang)站(zhan)要長(chang)的(de)(de)多。這是一(yi)(yi)個相關(guan)性問題，而非(fei)因果(guo)(guo)關(guan)系(xi)：通常情況下，相較于未使用CDN的(de)(de)網(wang)站(zhan)，使用CDN的(de)(de)網(wang)站(zhan)頁面更大(da)，也更復雜。頁面的(de)(de)大(da)小和(he)復雜程度(du)才(cai)是造(zao)成(cheng)(cheng)性能(neng)(neng)問題的(de)(de)元兇，而非(fei)CDN。但這一(yi)(yi)結果(guo)(guo)也表明，僅依靠(kao)CDN并不能(neng)(neng)解決所有(you)的(de)(de)性能(neng)(neng)難(nan)題。

如果(guo)部署得當，CDN會是(shi)解(jie)決(jue)延遲問題非常有效的工具：縮短托管服務器(qi)(qi)接收、處理(li)并(bing)響應(ying)圖像、CSS文件等頁(ye)面資源請求所需的時(shi)間(jian)。但(dan)是(shi)，延遲僅(jin)(jin)僅(jin)(jin)只是(shi)現代電商網(wang)站的關鍵問題之一(yi)。為了實(shi)現最佳的加速效果(guo)，網(wang)站運營人員可以采用(yong)組合解(jie)決(jue)方案：CDN+前端優(you)化(hua)+應(ying)用(yong)交付控制器(qi)(qi)和內(nei)部管理(li)。

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

大量研究證(zheng)明(ming)，提高(gao)頁(ye)面(mian)速度(du)可以對所有的關鍵性能指標產生積極影響：頁(ye)面(mian)訪問量、用戶(hu)粘連度(du)、業務轉化(hua)率(lv)、用戶(hu)滿意度(du)、客戶(hu)保持(chi)、購物(wu)車的內容(rong)多少(shao)和收(shou)入。

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