做獨(dú)立站，當(dāng)我們的站點(diǎn)內(nèi)容越來越多時，我們可能會發(fā)現(xiàn)打開自己的網(wǎng)站速度越來越慢了，大家千萬不要忽略這個速度慢的問題，很有可能它已經(jīng)在直接影響著你站點(diǎn)的轉(zhuǎn)化。 電商網(wǎng)站做好速度和性能優(yōu)化，直觀的有以下幾個好處 減少用戶棄單（Reducing abandoned checkouts） 更好的用戶體驗（Better User Experience） 提升站點(diǎn)在搜索引擎中的排名（Search Engine ranking） 減少用戶跳出率（Reducing Bounce rate） 下面的內(nèi)容，我會從原理介紹開始，講解衡量一個網(wǎng)站性能的基本指標(biāo)以及影響因素，接著會羅列具體改進(jìn)網(wǎng)站性能和速度的基本措施，最后會推薦一些業(yè)內(nèi)常用的分析以及改進(jìn)工具。這些方法不僅適用在shopify站點(diǎn)上，同時也適用于任何網(wǎng)站進(jìn)行性能優(yōu)化實踐。 先介紹一下網(wǎng)站性能的幾個關(guān)鍵指標(biāo)，這些指標(biāo)基本是web業(yè)內(nèi)的一些公用標(biāo)準(zhǔn)，他們分別是 指標(biāo)1：LCP，測量感知加載速度。通常表現(xiàn)為首屏內(nèi)容出現(xiàn)時間， < 2.5s 最佳，>4s為糟糕，這是網(wǎng)站加載速度感知最重要的指標(biāo) 指標(biāo)2：FID，頁面首次可交互時間，< 1ms 最佳，>300ms為糟糕。 指標(biāo)3：CLS，頁面累積布局偏移度， 當(dāng)頁面沒加載完時，頁面的某一塊內(nèi)容可能會被一些延遲加載的腳本或者css給撐開，改變原來的位置。這里也可以用另一個指標(biāo) FLT（頁面內(nèi)容全部加載完成的時間）來進(jìn)行時間量化，< 3s 最佳，>5s為糟糕 參考：https://web.dev/defining-core-web-vitals-thresholds/ 衡量一個網(wǎng)站的性能和速度，最直觀的就是看這個網(wǎng)站內(nèi)容出現(xiàn)的時間快慢，這個時間主要由三個變量決定：網(wǎng)站的資源數(shù)量 、資源大小和資源所存儲的位置。 網(wǎng)站資源通常是指：一個網(wǎng)站上的圖片、視頻、音頻、js 腳本等文件內(nèi)容。 當(dāng)你在瀏覽器中訪問任何一個網(wǎng)頁，基本可以分為三個步驟： 輸入 url 網(wǎng)址 瀏覽器請求對應(yīng)網(wǎng)址中需要的資源文件 瀏覽器加載資源文件并渲染出頁面內(nèi)容 那么這3步，更詳細(xì)一點(diǎn)是怎么發(fā)生的呢？ 過程一：瀏覽器向服務(wù)器請求 html、js、css、圖片、視頻等資源文件 加載資源文件的過程中影響時間快慢的因素有 服務(wù)器距離 網(wǎng)絡(luò)帶寬大小 請求資源的數(shù)量、大小 這些文件都被存儲在遠(yuǎn)程服務(wù)器，服務(wù)器可以理解為是離你很遠(yuǎn)的一臺物理電腦。你的瀏覽器是在本地，要從遠(yuǎn)程服務(wù)器將內(nèi)容拿到渲染到你本地的瀏覽器上，就需要進(jìn)行網(wǎng)絡(luò)請求。這個網(wǎng)絡(luò)請求，通常是最較耗費(fèi)時間之一的環(huán)節(jié)，也是最影響網(wǎng)站加載速度的部分。它受限于網(wǎng)絡(luò)的傳輸速度，而這個傳輸速度又受限于我們與服務(wù)器的距離、網(wǎng)絡(luò)帶寬大小、傳輸?shù)奈募w積大小。 舉個例子： 比如我們在國內(nèi)，shopify 的服務(wù)器默認(rèn)在加拿大，我們每請求一個資源，就需要通過層層節(jié)點(diǎn)轉(zhuǎn)發(fā)，在物理位置上，一直去到位于加拿大的電腦里問，你有沒有這個資源？問到了，就將這個資源原路送到國內(nèi)你的電腦上，然后渲染。 帶寬是指一次只能傳輸?shù)奈募止?jié)大小，如果這個文件過大，它就要拆分成n個請求片段傳回來。所以文件過大，文件過多，服務(wù)器距離過遠(yuǎn)，都會影響到網(wǎng)絡(luò)傳輸速度，從而影響到我們本地瀏覽器拿到這個文件的時間。 當(dāng)然實際上，shopify的服務(wù)器會做CDN（Content Delivery Network）配置（可以理解為在世界各個地方復(fù)制了一份這些資源文件，方便就近獲?。?，服務(wù)器這塊我們能做的事很少，因為是用的平臺，交給shopify官方即可，可以略過。但減少請求資源數(shù)量，或者減少請求資源大小，是我們能做的。 過程二：瀏覽器解析html結(jié)構(gòu)，渲染內(nèi)容 影響瀏覽器渲染內(nèi)容結(jié)構(gòu)的因素有 腳本的位置 內(nèi)容模塊的多少 當(dāng)從服務(wù)器拿到請求資源后，瀏覽器就像一個倉庫布布置師，到了一個個家裝物件，它就開始進(jìn)行室內(nèi)擺放了。但這個倉庫布置師，不是等所有的家具都到了才開始布置，也不是隨機(jī)布置。它會依據(jù)一份布置清單按一定順序進(jìn)行內(nèi)容布置。 這份清單就寫在我們的 html 代碼里。通常當(dāng)你在導(dǎo)航欄輸入一個網(wǎng)址，或者點(diǎn)擊一個鏈接，進(jìn)入一個網(wǎng)址，瀏覽器會首先請求這個網(wǎng)址的下的 index 文件（index.html， index.php 等等），這份index 文件里包含了 HTML 標(biāo)簽內(nèi)容。在html內(nèi)容里，它聲明了當(dāng)前頁面所依賴的 js 文件、樣式文件（css）、文字、圖片、視頻、音頻等等素材資源。 一份html文檔簡要結(jié)構(gòu)如下 html 標(biāo)簽：可以理解為是一個頁面的骨架，它通過一組組標(biāo)簽代碼，將文字、圖片、視頻等等安排在了頁面的指定位置，這是一個頁面的核心，它支撐起了所有內(nèi)容的注入，你所看到的內(nèi)容一定是配套標(biāo)簽才能注入到頁面中。 css 腳本文件：可以針對html標(biāo)簽，進(jìn)行不同的樣式設(shè)定，比如頁面背景是什么，字體大小、顏色是多少，圖片要不要圓角，它就是一個裝修師傅，沒有css，頁面內(nèi)容仍然會出現(xiàn)，但會很丑。 js 腳本文件：是用于控制頁面交互響應(yīng)的，比如你點(diǎn)擊了一個按鈕，觸發(fā)了一個彈窗，這個行為就是js腳本來控制的。同時js代碼可以動態(tài)改變 html 和css 的內(nèi)容。 了解了上述3種基本類型的腳本文件，我們介紹一下瀏覽器渲染這三種文件的順序是什么？ 瀏覽器渲染頁面資源順序 瀏覽器從上往下，一行一行解析html標(biāo)簽代碼，遇到代碼中包含了資源，則先請求資源文件，然后加載到頁面中，例如圖片、視頻 解析過程中遇到 <script> 標(biāo)簽，則停止渲染內(nèi)容，等待script的資源【獲取】并【執(zhí)行】完畢，再接著渲染 了解了上述的基本過程，我們就能更深刻的理解，從源頭上到底該如何去做優(yōu)化。站在技術(shù)原理的角度，我們可以從下面3個部分來進(jìn)行： 1）減少資源的請求數(shù) 減少頁面需要加載的圖片視頻等資源。這個比較好理解，如果你有一堆包裹需要取回來，每個包裹的體積，剛好都沾滿了你的運(yùn)輸工具，導(dǎo)致一次只能拿一個包裹，自然包裹數(shù)量越少，你整體取包裹的時間就越短。 2）減少請求資源大小 壓縮圖片、視頻、js腳本等資源文件，減少資源大小。同樣拿取包裹來舉例，當(dāng)你把包裹的體積縮小了，一次能裝2個包裹了，那整體取包裹的次數(shù)也能較少，花費(fèi)時間也少了。 3）減少阻塞腳本 前兩個措施是從服務(wù)器請求資源的角度來看，第3個措施，減少阻塞腳本是從頁面渲染的角度。它能提升首屏文字、圖片內(nèi)容出現(xiàn)速度。 腳本角度 1）統(tǒng)計代碼過多 有一些統(tǒng)計代碼必須要放在頁面頭部，否則無法完整監(jiān)測用戶行為，例如GA，如果我們要完整監(jiān)測例如：跳出率等數(shù)據(jù)，它就必須要在頁面內(nèi)容呈現(xiàn)之前加載，根據(jù)上面的原理，它會阻塞頁面內(nèi)容加載。 舉例：shopify中我們常見的一些統(tǒng)計代碼有 Google Analytics (GA)：Google 最常用的數(shù)據(jù)統(tǒng)計工具 Google Tag Manager：更方便靈活的埋點(diǎn)管理，直接后臺定義埋點(diǎn)行為，而不用每次新增埋點(diǎn)行為都在GA中發(fā)生，相當(dāng)于GA升級版本，但是在shopify中，只有 shopify plus 才支持使用對交易行為進(jìn)行監(jiān)測，普通版本不支持。 Google optimize：Google AB Test 工具，用于控制頁面跳轉(zhuǎn)、頁面內(nèi)容AB版本顯示（需要放在頁面） 2）存在冗余代碼 不要放在head中的腳本可以挪到 body 下 插件卸載以后，仍然有殘留的代碼，需要單獨(dú)清理 內(nèi)容角度 1）圖片? 沒有進(jìn)行壓縮、文件大小不合理，一般不超過 200kb 格式盡量使用 jpeg（有損壓縮，體積?。?，不要使用png（無損壓縮，體積大）。圖片壓縮工具通?？梢允褂?https://tinypng.com/ 2）視頻 資源過大需要壓縮，頁面商品陳列視頻，盡量不超過 10mb 主圖視頻長圖控制在 10s 內(nèi)，< 5mb 最佳 盡量不直接引用 youtube視頻，耗費(fèi)網(wǎng)絡(luò)請求資源較大；一定需要引用的，請減少數(shù)量。 3）文件引用服務(wù)器位置 盡量使用 shopify 自帶的文件服務(wù)器，因為可以復(fù)用shipify 自己的cdn功能，提速網(wǎng)站，而不是復(fù)制一個網(wǎng)絡(luò)資源路徑 4）頁面pc和移動端內(nèi)容重復(fù)冗余 使用shopify構(gòu)建頁面，特別是使用類似 pagefly 等自定義頁面工具，在做pc和移動版本適配的時候，特別容易出現(xiàn)的一個現(xiàn)象是，將pc和移動版本分別做一套，然后使用隱藏屬性去做自動呈現(xiàn)。在頁面整體內(nèi)容結(jié)構(gòu)不多的情況下問題不大，但是一旦內(nèi)容特別多，這會導(dǎo)致資源的翻倍引用，不僅頁面dom模塊暴增影響渲染性能，最大的時間支出會發(fā)生在網(wǎng)絡(luò)資源請求上，因為雖然元素不顯示，但是如果其中引用了資源，該資源仍然會被請求，占據(jù)網(wǎng)絡(luò)加載時間。 比較好的解決辦法是，使用響應(yīng)式設(shè)計的理念，盡量復(fù)用同一結(jié)構(gòu)模塊，而通過改變css樣式去做不同端的適配，這需要設(shè)計師從源頭，做方案的時候一起來配合 5）不必要的內(nèi)容過多 產(chǎn)品的內(nèi)容表現(xiàn)，并不是堆砌內(nèi)容，選取有最有價值的內(nèi)容表現(xiàn)，來增強(qiáng)頁面轉(zhuǎn)化率。這需要借助一些用戶行為分析工具，去觀察哪些內(nèi)容是有效，哪些是無效的，移除無效內(nèi)容，減少頁面資源。 shopify 每個頁面實際上是有最大內(nèi)容大小（文本+代碼標(biāo)簽）限制的，最大是：256KB 【快速工具-測頁面請求數(shù)】Pingdom https://tools.pingdom.com/ Pingdom是一個免費(fèi)的網(wǎng)站測速工具，從多方面測試網(wǎng)站，可以測試網(wǎng)站加載速度，也可以對頁面和大小進(jìn)行分析。我們可以查看詳細(xì)的測試報告，幫助用戶找出影響網(wǎng)站速度的因素如圖片、CSS等，并給出詳細(xì)的優(yōu)化網(wǎng)頁性能的方案。 【快速工具-測不同區(qū)域首次加載速度】Dotcom https://www.dotcom-tools.com/website-speed-test Dotcom-tools的強(qiáng)大和特別之處即，我們可以在這個網(wǎng)站查看全球各個地區(qū)打開我們網(wǎng)站的時間，可以查看你網(wǎng)站在全球的速度怎么樣。當(dāng)然和上述測速網(wǎng)站一樣，操作簡單，不用注冊會員就可以使用。 GTmetrix https://gtmetrix.com/ GTmetrix也是一款常用的網(wǎng)站測速分析工具，操作頁面簡潔，功能強(qiáng)大，因此受到了很多大型網(wǎng)站的歡迎，比如PayPal、耐克和惠普等。 GTmetrix操作簡單，輸入網(wǎng)址或URL點(diǎn)擊“Analyze”。我們以chinabrands.com 為例，測試了該網(wǎng)站的速度。測試結(jié)果以6個維度的形式呈現(xiàn)，分別是網(wǎng)頁速度、YSlow、瀑布圖、網(wǎng)頁加載速度、頁面加載視頻、和報告歷史?？梢栽敿?xì)的展示出具體哪些資源拖累了整個網(wǎng)站性能。 非會員可以直接使用GTmetrix測試，默認(rèn)是從加拿大節(jié)點(diǎn)進(jìn)行網(wǎng)站測速。注冊免費(fèi)賬號之后，可以使用的功能更多，可以選擇7個不同節(jié)點(diǎn)測速，也可以選擇瀏覽器（Chrome或Firefox）查看測試結(jié)果。 以上內(nèi)容從網(wǎng)站性能指標(biāo)、瀏覽器內(nèi)容加載原理、優(yōu)化的實踐措施、相關(guān)使用工具幾個層面給大家做了下介紹，基本能覆蓋所有站點(diǎn)速度慢的問題，希望能有所幫助。 我是Hyman，一個從事過產(chǎn)品、開發(fā)、營銷的跨境人。信奉工具是第一生產(chǎn)力。 這里會時常分享一些自己在跨境過程中的筆記和思考。如果以上文章內(nèi)容對你有點(diǎn)幫助，不妨收藏下，點(diǎn)個贊，歡迎分享給其他有需要的人~
文章為作者獨(dú)立觀點(diǎn)，不代表DLZ123立場。如有侵權(quán),請聯(lián)系我們。( 版權(quán)為作者所有，如需轉(zhuǎn)載，請聯(lián)系作者 )
網(wǎng)站運(yùn)營至今，離不開小伙伴們的支持。 為了給小伙伴們提供一個互相交流的平臺和資源的對接，特地開通了獨(dú)立站交流群。
群里有不少運(yùn)營大神，不時會分享一些運(yùn)營技巧，更有一些資源收藏愛好者不時分享一些優(yōu)質(zhì)的學(xué)習(xí)資料。
現(xiàn)在可以掃碼進(jìn)群，備注【加群】。 ( 群完全免費(fèi)，不廣告不賣課！)
