外貿(mào)網(wǎng)站建設(shè)，讓業(yè)務(wù)全球可達(dá)
0%
由于外貿(mào)站一般放在國外，國內(nèi)訪問的速度一般會(huì)比較慢。所以我們?cè)谧稣镜臅r(shí)候，需要對(duì)網(wǎng)站進(jìn)行一些優(yōu)化和節(jié)流操作。
1：圖片節(jié)流。
圖片是影響網(wǎng)站速度的最大兇手之一，所以在上傳圖片的時(shí)候，尺寸壓縮小一些，然后壓縮成.webp后綴的格式。
同時(shí)在響應(yīng)式網(wǎng)站開發(fā)中，有一些比如說首頁BANNER圖片，需要設(shè)計(jì)兩張不同尺寸圖片的時(shí)候，可以使用以下代碼，方便在PC端和手機(jī)端上單獨(dú)加載
<picture> <source srcset="大圖路徑" media="(min-width: 768px)"> <img src="小圖路徑" class="d-block w-100" alt="標(biāo)題" fetchpriority="high"> </picture>
上面代碼的意思是在小屏?xí)r加載src中的圖片，當(dāng)大于768像素的時(shí)候就加載大圖。
如果需要單獨(dú)使用不同的模塊展示方式，也就是PC和WAP使用不同的代碼模塊來展示時(shí)，那么需要單獨(dú)寫代碼時(shí)，這時(shí)候，PC端不加載一些圖片，WAP不加載另一些圖片時(shí)可用以下代碼 ：以下是手機(jī)端，表示在電腦端時(shí)不顯示一個(gè)無用的小圖
<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的時(shí)候不顯示。
<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優(yōu)化中的MORE按鈕
在網(wǎng)頁中我們經(jīng)常需要使用按鈕，比如說MORE，同一個(gè)頁面會(huì)有多個(gè)MORE這樣的按鈕，但是搜索引擎在獲取這些按鈕的時(shí)候，發(fā)現(xiàn)是相同的文字內(nèi)容，對(duì)SEO并不友好，我們需要添加aria-label和一個(gè)隱藏的文字說明，例如：
<a href="" class="More-btn-black" aria-label="不同的文字說明，比如說不同的標(biāo)題">MORE<span class="visually-hidden">不同的文字說明，比如說不同的標(biāo)題</span><i class="bi bi-arrow-right-short"></i></a>
其中visually-hidden類是BOOTSTRAP自帶的類，大概意思是寫了一個(gè)寬和高是1PX的或者0PX的SPAN，然后使用absolute將他浮動(dòng)起來，這樣就不會(huì)占用原來的空間，其實(shí)也就相當(dāng)于隱藏了。但是給搜索了一個(gè)不同的標(biāo)題。
3：表格在手機(jī)端的優(yōu)化。
在發(fā)布新聞的時(shí)候，常常會(huì)復(fù)制一些表格到內(nèi)容中，正常在PC端顯示是正常的，比如說表格很寬，內(nèi)容很多。但是到了移動(dòng)端的時(shí)候，表格因?yàn)樘?，而手機(jī)尺寸太小無法查看，如果限制強(qiáng)制100%的話，寬度又太小，導(dǎo)致看著不清楚， 這個(gè)時(shí)候我們可以用JS強(qiáng)制新聞詳情中帶有table的表格參加響應(yīng)反應(yīng)。
<script type="text/javascript" charset="utf-8">
document.querySelectorAll('table').forEach(function(table) {
// 避免重復(fù)包裹
if (!table.parentElement.classList.contains('table-responsive')) {
// 創(chuàng)建提示文字
const tip = document.createElement('div');
tip.className = 'd-block d-md-none my-1';
tip.textContent = ' '; // 創(chuàng)建提示文字
// 創(chuàng)建包裹容器
const wrapper = document.createElement('div');
wrapper.className = 'table-responsive';
// 插入提示文字（在 table-responsive 上方）
table.parentNode.insertBefore(tip, table);
// 插入 table-responsive 容器
table.parentNode.insertBefore(wrapper, table);
// 把 table 放進(jìn) wrapper
wrapper.appendChild(table);
}
});
</script>上面代碼的意思是檢測網(wǎng)頁中慧table，就添加一個(gè)外包裹的bootstap框架自帶的table-responsive類的div，讓他成為可以左右拖動(dòng)的表格，如果你用的不是bootstap框架，那可以自定義一下CSS就可以了。
4: 網(wǎng)頁中的視頻優(yōu)化。
如果首頁存在視頻，加載速度會(huì)非常慢。
方案：利用 preload="none"（最簡單，推薦），這種情況 下一定要添加封面圖。
<video controls preload="none" poster="cover-image.jpg"> <source src="your-video.mp4" type="video/mp4"> 您的瀏覽器不支持 HTML5 視頻。 </video>
考慮到一些手機(jī)極端的情況下，雖然寫了 preload="none"，但在某些移動(dòng)端瀏覽器下，只要 src 存在，瀏覽器有時(shí)仍會(huì)嘗試握手獲取視頻頭部信息。最高級(jí)的做法是將真實(shí)的地址放在 data-src 中，點(diǎn)擊時(shí)再交給 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，加載的時(shí)候再當(dāng)視頻載入。
// 在 playBtn 的點(diǎn)擊事件里
playBtn.addEventListener('click', function () {
if (!video.src || video.src === "") {
// 這一步才真正開始觸發(fā)網(wǎng)絡(luò)下載
video.src = video.getAttribute('data-src');
video.load();
}
hasStartedPlaying = true;
video.muted = false;
video.play();
playBtn.style.display = 'none';
});同時(shí)還可以優(yōu)化一下當(dāng)點(diǎn)擊播放視頻了，往上滑或者往下滑的時(shí)候，我們明明沒有看到視頻，但是視頻還在播放，聲音也還在，優(yōu)化一下就是視頻滑離視窗時(shí)，暫停播放，回來之后，繼續(xù)播放。
<!------視頻----->
<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. 點(diǎn)擊播放按鈕
playBtn.addEventListener('click', startVideo);
// 2. 點(diǎn)擊視頻本身切換暫停/播放
video.addEventListener('click', function () {
if (!video.paused) {
video.pause();
playBtn.style.display = 'block';
} else {
startVideo();
}
});
// 3. 檢測視野（續(xù)播/暫停）
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 只有手動(dòng)點(diǎn)過播放，回到視野才自動(dòng)續(xù)播
if (hasStartedPlaying) {
video.play();
playBtn.style.display = 'none';
}
} else {
// 只有正在播放時(shí)，離開視野才暫停
if (hasStartedPlaying && !video.paused) {
video.pause();
playBtn.style.display = 'block';
}
}
});
}, { threshold: 0.1 });
observer.observe(video);
});
</script>5: 產(chǎn)品詳情中的多圖優(yōu)化。
如果我們的產(chǎn)品詳情像電商詳情一樣多張圖片，那么我們可以使用懶加載的方式來加載。
例如：
<div class="info-pics mt-1"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="圖片真實(shí)地址" class="w-100 lazy-load-img"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="圖片真實(shí)地址" class="w-100 lazy-load-img"> ................幾十張圖片 </div>
為了讓他顯示得優(yōu)雅一些，CSS中必須加入以下代碼，一開始loading的時(shí)候加載的是一個(gè)loading.svg，且這個(gè)svg的尺寸是：40px,避免太大不好看，然后加載成功后，移除去loading.svg
.info-pics img {
width: 100%;
min-height: 250px; /* 必須有，否則透明圖沒高度，用戶看不見 loading */
background-color: #f8f9fa;
background-image: url('/static/images/loading.svg'); /* 將 loading 設(shè)為背景 */
background-repeat: no-repeat;
background-position: center;
background-size: 40px; /* 控制 loading 圖標(biāo)大小 */
object-fit: cover; /* 真實(shí)圖加載后充滿 */
opacity: 0; /* 初始隱藏，加載完再顯現(xiàn) */
transition: opacity 0.3s;
}
.info-pics img.loaded {
opacity: 1;
background-image: none; /* 加載完移除 loading 圖標(biāo) */
}然后只需要寫上以下的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'); // 關(guān)鍵：加載完添加 loaded 類，改變 object-fit
img.removeAttribute('data-src');
img.style.opacity = "1";
}
// -------------------------------
// ① 針對(duì) iOS 百度 APP 的處理：直接加載
// -------------------------------
if (isIOSBaidu) {
infoPics.forEach(img => {
if (img.dataset.src) {
img.src = img.dataset.src;
// iOS 百度也需要監(jiān)聽加載完成
img.onload = () => handleImageLoaded(img);
}
});
return;
}
// -------------------------------
// ② 針對(duì)其他現(xiàn)代瀏覽器的處理：懶加載
// -------------------------------
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>如此便非常優(yōu)雅了。
我們可以使用谷歌瀏覽器中的低速4G來測試一下加載過程。
6：首頁BANNER的優(yōu)化。
假如我們首頁BANNER圖片有多張，比如三張，五張，那么網(wǎng)站第一屏打開的時(shí)候，如下圖，雖然其他的速度都非?？?，但是在谷歌的測試中，如果不做特殊處理，LCP 依然會(huì)很高。主要問題出在：瀏覽器分不清哪一張才是真正的“首屏大圖”。
解決方案：給第一張圖片添加 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, // 開啟這個(gè)能讓 Swiper 更好地配合原生加載
同時(shí)我們可以在</head>之前添加上預(yù)加載圖片：
{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的順序。
請(qǐng)一定要記得,JS不要在HEAD中引入，一定要放在網(wǎng)頁尾部。除非你有什么JS非用在頂部引入之外。否則在谷歌SPEED測試的時(shí)候，在一開始渲染JS的時(shí)候會(huì)需要很長時(shí)間，雖然PC端感覺不出來，但是由于他的手機(jī)端是在低速4G的極端模式下測試的，這個(gè)時(shí)候如果JS在頭部，會(huì)嚴(yán)重影響加載速度。
8: 字體的引入。
英文網(wǎng)站為了美觀，通常需要引入專用字體。但是如果直接在服務(wù)器上存放字體引入，既然你的字體只有40KB，100KB，你使用谷歌檢測工具在檢測的時(shí)候，性能也會(huì)變得非常弱，特別是：Largest Contentful Paint的渲染會(huì)變得非常慢。
解決方案，統(tǒng)一調(diào)用谷歌字體，谷歌提供了非常豐富的字體供大家使用。
方案：在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;
}谷歌字體選擇網(wǎng)址：提供了大量的字體供大家選擇。
https://fonts.google.com/?preview.script=Latn&categoryFilters=Feeling:%2FExpressive%2FVintage
通過以上優(yōu)化，我們可以看到效果。
同時(shí)手機(jī)端在低速4G節(jié)流模式下，也優(yōu)化到了3秒以內(nèi)。雖然看著時(shí)間長，但是對(duì)于手機(jī)來說，用戶體驗(yàn)基本上也OK了，何況我們首頁的內(nèi)容相當(dāng)?shù)亩啵?/p>
1：幻燈6張，PC端+手機(jī)端一共：12張
2: 產(chǎn)品列表圖8張
3：視頻一個(gè)9M，
4：15張小LOGO合作伙伴圖。
5：案例展示大圖6張，PC端和手機(jī)端一共：12張
6: 資質(zhì)證書 5張圖
7：新聞中心：4張圖
在壓縮如此巨大的情況下，這種優(yōu)化已經(jīng)到了極致。
很多所謂的SEO優(yōu)化從業(yè)人員，總是喜歡用谷歌SPEA來測試網(wǎng)站性能。
然而他們并不會(huì)在乎PAGESPEED在手機(jī)端使用的是低速4G節(jié)流模式。
所以既然你在測試的時(shí)候，發(fā)現(xiàn)移動(dòng)端的得分很低，也不必憂傷，因?yàn)檫@是谷歌在模板測試的時(shí)候，是在極其嚴(yán)格很差的狀態(tài)下的效果，而如今普遍都是高速4G甚至是5G網(wǎng)絡(luò)了，在實(shí)際的用戶體驗(yàn)中，效果應(yīng)該不會(huì)差的。
谷歌 PageSpeed Insights（PSI）在測試移動(dòng)端時(shí)，默認(rèn)會(huì)模擬中端手機(jī)（如 Moto G4）以及低速 4G 網(wǎng)絡(luò)（Slow 4G）環(huán)境。許多開發(fā)者對(duì)此感到困惑：明明現(xiàn)在 5G 已經(jīng)普及，大家也都用上了高性能旗艦機(jī)，為什么谷歌還要用這么“卡”的環(huán)境來跑測試？
谷歌這樣做并非技術(shù)滯后，而是基于以下幾個(gè)核心的技術(shù)與用戶體驗(yàn)考量：
1. 悲觀原則：為“最壞的網(wǎng)絡(luò)情況”做準(zhǔn)備
移動(dòng)端網(wǎng)絡(luò)的最大的特點(diǎn)是極度不穩(wěn)定。
物理環(huán)境的限制： 即使你使用的是 5G 手機(jī)和 5G 套餐，當(dāng)你進(jìn)入地下車庫、電梯、密閉的高樓內(nèi)部、或者坐在快速行駛的高鐵/地鐵上時(shí)，信號(hào)會(huì)瞬間跌落。
網(wǎng)絡(luò)降級(jí)模擬： 谷歌模擬的“低速 4G”（通常限制為吞吐量約 1.6 Mbps，延遲 150ms），就是為了模擬這種用戶在日常生活中隨時(shí)可能遇到的“信號(hào)變差”的場景。如果網(wǎng)站在低速 4G 下都能流暢打開，那么在完美的 5G 或 Wi-Fi 環(huán)境下絕對(duì)會(huì)飛快。
2. 擁抱全球化與長尾用戶（包容性設(shè)計(jì)）
作為全球性的搜索引擎，谷歌制定的標(biāo)準(zhǔn)需要照顧到所有網(wǎng)民，而不僅僅是發(fā)達(dá)城市里拿著最新旗艦機(jī)的用戶。
設(shè)備與網(wǎng)絡(luò)斷層： 在全球范圍內(nèi)（甚至在發(fā)達(dá)國家的偏遠(yuǎn)地區(qū)），仍有海量用戶使用的是千元機(jī)（低端處理器）和清退 3G 后勉強(qiáng)支撐的低速 4G 網(wǎng)絡(luò)。
公平性： 如果 PSI 默認(rèn)用 5G 和 iPhone 15 Pro 來測試，那么開發(fā)者就會(huì)忽視網(wǎng)頁代碼冗余、圖片過大的問題。這會(huì)導(dǎo)致低配設(shè)備和差網(wǎng)絡(luò)下的用戶完全打不開網(wǎng)頁，造成嚴(yán)重的“數(shù)字鴻溝”。
3. 放大瓶頸，逼出網(wǎng)頁的“技術(shù)硬傷”
在極高的網(wǎng)絡(luò)帶寬和桌面端超強(qiáng)的 CPU 性能下，很多網(wǎng)頁底層的性能問題會(huì)被“掩蓋”過去。
木桶效應(yīng)： 當(dāng)把網(wǎng)絡(luò)限制在低速 4G，把 CPU 性能削弱到中端機(jī)水平時(shí)，網(wǎng)頁的劣勢就會(huì)被成倍放大。例如：未壓縮的重度 JavaScript 腳本、幾兆大小的未優(yōu)化圖片、阻塞渲染的第三方插件等。
倒逼優(yōu)化： 這種“嚴(yán)苛”的測試環(huán)境能讓開發(fā)者清晰地看到：到底是什么資源在網(wǎng)絡(luò)差的時(shí)候成為了卡死網(wǎng)頁的“罪魁禍?zhǔn)住保ɡ鐚?dǎo)致 LCP 或者是 INP 指標(biāo)飆紅），從而精準(zhǔn)優(yōu)化。
核心誤區(qū)澄清：PSI 分?jǐn)?shù) $\neq$ 真實(shí)用戶體驗(yàn)
很多站長因?yàn)橐苿?dòng)端得分低而焦慮，這里需要分清 PageSpeed Insights 中的兩種數(shù)據(jù)：
實(shí)驗(yàn)室數(shù)據(jù)（Lab Data）： 也就是你點(diǎn)擊“分析”后當(dāng)場跑出來的分?jǐn)?shù)。這個(gè)分?jǐn)?shù)正是基于上述低速 4G 和慢 CPU 模擬出來的。它是一個(gè)固定的“壓力測試”，用于指導(dǎo)你改代碼。
實(shí)際現(xiàn)場數(shù)據(jù)（Field Data / CrUX）： 在分?jǐn)?shù)牌的上方，通常會(huì)顯示“了解真實(shí)用戶的體驗(yàn)”。這是谷歌收集的過去 28 天內(nèi)，真正訪問你網(wǎng)站的真人用戶的真實(shí)數(shù)據(jù)（Chrome 瀏覽器用戶體驗(yàn)報(bào)告）。
?? 核心結(jié)論： > 如果你的網(wǎng)站核心用戶全在大城市，他們普遍用著 5G 和高端機(jī)，那么你的現(xiàn)場數(shù)據(jù)（實(shí)際體驗(yàn)）可能全是綠色（優(yōu)秀）；但由于谷歌的“實(shí)驗(yàn)室模擬”非常嚴(yán)格，你的實(shí)驗(yàn)室分?jǐn)?shù)可能只有 60 分。
優(yōu)化時(shí)，優(yōu)先保證真實(shí)用戶現(xiàn)場數(shù)據(jù)（Core Web Vitals）達(dá)標(biāo)。至于那個(gè)模擬低速 4G 的實(shí)驗(yàn)室分?jǐn)?shù)，盡力而為即可，無需為了追求 100 分而砍掉網(wǎng)站的核心功能。
有關(guān)我們服務(wù)的更多信息，請(qǐng)聯(lián)系項(xiàng)目經(jīng)理
15899750475 楊先生
