基於監控寶的跨境電商網站性能優化實戰

2020-12-22 CSDN技術社區

據國家統計局數據顯示,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登載此文出於傳遞更多信息之目的,並不意味著贊同其觀點或證實其描述。

相關焦點

  • 什麼是跨境電商?跨境電商紅利是坑嗎?
    公眾號:圖樂跨境說,我是圖樂,多年跨境電商實戰者,Shopee店鋪運營實戰賣家,每天定時分享跨境電商乾貨文章。
  • 跨境電商培訓機構有哪些?國內跨境電商培訓機構排名
    線下培訓:雨課不定期舉行線下課程,用實戰訓練幫助賣家更好的提高運營實力。 2.深圳市百馬匯諮詢服務有限公司 百馬匯電商學院,擁有多名國內電商圈知名實戰派導師、月銷百萬級操盤手,5年亞馬遜培訓經驗,憑藉著強大的師資力量以及資源服務,為廣大亞馬遜賣家提供了專業、優質、實用的跨境電商教育及跨境相關的增值服務,是國內數一數二的亞馬遜培訓機構。 3.
  • 跨境電商亞馬遜歐洲站分析
    公眾號:東協跨境叔 精選跨境電商行業資訊,帶你探索東南亞跨境電商新藍海!
  • 新優貝跨境學院:跨境電商營銷,讓品牌傳播全球
    我們以Google為例,可以將搜尋引擎營銷分為三塊:搜尋引擎優化、關鍵詞競價排名、網站聯盟廣告[1]。我們一起詳細了解下:(1)搜尋引擎優化(Search Engine Optimization,即SEO)通過一些技巧或技術性手段,使網站更容易被搜尋引擎抓取,從而提升網站在搜索頁面的自然排名。
  • 美國網站伺服器性能優化的方法
    提高美國網站伺服器的性能,以最大限度的利用率實現利益的最大化,這是很多美國網站伺服器用戶所希望達到的效果,因此美國網站伺服器的的性能優化是非常重要且必要的工作。今天小編就來分享下美國網站伺服器性能優化的方法。
  • SheIn:中國的Zara,專賣女裝的跨境電商獨立網站
    目前跨境電商圈比較常見的玩法是以下有兩種,一種是大家都熟悉的:在Amazon、wish等多個全球知名電商平臺開設不同品類的店鋪,建立多渠道、多品類的矩陣,靠規模取勝,國內常見的有有棵樹、賽維、環球易購等跨境電商企業;在第三方平臺開店,優點很明顯:成本低、ROI
  • 跨越語言的鴻溝,阿里達摩院AI技術幫助跨境電商賣家提高運營效率
    因此,在【雨果網111大會】上,施楊斌從智能翻譯在AI場景的應用以及其技術挑戰和亮點上,全方位向跨境電商賣家展示了人工智慧滲透到跨境電商的應用表現,幫助賣家解決語言溝通障礙。再者,底下為電商平臺,包括阿里內部以及物流、支付、營銷領域內的其他電商平臺。不同的領域,需要不同的語言,可見跨境電商語言業務的複雜性。 2、智能翻譯在跨境電商全鏈路的應用
  • 海外代購網站排行榜 跨境電商網站推薦
    現如今,隨著人們生活水平的提高,熱衷於海淘購物的消費者越來越多,他們大多都會通過海外代購網站進行跨境購物。那麼,有哪些比較不錯的海外代購網站呢?作為一枚經常海淘的購物達人,小編為大家整理了一份海外代購網站排行榜,希望對大家有所幫助。
  • 跨境電商自建站平臺有哪些
    國家對做跨境電商的企業補貼力度大,許多有實力的跨境企業也開始籌建自己的獨立站。獨立站的優勢主要為塑造品牌、實現數據安全和增值、避免規則制約、降低交易佣金成本。跨境通(環球易購、帕拓遜)就做的不錯。 跨境電商自建站系統盤點 1.Shopify Shopify是一個SaaS領域的購物車系統,適合跨境電商建立獨立站。
  • Facebook X Shopify 跨境電商白皮書
    2019年,儘管跨境電商面臨前所未有的機遇,基於平臺銷售的出海模式遇到了越來越多的挑戰:同行間激烈的競爭大大壓縮了利潤,平臺收取的各類費用逐年走高,甚至推出並扶持平臺自營品牌。跳出這種困境的方法便是Direct to Consumer (DTC) Ecommerce, 直營電商。
  • 【跨境電商早報】家樂福收購法國電商網站,中歐班列首個跨境電商...
    【編者按】:2016年伊始,雨果網將推出「跨境電商早晚報」系列,旨在為跨境進出口電商從業者提供最新行業資訊動態。寶尊電商(NASDAQ:BZUN)跌9.97%,微博(NASDAQ:WB)跌9.98%,去哪兒網(NASDAQ:QUNR)跌10.96%,聚美優品(NYSE:JMEI)跌11.25%。上述股票跌幅居前。 中歐班列首個跨境電商平臺在鄭測試 1月7日,來自德國的奶粉、韓國的化妝品通過「陸港跨境通」平臺通關後順利放行。
  • 跨境小白必知:跨境電商有哪些平臺?怎麼盈利?
    跨境小白必知:跨境電商有哪些平臺?怎麼盈利?面對如此紅利項目,跨境電商新手賣家如何才能迅速入行這片藍海且分得一杯羹呢?今天小編準備了這一期有關跨境電商有哪些平臺以及各個跨境電商平臺「盈利模式」、適合什麼人群入駐的內容,希望能給很多新進入到跨境電商行業的朋友提供幫助,讓大家少走彎路!「跨境電商有哪些平臺及盈利模式」之亞馬遜篇如果你是跨境電商的新手玩家,那麼你肯定或多或少聽聞過亞馬遜。
  • 第286期,操作跨境電商亞馬遜listing優化項目實操教程
    即便這樣,有一個外貿中的分支卻異軍突起,那就是跨境電商B2C行業,相當於國際版的淘寶的一種模式,直接把國內的產品通過國際快遞送至國外消費者手中,賺取美元差價的一種模式。目前主流的操作方法是平臺和獨立站,平臺比較出名的比如亞馬遜,速賣通和eBay,獨立站在這裡不做重點討論。那麼今天我們就圍繞著亞馬遜這個跨境電商平臺展開深入的討論和實操。
  • 新零售跨境電商平臺是什麼意思?跨境電商新零售模式及優勢
    而跨境產品和新零售能夠擦除火花嗎?一起來看下新零售跨境電商平臺。 新零售跨境電商平臺是什麼意思 新零售是什麼,從定義上來看,新零售就是傳統零售結合網際網路,再通過大數據線上線下深度融合,形成的一種零售方式。而跨境電商新零售,顧名思義就是新零售在國際貿易領域中的一種表現形式。
  • 跨境電商,東南亞電商如何去做?
    在國內電商流量已經被頭部電商已經基本壟斷,每年擴展銷售渠道加入線上電商的公司也越來越多,今天我們重點說一下企業轉戰場跨境電商的幾種模式,尤其是東南亞的市場,機會巨大。
  • 跨境電商是怎麼清關的?
    概念定義從廣義業務上講,所謂跨境電商的業務模式,『跨境』是指分屬不同關境的交易主體,『電商』是指通過電子商務平臺達成交易、進行支付結算,並通過跨境物流送達商品、完成交易。因此較之一般電商,跨境電商的關鍵區別在於跨境,其他如平臺搭建、交易流程較於一般電商並無實際區別。
  • 跨境電商賣家值得收藏!跨境電商ERP大全
    賽盒ERP能有效的縮短工作周期,降低跨境成本,高效解決跨境電商運營問題,並且從售前到售後,多倉儲、多銷售渠道統一管理。ERP軟體,以SaaS切入,服務出口跨境電商賣家,幫賣家接入海外電商平臺、優化產品選擇、降低物流成本、擴展銷售渠道。
  • 跨境電商是什麼?外貿跨境電商有哪些平臺?
    跨境電商是什麼?跨境電商介紹跨境電商簡單來說就是不同國家地區之間的貿易交易,以電子商務的方式達成交易,在線訂購、支付結算,並通過跨境物流遞送商品,清關,最終送達,完成交易的一種國際商業活動。我國跨境電商從交易模式上來說,可以分為企業對企業(即B2B)和企業對消費者(即B2C)的貿易模式。B2B模式下,企業運用電子商務以廣告和信息發布為主,成交和通關流程基本在線下完成,本質上仍屬傳統貿易,已納入海關一般貿易統計。
  • 廣東深圳跨境電商培訓機構排名
    近幾年,廣東跨境電商得到了飛速發展,各方面都處於領跑狀態,很多跨境出口大賣來自廣東。同時跨境電商培訓機構也擁有眾多,非常熱門。一起來盤點下廣東深圳跨境電商培訓機構排名較好的幾個吧
  • 從考拉海購,看整個跨境電商行業的運轉邏輯
    2019年7月31日國務院常務會議指出要調整擴大跨境電商零售進口商品清單,落實允許綜合保稅區內加工製造企業承接境內區外委託加業務的政策,吸引國際知名品牌在華首發新品,帶動擴大消費。國家愈發鼓勵跨境電商發展,系列政策改善跨境電商整體額配套設施,優化電商企業貿易鏈條,可以一定程度上降低企業交易成本。