1. 管理 “頁面膨脹”

頁面大小與效能有着密切的關係。據調查顯示,100 強電商頁面大小中位數達到了 1492KB,比一年半之前增大了 48% 。

在研究報告裏載入快的 10 個頁面中,頁面包含的資源請求中位數為 50 個,頁面大小中位數為 556KB 。而載入慢的 10 個頁面中,頁面包含的資源請求中位數為 141 個,頁面大小中位數為 3289KB 。換句話説,載入慢的頁面的資源中位數幾乎是載入快的頁面的三倍,頁面大小則是六倍。

仔細研究頁面尺寸大小,我們可以得到更多的資訊。載入快的 10 個頁面所包含的資源總數範圍比較密集:在 15 個~72 個之間;頁面尺寸小的僅為 251KB,大的 2003KB 。而載入慢的 10 個頁面所包含的資源總數範圍則比較廣泛:在 89 個~373 個之間;頁面尺寸小為 2073KB,大的則超過了 10MB 。

2. 進行影象優化

影象是造成頁面膨脹的罪魁禍之一,通常佔據頁面位元組數的 50-60% 。在頁面中新增圖片或是將現有圖片放大,是迅速獲取多用户並提高業務轉化率的有效方式。但是這種方法會對效能造成嚴重的影響。

進行影象優化是提升效能簡單的一種方法,它可以使頁面載入更快。為了更有效的完成影象渲染,影象必須經過壓縮和整合、影象的尺寸和格式必須經過仔細調整,影象質量也必須經過優化,這樣才可以依據影象的重要性進行區別化的載入處理。

3. 控制第三方指令碼

在典型的頁面服務器請求中,來自於第三方指令碼的請求佔了其中的 50% 或更多。這些第三方指令碼不僅會增加頁面的位元組數,帶來延遲,而且也會成為 Web 頁面中大的潛在故障點。無響應、未經優化的第三方指令碼會降低整個網絡的載入速度。

解決辦法是延遲第三方指令碼的載入,將其放在關鍵頁面內容之後進行載入,更為理想的情況是放在頁面 onLoad 事件之後載入,這樣才不會影響企業的搜索排名 (谷歌將 onLoad 事件作為載入時間指標) 。對於一些分析工具和第三方廣告商而言,如果延遲第三方指令碼載入的方法不可行,可以利用指令碼的非同步版本,與關鍵內容的載入同步進行。多用户必須瞭解網站中有哪些指令碼,刪除那些無用的指令碼,並對第三方指令碼的效能進行持續監控。

4. 真正做到移動裝置優先

“移動裝置優先” 並不是一個全新的概念。早在 2013 年,移動裝置的使用量就已經超過了桌上型電腦,然而與眾多口頭承諾的移動效能相比,真正專注於移動裝置的開發還是存在一定的差距。例如,2011 年 11 月,移動裝置上的平均頁面大小為 475KB,現在則增長至 897 KB 。也就是説,在短短三年之間,平均頁面大小几乎翻了一番。

儘管移動裝置和網絡取得了一些進展,但就效能而言,還是無法與大小已接近 1MB 的服務頁面需求保持同步。我們知道,頁面大小與載入時間息息相關,移動多用户對緩慢的載入速度尤其敏感。如果企業希望網站可以真正做到 “移動裝置優先”,就必須正確處理這些問題。

5. 在進行響應式 Web 設計時兼顧效能

響應式設計讓設計人員和開發人員可以更好地控制 Web 頁面的外觀和感覺。它可以使跨多平台和裝置上的頁面變得更漂亮。但同時也會帶來巨大的效能損失,這些效能損失並不能通過更快速的瀏覽器、網絡和小工具得到緩解。而且隨着時間的推移,這樣影響還將持續惡化。

響應式設計建立在樣式表和 JavaScript 之上。然而,低效的 CSS 和 JS 所帶來的效能問題遠遠大於其設計優勢給我們帶來的好處。樣式表應當放在 HEAD 文件中,用以實現頁面的逐步渲染。然而,樣式表卻經常出現在頁面其它位置,這就阻礙了頁面的渲染速度。換句話説,JavaScript 檔案應當放在頁面底部或在關鍵內容載入完成之後再被載入才是合理的處理方式。

6. 實時監控效能

大家都知道要解決一個問題就必須先對問題有充分的瞭解。要解決頁面效能問題,企業就必須知道多用户在什麼時候可以看到主要頁面內容並與之進行互動;同時,企業還需瞭解效能和可用性問題是如何影響業務指標的。企業需要有方法獲取實際的效能指標並對其進行分析。實時多用户監控 (RUM) 工具可以從真實多用户的角度實時獲取、分析並記錄網站的效能和可用性。

7. 切勿過分依賴 CDN 解決所有效能問題

使用內容分發網絡 (CDN) 的網站完成主要內容渲染所需的時間比未曾使用 CDN 的網站要長的多。這是一個相關性問題,而非因果關係:通常情況下,相較於未使用 CDN 的網站,使用 CDN 的網站頁面更大,也更復雜。頁面的大小和複雜程度才是造成效能問題的元兇,而非 CDN 。但這一結果也表明,僅依靠 CDN 並不能解決所有的效能難題。

如果部署得當,CDN 會是解決延遲問題非常有效的工具:縮短託管服務器接收、處理並響應影象、 CSS 檔案等頁面資源請求所需的時間。但是,延遲僅僅只是現代電商網站的關鍵問題之一。為了實現理想的加速效果,網站運營人員可以採用組合解決方案:CDN+前端優化+應用交付控制器和內部管理。

8. 在企業內部加強 Web 效能觀念的宣傳

大量研究證明,提高頁面速度可以對所有的關鍵效能指標產生積極影響:頁面訪問量、多用户粘連度、業務轉化率、多用户滿意度、客户保持、購物車的內容多少和收入。

然而,正如上述 7 個建議中所表明的那樣,許多企業都犯了同樣的錯誤,終損害了 Web 效能。目前,企業應該重點解決 Web 開發目標和線上業務目標之間的差距問題,而且,每個企業都應該至少擁有一個內部效能專家,以便更好的解決 Web 效能問題。