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

2個小改動,將提升獨立站的加載速度

網(wǎng)站加載時間每延遲100毫秒,轉(zhuǎn)化率就會降低7%

2個小改動,將提升獨立站的加載速度

產(chǎn)品圖片是Shopify獨立站電商賣家銷售的工具之一,買家在無法真實地觸摸網(wǎng)站產(chǎn)品時,就要借助產(chǎn)品圖片和描述以此做出購買決策。高質(zhì)量的產(chǎn)品圖片可以提高銷售,但很多賣家可能還會存在一些問題。在多數(shù)情況下,他們所銷售的產(chǎn)品因圖片過大,而加載速度太慢,導(dǎo)致買家不耐煩。

根據(jù)一項報告顯示,如果網(wǎng)站加載時間超過三秒,一半以上的手機用戶就會退出該網(wǎng)站;網(wǎng)站加載時間每延遲100毫秒,轉(zhuǎn)化率就會降低7%;而網(wǎng)頁加載時間每延遲兩秒,跳出率就會增加103%。

但幸運的是,一個簡單的HTML屬性就能夠提高網(wǎng)站性能,并提供引人注目的圖片。

合適的大小

提供一個在屏幕上顯示良好的產(chǎn)品圖片和一個快速加載網(wǎng)站的解決方案可能取決于圖片大小。

2個小改動,將提升獨立站的加載速度

以英國健康零食品牌Graze為例,當(dāng)產(chǎn)品圖片在13英寸的MacBook Air上顯示時,這些圖片(就分辨率和文件大小而言)明顯大于要求所需。圖片在屏幕上只有464像素寬,但是卻被以830像素進行傳送。

整個圖片(830 x 495像素)被壓縮,大小約為81 KB,總像素約為41萬像素。但是當(dāng)圖像被調(diào)整到464 x 277像素時(即顯示尺寸),大小約為20 KB,總像素大約128000。

這聽起來可能不多,但Graze的主頁上有大約2MB的圖片。如果傳輸?shù)膱D像大小與所需大小之間的關(guān)系是恒定的,Graze可以將其主頁圖片負載減少1.5 MB或75%,這將顯著提高移動設(shè)備的加載時間。

另外,再以一家在線服裝零售商Fred Perry為例,該網(wǎng)站正在使用的是HTML srcset屬性及其產(chǎn)品圖片。實際上,這個HTML屬性為網(wǎng)頁瀏覽器提供了產(chǎn)品圖片的幾個版本。無論該圖像是顯示在大屏幕上還是小屏幕上,它都會提供適當(dāng)大小的圖片。

2個小改動,將提升獨立站的加載速度

(Fred Perry網(wǎng)站為瀏覽器提供了數(shù)個產(chǎn)品圖片選項,這些選項由srcset屬性傳輸。)

srcset屬性

HTML srcset屬性大約對90%的互聯(lián)網(wǎng)用戶可用,因為它可以與移動和桌面瀏覽器兼容。該屬性的目的是為特定的屏幕大小提供合適的圖片。

2個小改動,將提升獨立站的加載速度

在上面的示例中,不支持srcset的瀏覽器只需使用src屬性并傳輸指定的圖片。因此,即使可能無法獲得較好的圖像,但srcset不會破壞這些舊的瀏覽器。

然而,絕大多數(shù)瀏覽器會考慮屏幕的寬度和分辨率,然后選擇可用的圖像。例如,如果頁面顯示為750像素寬,在大多數(shù)情況下瀏覽器將會選擇“product-800”。圖像仍然會比要求的大一些,但它的大小將明顯比1,200像素版本或200像素版本更接近。

另外,這個過程其實是可以自動化操作的。不過根據(jù)電商平臺的不同,這可能需要一些開發(fā)工作。在大多數(shù)情況下,你會上傳較大的圖像到電商平臺中,然后腳本將創(chuàng)建圖像的較小版本,并將它們包含在產(chǎn)品詳細信息頁面中。

如果希望對每個屏幕大小顯示的圖像有更多的控制,還可以包含sizes屬性。

2個小改動,將提升獨立站的加載速度

sizes屬性可以使你管理瀏覽器在每個斷點上使用哪個圖像。綜上所述,srcset和sizes是提高網(wǎng)站性能的強大工具。

(來源:跨境喵的碎碎念)

以上內(nèi)容屬作者個人觀點,不代表雨果網(wǎng)立場!本文經(jīng)原作者獨家授權(quán)供稿,轉(zhuǎn)載需經(jīng)雨果網(wǎng)授權(quán)同意。

分享到:

--
評論
最新 熱門 資訊 資料 專題 服務(wù) 果園 標(biāo)簽 百科 搜索
雨果跨境顧問
【爆單沖刺】Google爆單沖刺包
雨果跨境谷歌官方顧問

收藏

--

--

分享
跨境喵的碎碎念
分享不易,關(guān)注獲取更多干貨