7种方法让你的Magento 2主题模板速度加快

redmaomail 2024-07-24 18:14 阅读数 64 #Magento

Magento 2作为功能强大且功能丰富的电子商务平台。它提供了不错的页面加载速度，但在大量定制下可能会非常缓慢。

部分性能问题可能是一个开发不标准的自定义主题引起的（在这里重声下，magento有两大主题模板市场，一个$89,一个$179,作为技术的我深知两大模板的优劣，总之不要图一时便宜）。一方面，默认的Luma和Blank主题相当快。另一方面，一些定制的主题很慢，可能会让你的网上商店成为一个噩梦。

我将分享一些技巧来优化Magento2主题模板让他更快。这些小技巧都是经过实践验证的，他们真的很有用。我已经在各个项目中使用它们，以使Magento 2网站有一个不错的页面加载时间速度。

加快Magento 2主题模板的7个技巧

切勿在循环中加载Magento模型。
缩小HTML。
切勿使用JS捆绑。
合并和缩小CSS / JS。
避免CSS / JS框架。
优化图像。
尽量减少第三方扩展的数量。

1.永远不要将Magento模型加载到循环中

这事儿常常发生。我经常看到这样的PHP代码：

foreach（$ productCollection as $ product）{

$ _product = $ productModelFactory-> create（） - > load（$ product-> getId（））

...。

您可能会在Magento 2迭代集合的各种list.phtml模板中看到该结构。

我会解释为什么这对性能不好。Magento 2模型负载很重，需要太多时间。再加上集合不断的循环可能会显著减慢站点的速度。

另外，不需要加载模型，因为一个集合已经具有可能需要的所有数据。所以你最好检查一下你的主题模板文件和重构代码部分是否包含模型循环。

如何找出要检查的主题模板？使用Magento 2分析器 - 它将显示最慢的代码块。要启用Magento 2分析器，只需将以下代码添加到index.php和pub/index.php：

$ _SERVER ['MAGE_PROFILER'] = 1;

重新加载网站页面，您将在底部看到配置文件跟踪：

Magento 2探查器跟踪

研究跟踪，你会看到哪些模板花费时间最多。

2.缩小HTML

如果可以缩小页面大小，可以使主题更快。其中一种方法是缩小HTML。
Magento 2支持开箱即用页面缩小。您可以转至Stores > Configuration > Advanced > Developer > Template Settings > Minify HTML并将其打开（在Magento 2.2+上，此设置仅在开发人员模式下可见）：

在Magento中缩小HTML

有一点要记住 - 这种配置更改仅适用于生产和默认模式。

你可能会问 - 这些模式是什么？Magento 2有三种运行模式：default（默认模式）, developer（开发者模式）和 production（生产模式）。生产模式是最快的，它用于为上线网站提供动力。另一方面，为了调整和更改商店，您可能需要打开开发人员模式。

要了解网站的模式，可以在Magento根文件夹中运行此SSH命令：

php bin/magento deploy:mode:show

要切换到生产模式，请运行：

php bin/magento deploy:mode:set production

HTML缩小可以缩小到高达原始页面大小的50％，因此您可以尝试一下。

3.永远不要使用JS捆绑

JS捆绑是Magento 2的一个特殊功能，它将JS文件分组在一起，以减少Web浏览器加载页面所需的HTTP请求数量。在HTTP1下可以使网站更快，但它对于HTTP2是没有用的。

由于其他原因，JS捆绑也没用。发生的情况是，这个庞大的捆绑JavaScript文件大小为5-12Mb，显着降低了商店的速度（尤其是在网络较慢的情况下）。

所以去Stores > Configuration > Advanced > Developer > Javascript Settings并且设置启用JS捆绑为NO：

JS捆绑在Magento中

我建议使用HTTP / 2的强大功能，而不是JS捆绑。HTTP协议的新版本设计时考虑到了性能，并且可以真正加速任何站点，包括Magento。

另一个解决方法是使用CDN（内容分发网络）。用它来加载静态文件比服务器加载的时间快了很多，而且它具有动态图像优化功能和各种缓存选项。

4.合并和缩小CSS和JS文件

Magento 2具有缩小CSS和JavaScript的内置功能。这对性能有好处，因为它可以减少页面负载。

要设置缩小和合并，请转至后端菜单Stores > Configuration > Advanced > Developer > CSS and Javascript settings：

在Magento admin中缩小CSS JS

请注意，JS / CSS minification仅适用于生产和默认运行模式。

5.避免第三方CSS/JS框架

我建议在构建Magento 2主题时避免使用任何外部前端库（除了那些最初与M2一起提供的库）。第三方框架可能使网站变慢。

与Magento 2一起提供的jquery应该足以满足任何javascript需求。

6.优化图像

电子商务网站往往有很多图像。保持它们的优化和尽可能小的尺寸是非常重要的。

我会在这里强调3种方式来照顾您的目录图片：

CDN（内容分发网络） - 几乎所有这样的网站都具有某种图像优化功能。如果您的预算允许，您可以试一试。
Google PageSpeed Module - 此服务器扩展（由Google开发）可以压缩图像并自动执行其他速度优化。您可能需要系统管理员帮助进行正确设置和配置。
各种在线工具 - 如果您没有那么多的图片，您可以逐个手动优化它们。有不少在线工具可以压缩图片。