外贸网站中的节流方案
由于外贸站一般放在国外，国内访问的速度一般会比较慢。所以我们在做站的时候，需要对网站进行一些优化和节流操作。
1：图片节流。
图片是影响网站速度的最大凶手之一，所以在上传图片的时候，尺寸压缩小一些，然后压缩成.webp后缀的格式。
同时在响应式网站开发中，有一些比如说首页BANNER图片，需要设计两张不同尺寸图片的时候，可以使用以下代码，方便在PC端和手机端上单独加载
<picture> <source srcset="大图路径" media="(min-width: 768px)"> <img src="小图路径" class="d-block w-100" alt="标题" fetchpriority="high"> </picture>
上面代码的意思是在小屏时加载src中的图片，当大于768像素的时候就加载大图。
如果需要单独使用不同的模块展示方式，也就是PC和WAP使用不同的代码模块来展示时，那么需要单独写代码时，这时候，PC端不加载一些图片，WAP不加载另一些图片时可用以下代码 ：以下是手机端，表示在电脑端时不显示一个无用的小图
<picture> <source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" media="(min-width: 768px)"> <img src="[list:ico]" class="w-100" alt="[list:title]" style="display: block;"> </picture>
如果相反，我们需要在大于768上显示，小于768的时候不显示。
<picture> <source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" media="(max-width: 767px)"> <source srcset="medium.jpg" media="(min-width: 768px) and (max-width: 1024px)"> <source srcset="large.jpg" media="(min-width: 1025px)"> <img src="large.jpg" ...> </picture>
2：SEO优化中的MORE按钮
在网页中我们经常需要使用按钮，比如说MORE，同一个页面会有多个MORE这样的按钮，但是搜索引擎在获取这些按钮的时候，发现是相同的文字内容，对SEO并不友好，我们需要添加aria-label和一个隐藏的文字说明，例如：
<a href="" class="More-btn-black" aria-label="不同的文字说明，比如说不同的标题">MORE<span class="visually-hidden">不同的文字说明，比如说不同的标题</span><i class="bi bi-arrow-right-short"></i></a>
其中visually-hidden类是BOOTSTRAP自带的类，大概意思是写了一个宽和高是1PX的或者0PX的SPAN，然后使用absolute将他浮动起来，这样就不会占用原来的空间，其实也就相当于隐藏了。但是给搜索了一个不同的标题。
3：表格在手机端的优化。
在发布新闻的时候，常常会复制一些表格到内容中，正常在PC端显示是正常的，比如说表格很宽，内容很多。但是到了移动端的时候，表格因为太大，而手机尺寸太小无法查看，如果限制强制100%的话，宽度又太小，导致看着不清楚， 这个时候我们可以用JS强制新闻详情中带有table的表格参加响应反应。
<script type="text/javascript" charset="utf-8">
document.querySelectorAll('table').forEach(function(table) {
// 避免重复包裹
if (!table.parentElement.classList.contains('table-responsive')) {
// 创建提示文字
const tip = document.createElement('div');
tip.className = 'd-block d-md-none my-1';
tip.textContent = ' '; // 创建提示文字
// 创建包裹容器
const wrapper = document.createElement('div');
wrapper.className = 'table-responsive';
// 插入提示文字（在 table-responsive 上方）
table.parentNode.insertBefore(tip, table);
// 插入 table-responsive 容器
table.parentNode.insertBefore(wrapper, table);
// 把 table 放进 wrapper
wrapper.appendChild(table);
}
});
</script>上面代码的意思是检测网页中慧table，就添加一个外包裹的bootstap框架自带的table-responsive类的div，让他成为可以左右拖动的表格，如果你用的不是bootstap框架，那可以自定义一下CSS就可以了。
4: 网页中的视频优化。
如果首页存在视频，加载速度会非常慢。
方案：利用 preload="none"（最简单，推荐），这种情况 下一定要添加封面图。
<video controls preload="none" poster="cover-image.jpg"> <source src="your-video.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 视频。 </video>
考虑到一些手机极端的情况下，虽然写了 preload="none"，但在某些移动端浏览器下，只要 src 存在，浏览器有时仍会尝试握手获取视频头部信息。最高级的做法是将真实的地址放在 data-src 中，点击时再交给 src：
<div class="myvideo"> <video id="myVideo" data-src="/static/video/1.mp4" poster="[content:ico]" preload="none" muted loop playsinline class="w-100" data-aos="fade-in" data-aos-duration="1000" ></video> <a id="palyvideo"><i class="bi bi-play-circle-fill fs-100 fs-sm-40"></i><div class="fs-40 fs-sm-20 mt-1 colorfff">Play Video</div></a> </div>
再使用JS，加载的时候再当视频载入。
// 在 playBtn 的点击事件里
playBtn.addEventListener('click', function () {
if (!video.src || video.src === "") {
// 这一步才真正开始触发网络下载
video.src = video.getAttribute('data-src');
video.load();
}
hasStartedPlaying = true;
video.muted = false;
video.play();
playBtn.style.display = 'none';
});同时还可以优化一下当点击播放视频了，往上滑或者往下滑的时候，我们明明没有看到视频，但是视频还在播放，声音也还在，优化一下就是视频滑离视窗时，暂停播放，回来之后，继续播放。
<!------视频----->
<script>
document.addEventListener('DOMContentLoaded', function () {
const video = document.getElementById('myVideo');
const playBtn = document.getElementById('palyvideo');
let hasStartedPlaying = false;
// 播放逻辑封装
function startVideo() {
if (!hasStartedPlaying) {
const realSrc = video.getAttribute('data-src');
if (realSrc) {
video.src = realSrc;
video.load();
}
hasStartedPlaying = true;
}
video.muted = false;
video.volume = 1.0;
video.play().catch(e => console.log("播放失败:", e));
playBtn.style.display = 'none';
}
// 1. 点击播放按钮
playBtn.addEventListener('click', startVideo);
// 2. 点击视频本身切换暂停/播放
video.addEventListener('click', function () {
if (!video.paused) {
video.pause();
playBtn.style.display = 'block';
} else {
startVideo();
}
});
// 3. 检测视野（续播/暂停）
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 只有手动点过播放，回到视野才自动续播
if (hasStartedPlaying) {
video.play();
playBtn.style.display = 'none';
}
} else {
// 只有正在播放时，离开视野才暂停
if (hasStartedPlaying && !video.paused) {
video.pause();
playBtn.style.display = 'block';
}
}
});
}, { threshold: 0.1 });
observer.observe(video);
});
</script>5: 产品详情中的多图优化。
如果我们的产品详情像电商详情一样多张图片，那么我们可以使用懒加载的方式来加载。
例如：
<div class="info-pics mt-1"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="图片真实地址" class="w-100 lazy-load-img"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="图片真实地址" class="w-100 lazy-load-img"> ................几十张图片 </div>
为了让他显示得优雅一些，CSS中必须加入以下代码，一开始loading的时候加载的是一个loading.svg，且这个svg的尺寸是：40px,避免太大不好看，然后加载成功后，移除去loading.svg
.info-pics img {
width: 100%;
min-height: 250px; /* 必须有，否则透明图没高度，用户看不见 loading */
background-color: #f8f9fa;
background-image: url('/static/images/loading.svg'); /* 将 loading 设为背景 */
background-repeat: no-repeat;
background-position: center;
background-size: 40px; /* 控制 loading 图标大小 */
object-fit: cover; /* 真实图加载后充满 */
opacity: 0; /* 初始隐藏，加载完再显现 */
transition: opacity 0.3s;
}
.info-pics img.loaded {
opacity: 1;
background-image: none; /* 加载完移除 loading 图标 */
}然后只需要写上以下的JS加载。
<script type="text/javascript" charset="utf-8">
/***********************
* 图片懒加载
***********************/
document.addEventListener("DOMContentLoaded", function() {
const infoPics = document.querySelectorAll(".info-pics img");
if (infoPics.length === 0) return;
const ua = navigator.userAgent;
const isIOSBaidu = /iPhone|iPad|iPod/i.test(ua) && /baiduboxapp/i.test(ua);
// 处理加载完成后的类名切换（新增封装）
function handleImageLoaded(img) {
img.classList.add('loaded'); // 关键：加载完添加 loaded 类，改变 object-fit
img.removeAttribute('data-src');
img.style.opacity = "1";
}
// -------------------------------
// ① 针对 iOS 百度 APP 的处理：直接加载
// -------------------------------
if (isIOSBaidu) {
infoPics.forEach(img => {
if (img.dataset.src) {
img.src = img.dataset.src;
// iOS 百度也需要监听加载完成
img.onload = () => handleImageLoaded(img);
}
});
return;
}
// -------------------------------
// ② 针对其他现代浏览器的处理：懒加载
// -------------------------------
if ('IntersectionObserver' in window) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
const realSrc = img.dataset.src;
if (realSrc) {
img.src = realSrc;
// 图片加载成功后切换样式
img.onload = () => handleImageLoaded(img);
}
observer.unobserve(img);
}
});
}, { rootMargin: "300px 0px" });
infoPics.forEach(img => observer.observe(img));
} else {
infoPics.forEach(img => {
if (img.dataset.src) {
img.src = img.dataset.src;
img.onload = () => handleImageLoaded(img);
}
});
}
});
</script>如此便非常优雅了。
我们可以使用谷歌浏览器中的低速4G来测试一下加载过程。
6：首页BANNER的优化。
假如我们首页BANNER图片有多张，比如三张，五张，那么网站第一屏打开的时候，如下图，虽然其他的速度都非常快，但是在谷歌的测试中，如果不做特殊处理，LCP 依然会很高。主要问题出在：浏览器分不清哪一张才是真正的“首屏大图”。
解决方案：给第一张图片添加 fetchpriority="high"，其他的图片添加懒加载loading="lazy"。
<div class="swiper-wrapper">
{hmcms:slide num=10 gid=1}
<div class="swiper-slide">
<a href="[slide:link]">
<picture>
<source srcset="[slide:src]" media="(min-width: 768px)">
<img src="[slide:ico]" class="d-block w-100" alt="[slide:title]" {hmcms:if('[slide:i]'=='1')} fetchpriority="high" {else}loading="lazy" {/hmcms:if}>
</picture>
</a>
<div class="container-xl">
<div class="position-relativeition-absolute text-light" style="top:30%;">
<h1 class="fs-20 fs-sm-32 " data-aos="fade-up" data-aos-duration="1000" >[slide:title]</h1>
<h4 class="fs-14 fs-sm-20 " data-aos="fade-up" data-aos-duration="1000" >[slide:subtitle]</h4>
</div>
</div>
</div>
{/hmcms:slide}
</div>配合SWIPER中自带的懒加载：
lazy: true, // 开启 Swiper 的懒加载功能 watchSlidesProgress: true, // 开启这个能让 Swiper 更好地配合原生加载
同时我们可以在</head>之前添加上预加载图片：
{hmcms:if(0=='{sort:scode}')}{hmcms:slide num=1 gid=1}<link rel="preload" as="image" href="[slide:src]" media="(min-width: 768px)">
<link rel="preload" as="image" href="[slide:ico]" media="(max-width: 767px)">{/hmcms:slide}{/hmcms:if}
</head>7: css 和JS的顺序。
请一定要记得,JS不要在HEAD中引入，一定要放在网页尾部。除非你有什么JS非用在顶部引入之外。否则在谷歌SPEED测试的时候，在一开始渲染JS的时候会需要很长时间，虽然PC端感觉不出来，但是由于他的手机端是在低速4G的极端模式下测试的，这个时候如果JS在头部，会严重影响加载速度。
8: 字体的引入。
英文网站为了美观，通常需要引入专用字体。但是如果直接在服务器上存放字体引入，既然你的字体只有40KB，100KB，你使用谷歌检测工具在检测的时候，性能也会变得非常弱，特别是：Largest Contentful Paint的渲染会变得非常慢。
解决方案，统一调用谷歌字体，谷歌提供了非常丰富的字体供大家使用。
方案：在HEAD中引入：
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Tapestry&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Tapestry&display=swap" media="print" onload="this.media='all'"> <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Tapestry&display=swap"></noscript>
然后CSS中可引入：
html,body{
font-family: 'Roboto',"PingFangSC-Regular", "PingFang SC", "Microsoft Yahei", Arial !important;
}
.Roboto{
font-family: 'Roboto', sans-serif!important;;
}
.Roboto-bold{
font-family: 'Roboto', sans-serif!important;;
font-weight: 700;
}
.Tapestry{
font-family: 'Tapestry', cursive!important;
}谷歌字体选择网址：提供了大量的字体供大家选择。
https://fonts.google.com/?preview.script=Latn&categoryFilters=Feeling:%2FExpressive%2FVintage
通过以上优化，我们可以看到效果。
同时手机端在低速4G节流模式下，也优化到了3秒以内。虽然看着时间长，但是对于手机来说，用户体验基本上也OK了，何况我们首页的内容相当的多：
1：幻灯6张，PC端+手机端一共：12张
2: 产品列表图8张
3：视频一个9M，
4：15张小LOGO合作伙伴图。
5：案例展示大图6张，PC端和手机端一共：12张
6: 资质证书 5张图
7：新闻中心：4张图
在压缩如此巨大的情况下，这种优化已经到了极致。
很多所谓的SEO优化从业人员，总是喜欢用谷歌SPEA来测试网站性能。
然而他们并不会在乎PAGESPEED在手机端使用的是低速4G节流模式。
所以既然你在测试的时候，发现移动端的得分很低，也不必忧伤，因为这是谷歌在模板测试的时候，是在极其严格很差的状态下的效果，而如今普遍都是高速4G甚至是5G网络了，在实际的用户体验中，效果应该不会差的。
谷歌 PageSpeed Insights（PSI）在测试移动端时，默认会模拟中端手机（如 Moto G4）以及低速 4G 网络（Slow 4G）环境。许多开发者对此感到困惑：明明现在 5G 已经普及，大家也都用上了高性能旗舰机，为什么谷歌还要用这么“卡”的环境来跑测试？
谷歌这样做并非技术滞后，而是基于以下几个核心的技术与用户体验考量：
1. 悲观原则：为“最坏的网络情况”做准备
移动端网络的最大的特点是极度不稳定。
物理环境的限制： 即使你使用的是 5G 手机和 5G 套餐，当你进入地下车库、电梯、密闭的高楼内部、或者坐在快速行驶的高铁/地铁上时，信号会瞬间跌落。
网络降级模拟： 谷歌模拟的“低速 4G”（通常限制为吞吐量约 1.6 Mbps，延迟 150ms），就是为了模拟这种用户在日常生活中随时可能遇到的“信号变差”的场景。如果网站在低速 4G 下都能流畅打开，那么在完美的 5G 或 Wi-Fi 环境下绝对会飞快。
2. 拥抱全球化与长尾用户（包容性设计）
作为全球性的搜索引擎，谷歌制定的标准需要照顾到所有网民，而不仅仅是发达城市里拿着最新旗舰机的用户。
设备与网络断层： 在全球范围内（甚至在发达国家的偏远地区），仍有海量用户使用的是千元机（低端处理器）和清退 3G 后勉强支撑的低速 4G 网络。
公平性： 如果 PSI 默认用 5G 和 iPhone 15 Pro 来测试，那么开发者就会忽视网页代码冗余、图片过大的问题。这会导致低配设备和差网络下的用户完全打不开网页，造成严重的“数字鸿沟”。
3. 放大瓶颈，逼出网页的“技术硬伤”
在极高的网络带宽和桌面端超强的 CPU 性能下，很多网页底层的性能问题会被“掩盖”过去。
木桶效应： 当把网络限制在低速 4G，把 CPU 性能削弱到中端机水平时，网页的劣势就会被成倍放大。例如：未压缩的重度 JavaScript 脚本、几兆大小的未优化图片、阻塞渲染的第三方插件等。
倒逼优化： 这种“严苛”的测试环境能让开发者清晰地看到：到底是什么资源在网络差的时候成为了卡死网页的“罪魁祸首”（例如导致 LCP 或者是 INP 指标飙红），从而精准优化。
核心误区澄清：PSI 分数 $\neq$ 真实用户体验
很多站长因为移动端得分低而焦虑，这里需要分清 PageSpeed Insights 中的两种数据：
实验室数据（Lab Data）： 也就是你点击“分析”后当场跑出来的分数。这个分数正是基于上述低速 4G 和慢 CPU 模拟出来的。它是一个固定的“压力测试”，用于指导你改代码。
实际现场数据（Field Data / CrUX）： 在分数牌的上方，通常会显示“了解真实用户的体验”。这是谷歌收集的过去 28 天内，真正访问你网站的真人用户的真实数据（Chrome 浏览器用户体验报告）。
⚠️ 核心结论： > 如果你的网站核心用户全在大城市，他们普遍用着 5G 和高端机，那么你的现场数据（实际体验）可能全是绿色（优秀）；但由于谷歌的“实验室模拟”非常严格，你的实验室分数可能只有 60 分。
优化时，优先保证真实用户现场数据（Core Web Vitals）达标。至于那个模拟低速 4G 的实验室分数，尽力而为即可，无需为了追求 100 分而砍掉网站的核心功能。
上一篇：谷歌SEO优化标准
下一篇：