Day 5｜圖片太大拖慢網站？這樣做 圖片優化＋首頁提速一次搞定！

Ghost 架站實測：安裝 Google Search Console 後發現首頁封面圖造成 LCP 載入過慢，透過 WebP 圖片格式與一行程式碼，成功優化 PageSpeed 分數！

🎯 我的 PageSpeed 分數卡實測

我在網站上成功安裝 Google Search Console 後，首次查看 PageSpeed 分析結果，發現：

📅 測試時間：2025 年 4 月 14 日
🔗 查看分析報告

✅ 得分概況


🛑 發現問題：圖片過大＋封面圖 lazy 載入！

Google 提出的建議包括：

• 🟥 建議使用 next-gen 圖片格式（WebP / AVIF）
• 🟥 圖片尺寸不合適，過大造成浪費
• 🟥 最大內容繪製元素（LCP）被 lazy 載入，影響首次可見速度


✅ 我的解法：圖片壓縮＋封面圖優先載入

我做了兩件事：

1️⃣ 圖片壓縮並轉為 WebP 格式

我將所有封面圖轉為 .webp 並壓縮為 600px 寬，節省容量並避免尺寸過大：

2️⃣ 在 Ghost 後台 Code Injection 中加上這段程式碼：

<script>
  window.addEventListener('DOMContentLoaded', function () {
    const firstImage = document.querySelector('.post-card img[loading="lazy"]');
    if (firstImage) {
      firstImage.setAttribute('loading', 'eager');
      firstImage.setAttribute('fetchpriority', 'high');
    }
  });
</script>

這段程式碼會讓首頁的第一張封面圖不再 lazy 載入，並優先下載，有效改善「最大內容繪製元素」LCP 的載入速度。

🧪 優化成果

• 圖片從 1.6MB 縮至 < 100KB ✅
• LCP 圖片不再 lazy ✅
• 效能分數顯著提升 ✅
• SEO 與最佳做法維持 100 分 ✅

🧙‍♂️ 站長工具推薦

• Ghost 架站用的部署平台：Zeabur
• 支援點數支付與綁定信用卡：iCash Pay（推薦碼：UB123GH7）

讓圖片變輕，網站更快，就是這麼簡單！

💡 這篇是「小白站長日記」系列的第 5 篇，想看完整系列可以點這裡：
小白站長日記 → pinkjhs.com/tag/pink-diary