如何提高店铺页面性能丨网页加载速度慢解决方法

店铺功能与页面性能

1. 店铺页面由一系列功能模块组成,例如:模版代码、应用、图片、视频、支付、分享、数据分析埋点等。这些功能可以改善整体访客体验,并扩展店铺页面的功能。

2. 您添加到店铺页面的每一项功能都是需要网络和硬件资源才可以正常运行的,某些功能需要的资源比其它功能更多,添加新的功能可能会对您的店铺性能产生显著影响。

3. 当您考虑向店铺页面添加某项功能时,应该权衡它带来的价值与它对店铺页面性能产生的影响。某些情况下,为了提供更好的访客体验去提高转化率,您可能需要选择牺牲一些性能。

备注:仅在店铺管理后台安装和使用的SHOPLINE官方应用不会影响店铺页面的速度。

 

页面性能排查工具

您可以使用以下工具来检测在线商店的网页速度:

Lighthouse

您可以使用 Google PageSpeed Insights 运行自己的 Lighthouse 报告,以查看更详细的商店页面指标。若要了解这些指标的含义,请参阅 Google Lighthouse 性能评分文档

Lighthouse 报告讲解

____.png

Google PageSpeed Insights 获取的 Lighthouse 报告为例,您需要重点关注 Largest Contentful Paint、Total Blocking Time 两项指标,当指标状态显示为红色时,可以参考以下操作进行优化:

注意:下述内容仅对SHOPLINE官方提供的主题使用,非官方或私有主题请与对应开发者联系。

Total Blocking Time 指标异常时:

  1. 检查应用是否安装过多。
  2. 检查分析库是否使用过多。

Largest Contentful Paint 指标异常时:

  1. 检查图片或视频规格是否合理
  2. 检查应用是否安装过多。
  3. 检查分析库是否使用过多。

 

页面性能影响因素

店铺页面速度受多方面因素影响,按您是否可以控制为条件,我们可以将它们划分为 可控因素不可控因素

以下内容除了讲解店铺页面性能涉及的因素外,还会在 可控因素 部分给出如何处理这些因素的方法。

 

可控因素

1. 应用

当您添加应用去扩展店铺功能或外观时,这些应用会在模版中添加代码,这样它们才能运行。应用插入的代码与主题模版代码在同一个环境运行,会对页面的性能造成损耗。

复杂功能应用对性能造成的影响会更加明显,因此,我们建议您:

  • 减少安装应用的数量,删除不使用不需要的应用,在店铺功能和性能之间做好平衡
  • 避免插入大量自定义代码,自定义代码容易对主题模版原有结构产生破坏,除非您能保证插入的自定义代码对页面不会产生太大影响。
  • 功能相近的应用尽量选择性能卓越的安装。

备注:仅在店铺管理后台安装和使用的SHOPLINE官方应用不会影响店铺页面的速度。

2. 图片和视频

过大的图片和页面中隐藏的图片可能会对加载页面中的其它更重要的部分造成干扰。如果用户需要等待图片加载的时间过长,他们可能会认为这个店铺访问速度太慢。

Shopline 官方提供的主题对图片和视频都做了一系列优化处理。例如:

  • 延迟加载当前屏幕上未显示的图片或视频。
  • 根据屏幕尺寸加载特定规格尺寸的图片。
  • 渐进式加载 gif 大图。

注意:如果您的店铺使用的不是SHOPLINE官方主题,可以与主题的开发者确认是否有做这部分优化处理。

但是,这些优化措施并不能完全解决图片或视频对店铺性能的影响,您对店铺的配置也可能会对性能造成影响,因此我们建议:

  • 参考 图片尺寸建议 配置图片。
  • 避免使用大尺寸 GIF 图片,改用 PNG / JPG 格式图片(相同尺寸图片 GIF 格式的大小远大于其它图片格式)。
  • 单个商品分类关联的商品、单个商品关联的 SKU 图片不要超过 50 个。

3. 分析库

Shopline 提供了 Facebook Pixel、Google Ads、Google Analytics、Google 代码管理工具、Google 再营销工具、Bing 关键词广告等多种平台的事件追踪分析能力支持,这些分析能力的开启需要占用一定页面资源,大量开启也会对店铺页面性能产生影响。因此,我们建议您:

4. 主题模版

主题模版由 Handlebar、HTML、CSS 和 Javascript 代码组成。编辑或自定义模版时,文件大小可能会增大,并影响商店速度。

Shopline 官方提供多套免费主题模版,并不定时进行优化更新,对官方模版进行自定义代码编辑后将会导致模版变为私有模版,私有模版将无法及时同步到官方主题的最新优化。

如果您认为模版存在性能问题,可以尝试以下步骤:

  • 如果您使用的是 Shopline 官方主题模版,那么您可以联系 Shopline 官方团队以获取指导。如果您使用的是第三方或私有模版,则可以联系模版开发者进行咨询。
  • 考虑安装官方 OS 2.0 优化主题,例如:Arise主题。 
 

不可控因素

1. 客户的设备、网络和地点

访问您店铺的客户遍布全球各地,并且其设备和网络连接各不相同。这也就意味着商店的加载速度可能因这些因素而加快或减慢。

例如:您开设的是美国店铺,Shopline 将为您店铺做针对于美国地区做资源访问加速,如果客户在中国进行访问,那么这个客户的页面加载速度会相较于美国地区访问慢。

2. 本地浏览器缓存

您的店铺静态资源将会在客户的本地存储中暂时缓存或保存。当客户下次访问您的店铺时,浏览器可以从缓存中加载资源,而不必向服务器发送其他请求。

Shopline 将店铺中可缓存资源的浏览器缓存时间设置为一年。可缓存的文件包括图片文件、PDF、JS 文件和 CSS 文件。

3. 服务器端页面缓存

除了本地浏览器缓存外,Shopline 还在服务器端缓存页面。第一次加载页面时,可能速度较慢,但以后页面加载速度会加快,因为客户将接收缓存的副本。

还有其它问题?提交请求

评论