# 网站已完成改版

date: 2022-07-22

> For the complete documentation index, see [llms.txt](https://www.fork.co.jp/zh-cn/llms.txt)



株式会社フォーク 官方网站已进行全面改版。

在采用简约设计的同时，我们在前端和后端引入了先进技术，旨在打造一个易于查看且使用体验舒适的网站。

改版要点如下：

### 提升加载速度

<lazy-imgix path="img/information/146/lighthouse-score.png" width="340" height="75"></lazy-imgix>

近年来，由于网站性能直接影响转化率，客户对提升网站性能或在改版时获得 <a href="https://developers.google.com/speed/docs/insights/v5/about" target="_blank">Lighthouse</a> 高分的要求日益增加。在本次改版中，我们通过设计与实现，确保 Lighthouse 的性能评分达到 95 以上(※1)。

<small>※1 以桌面端(1280x720)为基准测量。评分会根据用户环境而变化。</small>

### 简化更新工作

<lazy-imgix path="img/information/146/data-portal.png" width="211" height="41"></lazy-imgix>

虽然一般的 CMS 即使没有专业知识也可以进行网站更新，但我们也常听到客户反映定制化困难或管理后台运行缓慢等问题。
在本次改版中，我们实现了通过 Google 表格轻松进行更新的机制，并结合 <a href="https://marketingplatform.google.com/intl/ja/about/data-studio/" target="_blank">Looker Studio</a> 和表单功能，实现了性能与安全性的兼得。

### 关于技术实践

#### PWA

<lazy-imgix path="img/information/146/pwa-logo.png" width="180" height="68"></lazy-imgix>

本网站基于 <a href="https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps" target="_blank">PWA (Progressive Web Apps)</a> 构建，可以像移动应用一样进行安装，并且在离线状态下也能使用网站。

#### Firebase 平台

<lazy-imgix path="img/information/146/firebase-logo-built_white.svg" width="300" height="134"></lazy-imgix>

我们利用 Google 的移动端及 Web 应用平台 <a href="https://firebase.google.com/" target="_blank">Firebase</a>，构建了与 GitHub 联动的生产、测试及开发 CI (持续集成) 环境。主要利用 Hosting、Functions、Cloud Run、Firestore (数据库)、Storage、RemoteConfig (A/B 测试) 等技术，实现了在短时间内低成本构建高负载应对能力的架构。

#### 通过 Google 表格与 Markdown 进行数据管理

<lazy-imgix path="img/information/146/sheet-love-markdown.png" width="340" height="74"></lazy-imgix>

我们没有设置专门的内容管理后台，而是通过在 Google 表格中以 Markdown 格式输入文本，并在浏览器中即时转换为 HTML 进行展示。这种转换使用了 WebAssembly (<a href="https://github.com/rsms/markdown-wasm">markdown-wasm</a>)，与传统的 JavaScript 执行方式相比，速度大幅提升。

#### 通过 Firestore Bundle 进行静态分发

上述内容数据存储在作为数据库的 Firestore 中，但在分发时并非每次都进行读取，而是通过预先生成静态数据文件 (bundle)，实现了加载速度的提升和安全性的增强。

#### Web Components

<lazy-imgix path="img/information/146/lit-logo.svg" width="160" height="75"></lazy-imgix>

前端采用由 Google 主导开发的 (<a href="https://lit.dev/" target="_blank">Lit</a>) 库来创建 Web Components，实现了网站的加速、代码的简化以及高度的可维护性。

#### 通过 <a href="https://google.github.io/budoux/" target="_blank">BudouX</a> 🍇 实现自动分词

由于本网站支持响应式设计，通过使用 BudouX 库，可以根据设备屏幕宽度自动进行最佳的文字换行处理。

### 关于 DX 化推进业务的通知
关于内容部分，我们展示了自去年开始开展的 <a href="/zh-cn/business#dx">DX 化推进业务</a> 的服务内容与案例，迈出了从 Web 制作公司向数字化解决方案公司的关键一步。
敬请期待全新的 株式会社フォーク。