免費參與·100+跨境活動 
免費下載·4000+跨境資料 
免費學(xué)習(xí)·2000+直播課程 
免費加入·15萬+賣家交流群 
2020-04-27 11:00
大家好，最近有賣家向小編反應(yīng)Shopify搭建好后，網(wǎng)頁加載非常慢，有時候一個網(wǎng)頁加載十多秒，訪客停留時間也比較短，今天為了回饋關(guān)注本公眾號的粉絲賣家，關(guān)于優(yōu)化Shopify速度的實操教程。
1.優(yōu)化圖片電商網(wǎng)站展示商品信息，那么就會有大量的圖片，圖片的大小，格式，以及使用的圖片處理技術(shù)都會影響到網(wǎng)頁加載的速度。根據(jù)我的運營經(jīng)驗總結(jié)出如下幾點圖片優(yōu)化技巧：
1 圖片大小：
在不影響網(wǎng)站圖片清晰度情況下，盡量壓縮圖片的尺寸；
2 圖片格式：
建議選用JPEG 2000、JPEG XR 和 WebP 等圖片格式，他們的壓縮效果通常比 PNG 或 JPEG 好，因此下載速度更快，消耗的數(shù)據(jù)流量更少。
3 圖片處理技術(shù)：
把圖片處理成progressive jpeg適合網(wǎng)頁加載的圖片；通過這工webpagetest 網(wǎng)址：https://www.webpagetest.org/ 輸入你的網(wǎng)站域名，分析出可優(yōu)化圖片，根據(jù)圖片鏈接下載圖片，使用如上工具壓縮圖片，將JPEG圖像的壓縮級別設(shè)置為85.最后替換掉以前的圖片。
4 少圖：
能用文字替代的，盡可能少使用圖片。還有在使用圖標(biāo)時候，使用Svg格式的圖標(biāo)，體積比圖片小。
5 選擇正確的圖像尺寸：
理想情況下，您的頁面永遠(yuǎn)不應(yīng)提供大于用戶屏幕上呈現(xiàn)的版本的圖像。任何大于此的東西都會導(dǎo)致浪費的字節(jié)并減慢頁面加載時間。您可以為每個圖像生成多個版本（pc.jpg和mobile.jpg），然后使用媒體查詢，在手機端調(diào)用尺寸較小的手機端圖像，
@media screen and (max-width: 698px) { .xxx{background:url(../mobie.jpg);}}
2.優(yōu)化css, html, js代碼 1 壓縮代碼：
前端開發(fā)工程師在寫Shopify主題時候，為了代碼的可讀性，會在代碼里面加一些空格，占位符，以及注釋等，在網(wǎng)站上線前，代碼會被工程師壓縮去掉空格，所以，賣家在Shopify主題加入的代碼，也需要進(jìn)行處理，以是代碼輕量化(注意：已經(jīng)開發(fā)好的主題不要去壓縮)。
類似這樣的代碼壓縮網(wǎng)站：http://tool.oschina.net/jscompress/，復(fù)制代碼進(jìn)去，運行即可壓縮。
2 移除未使用代碼：
網(wǎng)頁有的代碼是未使用的代碼，比如引入的CSS文件，默認(rèn)情況下，瀏覽器必須先下載，解析和處理它遇到的所有外部樣式表，然后才能將任何內(nèi)容顯示或呈現(xiàn)給用戶的屏幕。但是引入的未使用的CSS文件會被瀏覽器下載，增加了網(wǎng)絡(luò)負(fù)載，所以需要去掉這樣的引入鏈接。對于關(guān)鍵的CSS可以使用內(nèi)聯(lián)，所謂內(nèi)聯(lián)關(guān)鍵CSS舉一個例子就明白；
<div style=”color:gray;”></div>里面的style=“color:gray;”就是內(nèi)聯(lián)CSS用法，直接把CSS代碼寫入html代碼里面，瀏覽器只需要加載幾個字體不需要加載整個CSS文件。（簡單的理解是這樣）
找出無關(guān)的CSS代碼，可以嘗試使用ChromeDevTools運行代碼覆蓋率測試。
3 移除不必要的Shopify APP：
用過Shopify的賣家知道安裝過多的APP（就是插件），會明顯感覺到網(wǎng)頁速度加載變慢了。除了安裝APP增加了代碼，最重要的因素是，一般APP的代碼是放在APP服務(wù)商的主機上面（因為人家要收你錢，且不想輕易讓你改代碼），每次打開網(wǎng)頁時候，會從APP服務(wù)商那邊調(diào)用代碼，這中間的網(wǎng)速過慢，會拖累網(wǎng)速。所以很多時候會看到，實時聊天或者review會后顯示一步。
4 合并CSS，JS代碼：
分別將js和css分別合并到一個共享文件，這樣不僅能夠簡化代碼，而且在執(zhí)行js文件是，如果js文件較多，就需要多次向服務(wù)器請求數(shù)據(jù)，這樣將會延長加載速度，將js文件合并在一起，減少了請求的次數(shù)，就能夠提高加載的速度；
具體操作是：新建一個文件后綴名修改成01.css 01.js 然后分別把多個CSS文件的代碼復(fù)制黏貼到01.CSS，分別把多個CSS文件的代碼復(fù)制黏貼到01.js.將這2個文件上傳到Shopify，獲取文件鏈接 。將如下的兩行代碼放到Shoipfy主題的<head></head>標(biāo)簽里面：
<link rel="stylesheet" href="這里放獲取的鏈接地址01.css"/>
<script src="這里放獲取的鏈接地址01.js"></script>
3.優(yōu)化網(wǎng)頁視頻加入網(wǎng)頁的視頻選用清晰度高容量小的視頻，當(dāng)然可以考慮嵌入YouTube視頻，會根據(jù)訪客網(wǎng)速，給訪客不同的視頻質(zhì)量.
其次，網(wǎng)頁加載時候，禁用視頻自動播放。
4.啟用網(wǎng)頁預(yù)加載對應(yīng)產(chǎn)品很多的賣家，你的產(chǎn)品一頁不能全部展示完所有的產(chǎn)品，所有你要分頁展示，那么對于分頁展示的商品，第二頁就可以采用網(wǎng)頁預(yù)加載技術(shù)來提高網(wǎng)頁的打開速度；如下圖所示，當(dāng)點擊第二頁時候，會立即跳到第二頁，當(dāng)訪問第三頁時候，瀏覽器會在后臺加載第三頁，以此類推。
（來源：K哥聊出海）
