株式会社フォーク 官方网站已进行全面改版。
在采用简约设计的同时,我们在前端和后端引入了先进技术,旨在打造一个易于查看且使用体验舒适的网站。
改版要点如下:
提升加载速度
近年来,由于网站性能直接影响转化率,客户对提升网站性能或在改版时获得 Lighthouse 高分的要求日益增加。在本次改版中,我们通过设计与实现,确保 Lighthouse 的性能评分达到 95 以上(※1)。
※1 以桌面端(1280x720)为基准测量。评分会根据用户环境而变化。
简化更新工作
虽然一般的 CMS 即使没有专业知识也可以进行网站更新,但我们也常听到客户反映定制化困难或管理后台运行缓慢等问题。 在本次改版中,我们实现了通过 Google 表格轻松进行更新的机制,并结合 Looker Studio 和表单功能,实现了性能与安全性的兼得。
关于技术实践
PWA
本网站基于 PWA (Progressive Web Apps) 构建,可以像移动应用一样进行安装,并且在离线状态下也能使用网站。
Firebase 平台
我们利用 Google 的移动端及 Web 应用平台 Firebase,构建了与 GitHub 联动的生产、测试及开发 CI (持续集成) 环境。主要利用 Hosting、Functions、Cloud Run、Firestore (数据库)、Storage、RemoteConfig (A/B 测试) 等技术,实现了在短时间内低成本构建高负载应对能力的架构。
通过 Google 表格与 Markdown 进行数据管理
我们没有设置专门的内容管理后台,而是通过在 Google 表格中以 Markdown 格式输入文本,并在浏览器中即时转换为 HTML 进行展示。这种转换使用了 WebAssembly (markdown-wasm),与传统的 JavaScript 执行方式相比,速度大幅提升。
通过 Firestore Bundle 进行静态分发
上述内容数据存储在作为数据库的 Firestore 中,但在分发时并非每次都进行读取,而是通过预先生成静态数据文件 (bundle),实现了加载速度的提升和安全性的增强。
Web Components
前端采用由 Google 主导开发的 (Lit) 库来创建 Web Components,实现了网站的加速、代码的简化以及高度的可维护性。
通过 BudouX 🍇 实现自动分词
由于本网站支持响应式设计,通过使用 BudouX 库,可以根据设备屏幕宽度自动进行最佳的文字换行处理。
关于 DX 化推进业务的通知
关于内容部分,我们展示了自去年开始开展的 DX 化推进业务 的服务内容与案例,迈出了从 Web 制作公司向数字化解决方案公司的关键一步。
敬请期待全新的 株式会社フォーク。