页面速度优化

在本文中,您将了解页面速度,包括导致页面速度变慢的原因,它可能是PageFly范围之外的因素引起的,还有提高商店页面速度的一些方法。 页面速度在商店的转化率中扮演着重要角色,请不要错过这篇文章。

页面速度的基础

什么是页面速度?

页面速度是显示在一个网站页面的所有内容所花费的时间。 换句话说,页面速度可以衡量加载页面有多快,我们都期望我们的页面加载速度很快。

由Google提供的PageSpeed Insights(PSI)测量移动设备和台式机设备上页面的性能,并提供有关如何改善该页面的建议。

PSI提供有关页面的实验室数据和现场数据。 对您Shopify商店来说使用PSI也有好处,也有坏处。

PSI的优点

我们不能否认Google的PSI是一款出色的工具,它可以提供有关移动设备和台式机设备的页面性能报告,并为您提供改善页面的详细建议,例如:

  • 优化图片
  • 缩小CSS
  • 缩小JavaScript
  • 消除折叠内容中的阻止渲染的JavaScript和CSS
  • 利用浏览器缓存减少服务器响应时间
  • 避免登录页面重定向
  • Gzip压缩

Shopify商店的所有者应该考虑使用Google的PSI,因为它的建议由Google本身直接提供的,值得考虑。

PSI的缺点

尽管PSI有优点,但也有一些缺点。

对于没有技术背景的人来说,使用起来非常麻烦,并且可能很难理解PSI提供的复杂数据。 它使用“开发人员语言”,对很多人来说太技术性了。

此外,对于某些Shopify主题(尤其是Turbo主题),Google的PSI未能检测到许多提速指标(智能图像加载,无限滚动功能等)。 例如,PSI无法检测Turbo的预加载功能,因为这取决于用户的行为。

还有您要了解,移动设备的PSI分数取决于模拟器,模拟器是设计用来模拟移动设备上页面的行为和性能的计算机程序。 但是,仿真器并不总是准确的,因为每次测试时某些速度工具都会为您提供不同的结果。

Google的PSI确是个有用的工具,可以为您提供许多建议,但是这些建议通常很难实施。

什么是好的网页速度?

在本文中,我们将向您介绍Google PageSpeed Insights。 这对于网站管理员,开发人员以及拥有任何网站的任何人都是有用的工具。 值得庆幸的是,Google免费提供了此工具,因此您无需花一分钱就能查找,检查和修复网站的性能。

这里就问题来了,我们如何定义良好的页面速度,或者换句话说,良好的性能得分是多少? 通过运行Lighthouse收集和分析有关页面的数据来确定该分数。 “分数90或以上被认为是快速的,而50到90的分数被认为是中度的。 低于50被认为是缓慢的。”

有一项研究表明:

  • 如果您的网页5秒以内加载,这比大约25%的页面快
  • 如果您的网页2.9秒以内加载,这比大约50%的页面快
  • 如果您的网页1.7秒以内加载,这比大约75%的页面快
  • 如果您的网页0.8秒以内加载,这比大约94%的页面快

Maile Ohye在Google网站站长的网站站长网站性能中阐述,“ 2秒是电子商务网站可接受性的门槛。 在Google,我们的目标是不到半秒钟。”

当达到良好的加载时间时,Google显示 页面加载事件超过3秒时,53%的移动访问者选择离开:因此达到好的页面速度是您应该试图达到的目标。

页面速度重要性以及对转换率的影响

根据Akamai的研究,网页加载时间延迟两秒会导致跳出率为103%,如果您的网站加载时间超过三秒,则可能会失去近一半的访问者。

这还不是最坏的事情-来自Akamai的解决方案也表明,超过40%的访问者对网站性能的不良体验告诉他们的朋友和家人。

因此,我们可以说,网站速度越快,您的客户就会越快乐。 这充分证明了页面速度对您的网站和在线商店的重要性。

显然,页面速度是Google用于对网站进行排名的一个因素。 它甚至会对台式机和移动设备的SEO排名产生重大影响,尤其是Google的移动设备优先索引。 早在2010年,Google就将页面速度列为排名因素,并专注于桌面搜索,但从2018年7月开始,移动页面速度实际上已成为搜索结果中的官方排名因素。

在转换率方面,页面速度也起着至关重要的作用。 转化率是指您网站上完成转化并完成预期目标(转化)的访问者在访问者总数中所占的百分比。 例如,如果您的商品页面有100位访问者,并且有10位访问者单击“立即购买”按钮(10次转化),则您的转化率为10%。 有很多因素会影响网站的转化率,但网站的性能会对其产生很大的影响。 研究表明,页面速度将提高转换率。 可以理解,如果您的页面快速加载,则访问者更细化在该页面进行购买或其他行为。

根据Hubspot的研究,延迟1秒意味着转化次数减少7%。 同样根据Hubspot:

  • 页面加载时间为2.4秒时,有1.9%转换率。
  • 页面加载时间为3.3秒时,有1.5%转换率。
  • 页面加载时间为4.2秒时,不足1%转换率。
  • 页面加载时间为5.7秒以上时,有0.6%转换率。

其他公司也经历过:

  • 加载时间每减少1秒,沃尔玛的转化率就会提高2%。
  • 通过将页面加载时间减少0.85秒,COOK将转化次数提高了7%。
  • WordStream提高了页面速度,转换率提高了15%。

因此,如果您的商店的加载时间很长,那么您的访客就不会停留,直接跳出。 换句话说,如果您的商店结帐时间较长,那么您的客户可以放弃。 页面加载缓慢使人们有更多时间改变主意。

简而言之,最好是在访问和购买过程中抓住并留住访客,以快速加载时间来使他们做出购买决定,这样才能引导他们迈向转换。

页面速度取决于PageFly之外的多个因素

有很多不同的因素会导致页面的加载时间,下面列出这些因素:

  • 低效代码:商店越复杂,代码量就越大。 如果您的商店包含很多低效的代码,则商店的速度将会降低,因为服务器必须进行更多工作才能获得所需的足够信息。
  • 超大的文件:图像和Flash图形需要花费一些时间才能加载,如果未进行优化,它们会使您的商店和网站运行缓慢。 页面要加载的图像越多,花费的时间就越多。
    文件越大,表示服务器处理该页面所花费的时间就越长,而用户呈现该页面所花费的时间就越长。
  • 多个重定向:当您多次链接到商店或网站中的特定地址时,就会使用重定向,并且花费时间来处理所有URL改组。 简而言之,当您放置重定向时,这意味着用户实际上必须等待页面加载两次。
  • 服务器的位置和性能:简单地理解,一台出色的服务器将迅速吸引访问者。 专用服务器将为您提供更快的页面加载时间,因为服务器内部没有竞争。

如何优化您的网站以使其加载更快?

这是一个很大的问题,以至于许多人构建网站时,尤其是在线商店,都提出了这个问题。在这一部分中,我们将向您提供几个建议,以使您的商店运行得越来越快,并减少加载时间。

优化图片

优化所有图像以最小化大小,从而减少加载时间。 这项工作将有助于消除不可见的图像信息并提高高效压缩技术。 在许多情况下,这可以节省50%或更多的数据。

有3个因素可以完成图像优化,它们是压缩,服务器上的图像大小和字段类型。 我们接下来继续讲解这些因素。

压缩

减小图像的大小,不失质量或颜色异。 这有助于减少存储它们所需的空间量。

服务器上的图片大小

这里提到的是页面加载的图像尺寸。 例如,如果您在主题中使用2000px图片,那么在屏幕尺寸为400px的手机上就没有用了。 Speed Boostr建议您将使用图片大小为浏览器中实际容器的1~1.5倍。 这可以通过编辑liquid代码以加载较小的图像来解决,或者可以使用scrset。 通过使用scrset,它还可以帮助您的图像变为响应式,并在屏幕尺寸和分辨率差异很大的设备上正常工作。

PageFly在页面设置中为您提供了延迟加载选项,因此您只需要关心缩放折叠上方的图像,因为折叠下方的图像将被隐藏,直到用户将其滚动到视图中为止。

字段类型

在本文中,我们主要指的是JPG,PNG或SVG。

JPG:当图像色彩丰富,文字较少(例如摄影)时,可以使用此格式。 与PNG相比,文件大小非常小。 此格式不支持透明背景,而PNG支持。

PNG:当图像中的文字较多且颜色较少时,可以使用此格式。 这种格式提供了更清晰的文本表示。

SVG:通常认为它们是用于图形的最佳选择,因为它们可以永久扩展而不丢失分辨率。 某些类型的图像(例如徽标,图标和非说明性图形)通常可以用作SVG。

减少服务器请求并删除多余的应用程序

有两个主要技术可减少服务器请求。

延迟加载

如上所述,PageFly为您提供了延迟加载选项,该选项可以帮助您优化页面加载速度。 它可以帮助您的页面快速加载。 通过为页面使用延迟加载,页面加载时间减少10-30%。

您可以观看此视频,了解如何通过PageFly的延迟加载提高页面速度

应用问题

请记住,您用于商店的应用程序越多,需要加载的时间就越多。 这并不意味着您要卸载应用程序,而是您应该优化应用程序。

您应该检查所有应用程序,并保留对商店真正有用的应用程序(转换良好的)。 通过使用Google分析或Hotjar,您可以决定您的应用是否有用。

请注意旧应用程序的代码,因为有时即使将它们卸载,它们的代码仍会出现在您的页面上。 您可以在theme.liquid文件中找到脚本和样式表。

一些应用程序在theme.liquid文件中留下脚本/ CSS,因为它可以被用到更多用例。 如果仅在商品页面上需要该应用程序,则应仅在商品页面上加载该脚本,而不是商店中的每个页面。 为了解决这个问题,您可以参考以下代码,将资源限制为仅在需要的地方加载:https://pastebin.com/raw/8W71JEG4。

您还需要记住一件事,每次对主题进行任何编辑时,都应该复制它并处理备份主题,以免破坏实时主题。

页面大小

这是加载速度的关键因素,专家建议您的页面最大大小应小于4MB。 最好的目标小于2MB。 在很多情况下,图像是导致页面大小变大的因素,因此我们应该从图像压缩开始。

减少过大的图像

如果移动设备上的图片大于960px,桌面上的图片大于1500px,则可认为过大的图片。 您可以使用延迟加载选项来防止在页面加载时加载“折叠后”图像,然后使用srcset在“折叠后”加载动态尺寸的图像。

技术性优化工作

修复服务器错误

这些错误通常是由代码或应用程序加载引起的。 您可以通过以下步骤快速访问以进行修复:

  1. 打开Chrome游览器
  2. 打开Chrome开发者工具( Mac:Command + Option + J ,Windows: Control + Shift + J)
  3. 浏览您网站上的几个页面并查找错误(错误由红色显示)

设计优化工作

我们强烈建议您使用Hero

您可以使用具有精美风格的单一hero image以及消息或召唤动作。 您也可以使用幻灯片,但是它们增加页面的大小。

该建议并不是100%正确,您可以使用A / B测试来确定最适合您站点的方案。

“移动设备优先”设计

当前,进入Shopify商店的移动设备流量越来越多,因此“移动优先”设计非常重要,它是用户体验的关键指标。

关于移动优先设计,本指南专门讲述了移动设备性能以及如何对其进行优化,您可以参考一下。

始终保持性能平衡!

是的,您应该记住这一点,因为我们希望在不影响用户体验的前提下,设计或用户体验,分析和测试的技术优化之间找出平衡点。

结束语

现在放松下来,并把本片文章添加到书签,以备参考,它在优化页面速度方面肯定会对您有很大帮助。 把自己想像成您的顾客在自己的商店中体验一下,到时你会发现比预想更多的问题。 如果您在加载时间甚至财务方面都遇到问题,那么请考虑一下下面提高页面速度的3大关键因素:

  • 图片优化
  • 延迟加载
  • 应用分析与优化

立即开始优化Shopify商店,您享受这个结果。

最后,正如Speed Boostr所说:PSI分数与实际速度不相关,对于具有第三方应用程序的Shopify商店来说,它不是一个很好的指标:

关于PageSpeed,您可以在此处阅读更多有关如何加快网站加载时间以获取销售指南。 它可以帮助您改善商店的加载时间。

参考引用

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

PageFly Help Center is now available in French, Portuguese and Chinese.Please check the flags on the page header.

I got it!
Languages