LED 显示屏外贸官网 · Nuxt SSG
WordPress → Nuxt 架构迁移 · SSG · PageSpeed 50 → 90+ · SEO 满分
这是我自己公司的官方网站——LED 显示屏 B2B 外贸独立站，面向海外客户、以获取 Google 自然流量与询盘为目标。我主导了官网从 WordPress 到 Nuxt 的架构迁移，采用 SSG 静态渲染，把 PageSpeed 性能评分从原来的 50 分大幅拉升并稳定在 90+，Lighthouse SEO 100 分；规划并实现了 100+ 个页面，把导航、Footer、产品模块、表单等封装为高度可复用组件，代码冗余降低约 40%。核心的「LED 交互式配置工具」由我独立研发、自研算法支撑客户在线选型；同时用 Nuxt Image 实现高达 90% 的图片体积压缩，用 Nuxt Content 管理产品与文章、借助 Nuxt SEO 生态配置站点地图、结构化数据与 Robots；并针对 Nuxt Image 构建痛点编写增量缓存脚本，打包时间缩减 90%。
项目背景
这不是客户项目，而是我自己公司的官方网站——一家 LED 显示屏企业的 B2B 外贸独立站，面向海外客户浏览，核心目标是获取 Google 自然搜索流量与询盘。旧站基于 WordPress 搭建，页面臃肿、海外访问加载缓慢，PageSpeed 仅 50 分左右，Google 排名与转化双双受限；同时整站规划体量超过 100 个页面，产品与博客需要持续运营，业务上还希望让海外客户自助完成 LED 屏选型。基于这些诉求，我主导官网从 WordPress 迁移到 Nuxt + SSG 架构，以极致性能、组件化复用、内容可运营与交互式选型工具为核心重建整站，并全程覆盖手机 / 平板 / 桌面响应式适配。
网站亮点
WordPress → Nuxt 架构迁移
主导官网从 WordPress 迁移至 Nuxt 并采用 SSG 静态渲染，页面构建期预生成、CDN 直接分发；PageSpeed 性能评分从原来的 50 分大幅拉升并稳定在 90+，Lighthouse SEO 100 分
100+ 页面 · 组件化封装
规划并实现 100+ 个页面，将导航、Footer、产品模块、表单组件等沉淀为高度可复用组件，代码冗余降低约 40%，后续新增页面与迭代明显更快
自研 LED 交互式配置工具
官网核心模块，由我独立研发：自主编写算法处理尺寸、分辨率、箱体配比等参数，客户在线即可完成选型计算与方案可视化预览，把流量沉淀为询盘
Nuxt Image 图片优化
构建期自动压缩图片并按浏览器智能输出 WebP / AVIF，图片体积压缩率高达 90%，海外弱网环境下也能快速加载
内容管理 + SEO 生态
Nuxt Content 以 Markdown 管理产品与文章、更新内容零代码；借助 Nuxt SEO 生态配置站点地图、结构化数据与 Robots，持续获取 Google 自然流量
增量缓存构建脚本
针对 Nuxt Image 每次打包重复处理全量图片的痛点，编写增量缓存脚本，仅重新处理变更图片，打包时间缩减 90%
核心页面实拍
100+ 页面体系中的核心页面实机录屏：首页、产品页、博客页，附各页面 Lighthouse 实测评分截图
首页
首屏直述核心业务与产品品类，配合快速加载的视觉素材，让海外客户第一时间建立信任，并自然引导至产品目录与询盘入口。
产品页
完整的 LED 显示屏产品目录由 Nuxt Content 驱动：参数规格、应用场景、产品图册结构化呈现，方便海外客户筛选对比、快速选型。
博客页
行业干货与应用案例持续更新，覆盖 LED 显示屏选型、安装、维护等长尾关键词，是网站获取 Google 自然流量的核心内容引擎。
LED 交互式配置工具
这是官网的核心引流模块，由我独立研发：输入目标尺寸或分辨率，自主编写的算法实时计算所需箱体数量、物理尺寸、分辨率与功耗，并可视化预览屏体排布效果。海外客户无需专业知识即可秒级完成在线选型与方案预估，它既是实用工具，也是把 Google 流量沉淀为询盘的关键钩子。
自研算法 · 实时计算
箱体数量、物理尺寸、分辨率与功耗由自主编写的算法即时联动输出
可视化排布预览
屏体拼装效果直观呈现，配置方案所见即所得
在线选型零门槛
海外客户自助完成配置预估，显著降低双方沟通成本