2020年伊始，以 Gatsby.js 重寫了個人網站並添加了支援 markdown 的部落格模組。 因為職業關係，習慣性地會看看網站的綜合性能表現情況，於是打開 Chrome 瀏覽器的開發者模式，點擊"Audits" 審查，跑了一遍 Chrome 自帶的 LightHouse 性能評估工具。 萬萬沒有想到，審查報告竟然一片綠，清一色的100分，背景還伴隨著歡快的煙花。

如下圖：

這個結果真的是出乎意料的驚豔。 要知道在過去數年的工作中，跑過大大小小各種網站，網站綜合表現能達到70分或以上便很難得，沒想到 Gatsby.js 的框架配置對網站前端性能（Performance）、無障礙訪問（Accessibility）、技術層面對最佳實踐（Best Practice）、搜尋引擎優化（SEO）及PWA（Progressive Web App）都做了細緻的優化。 這才能讓 build 出來的網站達到最佳效果。

從用戶體驗的角度，性能的最優化意味著更快的頁面打開時間，適應於最廣泛使用者行為狀態的視覺設計及無障礙前端技術配置，有助於觸及最大面積的搜尋引擎配置及適應於設備本地離線狀態及本地狀態的技術方法。

不得不承認，這樣的測試結果叫人不禁給 Gatsby.js 點讚。 未來估計會更積極地使用 Gatsby.js 和 React 來參與專案實踐及推薦給他人。

順便一提今天在 SmashingMagazine 上讀到的 Vital Fieldman 分享的 "2020前端性能檢查清單（Front-End Performance Checklist 2020）"，這份清單附有PDF、word等版本。 如果你想要進一步了解關於前端性能影響因素的具體細節，不妨從這份清單開始入手。

接受該測試的我的個人網站：https://www.millielin.com