如何衡量和提高电子商务网站速度(11 条提示)以及为什么它对转化率优化至关重要
已发表: 2019-05-30加载缓慢的网站排名不佳,带来的收入减少,运行成本更高。 无论您从事什么业务,如果您有在线业务,提高网站速度是降低跳出率和提高电子商务转化率的最有益方法之一。
如果您在电子商务领域,则更需要投入时间和资源来实现尽可能快的网站速度。 研究表明,网站速度直接且显着地影响产品排名、转化率和每位访问者的价值。
但许多零售商不愿意做出重大改变。 网站速度优化看起来很复杂。 有许多不同的领域需要关注,其中许多领域需要大多数人不具备的特定编码技能。
如果你有同样的感觉,那就别担心。 在本指南中,我们将涵盖您需要了解的所有内容——从图像压缩到 CDN,再到服务器端数据库优化等等。 一旦您掌握了基础知识,您就会感到足够自信和知识渊博,可以将您的网站速度直接提升到平流层。 即使您没有任何技术开发或优化知识。
这是您可以在这篇文章中找到的内容:
什么是网站速度?
为什么网站速度很重要?
如何检查您当前的网站速度:Google PageSpeed Insights 结果说明
用于提高页面速度的顶级数据支持方法
1.检查并提高您的托管服务提供商的速度
2. 优化图片
3. 启用浏览器缓存
4. 缩小 HTML、JavaScript 和 CSS
5. 利用 AMP(加速移动页面)和 PWA(渐进式 Web 应用程序)
6. 杀死性能不佳的 WordPress 插件
7. 使用内容分发网络
8. 优化您的服务器响应时间
9. 尽可能使用压缩
10. 尽可能异步加载文件
11. 减少重定向
帮助提高网站速度的工具
准备好提高您的电子商务网站速度了吗?
听起来不错? 那我们就来挖吧!
什么是网站速度?
在网站速度方面,有很多常见的误解。 在我们深入探讨这篇文章的内容之前,让我们先定义几个关键术语。
首先,区分“页面速度”和“站点速度”很重要。 页面速度是在您的网站上加载单个特定页面所需的时间。 网站速度是您网站上的网页样本的平均速度。
首先,区分页面速度和网站速度很重要。 页面速度是在您的网站上加载单个特定页面所需的时间。 网站速度是您网站上的网页样本的平均速度。 点击推文在许多方面,这种区分是任意的,但值得理解以避免任何混淆。 这篇文章旨在为您提供特定页面和站点范围的优化技巧。 通过实施最佳页面实践(这将告知您如何设计所有页面),您将提高整体网站速度,这是关键指标。
网站速度可以根据页面加载时间(页面完全呈现所需的时间)或第一个字节的时间(浏览器从服务器接收第一个字节数据所需的时间)来衡量。 一般来说,页面加载时间(和类似的变体)是更准确和常用的度量,尽管在某些情况下第一个字节的时间也是一个有用的数字。
为什么网站速度很重要?
网站速度以许多与搜索排名、参与度、转化率等相关的关键方式影响您的网站。 但是许多网站管理员,其中包括电子商务零售商,都忽略了他们网站的这一重要方面。
网站速度以许多与搜索排名、参与度、转化率等相关的关键方式影响您的网站。 但是许多网站管理员,其中包括电子商务零售商,都忽略了他们网站的这一重要方面。 点击推文提高网站速度是获得竞争优势的最可靠方法之一。 让我们快速看看为什么它如此重要:
网站速度影响搜索排名
网站速度是谷歌的主要排名因素。 谷歌本身已多次重申这一点。 大量独立分析证实,在 SEO 方面,网站速度是最重要的优化领域之一。
115 点电子商务优化清单
正如为 Yoast 撰稿的 Edwin Toonen 所说:“您甚至不必非常仔细地听,因为 SEO 人员在屋顶上大喊:网站速度就是一切。 每天都有一篇新文章、白皮书、Google 代表或 SEO 专家告诉我们优化速度是您现在可以做的最重要的事情之一。 他们是对的,当然!”
网站速度影响跳出率
如果加载时间较长,人们更有可能离开您的网站。 此活动不仅对 Google 是一个负面信号(表明客户参与度低),而且还会直接影响您的转化率。
如果客户因为你的网站加载时间太长而没有留下来,他们就没有机会看到你的精彩的、转化优化的页面和优秀的产品。
网站速度影响客户价值
研究表明,每页浏览量的价值随着网站速度的增加而增加。 我们不只是在这里谈论几个百分点。 将您的网站加载时间缩短到一秒可以将您的每网页浏览价值提高多达 100%。
将您的网站速度降低到 1% 以下可以将每次浏览量的价值提高多达 100%。 来源
体验低网站速度会产生负面心理影响
加载缓慢的网站会让客户感到沮丧,并表明您缺乏专业精神。
当页面加载时间过长时,人们会感到有形压力。 一旦潜在客户将您的品牌与这种负面体验联系起来,他们将来就更有可能对它持悲观态度。
相反,快速加载的网站为客户提供积极的用户体验(查看这 11 个 UX 提示!)并传达您商店的专业性和质量。
如何检查您当前的网站速度:Google PageSpeed Insights 结果说明
有许多工具可用于测试您的网站速度。 一些专注于特定领域——比如你的 DNS 提供商速度或你的第一个字节的时间 (TTFB)——而另一些则更全面。 作为起点,没有比 Google PageSpeed Insights 更好的选择了。
以下是如何为您的网站提供完整的医疗信息以及结果的含义:
1. 前往 Google PageSpeed Insights 并在文本栏中输入您的 URL。 点击“分析”以获得您的结果。 在本演练中,我们将使用 Zappos 作为示例。 Google PageInsights 可以说是测试网站速度的最佳工具,它是完全免费且非常全面的。
2. 除了页面顶部包含的整体结果(将您的页面排名为慢速、平均或中等)之外,您还将获得三组针对移动设备和桌面设备的结果:
- 现场数据——这是基于历史数据,并从谷歌跟踪的用户样本中得出。 它很有用,因为它允许您查看过去可能出现的持续性问题,而不仅仅是在一个特定的测试案例中。 下面的彩色条显示您的页面与 Chrome 用户体验报告中的其他页面(Google 保存数据的所有页面)的比较情况。
- 源摘要(不自动显示) – 源摘要,您需要单击以展开,显示整个站点(而不是单个页面)的平均数据。 “Origin”是指基本 URL。
- 实验室数据- 这些是基于您单击“分析”时网页的性能的即时结果。 这些是从瞬时性能得出的当前结果,没有考虑任何其他数据。 您在页面顶部的整体网站速度得分基于此实验室数据。
3. 不要忘记有两个选项卡(标题中的蓝色菜单)——一个用于移动设备,一个用于桌面——显示不同的数据。 您通常需要单独应用与每个相关的优化建议。
4. 在每个部分中,有两个关键速度测量(FCP 和 FID)以及“实验室数据”部分中的五个独立测量:
- First Contentful Paint FCP – 在 Web 性能上下文中,术语“首次绘制”是指浏览器用户可见的第一个 Web 元素。 “第一个内容丰富的绘画”是第一个有凝聚力的内容出现的时候。 这里“内容”的定义是在文档对象模型中离散定义的任何东西——本质上是一个单独的、独立的元素,构成页面层次结构的一部分,如图像或文本块。 内容是网络用户可以“消费”的任何东西。 通过这种方式,它与“第一次绘制”不同,“第一次绘制”可以是简单的背景变化或单个像素。
- 首次输入延迟 (FID) –首次输入延迟是衡量您的网站响应速度的指标。 当访问者通过单击链接、放大图像、选择产品选项等方式与您的站点进行交互时,由于后台浏览器进程有效地“禁用”了交互式站点元素,因此可能需要一些额外的时间来接收响应。 FID 基于 Google 收集的实际用户数据,因此不包含在实验室数据中。
- 第一次有意义的绘画——本质上是衡量观众何时可以真正开始消费内容的指标。 当主要的首屏内容和网络字体都加载时,第一次有意义的绘制就发生了。 谷歌表示,这是他们衡量网站速度的主要用户体验指标。
- 速度指数 –从视觉上看,您的页面完全加载所需的时间。 它基于逐帧比较中浏览器渲染停止更改的时间。
- 第一个 CPU 空闲 –第一个 CPU 空闲表示网站至少在某种程度上具有交互性的时间。 并非所有的交互元素都准备好了,但有几个会准备好。
- 互动时间 –网站完全加载并完全互动所需的时间,准备好响应任何访问者的操作。
- Max Potential First Input Delay –如果要测试的最高可能 FID 的预测数字。 这个数字是基于实验室数据,而不是真实数据。
5. 在这三个部分下面是一个标题为“机会”的部分,以及它们可以降低您网站速度的时间。 这是测试的真正内容——提高网站速度的实用建议。 您可以展开每个建议以获取实施说明。
让我们看一下下面屏幕截图中的一些示例(我们将在下面的部分中更详细地介绍其中的大部分):
- 缩小JavaScript –缩小是压缩包含代码(HTML、CSS、JavaScript 等)的文件的过程,以便它们可以更快地从服务器传输到浏览器。
- 推迟离屏图像——推迟离屏图像涉及延迟非首屏图像的加载时间,减少第一个服务器请求的大小并提供更快的整体初始加载时间。 加载完所有首屏图像后,将呈现页面的其余图像。
- 删除未使用的 CSS – .css 样式表包含大量多余的代码是很常见的。 删除此代码可以减小 CSS 文件大小。 将所有 CSS 包含在一个文件中还可以减少浏览器解释数据所需的时间。
- 以下一代格式提供图像– JPEG 2000、JPEG XR 和 WebP(以及其他一些格式)等图像格式提供了比替代品更好的压缩,而不会牺牲质量。
- 减少服务器响应时间 (TTFB) –可以通过多种方式加快服务器响应时间,包括优化您的 CMS 和选择更快的托管服务提供商。
- 启用文本压缩 –当您在服务器上启用 gzip 功能时,文件中的文本将被压缩,从而减小其大小并加快传输速度。 然后,浏览器可以处理压缩文件。
6. 最后,在“机会”部分下方是“诊断”和通过的审核部分。 根据您通过的最佳网络实践和标准,这些(分别)涵盖了进一步的加速机会。
在随后的部分中,您可以看到更多关于提高站点速度的建议,以及您已通过的审核(非常适合检查更改是否已正确实施)。
Google PageSpeed Insights 有关于其所有功能和建议的指导性和清晰的文档,如果您有任何进一步的不确定性,它是一个很好的资源。
其他工具呢?
PageSpeed Insights 的所有功能都不是完美无缺的。
它绊倒的一个领域与地理区域有关。 测试服务器的位置未知,因此结果可能不一致。 例如,如果您的服务器位于英国,而测试服务器位于美国西海岸,那么对于在前国家/地区访问您网站的人来说,结果会更快。
使用 Pingdom 和 GTmetrix,两者都可以让您设置测试服务器的位置,以补充 PageSpeed Insights 提供的图片。
用于提高页面速度的顶级数据支持方法
好的,让我们深入研究一些实用技巧。
以下是您可以采取的十大步骤,以确保您的网站在眨眼间加载:
1.检查并提高您的托管服务提供商的速度
简短版本:虽然您可以对服务器进行积极的更改,并且从共享计划转向专用计划可能会有所帮助,但有时您只需要更改提供商即可。 在开始执行您控制的任务之前,请检查您的提供商的服务质量。
如果您的托管服务提供商的服务器速度很慢,您几乎无能为力来解决这个问题。 来源
使用 Bitcatcha 之类的工具来测试您的网站托管服务器的速度并将其与其他公司进行比较。
如果您的托管服务提供商速度很慢,那么您无能为力。 您可能需要考虑更换为新的提供商。 如果您经营在线商店,切换到具有电子商务经验的专用或托管托管服务提供商通常是有益的。
以下是托管计划在速度方面的主要区别:
- 共享主机 -共享主机是最便宜和最慢的托管形式。 您的网站将与其他用户的网站一起存储在服务器上。 这种安排的最大缺点是所有服务器资源,尤其是 CPU 和 RAM,也将被共享。 这会对站点速度产生不利影响,并且对于需要大量处理能力的大型站点可能会产生特别负面的影响。
- 虚拟专用服务器 (VPS) –虚拟专用服务器在许多方面类似于共享服务器。 多个站点托管在单个服务器上,但它们被虚拟屏障隔开,实际上重新创建了拥有自己的服务器的感觉。 这样做的主要好处是,您的所有服务器资源都被围起来了——您的室友不可能用完所有的热水,让您高枕无忧。 虚拟专用服务器还允许您在服务器管理方面拥有更高的自由度。 此外,如果您需要更多空间,您可以购买它。
- 专用主机 –专用主机是 VPS 主机的下一步。 有了专门的计划,您将租用服务器,该服务器将专门用于运行您的网站。 您还将拥有完全的管理员和根控制权(包括对操作系统和安全设置的选择),这可以使技术服务器站点速度优化成为可能。 专用主机非常适合拥有专门技术团队的大型网站和公司。
一般来说,如果您运行的是电子商务网站,则需要选择专用或 VPS 托管。
以下是一些评价最高的在线零售商供应商:
SiteGround – SiteGround 有许多专门针对电子商务平台的计划,包括 Magento、WooCommerce 和 PrestaShop。
Liquid Web – Liquid Web 的核心主张之一是卓越的客户服务。 该公司提供 24/7 全天候顾问服务,通常响应时间不到一分钟。 提供了许多特定于电子商务的计划(包括 WooCommerce 的专用托管),对于希望在未来扩大规模的中小型零售商来说,这是一个很好的选择。
InMotion 托管 – InMotion 非常受电子商务零售商的欢迎,是价格最优惠的选择之一。
Rackspace – Rackspace 是企业电子商务的首要解决方案之一,提供一系列专用和云托管解决方案。 客户服务和安全基础设施在行业中名列前茅。
不要吝啬您的托管服务提供商。 这是一个不受您控制的区域。 从长远来看,将成本置于性能之上只会导致较低的回报。
2. 优化图片
简短版本:优化图像是提高网站速度的最简单快捷的方法之一。 确保图像采用适合网络的格式。 使用 CSS 精灵来加快图像加载时间。
在网站速度方面,图像是罪魁祸首。 不必要地大的图像文件会不必要地占用服务器空间并需要更多时间发送到访问者的浏览器。
您应该在 PhotoShop 或 GIMP 等程序中优化图像,以保持对图像质量的完全控制。 不同的格式最适合不同类型的图像。 例如,一般来说,JPEG 是照片的理想选择,而具有库存颜色的简单图像将更快地呈现为 PNG。
以下是最常见格式以及何时使用它们的简要概述:
- JPEG(联合摄影专家组)—— JPEG 可能是最广泛使用的高质量照片和细节丰富图像的格式。 主要的好处是 JPEG 图像可以很好地呈现,同时提供高水平的压缩。 对于照片,JPEG 是首选选项。 您还应该考虑使用较新的 JPEG 变体,如 JPEG 2000 和 JPEG XR,它们可以提供更高级别的压缩。
- PNG(便携式网络图形)——作为一种格式,PNG 介于 JPEG 和 GIF 之间。 它在质量、支持多种颜色和尺寸之间取得了良好的平衡。 PNG 往往比 JPEG 小,但在颜色和细节方面没有完全相同的容量。 人们担心与旧浏览器的兼容性,但现在这些在很大程度上是多余的。
- GIF(图形交换格式)– GIF(网络上最古老的格式之一)最适合具有有限调色板(如徽标)的图像。 如果您需要上传主要由文本组成的图像,则可以选择 GIF 格式。 GIF 文件的主要优点是它们往往非常小。 由于色彩容量有限,GIF 不应用于丰富的图像或照片。 您还可以将 GIF 用于基本动画。 不要将 GIF 用于富媒体。 使用第三方托管内容(如 YouTube)将更有利于网站速度。
除了使用正确的格式外,您还可以通过以下方式优化图像以提高网站速度:
- 不要让图像比他们需要的更大——许多设计师和开发人员犯了一个错误,就是将大图像(通常超过几千像素)上传到他们的服务器,然后使用页面代码调整它们的大小。 这是一个大错误。 如果在产品页面上仅以 1000 像素显示,那么向访问者的浏览器发送 5,000 像素宽的图像绝对没有意义。 通常,图像需要相对较大才能启用缩放功能,但要尽可能小。 在上传之前调整图像大小。
- 在上传之前压缩图像——压缩会从您的图像文件中删除所有多余的信息,从而减小它们的大小。 某些“不可见”的细节,例如拍摄图像的时间,可能会嵌入到文件中。 TinyPNG、JPEG Optimizer 等工具和 WPSmush 等插件可用于快速执行此任务。 大量使用所需的所有付费计划都非常合理。
- 不要在页面上使用不必要的图片——每张图片都会占用网站完全加载所需的时间,所以不要使用超过绝对必要的图片。 很容易陷入仅仅为了图像而包含图像的陷阱。 再注射一次产品不会有伤害,对吧? 但是在创建产品页面时消除不必要的图像是一种很好的做法(查看出色的产品页面模板)。 您可能还想利用“延迟加载”首先呈现首屏图像(而不是同时呈现页面上的所有图像)。 您在 HTML 代码中设置为“延迟加载”的图像只会在访问者看到页面顶部的信息后或访问者开始滚动时加载。
最后,在适当的地方将图像作为 CSS 精灵上传到您的服务器。 CSS sprite 是将多个图像组合成一个文件的集合。 浏览器可以下载等效于单个图像的图像,而不是单独从服务器加载图像,从而消除对多个服务器请求的需要。 然后可以定制页面代码以仅在需要时显示特定的单个图像。 您可以将此技术用于从产品图像到 CTA(号召性用语)按钮和社交媒体图标的所有内容。

3. 启用浏览器缓存
简短版本: “要求”浏览器在用户返回时保存和重复使用您的站点文件。 这样做可以减少重复访问者的页面加载时间,而您几乎不需要任何输入。
当浏览器存储构成您网站的重要文件时,就会发生浏览器缓存。 这意味着当访问者返回您的站点时,他们的浏览器不必直接从您的服务器检索每个文件。 它只需要请求可能已更新的特定文件,甚至单个页面的某些部分(如徽标图像)。 这大大增加了加载时间,因为它减少了向服务器发出的请求数量。
启用缓存是一个相当简单的过程,涉及向 HTTP 标头添加少量代码以设置特定文件的到期时间。 如果您的网站托管在 WordPress 上,则有许多插件(例如 W3 Total Cache)可以简化此过程。
B浏览器缓存对于在线零售商来说可能有点棘手,因为页面通常会受到有关价格、库存水平、评论、交付信息等的时间敏感更新的影响。 因此,区分存储真正稳定内容的文件(CSS 样式、徽标、导航等)和那些可能会更改的内容非常重要。 然后你可以相应地编码。 请记住,完全有可能对特定的页面元素(如页眉和页脚)以及对时间不敏感的更大文件(如 CSS 样式表)进行编码,即使只是为这些元素启用缓存仍然会对网站速度产生积极影响。
4. 缩小 HTML、JavaScript 和 CSS
简短版本:使用 CDN(内容交付网络)启用自动缩小并将文件大小减少多达 60%。 设置 CDN 是一个相对简单的过程,由 CloudFlare 和 Amazon AWS 等知名服务提供。
最小化是最小化 Web 文件中的代码的过程。 它已被证明可以显着减少网站加载时间。 可以以更快的速度请求较小的文件,然后由浏览器解释。 这种优化策略通常由页面速度工具突出显示,并且是您可以实施的最有效的策略之一。
它之所以有效,是因为开发人员可以理解其长度和复杂性的差异(通常包括注释、空格、逗号等)以及浏览器呈现页面所需的最少代码。 有时这个缩小版本可以小到原始版本的 40%。
但是有一个关键问题。 手动缩小是一个很大的禁忌。 这需要太多时间,而且出错的余地也太大了。 即使使用自动化工具,在开发阶段也需要高水平的手动输入来处理和实现所有替代代码。
相反,最好的选择是使用 CDN(内容交付网络),它会在将代码交付给浏览器之前自动缩小代码。 原始文件将保存在您自己的服务器上,而缩小版本将存储在 CDN 服务器上。 每当您对页面进行更改时,它们都会与 CDN 服务器同步。 CDN 也因各种其他原因而有用,但我们稍后会谈到。
5. 利用 AMP(加速移动页面)和 PWA(渐进式 Web 应用程序)
简短版本: AMP 和 PWA 均由 Google 开发,可以显着提高您的移动页面加载速度。 开发成本很高,因此应根据其他积极因素(如果您愿意)来考虑向 PWA 或 AMP 的过渡。 如果您决定继续,对您网站速度的影响可能会很大。
将您的移动页面转换为 AMP 可能是一项艰巨的工作,并不适合所有人。 但是,作为一种长期战略,它绝对值得探索。
AMP 和 PWA 究竟是什么? 这是一个快速概述:
- Accelerated Mobile Page (AMP) – AMP 是一个开发框架 – 由一个 HTML 子集 (AMP HTML)、一个 JavaScript 框架和一个可选的 CDN(内容交付网络)组成 – 由谷歌创建,允许开发人员提供闪电-快速移动页面,无需在速度优化上投入大量资源。 虽然 AMP 最初是为基于内容的网站开发的(您可以在许多新闻页面的搜索结果中看到小闪电箭头),但它在在线零售商中越来越受欢迎。
- 渐进式 Web 应用程序 (PWA) – PWA 就像通过移动浏览器访问的移动应用程序。 它们复制了应用程序的许多功能,例如通过移动主屏幕上的图标访问和推送通知,但无需构建自定义软件或让用户在手机上安装任何东西。
两者之间存在一些关键差异(以及很多争论),但都提高了移动网站的速度。 您可以从 Google 的综合文档中了解 AMP 和 PWA 的实用性。
6. 杀死性能不佳的 WordPress 插件
简短版本:插件可以作为加载时间的大量消耗。 如果您的电子商务网站托管在 WordPress 上,请对插件进行全面审查,删除不需要的插件,并为“重”插件寻找替代解决方案。
易于使用的插件的可用性是许多零售商选择 WooCommerce 和 Shopify 等平台的原因之一。 大多数时候,插件对零售商是有益的。 它们提高了性能,消除了对复杂开发任务的需求,而且通常是免费的。
但是,编码错误、与站点的其他元素冲突或过时的插件会给站点加载时间带来很大压力。 同样,大型插件通常需要发送多个文件请求来检索它们自己的样式表或 JavaScript。
幸运的是,对插件进行故障排除非常简单。 通常,最简单的方法是使用您的速度报告来查明可能与插件相关的问题,并在它们被禁用后重新测试。
或者,您可以使用像 P3 这样的 WordPress 插件。 它将扫描您的插件并突出显示任何性能低下的区域。
关于插件的另一个有趣的事情是,它们解决的许多问题通常可以通过对 Web 文件中的代码进行简单的更改来纠正。 过度使用插件是缺乏开发人员知识的明确标志。 如果您经常陷入使用笨重插件解决相对较小问题的陷阱,那么您可能会对您的网站速度造成很大的不公平。
7. 使用内容分发网络
简短版本: CDN(内容分发/交付网络)订阅成本低且易于实施。
CDN 已经被提及,因为许多提供商还提供了自动缩小的选项,但这里值得再次提及它们,因为它们提供了超越自动缩小的额外好处。
CDN 背后的想法非常聪明。 CDN 是一个全球服务器网络,用于存储您网站的缓存版本。 这为不同地理位置的访问者提供了对您网站的更快访问。 每当访问者通过浏览器向您的网站发出请求时,就会联系最近的存储您网站副本的服务器。
使用 CDN 还可以帮助您控制带宽成本(如果您付费)并处理流量高峰。
8. 优化您的服务器响应时间
简短版本:虽然您无法更改糟糕的服务器,但您可以优化性能良好的服务器。 专注于清理您的数据库,为您的 CMS 选择正确的设置,并选择一个快速的 DNS 提供商。
第一个字节的时间 (TTFB) 是衡量浏览器从服务器接收第一个字节信息所花费的时间。 服务器请求基本上由三个部分组成,每个部分都表示一个潜在的优化区域:发送请求所需的时间、服务器处理请求所需的时间以及将请求的信息发送到浏览器。
您可以使用 WebPageTest 检查第一个字节的时间。 它应该在 200 毫秒以下。
使用 CDN 是改进第一和第三阶段的最佳方法之一,因为网络将缩短服务器与访问者浏览器之间的距离。
这是我们在这里关注的第二个领域。 Optimizing server speed is a massive topic that's well beyond the scope of this article, but there are a handful of optimization tweaks that can have a significant effect on server processing speed.
Here's a quick checklist for ensuring good server response time:
- Configure your CMS (content management system) for optimal speed – Your CMS is responsible for the management and handling of your content. Check if there are any settings specific to your CMS that can be disabled or enabled to boost response time. On WordPress, for example, you should ensure you have the latest PHP version installed and limit any processes that consume CPU (server resources).
- Clean up your database – Whenever a browser requests a dynamic page, your server needs to query a database to retrieve information and “build” that page. Poorly-optimized databases can cause this process to take longer than it should. Server-side caching, which stores a copy of your pages without the need to consult a database, can be a great way to overcome this problem.
- Consider a premium DNS (domain name system) lookup service – The DNS turns your domain name into an IP address. Your address is stored with your DNS provider, who needs to be consulted to provide the exact IP that maps to your domain. Opting for a DNS provider with faster lookup functionality can shave milliseconds off your load time. And every millisecond counts. Use this service to check your DNS speed.
Remember to evaluate all of these changes in the context of your TTFB. Generally speaking, server-side changes can be quite technical, so it's good practice to hire an experienced optimization developer to ensure that no mistakes are made. It's also usually easier to implement server changes with a dedicated hosting package, as access to certain functionality may be limited on shared and VPS hosting.
9. Use Compression Wherever Possible
Short Version: Gzip enables you to compress files before they're sent to a visitor's browser. It's an easy server-side function to turn on and can cut file sizes significantly (leading to faster transfer).
Along with images, you can also compress other files to increase transfer speed. You can use gzip functionality to compress CSS, HTML, and JavaScript files that are larger than 150 bytes.
So how exactly does it work?
Whenever your server sends files to a visitor's browser, the size of these files make a big difference to the amount of time it takes to process them. Gzip is a software application that compresses your files (by up to 70%) before they are sent. Because the files are smaller, they are delivered to the browser much more quickly.
To take advantage of gzip, you simply need to enable it on your server, either by adding a few lines of code to your .htaccess file or through the control panel (for IIS servers).
10. Load Files Asynchronously Wherever Possible
Short Version: Asynchronous loading is far faster than synchronous loading. Enable it through your CMS (content management system).
Synchronous loading occurs when files load consecutively, one after the other. Asynchronous loading is when files load together.
During an asynchronous load, multiple files are loaded at the same time. 来源
Because browsers process files in a hierarchical fashion – loading the first page elements first – synchronous loading can significantly increase the amount of time it takes to achieve full page load. Asynchronous loading allows the browser to load multiple elements in conjunction without waiting for the previous load to complete.
It should be possible to change settings that determine synchronous vs asynchronous loading through your CMS software. If you are using WordPress, there are several plugins you can use.
11. Reduce Redirects
Short Version: By eliminating redirects, you can cut seconds off your site speed. Remember that each redirect requires a separate request to be sent to the server.
Redirects are enemy number one when it comes to site speed. Well, maybe not number one. But they should be pretty high on your kill list.
Redirects are enemy number one when it comes to site speed. Well, maybe not number one. But they should be pretty high on your kill list. 点击推文Whenever one of your pages redirects to another URL, your visitor has to wait for the server to respond all over again.
Often, numerous redirects occur in response to a single request, especially when desktop pages redirect to mobile pages. All of this adds up to make overall page load time much slower.
Use a tool like Screaming Frog to check for any redirects. Then go through all the flagged pages and see if you can get rid of any.
Don't worry too much about loss of search rankings (one of the main reasons webmasters keep redirects) as your page will likely replace the redirect link in the results sooner rather than later.
In particular, be very wary of “redirect chains”. These are sequences of redirects between more than two pages. If you have to keep redirects, break up the chain by ensuring that each individual redirect points to the main page.
Tools to Help Boost Your Site Speed
Here's a quick rundown of the tools you need to help with implementation:
Google PageSpeed Insights – Already covered in detail above, this tool is hands-down the best for testing and optimizing your site.
Pingdom and GTmetrix – Both of these page speed tools offer additional information to Google PageSpeed insights, in particular geographical response times. They are useful for building a complete picture of your site speed problems.
WebPageTest – A simple tool to test your TTFB.
DNSPerf – A good tool for testing the speed of your DNS provider.
Google Test My Site – You can also use Google Test My Site to generate a broader report about your mobile performance, which includes information about site speed. It's a good complementary tool for use in conjunction with PageSpeed Insights.
Google Analytics – At all stages of the optimization process, you should be linking changes to specific and measurable outcomes. Google Analytics will enable you to track how traffic, engagement and conversions are affected by speed optimization.
Image Compression Tools – For image editing, you should aim to keep as much control as possible. Photoshop and GIMP (which is free) are two feature-rich image-editing apps that will allow you to compress images exactly as you wish.
CSS Sprite Tools – There are many free tools for creating CSS sprites (compiled images) from Toptal, Spritegen, and Sprite Cow.
Content Delivery Networks (CDNs) – There are many fantastic CDNs that come with a range of additional features. Check out CloudFlare, Amazon AWS, and Google Cloud CDN.
Minify Tools – Minification is best done through a CDN, which automates the entire process. Remember, if you do decide to minify your code manually, you will need to maintain two separate development areas. Try out Minifier and JSCompress.
Ready to improve your ecommerce site speed?
Improving your site's speed is a big job. 但这是值得的。 A fast-loading site provides your customers and potential customers with a positive experience that is likely to keep them returning to purchase again and again.
But remember one crucial point. It's vital to take a consistent approach. You should be monitoring and optimizing regularly. For optimal results, speed testing and optimization need to be conducted regularly (as with most things when it comes to ecommerce optimization).
Ideally, site speed testing should be built into your broader optimization strategy, conducted on all new and modified pages, and periodically reviewed across your site.
Now, time to head over to PageSpeed Insights.
Download Your Free Optimization Checklist
Site speed optimization is only one small part of ecommerce optimization. To ensure that all your optimization boxes are ticked, we've written the most comprehensive ecommerce optimization checklist on the web. Or probably anywhere, for that matter.
Oh, and it's free! Click here to download it now and gain a vital edge over your competitors.