在本指南中，我们将详细说明加载速度的含义、如何准确测量加载速度，以及最重要的是，如何直接在 GemPages 内部和外部优化页面性能。
什么是加载速度？
装车速度，也被称为 页面加载时间是指用户请求后，网页在浏览器中完整显示其内容所需的总时间。这涵盖了所有内容——从图像和文本到脚本和样式表。
Google 使用加载速度作为排名因素，特别是对于移动优先索引。
如何检查网站的加载速度
在进行优化之前，获取基准至关重要。以下是两种可靠的方法：
1. 使用在线速度测试工具
- 谷歌的见解PageSpeed：提供移动和桌面速度评分以及可操作的建议。
- GTMetrix：提供详细的报告，包括第一个字节的时间（TTFB）、最大内容绘制（LCP）等。
- Pingdom的工具：适合从不同地理区域进行测试。
通常，它们每个都有自己的计算指标并提供不同的结果，但最终它们会为您提供页面在前端（在客户的浏览设备上）的运行情况的粗略估计。
2. 进行手动测试
有时最好的监测工具就是您自己的印象。除了使用技术测量工具外，您还可以随时测试您的网站负载。
访问您的网站并在多种设备、多种互联网连接下使用不同的浏览器浏览网页，看看您的网站是否符合您的标准。
如何优化加载速度
影响页面性能的因素有很多，有些是可控的，有些则不是。我们整理了一份可控组件列表，以便您更好地优化您的商店。
1.压缩媒体文件
确保所有媒体文件在上传到商店之前都经过了优化。仅在必要时使用高分辨率图像，否则您的网站会因为加载时间过长而给人留下不好的第一印象。
请参阅本文以了解更多有关 页面上的图像如何影响加载速度.
2.调整图像质量和分辨率
如果您使用的是 GemPages V6，则在 英雄旗帜 金益辉 视差 元素，您可以选择 打火机 金益辉 最轻 横幅下方的分辨率 图像质量 下拉式菜单。
在图像元素中，除了 图像质量，您可以在 图像分辨率 下拉菜单。选择一个合理的分辨率，确保快速的加载速度，同时保证清晰的图像质量。
在 V7 中，图像优化现在可以通过 CDN 自动处理，并具有其他性能控制，例如 延迟加载 金益辉 预紧 每个元素都有可用的选项。这确保了更快的加载速度，无需手动设置，同时仍允许您控制特定于设备的图像。
3. 精简不必要的代码
在 Shopify
- 通过删除不必要的 HTML、CSS JavaScript 和 Liquid 代码、空格、注释等来优化您的主题代码。
- 清理第三方应用列表：当您从 Shopify 应用商店安装并使用第三方应用时，该应用会将代码生成到您的模板中。请考虑删除不再使用的应用。
- Google 和 Facebook 的冗余行为跟踪代码可能会降低您的网站速度。尽量只保留您实际使用的代码。
In 宝石页
- 确保您的页面上没有未使用的元素。
- 利用 延迟加载 功能。
- 使用预加载字体和样式表功能： 预加载字体和样式表 该功能是一种指令，它指示浏览器提前请求并加载页面的关键资源（例如字体和样式表），从而显著提高加载速度。 GemPages 版本 7此功能已具备 已集成并默认启用。
4.减少重定向链
而 URL重定向 很有用，但过多会增加额外的 HTTP 请求并延迟加载过程。最佳实践：除非必要，否则不要从一个页面重定向到另一个页面。
如果您更改了 URL，请更新内部链接，而不是依赖重定向。
5. 使用高速 CDN
宝石页 实施高速 CDN（内容分发网络）来缓存世界各地的内容，使您的网站无论客户身在何处都能更快地加载。
对于谷歌或必应等热门搜索引擎来说，移动页面性能长期以来一直是重要的排名因素，而桌面页面性能甚至在此之前就被视为关键的排名因素。不仅如此，速度在提升访客体验、降低跳出率以及最终提升收益方面也发挥着不可否认的作用。换句话说，如果您想提高转化率，优化页面加载速度是不可忽视的。
常見問題解答
1. 如何提高 Shopify 或 GemPages 中收藏页面的加载速度？
产品系列页面通常加载速度较慢，因为它们会显示大量商品图片，有时还会包含筛选或排序功能。为了提升性能，您可以：
- 上传前压缩并调整产品图像的大小。
- 绝大部分储备使用 延迟加载 在 GemPages 中延迟加载图像直到它们出现在屏幕上。
- 通过启用分页来减少每页的产品数量。
- 限制收藏页面上繁重的第三方应用程序或脚本。
- 尽可能依赖 Shopify 的内置过滤功能，而不是资源密集型应用程序。
- 压缩横幅和部分图像。
- 对图像和视频使用延迟加载。
- 尽量减少主页上使用的应用程序和脚本。
- 在 GemPages 中预加载重要的字体和样式表。
- 压缩产品图片和缩略图。
- 为折叠下方的图像启用延迟加载。
- 限制额外的应用程序和第三方脚本。
- 预加载关键字体和样式表。
谢谢您的意见