已收藏,可在 我的資料庫 中查看
關(guān)注作者
您可能還需要

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

如何提高獨(dú)立站的打開速度

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

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

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

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

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

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

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

而WebP(圖片格式)的優(yōu)勢(shì)體現(xiàn)在它具有更優(yōu)的圖像數(shù)據(jù)壓縮算法,能帶來更小的圖片體積,而且擁有肉眼識(shí)別無差異的圖像質(zhì)量;同時(shí)具備了無損和有損的壓縮模式、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)過多組測(cè)試同一張圖片:開源系統(tǒng) Magento(120K左右) VS Shopify(未壓縮時(shí)50K) VS SHOPYY(30K),而以上圖片幾乎是肉眼完全無法識(shí)別清晰度的差距。

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

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

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

(二)插件的最佳使用方式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

公眾號(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)!

相關(guān)標(biāo)簽:

分享到:

--
評(píng)論
最新 熱門 資訊 資料 專題 服務(wù) 果園 標(biāo)簽 百科 搜索

收藏

--

--