【原創(chuàng)】GMV億美金品牌站案例｜網(wǎng)站性能診斷和技術(shù)優(yōu)化

眼中腳下路，心中要有宏圖。

大家好，我是跨境男孩Riven。

1. Pagespeed 分析

從截圖不難看出導(dǎo)致網(wǎng)頁(yè)評(píng)分低的原因：LCP / FCP / TBT / Speed Index

定義及優(yōu)化項(xiàng)參考:

https://developer.chrome.com/docs/lighthouse/performance/performance-scoring?hl=zh-cn?

針對(duì)這些項(xiàng)進(jìn)行優(yōu)化，即可改善網(wǎng)站分?jǐn)?shù)問(wèn)題。但是這個(gè)只能看到測(cè)試出來(lái)的大概問(wèn)題，需要對(duì)其進(jìn)行更加細(xì)致的性能技術(shù)分析。

檢測(cè)記錄：

（ pagespeed分析網(wǎng)頁(yè)結(jié)果，圖片來(lái)源：跨境男孩Riven）

截圖1. 28天平均指數(shù)

（ pagespeed分析網(wǎng)頁(yè)結(jié)果，圖片來(lái)源：跨境男孩Riven）

截圖2. 單次測(cè)試評(píng)分

2. 使用 Google chrome性能分析工具分析

使用chrome性能工具分析，發(fā)現(xiàn)如下問(wèn)題：

1.JS加載問(wèn)題

preload加載了theme.js， 但最終使用的 theme.dev.js, 不但沒(méi)有用到preload的特性，反而浪費(fèi)資源；

jquery的加載未使用defer的模式，進(jìn)行加載導(dǎo)致資源阻塞。 主題相關(guān)，可能是開(kāi)發(fā)代碼不規(guī)范導(dǎo)致的。

優(yōu)化建議：

優(yōu)化preload里面的js文件，以某一個(gè)為準(zhǔn) ； 優(yōu)化主題代碼，將不規(guī)范的jquery代碼合并，defer進(jìn)行加載。

2.截圖框選部分，有兩個(gè)大的問(wèn)題：

2.1 插件使用過(guò)多

2.2 圖片加載過(guò)多

常識(shí)：現(xiàn)在網(wǎng)站大多數(shù)資源都是使用https://www.xxxx.com/cdn/xxxxx的方式進(jìn)行加載的，插件所需的域名也是如此。

但是針對(duì)同一個(gè)域名，比如chrome同時(shí)只能有6個(gè)并發(fā)請(qǐng)求，如果圖片加載多的話，其他資源只能一直等待。導(dǎo)致網(wǎng)站渲染延遲，分?jǐn)?shù)降低。

因?yàn)閳D片加載多，圖片搶占資源速度> 插件搶占資源速度，因此渲染就阻塞了，等待資源加載。

這就是主要導(dǎo)致FCP / TBT / Speed Index 分?jǐn)?shù)低的原因。

優(yōu)化建議：

首屏圖片立即渲染，首屏以外的素材進(jìn)行懶加載；針對(duì)代碼插入式插件進(jìn)行優(yōu)化，進(jìn)行懶加載處理。對(duì)于無(wú)關(guān)性能的插件進(jìn)行延遲加載。（需要查看主題代碼）

（ 網(wǎng)頁(yè)主題代碼，圖片來(lái)源：跨境男孩Riven）

（ 網(wǎng)頁(yè)主題代碼，圖片來(lái)源：跨境男孩Riven）

3.網(wǎng)頁(yè)加載時(shí)間過(guò)長(zhǎng)原因：

如截圖所示，雖然network里顯示 91.9kb , 但是實(shí)際未壓縮代碼高達(dá) 6.4 M, 過(guò)大的dom體積導(dǎo)致網(wǎng)絡(luò)傳輸時(shí)間過(guò)長(zhǎng)，網(wǎng)絡(luò)加載速度不佳。需要分析主題代碼，針對(duì)性進(jìn)行優(yōu)化。

（ 網(wǎng)頁(yè)主題代碼，圖片來(lái)源：跨境男孩Riven）

優(yōu)化建議：

針對(duì)原始dom文件size過(guò)大的問(wèn)題進(jìn)行優(yōu)化，排查dom過(guò)大的原因，將原始dom大小控制在 2M 加載時(shí)間 2s 以內(nèi)。（需要看主題代碼）

3. 代碼優(yōu)化建議

1.去掉冗余重復(fù)的jquery代碼，統(tǒng)一到一個(gè)文件中進(jìn)行加載

（ 網(wǎng)頁(yè)主題代碼，圖片來(lái)源：跨境男孩Riven）

2.翻閱源碼發(fā)現(xiàn)，購(gòu)物車(chē)加載內(nèi)容大概占比1.75 M, 內(nèi)容包括隱藏的一些商品及展示邏輯

優(yōu)化建議：

將購(gòu)物車(chē)數(shù)據(jù)單獨(dú)封裝成一個(gè)liquid, 使用shopfiy render api 按需加載。不用提前隱藏再模版中增加模板負(fù)擔(dān)。

（ 網(wǎng)頁(yè)主題代碼，圖片來(lái)源：跨境男孩Riven）

3.prediect-search模塊存在大量空行，商品圖片未異步進(jìn)加載

優(yōu)化建議：

去掉不必要的空行，圖片進(jìn)行懶加載

（ 網(wǎng)頁(yè)主題代碼，圖片來(lái)源：跨境男孩Riven）

4.國(guó)家貨幣加載展示加起來(lái)超過(guò)1400 行代碼

優(yōu)化建議:

去除換行，直接合并成一行展示

（ 網(wǎng)頁(yè)主題代碼，圖片來(lái)源：跨境男孩Riven）

5.featured-collection模塊，一個(gè)商品加載超過(guò) 600 ~ 800 行代碼

優(yōu)化建議:

模塊優(yōu)化或者重寫(xiě)。目前首頁(yè)有3個(gè)featured-collection, 超過(guò) 7500 行代碼。

（ 網(wǎng)頁(yè)主題代碼，圖片來(lái)源：跨境男孩Riven）

列表頁(yè)

首頁(yè)包含的問(wèn)題基本都有。

除此之外還有很多異步商品js進(jìn)行加載在獲取商品信息（個(gè)人覺(jué)得沒(méi)有必要，按需加載即可）。

（ 網(wǎng)頁(yè)主題代碼，圖片來(lái)源：跨境男孩Riven）

（ 網(wǎng)頁(yè)主題代碼，圖片來(lái)源：跨境男孩Riven）

優(yōu)化建議：

優(yōu)化主題代碼，商品數(shù)據(jù)及圖片素材按需加載。?

詳情頁(yè)

首頁(yè)包含的問(wèn)題基本都有。除此之外gif加載時(shí)間過(guò)長(zhǎng)，阻塞主域名下的資源加載。

（ 網(wǎng)頁(yè)主題代碼，圖片來(lái)源：跨境男孩Riven）

優(yōu)化建議：

優(yōu)化主題代碼和素材，可以對(duì)gif進(jìn)行壓縮或者減少動(dòng)態(tài)素材的使用，或者使用多張圖疊加替換gif效果。

感謝閱讀，歡迎點(diǎn)贊+關(guān)注#跨境男孩Riven。??

（來(lái)源：跨境男孩）

以上內(nèi)容屬作者個(gè)人觀點(diǎn)，不代表雨果跨境立場(chǎng)！本文經(jīng)原作者授權(quán)轉(zhuǎn)載，轉(zhuǎn)載需經(jīng)原作者授權(quán)同意。?