2个小改动,将提升独立站的加载速度

雨果网作者:雨果网
2019-07-02 11:49:27

网站加载时间每延迟100毫秒,转化率就会降低7%

2个小改动,将提升独立站的加载速度

产品图片是Shopify独立站电商卖家销售的工具之一,买家在无法真实地触摸网站产品时,就要借助产品图片和描述以此做出购买决策。高质量的产品图片可以提高销售,但很多卖家可能还会存在一些问题。在多数情况下,他们所销售的产品因图片过大,而加载速度太慢,导致买家不耐烦。

根据一项报告显示,如果网站加载时间超过三秒,一半以上的手机用户就会退出该网站;网站加载时间每延迟100毫秒,转化率就会降低7%;而网页加载时间每延迟两秒,跳出率就会增加103%。

但幸运的是,一个简单的HTML属性就能够提高网站性能,并提供引人注目的图片。

合适的大小

提供一个在屏幕上显示良好的产品图片和一个快速加载网站的解决方案可能取决于图片大小。

2个小改动,将提升独立站的加载速度

以英国健康零食品牌Graze为例,当产品图片在13英寸的MacBook Air上显示时,这些图片(就分辨率和文件大小而言)明显大于要求所需。图片在屏幕上只有464像素宽,但是却被以830像素进行传送。

整个图片(830 x 495像素)被压缩,大小约为81 KB,总像素约为41万像素。但是当图像被调整到464 x 277像素时(即显示尺寸),大小约为20 KB,总像素大约128000。

这听起来可能不多,但Graze的主页上有大约2MB的图片。如果传输的图像大小与所需大小之间的关系是恒定的,Graze可以将其主页图片负载减少1.5 MB或75%,这将显著提高移动设备的加载时间。

另外,再以一家在线服装零售商Fred Perry为例,该网站正在使用的是HTML srcset属性及其产品图片。实际上,这个HTML属性为网页浏览器提供了产品图片的几个版本。无论该图像是显示在大屏幕上还是小屏幕上,它都会提供适当大小的图片。

2个小改动,将提升独立站的加载速度

(Fred Perry网站为浏览器提供了数个产品图片选项,这些选项由srcset属性传输。)

srcset属性

HTML srcset属性大约对90%的互联网用户可用,因为它可以与移动和桌面浏览器兼容。该属性的目的是为特定的屏幕大小提供合适的图片。

2个小改动,将提升独立站的加载速度

在上面的示例中,不支持srcset的浏览器只需使用src属性并传输指定的图片。因此,即使可能无法获得较好的图像,但srcset不会破坏这些旧的浏览器。

然而,绝大多数浏览器会考虑屏幕的宽度和分辨率,然后选择可用的图像。例如,如果页面显示为750像素宽,在大多数情况下浏览器将会选择“product-800”。图像仍然会比要求的大一些,但它的大小将明显比1,200像素版本或200像素版本更接近。

另外,这个过程其实是可以自动化操作的。不过根据电商平台的不同,这可能需要一些开发工作。在大多数情况下,你会上传较大的图像到电商平台中,然后脚本将创建图像的较小版本,并将它们包含在产品详细信息页面中。

如果希望对每个屏幕大小显示的图像有更多的控制,还可以包含sizes属性。

2个小改动,将提升独立站的加载速度

sizes属性可以使你管理浏览器在每个断点上使用哪个图像。综上所述,srcset和sizes是提高网站性能的强大工具。

(编译/雨果网 宋淑湲)

【特别声明】未经许可同意,任何个人或组织不得复制、转载、或以其他方式使用本网站内容。转载请联系:editor@cifnews.com

本文被以下果园收录
查看更多
自建站
跨境社区
属于跨境卖家自己的网站。seo、引流、运营、营销哪一样都不能少。
进入果园
Shopify
跨境社区
全球著名的电商类SaaS平台,赋能于来自约175个国家的60多万家中小商户、大型零售贸易企业及全球知名品牌!
进入果园
微软广告
跨境社区
微软广告,智能连接,全球优质买家一触即达!
进入果园

0 条评论

0 收藏

分享到:

shopify
相关专题
shopify
Shopify是由托比亚斯·卢克创办的加拿大电子商务软件开发商,总部位于加拿大首都渥太华,其提供的服务软件Shopify是一个SaaS领域的购物车系统,适合跨境电商建立独立站,用户支付一定费用即可在其上利用各种主题/模板建立自己的网上商店。
相关内容
订阅每周精选
热门文章
最新文章
©2013 雨果网 闽ICP备11004599号-1
意见反馈
联系信息:
反馈问题:
问题详情:
我要爆料
联系信息:
爆料详情:
微信公众号
扫描下方二维码或者搜索微信公众号名称,获取最新最全内容
雨果网
雨果网
跨境进口
跨境进口
雨课
雨课
CCEE优品全球
CCEE优品全球
微信小程序
扫描下方二维码或者搜索微信小程序名称,获取最新最全内容
雨果网小程序
雨果网小程序
雨课小程序
雨课小程序
CCEE小程序
CCEE小程序

我要爆料

下载App

意见反馈

返回顶部

X
请正确填写手机号码或邮箱!
请输入内容
发送

扫描二维码
下载雨果网APP