↓ 快轉到主要內容
Aiixi Bear
  1. Posts/

關於我如何給我的網站載入速度優化

·1037 個字·3 分鐘·
Website Coding
目錄

前言
#

我的網站是有Cloudflare CDN的，我覺得載入速度已經飛快了！但是前幾天，我突然心血來潮，給我的網站跑一個Lighthouse測試，結果…

第一次優化 - 將ttf字體轉換woff2提升效能
#

最顯眼的就是性能->LCP的避免耗用大量網頁資源，仔細一看，我的網站就載入一個中文ttf字體卻花了 2,687.1 KiB，相較於其他資源高很多

於是我想到可以把ttf字體轉換成woff2，因為woff2 (Web Open Font Format 2.0) 是一種專為網頁設計的高效能字型檔案格式，肯定比ttf字體效能高超級多

既然這樣馬上開始著手升級字體

  1. 安裝套件
sudo apt install woff2

2.進到字體目錄，把所有ttf字體批量轉換成woff2字體

for f in *.ttf; do
  woff2_compress "$f"
done

轉換完成，把網頁push上去看看效果，結果還不錯，有大幅提升載入速度

第二次優化 - 把圖片全部轉換成webp格式
#

上面的Lighthouse指出，我的網站圖片要採用較新的webp格式，載入效能才會比較好

那既然這樣，就來轉換吧！

1.安裝套件

sudo apt install cwebp

2.轉換

詢問了ChatGPT關於cwebp的各種參數後，它給我的回覆是有下面常用兩種

1.有損 WebP（照片，推薦）

2.無損 WebP（UI / icon）

並產生下列shell script

#!/bin/bash

# 檢查 cwebp 是否存在
if ! command -v cwebp &> /dev/null; then
  echo "❌ 找不到 cwebp，請先安裝 webp 工具"
  exit 1
fi

echo "===================================="
echo "📂 目前所在目錄："
pwd
echo "===================================="
echo "🖼️ 目錄中的圖片："
ls *.jpg *.jpeg *.png 2>/dev/null

echo
echo "請選擇要轉換成哪種類型的 WebP："
echo "1️⃣ 有損 WebP（照片，推薦）"
echo "2️⃣ 無損 WebP（UI / icon）"
echo "3️⃣ 自訂參數（高手模式😈）"
echo
read -p "請輸入選項 (1/2/3): " MODE

echo

case $MODE in
  1)
    echo "🔥 使用【有損 WebP】參數轉換中..."
    for img in *.jpg *.jpeg *.png; do
      [ -e "$img" ] || continue
      cwebp "$img" -q 80 -m 6 -sharpness 2 -sns 80 -pass 10 -o "${img%.*}.webp"
    done
    ;;
  2)
    echo "💎 使用【無損 WebP】參數轉換中..."
    for img in *.png *.jpg *.jpeg; do
      [ -e "$img" ] || continue
      cwebp "$img" -lossless -m 6 -o "${img%.*}.webp"
    done
    ;;
  3)
    echo "😈 進入自訂參數模式"
    read -p "請輸入你要的 cwebp 參數（例如：-q 75 -m 6）: " CUSTOM
    for img in *.jpg *.jpeg *.png; do
      [ -e "$img" ] || continue
      cwebp "$img" $CUSTOM -o "${img%.*}.webp"
    done
    ;;
  *)
    echo "❌ 無效選項，請重新執行"
    exit 1
    ;;
esac

echo
echo "🎉 轉換完成啦！！WebP 全部生出來了！！！"

順利的轉換完成了，AI真好用(不是

優化後結果
#

Lighthouse報告：

對了！我還順便修復了幾個無障礙的小問題！

2026-01-11 未完待續

相關文章