Shopify網頁加載速度優化技巧實操教程

2020年4月27日 11:02:02 來源：喜運達

大家好，最近有賣家向小編反應Shopify搭建好后，網頁加載非常慢，有時候一個網頁加載十多秒，訪客停留時間也比較短，今天為了回饋關注本公眾號的粉絲賣家，關于優化Shopify速度的實操教程。

1.優化圖片電商網站展示商品信息，那么就會有大量的圖片，圖片的大小，格式，以及使用的圖片處理技術都會影響到網頁加載的速度。根據我的運營經驗總結出如下幾點圖片優化技巧：

1 圖片大小：

在不影響網站圖片清晰度情況下，盡量壓縮圖片的尺寸；

2 圖片格式：

建議選用JPEG 2000、JPEG XR 和 WebP 等圖片格式，他們的壓縮效果通常比 PNG 或 JPEG 好，因此下載速度更快，消耗的數據流量更少。

3 圖片處理技術：

把圖片處理成progressive jpeg適合網頁加載的圖片；通過這工webpagetest 網址：https://www.webpagetest.org/ 輸入你的網站域名，分析出可優化圖片，根據圖片鏈接下載圖片，使用如上工具壓縮圖片，將JPEG圖像的壓縮級別設置為85.最后替換掉以前的圖片。

4 少圖：

能用文字替代的，盡可能少使用圖片。還有在使用圖標時候，使用Svg格式的圖標，體積比圖片小。

5 選擇正確的圖像尺寸：

理想情況下，您的頁面永遠不應提供大于用戶屏幕上呈現的版本的圖像。任何大于此的東西都會導致浪費的字節并減慢頁面加載時間。您可以為每個圖像生成多個版本（pc.jpg和mobile.jpg），然后使用媒體查詢，在手機端調用尺寸較小的手機端圖像，

@media screen and (max-width: 698px) { .xxx{background:url(../mobie.jpg);}}

2.優化css, html, js代碼 1 壓縮代碼：

前端開發工程師在寫Shopify主題時候，為了代碼的可讀性，會在代碼里面加一些空格，占位符，以及注釋等，在網站上線前，代碼會被工程師壓縮去掉空格，所以，賣家在Shopify主題加入的代碼，也需要進行處理，以是代碼輕量化(注意：已經開發好的主題不要去壓縮)。

類似這樣的代碼壓縮網站

2 移除未使用代碼：

網頁有的代碼是未使用的代碼，比如引入的CSS文件，默認情況下，瀏覽器必須先下載，解析和處理它遇到的所有外部樣式表，然后才能將任何內容顯示或呈現給用戶的屏幕。但是引入的未使用的CSS文件會被瀏覽器下載，增加了網絡負載，所以需要去掉這樣的引入鏈接。對于關鍵的CSS可以使用內聯，所謂內聯關鍵CSS舉一個例子就明白；

<div style=”color:gray;”></div>里面的style=“color:gray;”就是內聯CSS用法，直接把CSS代碼寫入html代碼里面，瀏覽器只需要加載幾個字體不需要加載整個CSS文件。（簡單的理解是這樣）

找出無關的CSS代碼，可以嘗試使用ChromeDevTools運行代碼覆蓋率測試。

3 移除不必要的Shopify APP：

用過Shopify的賣家知道安裝過多的APP（就是插件），會明顯感覺到網頁速度加載變慢了。除了安裝APP增加了代碼，最重要的因素是，一般APP的代碼是放在APP服務商的主機上面（因為人家要收你錢，且不想輕易讓你改代碼），每次打開網頁時候，會從APP服務商那邊調用代碼，這中間的網速過慢，會拖累網速。所以很多時候會看到，實時聊天或者review會后顯示一步。

4 合并CSS，JS代碼：

分別將js和css分別合并到一個共享文件，這樣不僅能夠簡化代碼，而且在執行js文件是，如果js文件較多，就需要多次向服務器請求數據，這樣將會延長加載速度，將js文件合并在一起，減少了請求的次數，就能夠提高加載的速度；

具體操作是：新建一個文件后綴名修改成01.css 01.js 然后分別把多個CSS文件的代碼復制黏貼到01.CSS，分別把多個CSS文件的代碼復制黏貼到01.js.將這2個文件上傳到Shopify，獲取文件鏈接。將如下的兩行代碼放到Shoipfy主題的<head></head>標簽里面：

3.優化網頁視頻加入網頁的視頻選用清晰度高容量小的視頻，當然可以考慮嵌入YouTube視頻，會根據訪客網速，給訪客不同的視頻質量.

其次，網頁加載時候，禁用視頻自動播放。

4.啟用網頁預加載對應產品很多的賣家，你的產品一頁不能全部展示完所有的產品，所有你要分頁展示，那么對于分頁展示的商品，第二頁就可以采用網頁預加載技術來提高網頁的打開速度；如下圖所示，當點擊第二頁時候，會立即跳到第二頁，當訪問第三頁時候，瀏覽器會在后臺加載第三頁，以此類推。

來源：喜運達