如何提升Shopify和SHOPYY系統(tǒng)的訪問(wèn)速度，并提高谷歌評(píng)分

據(jù)數(shù)據(jù)統(tǒng)計(jì)，當(dāng)訪客訪問(wèn)網(wǎng)站時(shí)，正常的等待時(shí)間只有3秒。超過(guò)3秒，訪客就可能大量流失。如何提高獨(dú)立站的打開速度，是每個(gè)跨境電商賣家需要面臨的難題。關(guān)于網(wǎng)速優(yōu)化的文章有很多，但大多是隔靴搔癢，始終說(shuō)不到點(diǎn)上，今天SHOPYY帶你了解它的運(yùn)作原理和優(yōu)化技巧。

首先我們找到一個(gè)國(guó)外大賣通過(guò)shopify系統(tǒng)建的網(wǎng)站，并通過(guò)谷歌一款測(cè)試網(wǎng)速的工具（developers.google.com）進(jìn)行測(cè)試，如圖所示，評(píng)分竟然只有20分?。?00分滿）。

而影響評(píng)分的因素有很多：

（一）圖片優(yōu)化： 90%質(zhì)量輸出+Webp

首先我們做獨(dú)立站的時(shí)候，經(jīng)常會(huì)忽略了圖片優(yōu)化。其實(shí)圖片對(duì)網(wǎng)站的影響非常大，因?yàn)橐粋€(gè)網(wǎng)站里，圖片占據(jù)了頁(yè)面的95%，如果圖片得不到良好的優(yōu)化，那么其他方面的優(yōu)化做的再好，都會(huì)被一張大圖覆蓋掉網(wǎng)站的加載速度，因此我們需要做好圖片優(yōu)化。

而WebP（圖片格式）的優(yōu)勢(shì)體現(xiàn)在它具有更優(yōu)的圖像數(shù)據(jù)壓縮算法，能帶來(lái)更小的圖片體積，而且擁有肉眼識(shí)別無(wú)差異的圖像質(zhì)量；同時(shí)具備了無(wú)損和有損的壓縮模式、Alpha 透明以及動(dòng)畫的特性，在 JPEG 和 PNG 上的轉(zhuǎn)化效果都相當(dāng)優(yōu)秀、穩(wěn)定和統(tǒng)一。并且采用了SHOPYY-Webp處理之后，在肉眼幾乎不能識(shí)別同時(shí)大小幾乎降低了40-60%，提高打開速度又大幅度提高谷歌測(cè)評(píng)分！

如下圖所示，傳統(tǒng)輸出 VS SHOPYY-Webp 輸出：

經(jīng)過(guò)多組測(cè)試同一張圖片：開源系統(tǒng) Magento(120K左右) VS Shopify(未壓縮時(shí)50K) VS SHOPYY（30K），而以上圖片幾乎是肉眼完全無(wú)法識(shí)別清晰度的差距。

經(jīng)過(guò)驗(yàn)證Shopify跟SHOPYY目前都采用了 Webp智能格式輸出，大小要優(yōu)于現(xiàn)在其他如OpenCart、Magento等之類的開源系統(tǒng)。但Shopify需要另外安裝一個(gè)插件，來(lái)降低圖片質(zhì)量度的，否則Shopify同一張縮略圖的大小會(huì)比Shopyy大 40-60%。

（二）插件的最佳使用方式

很多賣家運(yùn)營(yíng)獨(dú)立站的時(shí)候，可能覺(jué)得網(wǎng)站里安裝越多的插件，功能越全面，轉(zhuǎn)化率就越高。其實(shí)這樣做只會(huì)適得其反，因?yàn)楫?dāng)網(wǎng)站里插件過(guò)多，必定會(huì)影響網(wǎng)站訪問(wèn)速度。所以我們可以將不必要的插件卸載掉，另外將必備的插件，進(jìn)行相關(guān)設(shè)置。

比如彈窗插件，我們要設(shè)置禁止首屏彈出（用戶第一次訪問(wèn)網(wǎng)站看到的頁(yè)面）?？赡軙?huì)有賣家擔(dān)心，進(jìn)入網(wǎng)站后沒(méi)有彈窗會(huì)不會(huì)導(dǎo)致用戶的跳出率升高？我們要知道，只看了一個(gè)頁(yè)面就關(guān)閉網(wǎng)頁(yè)的用戶，也不是我們的目標(biāo)用戶，這些用戶的意向度也并不會(huì)那么高。

據(jù)調(diào)查統(tǒng)計(jì)，Shopify很多高評(píng)分的插件，都是可以設(shè)置當(dāng)用戶訪問(wèn)3個(gè)或多個(gè)頁(yè)面后，再進(jìn)行彈出的。這樣也避免了由于客戶一進(jìn)入網(wǎng)站就被彈出窗口，影響用戶體驗(yàn)。同樣，SHOPYY也可以進(jìn)行相關(guān)設(shè)置，如下圖所示：

（三）網(wǎng)站前端代碼的優(yōu)化

經(jīng)常有賣家反映，我的網(wǎng)站訪問(wèn)好慢，但是服務(wù)器運(yùn)行速度又沒(méi)問(wèn)題，帶寬也很充足！后來(lái)遇到的賣家反映多了，整合對(duì)比了下，才發(fā)現(xiàn)共通之處！究其原因在于網(wǎng)站調(diào)用的google字體庫(kù)，所以我們要避免網(wǎng)站里含有g(shù)oogle字體，進(jìn)而提升網(wǎng)站速度。

另外在項(xiàng)目的開發(fā)中,隨著項(xiàng)目插件的增加，js、css文件變得越來(lái)越多,這就會(huì)給獨(dú)立站性能方面帶來(lái)一些問(wèn)題。如：頁(yè)面引入的js,css越多的話,那么就增加了http請(qǐng)求數(shù)，則會(huì)影響網(wǎng)站訪問(wèn)速度，因?yàn)閖s和css文件沒(méi)有完全加載完成的話，網(wǎng)站頁(yè)面就無(wú)法打開或無(wú)法顯示完整，而解決該問(wèn)題的一個(gè)好的方法就是合并js,css文件。

CSS：壓縮體積，多個(gè)合并成1-2個(gè)

JS：壓縮體積，多個(gè)合并成1-2個(gè)，非核心的JS代碼盡可能試用 async。

據(jù)賣家反饋，Shopify系統(tǒng)的部分模板，需要賣家自己手動(dòng)進(jìn)行相關(guān)文件的代碼合并修改，因?yàn)檫@些模板都是由第三方進(jìn)行開發(fā)的，所以若不懂代碼，則需要外聘技術(shù)來(lái)修改。

SHOPYY建站平臺(tái)針對(duì)此類問(wèn)題，進(jìn)行了自動(dòng)代碼文件合并，無(wú)需賣家二次手動(dòng)修改，即可從細(xì)節(jié)方面，提升用戶體驗(yàn)。

（四）CDN加速優(yōu)化

當(dāng)網(wǎng)站的服務(wù)器位置與您網(wǎng)站的訪問(wèn)者位于不同的地理位置，也會(huì)導(dǎo)致網(wǎng)站加載速度過(guò)慢，這時(shí)可以通過(guò)CDN加速服務(wù)，提升網(wǎng)站速度。

通俗一點(diǎn)講什么是CDN，簡(jiǎn)單一點(diǎn)理解就是比如你網(wǎng)站的服務(wù)器在美國(guó)，而客戶在加拿大，當(dāng)客戶在加拿大訪問(wèn)你的網(wǎng)站的時(shí)候，CDN會(huì)自動(dòng)將網(wǎng)絡(luò)節(jié)點(diǎn)切換到加拿大附近地區(qū)的節(jié)點(diǎn)，并且會(huì)記錄你過(guò)去訪問(wèn)的足跡，進(jìn)行相關(guān)頁(yè)面的緩存。這時(shí)再當(dāng)其他加拿大客戶訪問(wèn)你網(wǎng)站的時(shí)候，很大幾率可以選中其他客戶曾經(jīng)訪問(wèn)的緩存記錄，減少網(wǎng)站加載時(shí)間，從而提高網(wǎng)站打開速度和訪問(wèn)速度。

據(jù)調(diào)查，Shopify已經(jīng)使用了AKamai的CDN加速技術(shù)，而SHOPYY使用了阿里云的全球加速，打開速度都有保證。

SHOPYY作為國(guó)內(nèi)SaaS模式自建站平臺(tái)，全中文后臺(tái)簡(jiǎn)單易操作，只需商家提供域名，即可快速搭建好網(wǎng)站。并且SHOPYY平臺(tái)將為每個(gè)商家提供一對(duì)一資深顧問(wèn)建站咨詢服務(wù)，從點(diǎn)到面解決網(wǎng)站搭建過(guò)程中遇到的難點(diǎn)。

【SHOPYY全新SAAS模式，三秒自助建站】

訂閱號(hào)：每日推送干貨文章

公眾號(hào)：注冊(cè)和開通SHOPYY賬號(hào)

選擇SHOPYY，一鍵開啟跨境電商獨(dú)立站

點(diǎn)擊鏈接免費(fèi)試用：https://accounts.shopyy.com/invite-wangyh

建站咨詢QQ：3321789271

以上內(nèi)容屬作者個(gè)人觀點(diǎn)，不代表雨果網(wǎng)立場(chǎng)！