提高 Magento 2 移动速度的 5 种方法

这是 Konstantin Gerasimov 的客座博客文章。 Konstantin 是 Goivvy.com 的 Magento 认证开发人员。 他专注于性能优化和后端开发。

Magento 2 (M2) 是一个复杂且功能丰富的电子商务平台。 可以使用它来实现任何类型的在线销售体验。

硬币的另一面是，灵活性带来了一个问题——性能不佳。 Magento-2 驱动的商店可能会很慢，尤其是在网络容量难以下载大文件的移动设备上。

在我使用 M2 的过程中，我获得了一些帮助我提高移动速度的技巧。 我将与您分享它们。 它们都经过现场验证，因此您可以确定它们有效。

为移动用户加速 Magento 2 的 5 个技巧

1. 首先加载首屏内容。
2. 使页面尺寸尽可能小。
3. 使用 HTTP/2。
4. 不要使用 JS 捆绑。
5. 优化第一个字节的时间。

1.首先加载首屏内容

首屏内容（或可见内容）是您在向下滚动之前看到的网页的一部分。 用户首先看到它，因此快速加载和渲染它很重要。

我们如何做到这一点？ 有几个技巧：

1.1。 延迟解析 Javascript

它通常意味着您推迟加载和执行 JS 代码。 这样做是为了使内容更快地出现在屏幕上。

要推迟，只需将所有 Javascript 移动到页面底部即可。 有一些 Magento 2 扩展可以帮助你做到这一点。

1.2. 首先加载关键的 CSS

关键 CSS 是一组样式表，用于呈现首屏内容。 通常，它只是网站 CSS 的一小部分。 最好先隔离再加载。 这将使可见内容渲染得更快。

有一些在线工具可以自动提取关键的 CSS。 我尝试了其中的大多数，根据我的经验，它们似乎并不准确。

我建议为不同的页面手动编写一个关键的 CSS 集：主页、类别、产品、购物车、结帐页面。 然后，您可以将其直接内联到页面的头部。

2.使页面尺寸尽可能小

与桌面宽带连接相比，移动网络提供的下载速度较慢。

这对我们意味着什么？ 这意味着页面权重现在是一个更重要的性能因素。 页面越大，Magento 2 移动速度越慢。

我们如何使页面更轻？ 我会给你三种方法来做到这一点：

2.1。 使用 Gzip 压缩

Gzip是一种特殊技术，可让您将页面大小减少多达 70%！ 它还可以压缩外部脚本，如 CSS、Javascript、字体脚本等。

请联系您的托管支持团队并要求他们为您的网站启用 Gzip。 应该不会花很长时间，因为它只是一个小的配置更改。

您可以使用在线工具 Google PageSpeed Insights 检查您的商店是否启用了 Gzip。

2.2. 使用 CSS/JS 缩小

Magento 2（与 Magento 1 不同）带有 JS/CSS 缩小功能。 您应该利用它来降低页面重量。

转到后端菜单Stores > Configuration > Advanced > Developer （在 M2.2+ 上，该菜单仅在开发人员模式下可见）并启用缩小：

要记住的一件事 - 缩小仅适用于生产模式。

你可能会问——这些模式是什么？

Magento 2 具有三种运行模式：默认、开发人员和生产。 生产是最快的。

要在模式之间切换，您应该在 Magento 根文件夹内的 SSH 终端中运行以下命令（例如，让我们设置生产模式）：

 php bin/magento 部署：模式：设置生产

要找出当前模式：

 php bin/magento 部署：模式：显示

2.3. 优化图像

如果你经营一个电子商务网站，你肯定有很多产品图片。 保持它们的优化和压缩以尽可能降低页面重量很重要。

有各种在线工具可以帮助您压缩图像。 大多数 CDN（内容交付网络）都支持图像优化。 如果您不介意花一些美元，我建议您注册其中之一。

如果您的预算有限，请尝试 Google 的 pagespeed 服务器模块。 它即时压缩图像。 此外，它还有其他速度优化技巧。 您可能想请您的系统管理员或您的托管支持团队帮助您设置 pagespeed 扩展。

3. 利用 HTTP/2 的力量

HTTP ver.2 是下一代超文本协议。 它旨在使网络浏览更安全、更快捷。 您可以在此处阅读有关其性能优势的更多信息。

Magento 2 可以开箱即用地使用 HTTP/2。 只有两个要求：

1. 所有页面都应通过 SSL 提供。
2. 服务器应该支持 HTTP/2。

您可能需要咨询您的托管支持团队以获取设置帮助。

另一件事——服务器推送。 它是 HTTP/2 的一项特殊功能，可让您在浏览器需要之前下载资源。 它极大地加快了网页浏览速度。 有一些扩展将服务器推送引入 M2 - 只需 google 即可找到最适合您的。

4. 不要使用 JS 捆绑

Magento 2 可以捆绑 JavaScript 文件。

这意味着它可以将 JS 资源组合在一起，以减少浏览器为显示页面而应发出的 HTTP 请求数。 您可以在后端菜单Stores > Configuration > Advanced > Developer找到其配置页面：

当然，如果你使用 HTTP/2 就没有意义。 在这种情况下，http 请求的数量不会影响性能。 但是即使您仍然使用 http/1，也不应该启用 JS 捆绑，我将解释原因。

Magento 2 捆绑实现将所有 JavaScript 组合在一个文件中。 即使您不使用它的某些部分，它仍然存在。 这给你留下了 5Mb-13Mb 的文件，这对慢速移动网络来说是一种性能消耗。

这是一个错误报告，详细解释了它。 这是一个错误，但 M2.2.2 已经存在，但仍未修复。 所以你最好保持 JS 捆绑禁用。

5. 优化首字节时间 (TTFB)

TTFB 或服务器响应时间是浏览器在从站点服务器获得响应之前需要等待的时间。 第一个字节的好时间应该在 500 毫秒左右。

Magento 2 具有内置的全页缓存功能，因此只要一个页面被访问超过 1 次，它的服务器响应时间应该是可以的。 但是有些页面，如结帐、购物车和客户区域页面，无法进行全页缓存。 如果它们很慢，则应考虑进行一些 TTFB 优化。

我将向您展示三种优化服务器响应时间的方法：

5.1。 第三方模块审核

Magento 2 性能不佳的第一个原因是使用了过多的自定义扩展。 我会解释为什么。

M2 核心文件由编程专家编码。 那里几乎没有改进的余地，这就是为什么全新安装 Luma 主题的 M2 非常快的原因。 另一方面，一些 3rd-party 模块最多是由普通程序员编写的，不了解性能基准。 他们可能会显着减慢商店的速度。

要执行第 3 方模块审核，首先获取已安装的所有自定义扩展的列表。 您可以通过运行以下 SSH 命令来执行此操作：

 php bin/magento 模块：状态

跳过以Magento_开头的那些——那些是核心插件。

与其他人一起执行以下操作：一一删除它们并基准站点的速度。 要删除扩展，只需从app/code文件夹中删除它，然后运行：

 php bin/magento 设置：升级一旦你找到一个慢速插件——联系它的供应商，让他们知道问题所在。 请求补丁或寻找替代扩展。
 5.2 升级托管计划
在某些情况下，托管服务器功能根本不足以运行复杂的 Magento 2 商店。 然后你需要获得更多的 CPU 和 RAM。
		

 您如何确定您的服务器是否正常？ 执行这个简单的测试：在同一台服务器上安装相同版本的 M2 的新副本。 将其速度与您的实时站点进行比较。 如果新的 M2 速度明显更快 – 您的托管计划没问题，问题出在实时站点本身。 如果新副本的运行速度与实时站点一样慢 - 是时候升级托管服务器了。
 5.3 运行 Magento 2 Profiler
 如果您想深入了解 Magento 2 的内部结构并找出导致 TTFB 不佳的根本原因，您可以使用分析器。 分析器是一个特殊的程序，它告诉您哪些代码块需要多长时间才能执行。
 可以通过在pub/index.php文件顶部添加以下行来关闭 Magento 2 原生分析器：
 $_SERVER['MAGE_PROFILER'] = '1';
 然后，您将在每一页的底部看到一条跟踪： 
 寻找具有最大时间值的代码块并检查它们。
 您可以使用其他配置文件。 我发现 xhprof 是免费软件中最好的。
 底线
因此，如您所见，有一些有效的方法可以提高 Magento 2 在移动设备上的性能。
 如果您知道一些额外的方法，请随时在下面的评论部分分享。