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