你的部落格真的需要這麼「重」嗎？— 一個工程師的 Less is More 實踐

最近，我開始用 Hashnode 寫部落格。

第一步很自然：用他們的官方模板。裝好、部署、打開頁面 — 一切正常。文章能看、圖片能顯示、搜尋也能用。

但用了一陣子，有兩件事讓我覺得可以更好。

一是介面 — 預設的設計雖然堪用，但跟我心目中的樣子有段距離。既然前端是自己的門面，我希望能完全掌控它的長相。

二是速度。我打開瀏覽器的開發者工具（就是按 F12 會跳出來的那個面板），看了一下這個部落格頁面到底載入了什麼。結果發現：光是讓一篇文章顯示出來，瀏覽器就要下載超過 150 kB 的程式碼。

150 kB 是什麼概念？大約等於一張中等品質的照片。

但這不是照片，而是「程式碼」— 用來處理頁面互動、切換頁面、管理狀態的幕後程式。問題是，一篇部落格文章需要這些嗎？讀者只是想看一篇文章而已。

這讓我開始思考一個問題：我們是不是把部落格做得太「重」了？

一封信不需要搬家公司

想像你要寄一封信給朋友。

最直覺的做法是：寫好信、貼郵票、丟進郵筒。

但現代網站的做法常常像是：先租一台卡車、請一組搬家工人、打包整套家具，然後「順便」把那封信也放上車。

信送到了嗎？送到了。但代價是什麼？你的朋友要等卡車停好、工人搬完家具，才能拿到那封信。

這就是很多部落格的現狀。為了顯示一篇文章，網站載入了一整套應用程式框架 — 包含路由系統、狀態管理、互動引擎 — 這些東西對於「看一篇文章」來說，幾乎都是多餘的。

速度慢，你可能沒感覺，但 Google 有

你可能會想：「150 kB 很多嗎？現在網路這麼快。」

沒錯，如果你用的是光纖網路配最新的 MacBook，差別確實不大。但有幾件事值得注意：

Google 在看。 搜尋引擎會用網站速度作為排名因素。載入越快的頁面，排名越容易往前。對於一個想被更多人看到的部落格來說，這不是小事。

手機使用者在等。 全球超過一半的網頁瀏覽來自手機。在 4G 甚至 3G 環境下，多 100 kB 的程式碼可能意味著多等 1-2 秒。而研究顯示，頁面載入每多 1 秒，就會流失大約 10% 的訪客。

第一印象只有一次。 如果讀者第一次造訪你的部落格就覺得「怎麼這麼慢」，他們可能不會再回來。

把「寫作」和「門面」分開

在解決這個問題之前，需要理解一個概念：現代的部落格其實可以分成兩個部分。

第一部分：內容管理。 也就是你在哪裡寫文章、管理草稿、設定標籤。這是「後台」。

第二部分：前端呈現。 也就是讀者打開你的部落格看到的頁面。這是「門面」。

傳統做法是兩者綁在一起 — 你用 WordPress，它既管你的文章，也決定你的頁面長什麼樣子。

但有一種更靈活的做法：把後台和門面分開。 後台繼續用你喜歡的工具寫文章（像是 Hashnode 的編輯器），但門面由你自己決定怎麼呈現。

這個概念叫做 Headless CMS — 直譯是「無頭的內容管理系統」，聽起來有點嚇人，但意思其實很好理解：

後台專心管理內容，前端自由選擇呈現方式。就像作家只管寫稿，排版交給出版社。

好處是什麼？你可以選擇一個更輕、更快的方式來呈現你的部落格，而不用被後台的技術架構拖累。

我做了什麼

理解了問題之後，我決定動手。

我保留了 Hashnode 作為後台 — 它的編輯器好用，文章管理方便，API 也設計得不錯。但門面的部分，我用一個叫做 Astro 的工具從頭打造。

Astro 的核心哲學很對我的胃口：預設不載入任何程式碼。 它會把每一頁都事先「烤」成靜態的 HTML 檔案，就像把文章印成紙本一樣。讀者打開頁面時，拿到的就是成品，不需要在瀏覽器裡再「組裝」一次。

只有真正需要互動的部分（比如搜尋功能、深色模式切換），才會載入一小段程式碼。其他的？純 HTML，零負擔。

這個做法的結果：

~15 kB。 原本 150 kB 的程式碼，砍掉了 90%。搜尋、深色模式、留言、電子報訂閱、RSS、甚至頁面切換動畫 — 全部都在。

少的不是功能，是不必要的負擔。

這跟你有什麼關係

如果你正在經營或考慮建立一個部落格、公司官網、或任何以內容為主的網站，有幾個值得思考的問題：

你的網站有多「重」？ 打開手機，用 4G 連線造訪你的網站。如果要等超過 2 秒才看到內容，可能就有優化空間。

你需要的是內容，還是應用程式？ 部落格、作品集、公司介紹 — 這些都是以「展示內容」為主的網站。它們不需要用做「應用程式」的技術來建造，就像寄一封信不需要租一台卡車。

速度就是能見度。 網站每快一點，Google 就多給你一點機會。在資訊爆炸的時代，被看見是最大的挑戰。

如果你好奇技術細節

這篇文章刻意避開了技術名詞和程式碼，因為重要的是觀念，不是實作。

但如果你是工程師，或者單純好奇我具體怎麼做到的，我寫了一篇詳細的英文技術文章，包含架構決策、程式碼範例、效能數據，以及一鍵部署按鈕：

👉 I Rewrote Hashnode's Next.js Starter Kit in Astro — From 150 kB to ~15 kB of Client JS

整個專案也已經開源，任何人都可以免費使用：

👉 GitHub: astro-starter-hashnode

---

技術只是手段。真正重要的是：你想讓讀者等卡車，還是直接收到信？