大家好，我是烧麦
本篇文章我们来聊聊如何提升网站的加载速度，因为网站的加载速度关系到客户的转化率。
这个我们在广告投放中可以很清晰地看到，也就是链接点击量与落地页的浏览量，如果说你的网站整体加载速度超过了 3 秒钟，那你的网站至少要流失 50% 以上的人，如果你的广告还没有什么吸引力的话，那你的流失率甚至最高可以达到 70%-80% 以上。
这是妥妥的捐钱做慈善的行为，所以本篇文章就从：
- 图片压缩 & 加速
- 视频加速 & 压缩
- 服务器提速
着重来讲一讲如何用小改动提高 80% 的网站加载速度，话不多说，我们进入正题：
图片压缩
虽然 Shopify 这种Saas 建站平台本身自带自动压缩功能，但我们尽量不要将美工设计出来的原图——尤其是那些几 MB 甚至十几 MB 的大图——直接上传到网站的产品页面。
这么说大家可能没有概念，举个例子：
首先，现在独立站 80% - 90% 的流量来自移动端，也就是手机。这意味着我们不能以家用的这种光纤去看待加载速度，而是要用一些真实的移动端网络去展开测试。例如我经常说的，就是当你的独立站做好之后，你将手机切换成流量网络，然后再开启一个国外的节点去看看打开你网站的速度。
在理想的 5G 环境下，下载一张 6MB 的图片只需要零点几秒。但在真实的生活环境中，情况完全不同：
- 基站的覆盖密度： 欧美国家地广人稀，网络基建的覆盖远没有国内这么密集。在核心大城市的确很快，但一旦用户走进室内、身处郊外、或者在公路上通勤时，网络经常会瞬间掉回 4G 甚至弱网状态。你的广告往往就是在这个时候触达用户的，在不稳定的网络下，6MB 的图片就会原形毕露，变成灾难，在这种状态下，图片下载到他的手机里，就需要 1.7 秒到 2.4 秒。
- 现实的排队效应： 当打开网站的时候，浏览器并不是一次只下载这一个图片！它还要下载你网站的主题 CSS、运行那堆复杂的 JS 代码、加载其他商品图。
- 手机的渲染卡顿： 图片下载后并不能直接展示，手机的 CPU 还需要把这 6MB 的压缩数据解压、渲染到屏幕上。对于一些配置稍旧的手机，这种大体积图片会直接导致页面滑动时的卡顿甚至白屏。
所以，当用户未处在理想的 5G 网络环境中，那这一张 6MB 的主图，你的网页首屏完全展示出来的时间，会被生生拖长 3 到 5 秒。
而根据 Google 的官方数据：移动端网页加载时间从 1 秒增加到 3 秒，用户的跳出率就会急剧增加 32%；如果达到 5 秒，跳出率高达 90%。
这就意味着，你花重金从广告平台买来的点击，有将近一半的人因为不耐烦看着白屏，直接划走了。这张 6MB 的图片，不仅没有帮你展示产品细节，反而吃掉了你一半的广告费。
所以，在网站的图片上，是我们需要重点关注的，有以下六种解决方法：
- 放弃 PNG 格式：虽然 PNG 这种格式的图片对于整体画面以及质感方向的保存是最好的，但它的代价就是图片大小偏大，除非你的图片必须要用透明背景，否则在网站上永远不要使用 PNG 格式。
- 使用TinyPNG、Iloveimg等在线工具将图片无损压缩小一点。TinyPNG对于 5MB 以下的图片，通常可以压缩到一半以上。Iloveimg这个工具差不多可以压缩到 70%-80%，对于上传的图片大小相对宽松一些， 二者我都用过，使用感受都差不多
- 转换为Webp 格式：这个格式也是我新接触到的一个格式，它非常适用于在网站上做展示。它可以在极大程度保留画面细节的情况下（肉眼几乎看不出损耗），将你的图片大小压缩到可能只有原来的 1%，目前我博客中的所有图片全都改为了 Webp 格式，强烈推荐
- 图床：如果你的图片上传支持使用 Web 外部链接，那么你也可以直接将图片上传到你的图床，然后直接引用就可以了。这样的话，整体图片的渲染和加载就不会在你的服务器上发生，而是在你图床的服务器上完成。这种方式的整体速度会非常快，并且不占用你服务器的任何资源。在网站去做 SEO、写各种文章、加图片的时候，我会比较推荐你直接使用图床。
- 关于 GIF 图转化为 Webp：这里我要修正一下以前的说法，就是为了极大提高网站的加载速度，直接在网站上传GIF 图还是太大了，我们也可以通过将其转化为动态的 Webp 格式，也就是 Gif to Webp，其大小一般可以压缩50% 以上。
- 关于 GIF 图转化为 MP4：要说什么是最小的，那当然是mp4 的格式，但“视频+文字”这种版面形式，只有那些付费的、质量较好的主题才会有。一般的主题采用的都是“图片 + 文字”的版面形式，而 GIF 图也是作为图片被识别的，所以用的场合会更多。但如果要强行使用 MP4 格式，但又不想购买昂贵的付费主题，那就只能采用手动代码的形式（我会在后面讲）。
视频加速 & 压缩
这里就不得不提我们在上方内容中写到的 GIF 图，当各位有了 GIF 图的制作经验，我们会发现：一个大概 6 秒钟的 GIF 图，它的大小可能要去到 20-30MB 左右，所以在这一步骤中，我们要尽量把 GIF 转化为动态的 WebP 格式上传，这可以极大提升页面的加载速度。
视频➕文字
如果要保留原本的视频形式来做展现的话呢，也就是当你的主题没有“视频+文字”的版面模块设计，我们就需要去手搓一个代码，如图（嘿嘿嘿，我随便从 B 站找的视频）：
现在的 Shopify 也算比较完善了，基本上所有的 SaaS 平台都支持这个自定义的一个模块，那 Shopify 为例子，在可视化编辑的界面呢，我们选择添加一个自定义的 Liquid，输入代码：
版本一：Shopify MP4直连
{%- comment -%}
=========================================================
【Madsgogo 专属控制台 - 基础内容设置】
👇 粉丝朋友们，请只修改双引号 "" 里面的内容 👇
=========================================================
{%- endcomment -%}
{% assign mdg_video_url = "https://cdn.shopify.com/s/files/你的视频链接.mp4" %}
{% assign mdg_title = "这里输入你的核心卖点标题" %}
{% assign mdg_text = "这里填写详细的补充说明。用简短的语言配合左侧的视频演示，直接击中用户的痛点。此模块零插件渲染，速度极快。" %}
{% assign mdg_btn_text = "立即抢购" %}
{% assign mdg_btn_link = "/products/your-product" %}
<style>
:root {
/* =========================================================
【Madsgogo 专属控制台 - 外观与排版设置】
👇 可以在这里调整字体大小和间距 👇
========================================================= */
--mdg-title-size: 2.2rem; /* 标题文字大小 */
--mdg-text-size: 1.1rem; /* 正文文字大小 */
--mdg-spacing: 40px auto; /* 整个模块的上下外边距 */
--mdg-gap: 40px; /* 视频和文字中间的间距 */
--mdg-radius: 12px; /* 视频和按钮的圆角弧度，完美匹配 Shrine */
}
/* =========================================================
⚠️ 懂代码的可以往下看，小白请勿修改下方任何代码 ⚠️
========================================================= */
.mdg-video-text-section { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; max-width: 1200px; margin: var(--mdg-spacing); padding: 0 20px; gap: var(--mdg-gap); }
.mdg-video-col { flex: 1 1 45%; min-width: 300px; overflow: hidden; border-radius: var(--mdg-radius); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.mdg-video-col video { width: 100%; height: auto; display: block; object-fit: cover; }
.mdg-text-col { flex: 1 1 45%; min-width: 300px; }
.mdg-text-col h2 { margin: 0 0 16px 0; font-size: var(--mdg-title-size); line-height: 1.2; font-weight: 700; }
.mdg-text-col p { margin-bottom: 24px; font-size: var(--mdg-text-size); line-height: 1.6; opacity: 0.85; }
.mdg-btn { display: inline-block; padding: 14px 28px; font-weight: bold; text-align: center; text-decoration: none; background-color: var(--color-btn-primary, #000); color: var(--color-btn-primary-text, #fff); border-radius: var(--mdg-radius); transition: opacity 0.3s ease; }
.mdg-btn:hover { opacity: 0.8; }
@media (max-width: 768px) { .mdg-video-text-section { flex-direction: column; margin: 20px auto; gap: 24px; } .mdg-video-col, .mdg-text-col { flex: 1 1 100%; width: 100%; } .mdg-text-col { text-align: center; } .mdg-btn { width: 100%; } }
</style>
<div class="mdg-video-text-section">
<div class="mdg-video-col">
<video class="mdg-native-video" autoplay loop muted playsinline>
<source src="{{ mdg_video_url }}" type="video/mp4">
</video>
</div>
<div class="mdg-text-col">
<h2>{{ mdg_title }}</h2>
<p>{{ mdg_text }}</p>
<a href="{{ mdg_btn_link }}" class="mdg-btn">{{ mdg_btn_text }}</a>
</div>
</div>
<script>
// 👇 在这里修改播放速度：1.0 是原速，1.2 是稍微加快，1.5 是 1.5倍速 👇
const PLAYBACK_SPEED = 1.2;
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.mdg-native-video').forEach(v => v.playbackRate = PLAYBACK_SPEED);
});
</script>
版本二：Youtube 嵌入版本
{%- comment -%}
=========================================================
【Madsgogo 专属控制台 - YouTube 内容设置】
👇 粉丝朋友们，请只修改双引号 "" 里面的内容 👇
=========================================================
{%- endcomment -%}
{% assign mdg_yt_id = "这里填入你的YouTube视频ID，例如 dQw4w9WgXcQ" %}
{% assign mdg_title = "YouTube 品牌故事展示" %}
{% assign mdg_text = "填入视频 ID 后，系统会自动生成无边框、自适应宽度的循环播放器。请注意，加载第三方播放器会稍稍增加网络请求。" %}
{% assign mdg_btn_text = "立即抢购" %}
{% assign mdg_btn_link = "/products/your-product" %}
<style>
:root {
/* =========================================================
【Madsgogo 专属控制台 - 外观与排版设置】
========================================================= */
--mdg-title-size: 2.2rem;
--mdg-text-size: 1.1rem;
--mdg-spacing: 40px auto;
--mdg-gap: 40px;
--mdg-radius: 12px;
}
/* =========================================================
⚠️ 小白请勿修改下方任何代码 ⚠️
========================================================= */
.mdg-video-text-section { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; max-width: 1200px; margin: var(--mdg-spacing); padding: 0 20px; gap: var(--mdg-gap); }
.mdg-video-col { flex: 1 1 45%; min-width: 300px; overflow: hidden; border-radius: var(--mdg-radius); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.mdg-video-col iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border: none; }
.mdg-text-col { flex: 1 1 45%; min-width: 300px; }
.mdg-text-col h2 { margin: 0 0 16px 0; font-size: var(--mdg-title-size); line-height: 1.2; font-weight: 700; }
.mdg-text-col p { margin-bottom: 24px; font-size: var(--mdg-text-size); line-height: 1.6; opacity: 0.85; }
.mdg-btn { display: inline-block; padding: 14px 28px; font-weight: bold; text-align: center; text-decoration: none; background-color: var(--color-btn-primary, #000); color: var(--color-btn-primary-text, #fff); border-radius: var(--mdg-radius); transition: opacity 0.3s ease; }
.mdg-btn:hover { opacity: 0.8; }
@media (max-width: 768px) { .mdg-video-text-section { flex-direction: column; margin: 20px auto; gap: 24px; } .mdg-video-col, .mdg-text-col { flex: 1 1 100%; width: 100%; } .mdg-text-col { text-align: center; } .mdg-btn { width: 100%; } }
</style>
<div class="mdg-video-text-section">
<div class="mdg-video-col">
<iframe src="<https://www.youtube.com/embed/>{{ mdg_yt_id }}?autoplay=1&mute=1&loop=1&playlist={{ mdg_yt_id }}" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="mdg-text-col">
<h2>{{ mdg_title }}</h2>
<p>{{ mdg_text }}</p>
<a href="{{ mdg_btn_link }}" class="mdg-btn">{{ mdg_btn_text }}</a>
</div>
</div>
这里面的视频ID ，如下图我用红色框起来的就是ID：
视频并排
这种的话，就是我之前所提到的并排展示。你可以放三个 TikTok 或者 Instagram 等等在社交媒体上比较火热的视频，也就是那些点赞和评论都很高的视频。这里我也给大家手搓了一串代码，如果说你的主题不支持、没有这个模块的话，你也可以去用一用（嘿嘿嘿）。
版本一：Shopify MP4直连
{%- comment -%}
=========================================================
【Madsgogo 专属控制台 - UGC 竖屏视频轮播 (极致提速版)】
👇 粉丝朋友们，请在这里填入你在 Shopify 后台上传的 4 个 MP4 链接 👇
=========================================================
{%- endcomment -%}
{% assign mdg_mp4_1 = "https://cdn.shopify.com/s/files/...视频1.mp4" %}
{% assign mdg_mp4_2 = "https://cdn.shopify.com/s/files/...视频2.mp4" %}
{% assign mdg_mp4_3 = "https://cdn.shopify.com/s/files/...视频3.mp4" %}
{% assign mdg_mp4_4 = "https://cdn.shopify.com/s/files/...视频4.mp4" %}
<style>
:root {
/* =========================================================
【外观参数调整】
========================================================= */
--mdg-carousel-spacing: 40px auto; /* 整个模块的上下外边距 */
--mdg-item-width: 260px; /* 竖屏视频宽度 (建议240-280之间，适合手机屏幕) */
--mdg-item-gap: 16px; /* 视频之间的间距 */
--mdg-border-radius: 16px; /* 视频圆角，贴合现代 UI */
}
/* =========================================================
⚠️ 小白请勿修改下方任何代码 ⚠️
========================================================= */
.mdg-carousel-wrapper { position: relative; max-width: 1200px; margin: var(--mdg-carousel-spacing); padding: 0 50px; }
.mdg-carousel-track {
display: flex; gap: var(--mdg-item-gap); overflow-x: auto;
scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 15px;
-ms-overflow-style: none; scrollbar-width: none;
}
.mdg-carousel-track::-webkit-scrollbar { display: none; }
.mdg-carousel-item {
flex: 0 0 var(--mdg-item-width); scroll-snap-align: center;
aspect-ratio: 9 / 16; border-radius: var(--mdg-border-radius);
overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,0.08);
background-color: #f4f4f4; position: relative;
}
.mdg-carousel-item video {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* 左右导航箭头 */
.mdg-nav-btn {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; background-color: rgba(255, 255, 255, 0.95);
border: 1px solid #eee; border-radius: 50%; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 20px; color: #111; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
z-index: 10; transition: all 0.2s ease;
}
.mdg-nav-btn:hover { background-color: #fff; transform: translateY(-50%) scale(1.05); }
.mdg-nav-btn.prev { left: 0; }
.mdg-nav-btn.next { right: 0; }
/* 移动端适配：隐藏箭头，靠手指自然滑动，并让视频露出下一个边缘 */
@media (max-width: 768px) {
.mdg-carousel-wrapper { padding: 0 16px; }
.mdg-carousel-item { flex: 0 0 75%; }
.mdg-nav-btn { display: none; }
}
</style>
<div class="mdg-carousel-wrapper">
<button class="mdg-nav-btn prev" aria-label="Previous">❮</button>
<div class="mdg-carousel-track">
<div class="mdg-carousel-item">
<video autoplay loop muted playsinline>
<source src="{{ mdg_mp4_1 }}" type="video/mp4">
</video>
</div>
<div class="mdg-carousel-item">
<video autoplay loop muted playsinline>
<source src="{{ mdg_mp4_2 }}" type="video/mp4">
</video>
</div>
<div class="mdg-carousel-item">
<video autoplay loop muted playsinline>
<source src="{{ mdg_mp4_3 }}" type="video/mp4">
</video>
</div>
<div class="mdg-carousel-item">
<video autoplay loop muted playsinline>
<source src="{{ mdg_mp4_4 }}" type="video/mp4">
</video>
</div>
</div>
<button class="mdg-nav-btn next" aria-label="Next">❯</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const wrappers = document.querySelectorAll('.mdg-carousel-wrapper');
wrappers.forEach(wrapper => {
const track = wrapper.querySelector('.mdg-carousel-track');
const prevBtn = wrapper.querySelector('.prev');
const nextBtn = wrapper.querySelector('.next');
const getScrollAmount = () => {
const item = track.querySelector('.mdg-carousel-item');
const gap = parseInt(window.getComputedStyle(track).gap) || 0;
return item.offsetWidth + gap;
};
if(prevBtn && nextBtn) {
prevBtn.addEventListener('click', () => track.scrollBy({ left: -getScrollAmount(), behavior: 'smooth' }));
nextBtn.addEventListener('click', () => track.scrollBy({ left: getScrollAmount(), behavior: 'smooth' }));
}
});
});
</script>
Youtube 嵌入版本
{%- comment -%}
=========================================================
【Madsgogo 专属控制台 - UGC 视频轮播 (YouTube 嵌入版)】
👇 粉丝朋友们，请在这里填入 4 个 YouTube 视频的 ID 👇
=========================================================
{%- endcomment -%}
{% assign yt_video_1 = "这里填视频1的ID" %}
{% assign yt_video_2 = "这里填视频2的ID" %}
{% assign yt_video_3 = "这里填视频3的ID" %}
{% assign yt_video_4 = "这里填视频4的ID" %}
<style>
:root {
/* 外观参数调整 */
--mdg-carousel-spacing: 40px auto; /* 整个模块的上下外边距 */
--mdg-item-width: 280px; /* 每个竖屏视频的宽度 (建议250-300之间) */
--mdg-item-gap: 20px; /* 视频之间的间距 */
--mdg-border-radius: 16px; /* 视频圆角 */
}
/* 轮播容器基础设置 */
.mdg-carousel-wrapper {
position: relative;
max-width: 1200px;
margin: var(--mdg-carousel-spacing);
padding: 0 40px; /* 给左右箭头留出空间 */
}
/* 滚动轨道 */
.mdg-carousel-track {
display: flex;
gap: var(--mdg-item-gap);
overflow-x: auto;
scroll-snap-type: x mandatory; /* 开启吸附效果，滑动更顺畅 */
scroll-behavior: smooth;
padding-bottom: 10px; /* 防止阴影被切掉 */
/* 隐藏原生滚动条，保持清爽 */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.mdg-carousel-track::-webkit-scrollbar {
display: none; /* Chrome, Safari and Opera */
}
/* 单个视频容器 */
.mdg-carousel-item {
flex: 0 0 var(--mdg-item-width);
scroll-snap-align: center; /* 滚动时自动居中吸附 */
aspect-ratio: 9 / 16; /* 强制锁定竖屏比例 */
border-radius: var(--mdg-border-radius);
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
background-color: #000; /* 加载前的底色 */
}
/* iframe 占满容器 */
.mdg-carousel-item iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
/* 左右导航箭头 */
.mdg-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid #ddd;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #333;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
z-index: 10;
transition: background-color 0.2s ease;
}
.mdg-nav-btn:hover { background-color: #fff; }
.mdg-nav-btn.prev { left: 0; }
.mdg-nav-btn.next { right: 0; }
/* 移动端适配 */
@media (max-width: 768px) {
.mdg-carousel-wrapper { padding: 0 10px; }
.mdg-carousel-item { flex: 0 0 80%; } /* 移动端让视频占满大半个屏幕，露出下一个视频的边缘暗示可滑动 */
.mdg-nav-btn { display: none; } /* 移动端通常习惯直接手指滑动，隐藏按钮更清爽 */
}
</style>
<div class="mdg-carousel-wrapper">
<button class="mdg-nav-btn prev" aria-label="Previous">❮</button>
<div class="mdg-carousel-track">
<div class="mdg-carousel-item">
<iframe src="<https://www.youtube.com/embed/>{{ yt_video_1 }}?rel=0" allowfullscreen></iframe>
</div>
<div class="mdg-carousel-item">
<iframe src="<https://www.youtube.com/embed/>{{ yt_video_2 }}?rel=0" allowfullscreen></iframe>
</div>
<div class="mdg-carousel-item">
<iframe src="<https://www.youtube.com/embed/>{{ yt_video_3 }}?rel=0" allowfullscreen></iframe>
</div>
<div class="mdg-carousel-item">
<iframe src="<https://www.youtube.com/embed/>{{ yt_video_4 }}?rel=0" allowfullscreen></iframe>
</div>
</div>
<button class="mdg-nav-btn next" aria-label="Next">❯</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 因为页面上可能有多个这样的组件，我们需要精准定位
const wrappers = document.querySelectorAll('.mdg-carousel-wrapper');
wrappers.forEach(wrapper => {
const track = wrapper.querySelector('.mdg-carousel-track');
const prevBtn = wrapper.querySelector('.prev');
const nextBtn = wrapper.querySelector('.next');
// 获取单个 item 的宽度加上间距，作为每次滑动的距离
const getScrollAmount = () => {
const item = track.querySelector('.mdg-carousel-item');
const gap = parseInt(window.getComputedStyle(track).gap) || 0;
return item.offsetWidth + gap;
};
if(prevBtn && nextBtn) {
prevBtn.addEventListener('click', () => {
track.scrollBy({ left: -getScrollAmount(), behavior: 'smooth' });
});
nextBtn.addEventListener('click', () => {
track.scrollBy({ left: getScrollAmount(), behavior: 'smooth' });
});
}
});
});
</script>
视频压缩
关于将视频托管在第三方平台（例如 YouTube）上面，然后再通过嵌入的方式在网页里面做一个链接，这是很好提高网站加载速度的办法。
但如果你依旧想要通过将视频上传到自己网站，例如首页的 Banner视频，那么我还有一个绝招教给你们，就是通过开源工具-Handbrake，在尽量保持画质不变的情况下，将视频的大小进行大幅度的压缩。
预设我们选择Web（网页展示），后续的参数选择应与你原视频的清晰度保持一致即可。关于下方视频格式，我们就依旧选择最经典的 MP4 格式即可，然后点击开始即可。在格式的下面，其实还有一个地方是 Web 优化，如果你这个视频是要传到网站上面去做展示的话，那么我建议大家把这个也勾选上。
从官方的角度去解释，他说的是勾选之后，这个视频就能够支持做到边下边播，它的首帧就能够做到秒开，在平时的使用过程中，我并有没有到如此细致的测试，整体使用都还行，那如果你是上传到 Shopify 的后台然后在前端调用的情况下，我建议大家勾选；如果你是上传到 YouTube 上面的话，其实勾不勾选都一样。
就像我目前 B 站上面的所有视频，我都是通过这个软件再次压缩后进行上传的。它依旧能够保持原视频的清晰度，在不损失太多画质的情况下，文件的大小可以降到原来的1/4，甚至更多，也算是我必备的一个工具了
服务器提速详解
如果你使用的是 Shopify 等 SaaS 平台，恭喜你，平台底层已经内置了顶级的 CDN（比如 Shopify 用的就是 Cloudflare 的企业级节点），你不需要操心底层加速。但如果你是用 WordPress 建站，强烈建议你自己接入免费的 Cloudflare，因为 Cloudflare 会提供整体的缓存加速、DDoS防御，还有基础的 DNS 保护。
关于插件问题
其实很多新手一上场，就喜欢在 Shopify 里面装各种插件，比如倒计时、各种信任弹窗之类的。
我们在装的时候一定要注意，其实很多 App 虽然你在后台点击了卸载，但它的 JS 脚本依然会残留在你的主题代码里面。
如果你哪天发现网站速度变慢了，我建议你直接进入编辑代码的页面，去找一找这些残留的代码并将其彻底删除掉，在装插件这件事情上，保持克制，如果不是必须的，就不要装。
关于延迟加载
像这种 SaaS 建站平台，其实已经迭代到现在的版本，它们原生都是自带图片延迟加载的。也就是说，系统其实已经在底层默认帮你开启了图片的懒加载，我们就不需要到处去寻找了。
当然也不排除一些第三方的主题它们会把控制权交给卖家。这个开关一般都是在模板编辑的整体设置或者分区开关中。
好了，今天的内容到此结束，感谢各位伙伴的观看，祝各位今天依旧幸福开心快乐，生意顺利，发财！
如果遇到任何的疑问，可以随时在群里艾特我，或者在本文章留言。
