pagefly.io在本文中，您将了解页面速度，包括导致页面速度变慢的原因，它可能是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在“折叠后”加载动态尺寸的图像。
技术性优化工作
修复服务器错误
这些错误通常是由代码或应用程序加载引起的。 您可以通过以下步骤快速访问以进行修复：
- 打开Chrome游览器
- 打开Chrome开发者工具（ Mac：Command + Option + J ，Windows： Control + Shift + J）
- 浏览您网站上的几个页面并查找错误（错误由红色显示）
设计优化工作
我们强烈建议您使用Hero
您可以使用具有精美风格的单一hero image以及消息或召唤动作。 您也可以使用幻灯片，但是它们增加页面的大小。
该建议并不是100％正确，您可以使用A / B测试来确定最适合您站点的方案。
“移动设备优先”设计
当前，进入Shopify商店的移动设备流量越来越多，因此“移动优先”设计非常重要，它是用户体验的关键指标。
关于移动优先设计，本指南专门讲述了移动设备性能以及如何对其进行优化，您可以参考一下。
始终保持性能平衡！
是的，您应该记住这一点，因为我们希望在不影响用户体验的前提下，设计或用户体验，分析和测试的技术优化之间找出平衡点。
结束语
现在放松下来，并把本片文章添加到书签，以备参考，它在优化页面速度方面肯定会对您有很大帮助。 把自己想像成您的顾客在自己的商店中体验一下，到时你会发现比预想更多的问题。 如果您在加载时间甚至财务方面都遇到问题，那么请考虑一下下面提高页面速度的3大关键因素：
- 图片优化
- 延迟加载
- 应用分析与优化
立即开始优化Shopify商店，您享受这个结果。
最后，正如Speed Boostr所说：PSI分数与实际速度不相关，对于具有第三方应用程序的Shopify商店来说，它不是一个很好的指标：
关于PageSpeed，您可以在此处阅读更多有关如何加快网站加载时间以获取销售指南。 它可以帮助您改善商店的加载时间。
参考引用
