技術部落格怎麼留住讀者？版面、選單與頁面的設計筆記
技術筆記站的留存率不靠更多動畫，而靠讓讀者找到下一篇有用的文章。這篇整理選單、首頁、文章卡、文章頁與分類頁的常見做法與取捨。
我如何用 PageSpeed Insights 優化 11ty 網站：為什麼比 WordPress 更容易直接修
分享我如何依照 PageSpeed Insights 的診斷，逐項改善 11ty 網站的圖片、LCP、CLS、第三方腳本與模板，並附上可直接複製的 AI 提示詞與審核清單。
Pagefind 教學：如何為 Eleventy 靜態網站加入純前端搜尋
用 Pagefind 為 Eleventy 靜態網站加入站內搜尋：從建立索引、整合搜尋元件，到繁體中文搜尋與部署驗收，一次完成設定。
11ty 與 Hostinger 快取怎麼設定？從 .htaccess 到更新驗收
用 11ty 建站後，如何在 Hostinger 設定 HTML、CSS、JavaScript、圖片與 Pagefind 快取？本文用 .htaccess、hPanel 和 curl 帶你完成設定與排錯。
字型子集化：2026 中文網站如何減少字型載入、改善首屏速度
繁中網站不一定要載入 10MB 以上的完整字型。本文比較系統字體、自架子集化與 Google Fonts CDN，示範用 cn-font-split 或 subset-font 產生 WOFF2，並說明 font-display、缺字 fallback 與維護取捨。
LCP 優化實戰：首屏別 lazy-load，用 fetchpriority 把關鍵資源拉上來
靜態站 LCP 優化實戰：找出真正的 LCP 元素、避免主視覺圖被 lazy-load，並用 fetchpriority 與 preload 提升關鍵資源優先級，同時排除 render-blocking 造成的延遲。
GTM 延遲載入：用 requestIdleCallback 降低 PSI 的 TBT
Google Tag Manager 會和首屏資源搶頻寬，也可能增加 TBT 與 INP。本文用 requestIdleCallback、互動觸發與 timeout，示範如何延遲載入 GTM，並驗證效能與轉換資料的取捨。
圖片最佳化與 CLS 解決方案：用 width、height 預防網頁版面跳動
靜態網站圖片最佳化實戰：用 width、height 或 aspect-ratio 預留版面，降低 CLS 版面跳動；同時符合顯示寬、壓縮檔案大小，並介紹如何用 Eleventy Image 自動產生多種尺寸。
PageSpeed Insights 與 Core Web Vitals 2026 完全指南
解讀 PSI 實地數據與 Lighthouse 差異、LCP/INP/CLS 門檻、WordPress 優化 Checklist，取代已過時的 FID 指標
WordPress vs Eleventy：我為什麼把部落格遷到 11ty
一人維護的技術部落格，為什麼從 WordPress 搬到 11ty？分享我實際踩過的維護、效能、安全痛點，以及遷完之後真正變簡單與變麻煩的地方。
查看 所有分類。
