如何提高Shopify頁(yè)面加載速度？

網(wǎng)頁(yè)加載速度在Shopify獨(dú)立站中扮演著相當(dāng)重要的角色。

你的網(wǎng)站加載速度越快，跳出率就會(huì)越低，轉(zhuǎn)化率也會(huì)更高。相應(yīng)的SEO的排名也會(huì)比速度慢的站點(diǎn)靠前。

Page speed is a critical factor when it comes to ranking your website higher on Google’s search engine results. Neil Patel Seo Expert Blog

那么今天我將介紹優(yōu)化shopify加載速度的所有方式。

速度測(cè)試工具

以下幾個(gè)工具可以免費(fèi)測(cè)試網(wǎng)頁(yè)速度。 不要只測(cè)試首頁(yè)，別忘了產(chǎn)品頁(yè)（product page）和類目頁(yè)（collection page）

1. Google Speed Insight

2. Gtmetrix

3. Pindom

4. Test My Site

注意：以下步驟需要了解HTML,CSS和Javascript等知識(shí)

在開始優(yōu)化之前，請(qǐng)備份主題?。?！

在開始優(yōu)化之前，請(qǐng)備份主題?。?！

在開始優(yōu)化之前，請(qǐng)備份主題?。。?

1. 壓縮圖片

Shopify允許使用以下圖片格式

1. JPEG或JPG

2. Progressive JPEG

3. PNG

4. GIF

5. webp

圖片壓縮非常重要，可以說是影響網(wǎng)頁(yè)速度最重要的因素之一。在進(jìn)行圖像優(yōu)化時(shí)，請(qǐng)確保圖片尺寸正確。不要在單個(gè)頁(yè)面添加太多圖片

在壓縮圖片時(shí)，盡量保證圖片質(zhì)量。

要壓縮圖片，有以下兩種選擇

1. 使用Shopiy圖片壓縮插件壓縮圖片

2.使用在線圖片壓縮網(wǎng)站壓縮圖片，然后下載壓縮之后的圖片并上傳。推薦大家使用TinyPng。

2. 減少請(qǐng)求

使用GiftOfSpeed的HTTP請(qǐng)求檢查器工具可以找出您的頁(yè)面HTTPS請(qǐng)求總數(shù)?？梢酝ㄟ^執(zhí)行以下操作減少HTTP請(qǐng)求

1. 合并內(nèi)聯(lián)CSS

2. 合并所有JavaScript

3. 減少頁(yè)面圖片的數(shù)量

4. 雪碧圖

5. 將圖像轉(zhuǎn)換為Base64代碼

6. 限制社交按鈕的數(shù)量

3. 分析shopify插件

shopify插件可以幫助我們提升我們的銷售額。但是需要注意的是，大多數(shù)插件都會(huì)拖慢網(wǎng)頁(yè)加載速度。

但是我不建議冒然卸載，而是應(yīng)該通過以下步驟來優(yōu)化：

1. 卸載效果不佳或者完全不需要的插件 

你可能安裝過一些看起來很炫酷，或者別人說很好用的插件。但是你一定得進(jìn)行A/B test來檢查它是否真的有用。 可以通過GA,插件自帶的分析工具，客戶的反饋，熱圖等工具來進(jìn)行分析 

2. 檢查模板代碼中是否有舊的插件代碼 

如果你已經(jīng)卸載了插件。那么你的模板代碼中很大概率存在沒有刪除干凈的插件代碼（很多插件單純卸載是刪不干凈的） 你可以通過Chrome開發(fā)者工具打開Sources來查看

你可能無法識(shí)別每個(gè)域名，但是如果你發(fā)現(xiàn)了某個(gè)域名屬于你卸載的插件，那么這個(gè)插件就沒有刪除干凈，它依然在加載文件。例如，如果你卸載社交媒體登陸插件social-login.但是查看的時(shí)候依然發(fā)現(xiàn)了它的域名，那么就可以判斷并沒有刪除干凈

通常，你可以在theme.liquid文件中找到這些JS和CSS文件。

3. 根據(jù)條件加載插件 

根據(jù)條件加載 = 僅僅在需要的頁(yè)面加載資源

這個(gè)操作需要編輯html或者其他代碼并且測(cè)試沒有錯(cuò)誤，請(qǐng)謹(jǐn)慎操作。

例如：大多數(shù)插件會(huì)將JS/CSS放在theme.liquid文件中。但是如果只是在產(chǎn)品頁(yè)需要這個(gè)插件的效果。那么腳本文件就不需要加載到所有頁(yè)面。

為了解決這個(gè)問題，可以限制腳本只加載到需要的地方：

4. 壓縮CSS、JS文件

CSS和JavaScript用于控制網(wǎng)站的樣式和行為。縮小這些文件可通過刪除多余的字符（如空格和注釋），縮短變量名以及組合常用樣式來壓縮它們。

使用該工具來縮小JavaScript：JSCompress。

如果您的模板代碼Assets文件夾中的文件名以.liquid結(jié)尾，則可能將無法使用這些策略，因?yàn)槠渲谢烊肓薼iquid代碼。也可以通過多種方式進(jìn)行操作，但很繁瑣，也可能可能會(huì)導(dǎo)致錯(cuò)誤，因此不太建議冒然修改。

5. 選擇速度更快的主題模板

實(shí)際上，shopify網(wǎng)站的加載速度主要取決于網(wǎng)站模板，因此在選擇模板時(shí)，一定要檢查一下內(nèi)容。

1. 通過速度測(cè)試工具測(cè)試模板預(yù)覽頁(yè)（首頁(yè)、產(chǎn)品頁(yè)、類目頁(yè)）

在安裝模板之后，不斷檢查或者聯(lián)系主題作者是否有更新，請(qǐng)保持在模板的最新狀態(tài)。

6. 刪除Quick Shop功能

Quick Shop也就是產(chǎn)品預(yù)覽/快速購(gòu)買，可以很好的預(yù)覽產(chǎn)品。不過隨之而來的是更多圖片，JS和DOM的加載,我認(rèn)為這個(gè)功能會(huì)對(duì)轉(zhuǎn)化率造成負(fù)面影響，也會(huì)拖慢加載速度不利于用戶體驗(yàn)。所以這個(gè)功能建議關(guān)閉或刪除。

7. 首頁(yè)Banner使用單圖而不是輪播圖

輪播圖之前流行了一段時(shí)間，大家通常在輪播圖中添加3-4張高質(zhì)量的圖片。但是這極大的增加了頁(yè)面加載時(shí)間，其實(shí)可以完全使用Hero image代替輪播圖。

下面是一些有意思的統(tǒng)計(jì)，表面為什么不該使用輪播圖

1. 大多數(shù)用戶不會(huì)點(diǎn)擊輪播按鈕，實(shí)際上只有1%的人會(huì)點(diǎn)擊。資料

2. 輪播圖會(huì)影響用戶體驗(yàn)。資料

3. 輪播圖不利于SEO.資料

4. 輪播圖在移動(dòng)端不太友好。資料

建議大家使用Hero image來代替輪播圖。例如以下網(wǎng)站均是單個(gè)Banner 

- Shein 

- Fashionnova - Colourpop

Hero image具體定義

維基百科：主頁(yè)橫幅 (Hero Image) 是網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)專業(yè)術(shù)語(yǔ)，一種特殊的網(wǎng)頁(yè)廣告。主頁(yè)橫幅是一個(gè)較大的橫幅圖片，放置在首頁(yè)面的醒目位置。

主頁(yè)橫幅往往是針對(duì)網(wǎng)站訪問者遇到的第一視覺頁(yè)面，其目的是要提出一個(gè)該網(wǎng)站最重要的內(nèi)容進(jìn)行概述。主頁(yè)橫幅往往由圖像和文字構(gòu)成，可以是靜態(tài)或動(dòng)態(tài)的內(nèi)容。

參考文獻(xiàn)：

How to Improve Page Load Speed on Shopify — Razorrank

Suggestions to optimize website loading speed — Google Web Performance

Improving Load Performance — Chrome DevTools 101

Shopify Speed Optimization — Step-by-Step Guide

How to Optimize a Shopify Site: Complete Guide to Faster Load Speed — SpeedBoostr

（來源：shopify fans）
以上內(nèi)容屬作者個(gè)人觀點(diǎn)，不代表雨果網(wǎng)立場(chǎng)！本文經(jīng)原作者授權(quán)轉(zhuǎn)載，轉(zhuǎn)載需經(jīng)原作者授權(quán)同意。