外观
建站：域名、服务器、页面框架与速度
来源：原书第 4–6 章 + web.dev / Google Core Web Vitals、Cloudflare 官网、WordPress.org、W3Techs 等权威来源 + 项目实践（key-node-action-plan.md 节点 5「最小前端」、境外独立站实战手册 §5）
本栏目回答四件事：建站的地基怎么搭（域名/服务器/WordPress 各管什么）、五类页面各自的任务、B2B 前端的硬标准、速度怎么测怎么优化。书中的操作截图是 2022 年口径，持久原理保留、按钮位置以工具现行界面为准。
1. 一张表看懂地基：谁负责什么
建站前先把六个角色的边界搞清楚，80% 的新手混乱来自把它们混为一谈（原书的「造房子」比喻改写）：
| 角色 | 相当于 | 负责什么 | 典型选择 | 出错信号 |
|---|---|---|---|---|
| 域名 | 门牌号 | 让人找到你；邮箱后缀、品牌资产 | NameSilo / GoDaddy / Cloudflare Registrar | 忘记续费被抢注；买到有「黑历史」的域名 |
| DNS 解析 | 门牌号↔地基的对应关系 | 把域名指向服务器 IP | 域名商后台或 Cloudflare DNS | 解析未生效就催「网站打不开」 |
| 服务器（主机） | 地基 | 存网站文件、跑程序、响应请求 | SiteGround / Cloudways / Hostinger 等 | 贪便宜买超售主机，TTFB 拖垮全站 |
| WordPress | 施工队 + 物业 | 内容管理系统（CMS），管页面/文章/媒体/用户 | 主机套餐常自带安装 | 版本/插件乱升级导致不兼容 |
| 主题（Theme） | 硬装风格 | 前端样式骨架、自适应能力 | Astra、Hello Elementor | 主题臃肿拖慢速度；随便换主题配置失效 |
| 插件（Plugin） | 功能家电 | 编辑器、缓存、SEO 等扩展 | Elementor、WP-Rocket、Yoast SEO | 插件堆太多，速度和安全双输 |
三套账号必须本地妥善保存：域名商账号、主机商账号、WordPress 后台账号（原书）。丢任何一套都可能丢站。
2. 域名：7 条选择规则 + 买前核验
2.1 选择规则（原书）
- 以
.com为主。只做单一国家市场时可用国别后缀（.uk/.fr/.de），它在本地搜索的地理排名因素里有优势。 - 域名里可带关键词（品牌名 + 产品词，如 benbike.com），但促进作用极为有限，不要为塞词牺牲可读性。
- 核心部分 ≤ 10 个字符（不含 www 和后缀），短域名在排名中整体表现更好。
- 易拼写、易发音、无歧义。公司名拼音缩写（如 tjhh）外国客户根本猜不出，不要用。
- 保持品牌独特性。不要注册竞争对手的「以假乱真」变体域名（examples.com 模仿 example.com），原书记录的反面案例最终不了了之（原书）。
- 不要迷信老域名。没被惩罚过的老域名和它的存量外链有一点红利，但效果有限；同等预算投谷歌广告效果更好（原书）。
- 买前必验「黑历史」（原书）：
- archive.org 看该域名历史快照，做过什么内容；
- Whois 工具（原书推荐 DomainIQ）查注册历史、是否被标记为成人/商标风险域名；
- Ahrefs / Semrush 查外链——一堆垃圾外链的老域名是「缓慢发作的毒药」；
- blacklistalert.org 查黑名单记录。
判断红线：以上任何一项查出灰产/惩罚记录，换域名，不要心存侥幸。
2.2 购买要点（原书）
- 原书以 NameSilo 演示：即买即用、支持支付宝和中文客服，免国内备案流程；GoDaddy 等亦可。
- 经济条件允许就一次买多年，避免到期忘续费被抢注（到期前约一个月服务商会反复邮件提醒）。
- 付款后注意保存账号密码（见第 1 节三套账号）。
3. 服务器：类型选择与机房位置
3.1 四种类型（原书，比喻改写）
| 类型 | 比喻 | 适合谁 |
|---|---|---|
| 虚拟主机（共享） | 拎包入住的单身公寓，水电走大楼主管道 | 新手、小站，不超售就够用 |
| VPS | 毛坯别墅，水电自装 | 有运维能力者，可配宝塔面板 |
| 独立主机 | 自己买地盖房 | 大流量站 |
| 云虚拟主机 | 中介统一配置的公寓，不合适就换套间 | 要弹性扩展的站 |
3.2 两条硬规则
- 机房跟着客户走：主要目标客户在哪里就选就近机房，地理越近打开越快（原书）。做欧盟小 B 就选欧洲机房。
- 不要贪便宜：服务器性能直接决定网站性能特别是移动端表现，谷歌对移动端收录和排名的权重持续提高，移动端不行「不一定能够被收录」（原书）。原书以 SiteGround 演示（选 WordPress Hosting 中间套餐、VISA 卡付款、选机房），同类可选 Cloudways、Hostinger、Kinsta 等——2026 年购买前以各家现行价格与实测 TTFB 为准，不要照抄 2022 年报价。
4. 打通：域名解析（原书）
做什么：把域名指向服务器 IP，让访客输入域名能找到你的主机。
怎么做（A 记录法）：
- 主机后台找到服务器 IP（SiteGround：WEBSITES → SITE TOOLS → DASHBOARD）。
- 域名商后台删旧 A 记录，新建两条：
空主机名 → IP、www → IP，TTL 填 3600。 - TTL 是解析记录在各地 DNS 服务器的缓存存活时间；解析全球生效需要时间，用 whatsmydns.com 查各节点 A 记录，与服务器 IP 一致即完成。
做到什么算通过：whatsmydns 多数节点返回你的服务器 IP，浏览器能打开后台。本节点解析成功、其他区域未完成时不影响你先进后台操作。
如果后续接入 Cloudflare（见第 8.3 节），解析方式改为把 NS 记录整体托管给 Cloudflare，A 记录改在 Cloudflare 后台管理（原书）。
5. 主题与插件：轻量化是硬标准
5.1 主题选择 7 条（原书）
按重要性排序：轻量化 > 利于 SEO > 高安装量与好评率，冲突时先看这三条。
- 先按建站目的倒推需求清单，再选主题类型；
- 不要选「臃肿」主题（如 Avada 这类什么都想包的主题）——Astra 是轻量标杆，更极致可选 Hello Elementor；
- 必须自适应（responsive），PC 一行的内容在手机端自动换行；
- 不要选花式特殊字体的主题——「字体越怪，速度越慢」，谷歌字体还要做预加载或禁用；
- 安装量和好评率是重要参考（原书记录 2021 年 Astra 5 星好评占 97.5%，日安装约 6500–7000）；
- 用 W3C 标记验证 / Theme Check 插件检查代码质量；
- 做外贸站要确认兼容 WPML / Polylang 这类自备翻译文档的多语言插件（Gtranslate 式机翻不产生可被收录的独立页面，SEO 价值低）。
2026 年更新：Astra 仍是 WordPress 官方目录头部主题——100 万+活跃安装、评分 4.9/5（6000+ 五星评价）；Elementor 官方称驱动 2200 万+网站，已进入 v4「Atomic Editor」时代；W3Techs 2026 年 8 月数据显示 WordPress 占全网网站 40.7%，其中 31.5% 使用 Elementor。结论：原书「Astra + Elementor」组合在 2026 年依然是主流安全选择。注意 WordPress 官方当前推荐 PHP 8.3+、MySQL 8.0 / MariaDB 10.11+，选主机时核对环境版本。
5.2 插件纪律（原书）
- 一般外贸站 4 个插件起步够用：Elementor + Elementor Pro（页面编辑）、WP-Rocket（速度）、Yoast SEO。
- 能代码解决的小需求不要加插件；每多一个插件都拖速度、增攻击面。
- 主题/插件/WP 核心升级前先备份，版本不是越高越好，不兼容会直接破站（原书）。
- 建站完成后不要随意更换主题，配置会失效（原书）。
- 安装主题认准正版——原书提醒有「Astral」这类李鬼主题（原书）。
6. 五类页面：任务、要点与成功信号
主体框架 = 首页 + 公司介绍 + 产品 + 联系 + 文章聚合（原书）。每张页面只背一个任务；「成功信号」列结合原书意图与项目实践。
| 页面 | 任务 | 关键要点（原书） | 成功信号 |
|---|---|---|---|
| 首页 | 让目标客户 3 秒内辨认「这是为我提供什么的」 | 内容做减法；压缩/webp 图片；醒目 CTA；内容按 F 形热区排布；色调克制；首页是内容指路牌；放社会证明（客户评价/检测报告/专利奖项）；移动端单独调优（原书） | 继续浏览产品/案例页 |
| About Us | 提供企业可信度 | 从「我们能做什么」改成「客户能得到什么」；地址真实经得起谷歌地图核验；放国际认可的奖项而非国内专利；用时间轴和动态数字展示发展；Team Show 提升信任（服装背景统一、用工作场景照）；只说清三件事：我是谁、我能给你什么、凭什么信我（原书） | 查看后进入询盘环节 |
| 产品页 | 支持采购决策 | 分类聚合页用单一维度分类 + 分类导航（兼做内链，原书）；详情页按 AIDA 组织（注意→兴趣→欲望→行动）；描述讲价值点不讲行话（「SUS 316」→「医用级更安全」式翻译）；文字简明（76.6% 首访者是浏览不是精读）；视频表达力超图文；用客户评价 + 售后承诺打消疑虑（原书） | 下载目录 / 申请样品 / 发询价 |
| Contact Us | 降低询盘阻力 | 三大版块：公司联系信息 + 表单 + 谷歌地图，可加提交后转出内容防跳出；表单待填项越少越好，信息量大就用多步骤表单（9 项拆成 3×3）；品牌名与公司注册名的关系要写清——原书记录过 PI 上公司名与网站品牌名不一致、险些丢单的案例（原书） | 合格表单提交 |
| 文章聚合页（News/Blog） | 持续回答采购问题 | 大部分关键词排名机会来自 Post 而非 Page（原书）；按客户搜索意图分类；摘要精练可直接复用为 Meta Description；卡片式展示（标题 ≤10 个词）；移动端单独检查字号（原书） | 订阅 / 多页浏览 / 长尾流量进站 |
7. B2B 前端硬标准（项目实践）
以下为本项目业务文档口径（key-node-action-plan.md 节点 5 + 境外独立站实战手册 §5），面向欧盟小 B 混批供货场景，优先级高于任何视觉设计偏好。
页面必须包含：服务对象与国家、最低订单金额/MOQ、预计交期、10–20 个 SKU 的实物图/箱规/材料/可用合规文件、混批询价与样品申请入口、付款节点/贸易条款/税费/进口责任、公司联系信息、隐私政策与营销退订。
3 分钟测试：目标客户 3 分钟内能理解「卖什么、最低买多少、谁负责交付、如何联系」——做不到就删功能，退回单页目录。这是节点 5 的放行指标，未通过不进入线索池建设。
证据前置：B2B 采购者最担心的是风险不是价格。MOQ、混批规则、交期、样品政策、合规文件、可核验的公司/QC/批次证据，要放在采购者做评估的位置（产品页、首页信任区），不要藏进 FAQ。「深度浏览但不询盘」的第一嫌疑就是证据不足。
不要做：复杂购物车、会员体系、自动报价。网站只是目录和询盘入口，前 30 单靠 Shopify/表格 CRM/邮件工具即可跑通。
8. 速度优化：先测再改
8.1 指标口径：2026 年看 CWV 三项（重要更新）
原书讲的是 PageSpeed Insights 的 6 项实验室指标（FCP / SI / LCP / TTI / TBT / CLS）。2026 年口径已变：
- Google 排名用的是 Core Web Vitals 实测（field）数据，三项，取真实访客第 75 百分位：
| 指标 | 测什么 | Good | Poor |
|---|---|---|---|
| LCP（最大内容绘制） | 加载 | ≤ 2.5s | > 4.0s |
| INP（交互到下次绘制） | 响应 | ≤ 200ms | > 500ms |
| CLS（累积布局偏移） | 视觉稳定 | ≤ 0.1 | > 0.25 |
- INP 已于 2024 年 3 月 12 日正式取代 FID，FID 同年 9 月起被 Chrome 弃用；INP 统计整次访问中几乎所有交互的最差延迟，不再只看首次输入（NitroPack 整理，Vercel KB，官方定义见 web.dev）。
- 实验室总分（Lighthouse/PSI 那个 0–100 分）现行由 TBT 30% + LCP 25% + CLS 25% + FCP 10% + SI 10% 加权构成，TTI 已退出评分；TBT 是 INP 的实验室近似（NitroPack，Vercel KB）。
- 实验室满分 ≠ 通过 CWV：Lighthouse 标准审计不与页面交互，测不出 INP；Google 判定只看 CrUX 真实用户数据（28 天滚动窗口）。用实验室工具诊断问题，用 PSI 的 field 面板 / GSC 的 Core Web Vitals 报告看真实结果（Vercel KB）。
- 别为排名焦虑：CWV 是页面体验信号之一，内容相关性与质量权重更高；它更像「门槛 + 平局决胜」（Vercel KB 引 Google 表述）。
8.2 优化动作清单（原书的 8 项，按投入产出排序）
- 更好的服务器——不超售的共享主机够小站用，SiteGround 级的主机加载一般可控制在 1.5 秒内；
- 上 CDN——Cloudflare 免费层起步（见 8.3）；
- 优化图片——优先生成 webp（同等观感体积更小，理论上比 JPG 再省 30–35%，原书），上传前先压缩（TinyPNG），不要用原图直出和 banner 轮播大图（原书）；2026 年起可进一步评估 AVIF（压缩率更高，浏览器覆盖略低于 WebP，Vercel KB）；
- 减少插件——见 5.2 纪律；
- 减少 CSS/JS 文件数量——合并压缩减少 HTTP 请求；改完第一件事是逐页检查前端有没有坏，出错就回退该项（原书）；
- 页面缓存——WP-Rocket（付费）/ WP Super Cache（免费）/ SG Optimizer（SiteGround 配套）三选一，开启页面缓存 + 预加载 + 浏览器缓存；登录用户不缓存；数据库定期清理修订版本/垃圾评论（原书）；
- Gzip/Brotli 压缩——Cloudflare 免费层直接带 Brotli（原书）；
- 数据库优化——删冗余 + PhpMyAdmin 手动优化表；动手前先备份（原书）。
做到什么算通过：PSI field 面板或 GSC 报告里 LCP/INP/CLS 三项全 Good（75 百分位）；实验室侧 Lighthouse 性能分 ≥ 90 作为过程参考而非目标。什么信号要停：开了压缩/合并/延迟加载后页面错位、表单或按钮失效——立即逐项回退，先保可用再保分数。
8.3 CDN：Cloudflare 免费层（2026 年核实）
做什么：把静态内容分发到全球节点，缩短访客与内容的距离；附带 DDoS 防护与 SSL（原书）。
怎么做（原书）：
- Cloudflare 注册 → 添加一级域名（domain.com，不是 www）→ 选免费套餐；
- 按指引把域名商的 NS 记录改成 Cloudflare 给的两条；用「检查名称服务器」或 ping 验证生效；
- SSL/TLS 加密模式选 Full（原书；站点已有有效证书时可选 Full (Strict)，原书未提，按现行界面选）；
- Speed 里开 Auto Minify（JS/CSS/HTML，若插件层已做可跳过）、Brotli、Rocket Loader；
- 缓存级别选标准；改动频繁就把浏览器缓存 TTL 调短；开 Always Online 后服务器宕机时访客仍能看到快照页。
2026 年核实：Cloudflare 官网价格页确认免费层包含：CDN、Universal SSL 证书、不限量 DDoS 防护、免费版 WAF 托管规则集；Pro $20/月起。WordPress 专项加速 APO 为付费附加项（价格以官网为准）。注意：接入 Cloudflare 后 DNS 归 Cloudflare 管，企业邮箱的 MX 记录、各类验证 TXT 记录要在 Cloudflare 后台重新配置，否则邮箱会断（原书提到 MX 记录填写）。
9. 测速工具用法与判读（原书）
| 工具 | 干什么 | 怎么用 | 判读要点 |
|---|---|---|---|
| PageSpeed Insights | Google 官方，field + lab 一体 | 输入 URL → 分析 | 先看 field 面板（CrUX 真实数据）的 CWV 三项；lab 面板用于诊断；0–100 分只是参考 |
| GTmetrix | 基于 Lighthouse 的二方视角 | 注册免费账号，配 API 可在 WP 后台跑 | 与 PSI 结果差异来自测试方法/位置不同，多工具交叉看（原书） |
| WebPageTest | 专业诊断 | Simple Testing 选网络环境（Slow 3G ~ 4G）；Advanced 选全球节点 | 看 First Byte / Start Render / LCP / Fully Loaded；全球节点覆盖客户所在地（原书） |
| GSC Core Web Vitals 报告 | Google 判定口径 | 站长验证后分移动/桌面查看 | 这是排名实际使用的数据；新站无 CrUX 数据时先用 PSI lab 顶着 |
判读纪律（原书 + 2026 更新）：实验室数据是「估值」不是真实速度；不同工具结果不一致是正常的；改完优化后 CrUX 数据要 ~28 天滚动更新才反映（Vercel KB），别今天改明天看 GSC。
10. 上线前验收清单
- [ ] 域名通过黑历史 4 项核验（archive.org / Whois / 外链 / 黑名单）
- [ ] 三套账号（域名商/主机/WP 后台）已本地备份
- [ ] A 记录（或 Cloudflare NS）解析生效，whatsmydns 多节点一致
- [ ] 主题为轻量自适应（Astra/Hello Elementor），插件 ≤ 必要项
- [ ] 五类页面齐备，各背一个任务；品牌名与公司注册名关系写清
- [ ] 3 分钟测试通过（卖什么/最低买多少/谁负责/如何联系）——项目实践放行指标
- [ ] MOQ/交期/样品/合规证据前置到产品页与首页信任区
- [ ] 隐私政策与营销退订入口就位（面向欧盟，详见合规相关栏目）
- [ ] 移动端逐页检查（字号、间距、可点区域），GSC 移动易用性无报错
- [ ] 缓存 + CDN + 图片压缩就位；PSI lab ≥ 90，CWV 三项目标 Good
- [ ] 开压缩/合并后已逐页回归检查，前端无错位无失效
来源与边界
原书引用范围（《外贸独立站建站实操》，周杭胜，2022，北京大学出版社）：
- 第 4 章：域名 7 规则与黑历史核验、NameSilo 购买、服务器四类、SiteGround 实操、域名解析与 TTL、WP 后台功能、主题 7 条与插件纪律
- 第 5 章：首页 8 注意点、About Us 7 注意点、产品页/AIDA/分类、联系页表单与品牌名案例、文章聚合页；大量 Elementor 逐按钮实操未逐一引用
- 第 6 章：8 项优化、PSI 六指标、GTmetrix/WebPageTest/Fast or Slow、WP-Rocket/WP Super Cache/SG Optimizer 配置、CDN 原理、Cloudflare 设置、NitroPack
外部来源（2026-08-31 核查）：
- CWV 定义与阈值：https://web.dev/articles/vitals 、https://web.dev/articles/inp （本环境无法直连 Google 域名，未能直接抓取，数值经下列多来源交叉确认）
- Vercel KB: Optimizing Core Web Vitals（已抓取：阈值、75 百分位、field/lab 区分、TBT 为 INP 实验室近似、AVIF 建议、CrUX 28 天窗口）
- NitroPack: Core Web Vitals（已抓取：INP 于 2024-03-12 取代 FID、FID 2024-09-09 弃用、三项全 Good 于 75 百分位才算通过）
- NitroPack: Lighthouse 本地测试（搜索快照：现行评分 TBT30/LCP25/CLS25/FCP10/SI10）
- Cloudflare Plans（已抓取：免费层含 CDN/SSL/DDoS/WAF 托管规则；Pro $20/月）
- WordPress.org Download（已抓取：PHP 8.3+/MySQL 8.0/MariaDB 10.11+）
- Astra 主题页（已抓取：100 万+活跃安装，4.9/5）
- Elementor 插件页（已抓取：2200 万+网站，v4 Atomic Editor）
- W3Techs WordPress 统计（已抓取：WP 占全网 40.7%、Elementor 覆盖 31.5% WP 站点，2026-08-31）
项目实践来源：key-node-action-plan.md 节点 5（3 分钟测试、放行指标）；境外独立站实战手册 §5（前端硬标准、证据前置、五类页面成功信号）。
本文不能支持到：
- 各主机/工具 2026 年具体价格与按钮位置——购买前以官网现行界面为准；原书截图（2022）仅演示流程。
- web.dev 两个官方页面本环境无法直连，CWV 阈值与 INP 更替时间以 Vercel/NitroPack 等多来源交叉确认，正式引用前建议人工再开一次官方页面核对。
- 不做具体主机商的 2026 年性能实测对比；「SiteGround 级 1.5 秒内」是原书 2022 年表述，仅供参考量级。
- GDPR/Cookie 合规的落地配置只在清单中指向，细节见合规栏目，本文不展开。