丰满人妻一区二区三区免费视频,亚洲国产最新AV在线

Shopify網(wǎng)頁(yè)加載速度優(yōu)化技巧實(shí)操教程

電商網(wǎng)站展示商品信息，那么就會(huì)有大量的圖片，圖片的大小，格式，以及使用的圖片處理技術(shù)都會(huì)影響到網(wǎng)頁(yè)加載的速度。

Shopify網(wǎng)頁(yè)加載速度優(yōu)化技巧實(shí)操教程

大家好，最近有賣家向小編反應(yīng)Shopify搭建好后，網(wǎng)頁(yè)加載非常慢，有時(shí)候一個(gè)網(wǎng)頁(yè)加載十多秒，訪客停留時(shí)間也比較短，今天為了回饋關(guān)注本公眾號(hào)的粉絲賣家，關(guān)于優(yōu)化Shopify速度的實(shí)操教程。

1.優(yōu)化圖片電商網(wǎng)站展示商品信息，那么就會(huì)有大量的圖片，圖片的大小，格式，以及使用的圖片處理技術(shù)都會(huì)影響到網(wǎng)頁(yè)加載的速度。根據(jù)我的運(yùn)營(yíng)經(jīng)驗(yàn)總結(jié)出如下幾點(diǎn)圖片優(yōu)化技巧：

1 圖片大?。?

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

2 圖片格式：

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

3 圖片處理技術(shù)：

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

4 少圖：

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

5 選擇正確的圖像尺寸：

理想情況下，您的頁(yè)面永遠(yuǎn)不應(yīng)提供大于用戶屏幕上呈現(xiàn)的版本的圖像。任何大于此的東西都會(huì)導(dǎo)致浪費(fèi)的字節(jié)并減慢頁(yè)面加載時(shí)間。您可以為每個(gè)圖像生成多個(gè)版本（pc.jpg和mobile.jpg），然后使用媒體查詢，在手機(jī)端調(diào)用尺寸較小的手機(jī)端圖像，

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

2.優(yōu)化css, html, js代碼 1 壓縮代碼：

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

類似這樣的代碼壓縮網(wǎng)站：http://tool.oschina.net/jscompress/，復(fù)制代碼進(jìn)去，運(yùn)行即可壓縮。

2 移除未使用代碼：

網(wǎng)頁(yè)有的代碼是未使用的代碼，比如引入的CSS文件，默認(rèn)情況下，瀏覽器必須先下載，解析和處理它遇到的所有外部樣式表，然后才能將任何內(nèi)容顯示或呈現(xiàn)給用戶的屏幕。但是引入的未使用的CSS文件會(huì)被瀏覽器下載，增加了網(wǎng)絡(luò)負(fù)載，所以需要去掉這樣的引入鏈接。對(duì)于關(guān)鍵的CSS可以使用內(nèi)聯(lián)，所謂內(nèi)聯(lián)關(guān)鍵CSS舉一個(gè)例子就明白；

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

找出無關(guān)的CSS代碼，可以嘗試使用ChromeDevTools運(yùn)行代碼覆蓋率測(cè)試。

3 移除不必要的Shopify APP：

用過Shopify的賣家知道安裝過多的APP（就是插件），會(huì)明顯感覺到網(wǎng)頁(yè)速度加載變慢了。除了安裝APP增加了代碼，最重要的因素是，一般APP的代碼是放在APP服務(wù)商的主機(jī)上面（因?yàn)槿思乙漳沐X，且不想輕易讓你改代碼），每次打開網(wǎng)頁(yè)時(shí)候，會(huì)從APP服務(wù)商那邊調(diào)用代碼，這中間的網(wǎng)速過慢，會(huì)拖累網(wǎng)速。所以很多時(shí)候會(huì)看到，實(shí)時(shí)聊天或者review會(huì)后顯示一步。

4 合并CSS，JS代碼：

分別將js和css分別合并到一個(gè)共享文件，這樣不僅能夠簡(jiǎn)化代碼，而且在執(zhí)行js文件是，如果js文件較多，就需要多次向服務(wù)器請(qǐng)求數(shù)據(jù)，這樣將會(huì)延長(zhǎng)加載速度，將js文件合并在一起，減少了請(qǐng)求的次數(shù)，就能夠提高加載的速度；

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

3.優(yōu)化網(wǎng)頁(yè)視頻加入網(wǎng)頁(yè)的視頻選用清晰度高容量小的視頻，當(dāng)然可以考慮嵌入YouTube視頻，會(huì)根據(jù)訪客網(wǎng)速，給訪客不同的視頻質(zhì)量.

其次，網(wǎng)頁(yè)加載時(shí)候，禁用視頻自動(dòng)播放。

4.啟用網(wǎng)頁(yè)預(yù)加載對(duì)應(yīng)產(chǎn)品很多的賣家，你的產(chǎn)品一頁(yè)不能全部展示完所有的產(chǎn)品，所有你要分頁(yè)展示，那么對(duì)于分頁(yè)展示的商品，第二頁(yè)就可以采用網(wǎng)頁(yè)預(yù)加載技術(shù)來提高網(wǎng)頁(yè)的打開速度；如下圖所示，當(dāng)點(diǎn)擊第二頁(yè)時(shí)候，會(huì)立即跳到第二頁(yè)，當(dāng)訪問第三頁(yè)時(shí)候，瀏覽器會(huì)在后臺(tái)加載第三頁(yè)，以此類推。

（來源：K哥聊出海）