qzmjef 发表于 昨天 16:59

怎么样加强Shopify页面加载速度？

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




页: [1]
查看完整版本: 怎么样加强Shopify页面加载速度？