據國家統計局數據顯示,2015年,全國網上零售額38773億元,比上年增長33.3%。阿里佔比76.1%,京東佔比11.9%。2016年3月4 日,美國知名調查公司Forrester發布亞太電商數據報告指出,2015年中國電商市場規模正式超越美國,成為全球第一大電商市場。為了搶佔中國市場,追逐利潤,跨境電商紛紛展開各種對策,其中對電商網站進行性能優化是其重要一環。
什麼是網站性能?
用戶輸入網站域名,通過DNS解析,找到目標伺服器IP,請求數據經網際網路達到目標伺服器,目標伺服器收到請求數據,進行處理(執行程序、訪問資料庫、文件伺服器等),處理完成將響應數據又經網際網路返回給用戶瀏覽器,瀏覽器得到結果進行計算渲染顯示給用戶,這個看似複雜的過程涉及到網站可用性、正確率、打開速度、首屏時間等一系列指標,把這些數據綜合起來就構成了網站性能的完整定義,而在用戶看來則非常簡單,就是網頁打開了。
網站性能與網際網路企業的業務、利潤緊密關聯。據Google、Amazon、雅虎等世界著名網站的網站性能數據統計證明:Google網站訪問速度每慢400 ms就將導致用戶搜索請求下降 0.59%;Amazon表示,增加 100ms的網站延遲將導致其收入下降 1%,雅虎網站如果有400ms 延遲會導致流量下降 5-9%。
鑑於此,某著名跨境電商企業在行業裡經過反覆對比,最終選擇了雲智慧的監控寶服務,但客戶需求在開始階段比較籠通,通過和客戶多次溝通,結合客戶目前的業務發展狀況以及網站架構,確定的監控方案如下:
1.通過監控寶進行網站監控,利用雲智慧部署在全球220個左右的監測點,監控其電商網站的可用性,客戶自定義告警閾值,網站運行時若觸發閾值,要求能夠及時告警;
2.通過監控寶的API監控,對其微信公眾號的API進行業務流程監控,客戶自定義告警閾值,網站運行時若觸發閾值,要求能夠及時告警;
3.通過監控寶網頁性能監控,準確採集來自全球不同地區用戶的網站打開速度、首屏時間等一系列用戶體驗數據;
4.通過監控寶對同行業4家電商網站進行對比監控;
5.通過網站監控、API監控、網頁性能監控、行業內數據對比,找出網站性能問題以及產生的根本原因,並提供解決方案及優化建議。
監控方案確定後即開始網站的正式監控,為保證數據相對客觀和準確,採用一周的數據進行分析。
一、網站可用性:
圖一 Web監控結果
圖二 Mobile Web監控結果
電商行業平均可用率99.99%,但該客戶在中國大陸的平均可用率只有95%(有效監控次數3847),安徽僅為89.13%(有效監控次數82),北京為90.27%(有效監控次數167);其中Mobile Web平均可用率96%(有效監控次數3805),北京僅為88.59%(有效監控次數163),可用率最差。
可用率之所以低於電商行業平均值,主要是網站訪問過程中,出現了不同程度的錯誤。我們以出現錯誤最多的常州地區(錯誤次數27)為例,對錯誤類型進行了統計:
圖三 Web錯誤類型
圖四 Mobile Web錯誤類型
從圖三和圖四可以看出,網站錯誤類型主要包括403 Forbidden、首屏渲染超時(648)和網頁元素加載出錯(649)等。而手機端錯誤次數103次,與官網不同的是新增錯誤類型文檔下載超時(647)、TCP連接建立失敗(602)和伺服器連接中斷(604)等。
通過歷史快照(部分數據通過雲智慧透視寶獲得)進行追蹤,出現的403 Forbidden(403)錯誤,是造成客戶網站平均可用率低的最主要原因。其主機主要分布在常州電信、佛山電信、天津聯通、西安電信、新鄉電信和太原聯通等多個區域。客戶的CDN服務商對響應伺服器的兩個IP經常會拒絕服務,客戶聯繫CDN服務商後問題解決。
其次,HTTP/1.1 503服務不可用也是值得客戶關注的錯誤類型,錯誤主機分布區域主要為:南昌電信、天津電信、武漢電信、鄭州聯通、徐州電信、佛山電信、鎮江電信和上海電信等 。分析原因,主要是由於請求是動態的,回到源站,Jetty處理的請求過多,導致本次服務不可用。建議客戶將此請求按頻次生成靜態頁面。
最後對客戶官網的元素加載錯誤進行分析,發現有部分資源出現401、404以及首屏渲染超時(648)等錯誤。其中648錯誤,主要是因為 Downloading time下載時間過長,導致系統整體性能下降。首屏時間計算的是首屏可視區域內元素正常呈現所佔用的時間;首屏時間跟元素下載速度有直接關係,當元素下載時間超時,必定導致首屏時間超時,頁面優化建議會在後面章節統一提供。
二、業務流程監控:
傳統IT監控是基於技術的,關注IT基礎設施的可用性,然而業務系統故障並不僅僅是IT故障造成的,所以單純的IT監控往往無法滿足企業的業務需求。業務流程監控是雲智慧針對企業業務視角推出的特色功能,通過應用接口調用模擬用戶使用過程,以可量化、可視化、自動化技術手段,測量業務系統服務的響應性能,準確感知終端用戶的體驗和整體業務的質量情況。針對此跨境電商客戶的業務狀況,提出多個監控流程,我們以其中應用最頻繁的購物流程作為實例:
1.登錄,獲取token;
2.對獲取的token重新進行MD5算法加密,生成新的字符串;
3.購物,將新的字符串作為頭參數傳入;
4.退出
創建API監控任務,獲取登錄後生成的token信息存入已創建的token變量中;然後對該變量值重新進行MD5加密,生成新的字符串;並作為頭參數,傳遞到下一步的接口中。
監控過程遇到一個問題, 就是按照客戶說明進行了配置,獲取到token並進行了加密,但訪問購物API 接口時一直不成功,Postman卻能夠順利通過測試。經過檢查對比,發現登錄成功後的響應頭中包含相應的cookie值,於是重新對監控任務進行修改,將獲取到的cookie賦給事先定義好的變量,然後作為購物API接口請求頭的Set-Cookie值再次測試,順利通過。
三、網頁性能和用戶體驗
1. 首屏用時
首屏用時是網站用戶體驗的一個重要指標。通常一個網站,如果首屏時間在2秒以內是比較優秀的,5秒以內是可以接受的,5秒以上就不可容忍了。用戶會選擇刷新頁面或立刻離開。
圖五網站首屏用時
上圖中,綠色代表首屏用時小於3.5s;黃色代表首屏用時小於7s;紅色代表首屏用時大於7s。該網站的首屏用時,除山西的首屏用時小於3.5s外,其餘都大於3.5s,部分地區,如青海、陝西,更是大於7s。網站速度非常慢,用戶體驗非常差,需要針對性部署CDN提高各地訪問速度。
2.行業對比
圖六 客戶與同行業網站頁面性能對比
橫坐標是基礎文檔下載的字節數,即頁面的基礎文檔元素的大小,單位是KB;縱坐標是首屏用時,單位是s; 以上這兩類值,都是數值越大,網站速度越慢,用戶體驗越差。小球的體積代表頁面開始瀏覽到接收到最後一個數據包之間的時間差,數據越大,頁面整體性能越差。黑色代表我們的客戶,另外三個顏色,分別代表同行業其它三個客戶。
為什麼客戶的基礎文檔元素最小,而首屏用時和響應用時反而最大、用戶體驗最差呢?
3.原因剖析
通過對這幾個網站進一步分析,有如下幾個方面的因素:
(1)代碼層面
我們客戶首頁包含太多的代碼行數、太多的JS數以及太多不同域名的請求數、部分JS未壓縮、部分無用的JS是其頁面性能差、用戶體驗不好的重要因素。
同時,通過對四家網站代碼查看,發現客戶的頁面中,JS同時存在外連和內嵌,且放置在頁面的上部和中間,這是導致首屏加載慢的又一個重要因素。因為瀏覽器在執行JavaScript代碼時,不能同時做其它事情。即<script>每次出現都會讓頁面等待腳本的解析和執行(不論 JavaScript是內嵌的還是外鏈的),JavaScript代碼執行完成後,才繼續渲染頁面。
另外,在客戶的代碼元素中內嵌了6個iframe,其中有4個為空;div 嵌套太深,且有很多為空元素;部分代碼沒有縮進。
針對代碼層面存在的問題,我們的優化建議如下:
A.優化布局div的層次,儘量避免過多的嵌套;
B.JS儘量採用外連,且合理控制JS文件的引入位置,最好放在頁面底部,以提升網站的加載速度;
C.合理控制JS和CSS文件的大小和數量,進行壓縮合併,build成一個或一組,從而減少瀏覽器請求數量;
D.元素請求合併:一個頁面中會有很多子元素,如果單獨去請求,則每個請求都是回源的調用,那麼每個請求都會佔用很多時間(包括TCP建聯時間)。元素請求合併就是指把所有的請求合併成一個,統一提供到服務方,然後服務端再將這些請求分發,然後再統一合併再返回。
E.儘量不在代碼中出現沒有意義的空標籤;
F.合理使用iframe ,去掉空的iframe。
(2)網絡層面
通過對這幾個網站的分析得知,我們客戶的源站在國外,且大陸沒有鏡像站點,是其頁面性能和用戶體驗差的另一重要因素,所以建議我們的客戶聯繫CDN服務商進行針對性的優化,同時推薦採用某雲的動態加速優化方案:
優化前,用戶的動態請求都在源站,請求鏈路是:用戶——運營商——源站,全世界用戶都要去源站拿數據,這樣的請求鏈路會非常長,過程相當耗時。
優化後,儘量把動態數據推到邊緣節點,這些邊緣節點不需要去源站進行請求,只需直接在邊緣節點做請求。另外一個優化方法:請求可以是同步的,也可以是異步的,可以同時並行請求多個頁面內的元素,整體的動態回源的過程是對內容的動態加速。動態加速的做法是,如果需要回源的話,把這個回源網絡的最優化路徑交給CDN來決定,CDN會幫助找到目前一條最優的鏈路來回源。動態加速其實是一系列優化方案,比如包括內容壓縮等。
雲智慧是國內領先的業務運維服務提供商,通過建立以用戶體驗為核心,以業務價值為導向的業務運維大數據分析平臺,為廣大跨境電商企業提供基於用戶行為的端到端全棧性能問題定位、基於全球分布式網絡的用戶體驗主動感知、基於雲端壓力測試平臺的業務容量規劃服務。把企業業務系統、支撐系統和管理系統的業務流程數據和反映前端用戶體驗的IT性能數據利用大數據技術進行採集、整理和關聯分析,實時映射到全局業務拓撲圖上,藉助數據可視化工具呈現出來,從而幫助管理者找到業務規劃和企業發展的方向,實現業務的高速增長和IT價值的不斷提升。
聲明:CSDN登載此文出於傳遞更多信息之目的,並不意味著贊同其觀點或證實其描述。