网页加载速度在Shopify独立站中装扮着相当重要的角色。
你的网站加载速度越快，跳出率就会越低，转化率亦会更高。相应的seo的排名亦会比速度慢的站点靠前。 
Page speed is a critical factor when it comes to ranking your website higher on Google’s search engine results. Neil Patel Seo Expert Blog
那样今天我将介绍优化shopify加载速度的所有方式。
速度测试工具
以下几个工具可以避免费测试网页速度。 不要只测试首页，别忘了制品页（product page）和类目页（collection page）
1. Google Speed Insight
2. Gtmetrix
3. Pindom
4. Test My Site
重视：以下过程需要认识HTML,CSS和Javascript等知识
在起始优化之前，请备份主题！！！
在起始优化之前，请备份主题！！！
在起始优化之前，请备份主题！！！
1. 压缩照片
Shopify准许运用以下照片格式
1. JPEG或JPG
2. Progressive JPEG
3. PNG
4. GIF
5. webp
照片压缩非常重要，能够说是影响网页速度最重要的原因之一。在进行图像优化时，请保证照片尺寸正确。不要在单个页面添加太多照片
在压缩照片时，尽可能保准照片质量。 
要压缩照片，有以下两种选取
1. 运用Shopiy照片压缩插件压缩照片
2.运用在线照片压缩网站压缩照片，而后下载压缩之后的照片并上传。举荐大众运用TinyPng。
2. 减少请求
运用GiftOfSpeed的HTTP请求检测器工具能够找出您的页面HTTPS请求总数。能够经过执行以下操作减少HTTP请求
1. 合并内联CSS
2. 合并所有JavaScript
3. 减少页面照片的数量
4. 雪碧图
5. 将图像转换为Base64代码
6. 限制社交按钮的数量
3. 分析shopify插件
shopify插件能够帮忙咱们提高咱们的营销额。然则需要重视的是，大都数插件都会拖慢网页加载速度。
然则我不意见冒然卸载，而是应该经过以下过程来优化：
1. 卸载效果不良或完全不需要的插件
你可能安装过有些看起来很炫酷，或别人说很好用的插件。然则你必定得进行A/B test来检测它是不是真的有用。能够经过GA,插件自带的分析工具，客户的反馈，热图等工具来进行分析
2. 检测模板代码中是不是有旧的插件代码
倘若你已然卸载了插件。那么你的模板代码中很大概率存在无删除干净的插件代码（非常多插件单纯卸载是删不干净的）你能够经过Chrome研发者工具打开Sources来查看
你可能没法识别每一个域名，然则倘若你发掘了某个域名属于你卸载的插件，那样这个插件就无删除干净，它依然在加载文件。例如，倘若你卸载社交媒介登陆插件social-login.然则查看的时候依然发掘了它的域名，那样就能够判断并无删除干净 
一般，你能够在theme.liquid文件中找到这些JS和CSS文件。
3. 按照要求加载插件
按照要求加载 = 仅仅在需要的页面加载资源
这个操作需要编辑html或其他代码并且测试无错误，请小心操作。
例如：大都数插件会将JS/CSS放在theme.liquid文件中。然则倘若只是在制品页需要这个插件的效果。那样脚本文件就不需要加载到所有页面。
为认识决这个问题，能够限制脚本只加载到需要的地区： 
4. 压缩CSS、JS文件
CSS和JavaScript用于掌控网站的样式和行径。缩小这些文件可经过删除多余的字符（如空格和注释），缩短变量名以及组合常用样式来压缩它们。
运用该工具来缩小JavaScript：JSCompress。
倘若您的模板代码Assets文件夹中的文件名以.liquid结尾，则可能将没法运用这些策略，由于其中混入了liquid代码。亦能够经过多种方式进行操作，但很繁琐，亦可能可能会引起错误，因此呢不太意见冒然修改。
5. 选取速度更快的主题模板
实质上，shopify网站的加载速度重点取决于网站模板，因此呢在选取模板时，必定要检测一下内容。
1. 经过速度测试工具测试模板预览页（首页、制品页、类目页） 
在安装模板之后，持续检测或联系主题作者是不是有更新，请保持在模板的最新状态。
6. 删除Quick Shop功能
Quick Shop亦便是制品预览/快速购买，能够很好的预览制品。不外随之而来的是更加多照片，JS和DOM的加载,我认为这个功能会对转化率导致消极影响，亦会拖慢加载速度有害于用户体验。因此这个功能意见关闭或删除。
7. 首页Banner运用单图而不是轮播图
轮播图之前流行了一段时间，大众一般在轮播图中添加3-4张高质量的照片。然则这极重的增多了页面加载时间，其实能够完全运用Hero image代替轮播图。 
下面是有些有意思的统计，表面为何不应运用轮播图
1. 大都数用户不会点击轮播按钮，实质上仅有1%的人会点击。资料
2. 轮播图会影响用户体验。资料
3. 轮播图有害于SEO.资料
4. 轮播图在移动端不太友好。资料
意见大众运用Hero image来代替轮播图。例如以下网站均是单个Banner
- Shein
- Fashionnova - Colourpop
Hero image详细定义
维基百科：主页横幅 (Hero Image) 是网页设计的一个专业术语，一种特殊的网页宣传。主页横幅是一个很强的横幅照片，安置在首页面的醒目位置。
主页横幅常常是针对网站拜访者遇到的第1视觉页面，其目的是要提出一个该网站最重要的内容进行概述。主页横幅常常由图像和文字形成，能够是静态或动态的内容。
参考文献：
How to Improve Page Load Speed on Shopify — Razorrank
Suggestions to optimize website loading speed — Google Web Performance
Improving Load Performance — Chrome DevTools 101
Shopify Speed Optimization — Step-by-Step Guide
How to Optimize a Shopify Site: Complete Guide to Faster Load Speed — SpeedBoostr
（源自：shopify fans）
以上内容属作者个人观点，不表率雨果网立场！本文经原作者授权转载，转载需经原作者授权同意。
上雨果网搜索“跨境资料库”,领取欧美/东南亚各国市场商机、各大平台热销品报告、跨境电商营销白皮书！
| 
发表于 2024-10-12 18:07:17