shopify结账页面优化
For the last few weeks, I have been working on projects related to the speed and performance testing of Shopify stores, which over time with installations of various apps from the Shopify ecosystem can become quite clunky and bloated. While working through our codebase and trying to optimize it for the customer’s experience I have come across a lot of really great resources that I wanted to share with the community.
在过去的几周中，我一直在从事与Shopify商店的速度和性能测试有关的项目，随着时间的推移，Shopify生态系统中各种应用的安装会变得相当笨拙和and肿。 在研究我们的代码库并尝试针对客户的体验对其进行优化时，我遇到了很多我想与社区分享的非常有用的资源。
There are some simple steps that you can take as you are working through performance testing to optimize the speed of your Shopify store:
在进行性能测试以优化Shopify商店的速度时，可以采取一些简单的步骤：
Minification of JavaScript & CSS
缩小JavaScript和CSS
Minification is simple enough, and there are some resources out there that will help you automate this into your workflow with tools such as Gulp. However, it can also be done manually by searching through your store's files to find code that needs to be minified.
缩小非常简单，并且有一些资源可以帮助您使用Gulp之类的工具将其自动化到工作流中。 但是，也可以通过搜索商店的文件来查找需要缩小的代码来手动完成此操作。
Two really great resources for minifying JavaScript and CSS are:
减少JavaScript和CSS的两个非常有用的资源是：
https://javascript-minifier.com/
https://javascript-minifier.com/
2. Uninstall and remove code from unused apps from the Shopify store to remove bloat.
2. 从Shopify商店中卸载未使用的应用程序中的代码，并从中删除代码以消除膨胀。
While performing an internal audit we found that there were leftover applications in our store that we were simply no longer using. When installed some applications permanently modify your codebase even after installation, so it is best practice to do some digging for leftover code that may be adversely effecting your lighthouse performance scores as well. Perhaps the best tool for stores with a lot of apps installed is an internal spreadsheet to pass around for audit and input on what can be removed and what is still vital.
在执行内部审核时，我们发现商店中有一些剩余的应用程序不再使用。 安装后，即使在安装后，某些应用程序也会永久性地修改您的代码库，因此，最佳实践是对剩余的代码进行一些挖掘，这些代码也可能对灯塔的性能得分产生不利影响。 对于安装了许多应用程序的商店来说，最好的工具可能是内部电子表格，该电子表格可以传递给审核和输入有关哪些内容可以删除以及哪些仍然至关重要的信息。
3. Utilizing ‘defer’/’async’ for third-party script loading strategies
3.将“ defer” /“ async”用于第三方脚本加载策略
There are subtle differences between why you would utilize async over defer or vice-versa. The difference lay in when exactly the script becomes executed. Async, in particular, will execute a script at the first available moment after it is finished downloading and before the window’s initial load event, while defer executes scripts in the order they are written.
为什么要在延迟上使用异步，反之亦然，这之间存在细微的差异。 区别在于确切地执行脚本的时间。 尤其是，异步将在完成下载后以及窗口的初始加载事件之前的第一个可用时刻执行脚本，而延迟将按照编写顺序执行脚本。
We use these two particular methods specifically for third-party scripts integrated with our Shopify store (those not installed through Google Tag Manager that reside in your codebase) to load after the initial DOM load event.
我们使用这两种特定方法专门针对与Shopify商店集成的第三方脚本(未通过Google跟踪代码管理器安装在您代码库中的第三方脚本)在初始DOM加载事件之后加载。
https://javascript.info/script-async-defer
https://javascript.info/script-async-defer
4. Preloading content that will be navigated to first
4. 预加载将首先导航到的内容
The ‘rel’ attribute value ‘preload’ allows us to retrieve resources that we know our page will need immediately.
“ rel”属性值“ preload”使我们能够检索我们知道页面将立即需要的资源。
Here, we altered link attributes in our store to reflect the following format:
在这里，我们更改了商店中的链接属性以反映以下格式：
<link rel="preload" href="style.css" as="style">Another example asynchronously loading CSS properly within a liquid template file to eliminate render-blocking resources:
另一个示例是在液体模板文件中正确异步加载CSS以消除渲染阻止资源：
<link rel=”stylesheet” href=”{{ ‘theme.scss.css’ | asset_url }}” media=”print” οnlοad=”this.media=’all’; this.οnlοad=null;”> <noscript><link rel=”stylesheet” href=”{{ ‘theme.scss.css’ | asset_url }}”></noscript>
<link rel =“ stylesheet” href =“” {{'theme.scss.css'| asset_url}}“ media =” print“ onload =” this.media ='all'; this.onload = null;”> <noscript> <link rel =” stylesheet” href =“” {{'theme.scss.css'| asset_url}}”> </ noscript>
https://github.com/filamentgroup/loadCSS/
https://github.com/filamentgroup/loadCSS/
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Preloading_content
5. Implement prefetch for resources where you can
5. 在可能的地方实现对资源的预取
Preloading resources for a landing page is a great idea because you know that your customers will utilize this content first. However, if you are wondering what the difference is between preload and prefetch is you have come to the right place. We implement prefetch on resources that we know or guess our users might utilize next, for example, your products page.
为目标页面预加载资源是一个好主意，因为您知道客户将首先利用此内容。 但是，如果您想知道预加载和预取之间的区别是什么，您来对地方了。 我们对我们知道或猜测用户接下来可能会利用的资源(例如，您的产品页面)实施预取。
<link rel="prefetch" href="index.html" as="document">https://web.dev/link-prefetch/
https://web.dev/link-prefetch/
6. Ensure text remains visible during webfont load
6. 确保在Webfont加载期间文本仍然可见
Fonts are often quite large and bulky which causes a flash of invisible text (FOIT) which will cause your Lighthouse font-display audit to fail and recommend that you go in and manually add the snippet below to each of your @font-face styles:
字体通常非常大而笨重，这会导致显示不可见文本(FOIT)，这将导致您的Lighthouse字体显示审核失败，建议您进入并手动将以下摘录添加到每种@ font-face样式中：
font-display: swap
字体显示：交换
Alternatively, one additional way to increase the load times of your fonts if you are utilizing Google fonts is to append the code below to the ending of your font URL.
另外，如果您使用的是Google字体，则增加字体加载时间的另一种方法是将以下代码附加到字体URL的末尾。
&display=swap
＆display = swap
https://web.dev/font-display/?utm_source=lighthouse&utm_medium=devtools
https://web.dev/font-display/?utm_source=lighthouse&utm_medium=devtools
7. Making event listeners passive to improve scrolling performance
7. 使事件侦听器成为被动对象以提高滚动性能
If you are reading this article you are most likely utilizing the Shopify platform for your eCommerce store, which means event listeners are critical to your conversion rates in terms of tracking interaction and providing a personalized experience scrolling. By adding the additional passive parameter to an event listener you are indicating to your browser that scrolling will never be prevented by an event listener.
如果您正在阅读本文，则最有可能在您的电子商务商店中使用Shopify平台，这意味着就跟踪交互和提供个性化的体验滚动而言，事件侦听器对于转换率至关重要。 通过将附加的被动参数添加到事件侦听器，您将向浏览器指示事件侦听器永远不会阻止滚动。
If you have not indicated this in your event listeners it will most likely fail LightHouses audit for this performance section. So a quick fix for those who are having this issue with their internal performance audits is to append the passive parameter to your event listeners as I did below:
如果您未在事件侦听器中指出这一点，则很有可能会使该性能部分的LightHouses审核失败。 因此，对于那些在内部性能审核中遇到此问题的人，一个快速解决方案是将被动参数附加到事件侦听器，如下所示：
document.addEventListener(‘touchstart’, onTouchStart, {passive: true});
document.addEventListener('touchstart'，onTouchStart，{passive：true});
As mentioned throughout the article I work with the Lighthouse Node CLI which you can find installation instructions for here:
如整篇文章所述，我使用Lighthouse Node CLI，您可以在此处找到安装说明：
https://github.com/GoogleChrome/lighthouse
https://github.com/GoogleChrome/lighthouse
Depending on your specific needs there are a variety of different ways to quickly implement and alter code for performance and speed. Google’s https://web.dev/ is filled with fantastic tutorials and explanations for almost anything you could think of in terms of speed and optimization. To finish I would like to leave you with some other great and free resources to look through:
根据您的特定需求，有多种不同的方法可以快速实现和更改代码以提高性能和速度。 Google的https://web.dev/上有许多很棒的教程和解释，它们涵盖了您在速度和优化方面几乎可以想到的所有内容。 最后，我想向您提供其他一些免费的宝贵资源，以供您浏览：
https://www.udacity.com/course/website-performance-optimization--ud884
https://www.udacity.com/course/website-performance-optimization--ud884
https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9
https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9
翻译自: https://medium.com/@codywrth/speed-and-performance-optimization-of-shopify-stores-572452bf2f0b
shopify结账页面优化
244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
