網站速度優化是技術SEO的關鍵，透過壓縮圖片、添加 Lazy Loading、合併 CSS 和使用 WebP 或 AVIF 格式，不僅能讓網站加載更快速，還能提升使用體驗，讓使用者不輕易流失！

☑️誰該看這篇文章：不想碰複雜code的人、想提升網站速度的人

✨這篇文章能幫助你什麼：只須加一行代碼，幫你加快網站載入速度

❌如果你要……請離開：學到艱深的code知識

我的網站速度優化案例

用PageSpeed Insights，發現我的網站分數在行動裝置上的效能只有57分……
這可真是驚人，畢竟身為文組生的我，只想著要有美美的排版，卻忽略了圖片帶給系統的負擔。

不過，一切總是有挽救辦法！

為什麼網站速度不佳？

深度查看後，我發現在”效能”指標中，PageSpeed Insights指出兩大問題：

載入最大內容的速度過長
首頁充斥圖片，拉長了載入時間

網站速度優化的4種方法

我親身實踐過的網站速度優化，有以下四種：

壓縮圖片(最簡單)
添加Lazy loading標籤(最快)
合併靜態的CSS樣式(適合CSS請求太多時)
使用 WebP 和 AVIF 圖片格式(適合有大量圖片時)

1. 壓縮圖片

適合情境：

網站中有大量高解析度圖片，這時壓縮圖片是最快速直觀的優化法！
充斥許多用戶需要快速加載的頁面，圖片是頁面中的主要元素，如果不加載會影響用戶體驗等。

做法：

使用 TinyPNG 或 ImageOptim 等線上工具壓縮圖片，並重新上傳至網站。

2. 添加 Lazy Loading 標籤

適合情境：

網站中有大量圖片「不必」立即出現在視窗中的圖片（如頁面底部的圖片、用戶滾動後才會顯示的圖片）。這時用 Lazy Loading 可避免一次加載過多資源，減少初次加載壓力。

loading lazy標籤 — 上傳到WordPress的圖片都會默認添加這個標籤喔！

做法：

為圖片、影音等多媒體元素添加 loading="lazy" 標籤，讓它們在用戶需要時再加載。

例如，讓用戶滾動到相應位置時加載：

<img src="image.jpg" loading="lazy" alt="example image">

例如，只在點擊影音時加載：

<iframe src="https://www.youtube.com/embed/videoID" loading="lazy" frameborder="0"></iframe>

3. 合併CSS樣式（適合CSS請求過多時）

適合情境：

網站中有過多外部的CSS檔案，這些檔案需要多次HTTP請求，並且加載時間過長。
速度問題不僅僅出自於圖片，而是歸因於冗餘或未使用的CSS

做法：

將網站中使用的多個 CSS 檔案合併為一個大檔案，減少加載過程中的請求數量。

但需要注意合併後的文件大小，避免檔案過大影響性能。

審視並列出需要合併的 CSS 檔案

首先，看看你的網站用到哪些 CSS 檔案。假設你打開網站目錄，查詢.css，發現有三個主要檔案：

styles/reset.css – 用來重置瀏覽器的默認樣式。

styles/layout.css – 用來設置佈局樣式。

styles/theme.css – 用來設置網站的顏色和字型。

檢查CSS樣式是否重複或需要

在合併之前，先檢查每個 CSS 檔案的內容，這樣可以避免合併後的檔案過大或包含不必要的樣式。

重複樣式：查看是否有相同或重複的樣式規則，如果有，就刪除多餘的部分，避免冗餘。
不再使用的樣式：如果有些樣式是已經不再使用的（比如某些舊的 class 或 id），就可以放心刪除！
專頁樣式：有些樣式可能只用於特定的頁面或情境，可選擇不合併到全局樣式檔案中，保持專頁樣式獨立。

將這些 CSS 文件合併到一個文件中

現在，把清理過的代碼合併在一起，變成一個 styles/combined.css 檔案：

styles/combined.css

/* reset.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* layout.css */
.container {
    width: 100%;
    margin: 0 auto;
}
.header {
    background-color: #333;
    color: white;
    padding: 20px;
}
/* theme.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}
h1 {
    color: #333;
}

壓縮合併後的 CSS 檔案

接下來，你可以用 CSS Minifier 或其他工具壓縮這個檔案。

在 HTML 頁面中引用合併後的 CSS 檔案

最後，把這個合併且壓縮過的檔案重新引用於你的 HTML 頁面：

<head>
    <link rel="stylesheet" href="styles/combined.css">
</head>

4. 使用 WebP 和 AVIF 圖片格式

適合情境：網站有大量圖片，特別是在追求性能和載入速度的情況下。

具體做法：

轉換圖片格式：

使用工具將圖片轉換為 WebP 或 AVIF 格式，這種格式既能保持良好視覺效果，效能又比JPEG和PNG更好。

轉換工具：可以使用 Squoosh 或 cwebp 來轉換為WebP格式；使 Squoosh 或 avif.io 來轉換為AVIF格式。

2. 提供圖片載入失敗時的替代方案：

並非所有瀏覽器都支持 WebP 和 AVIF 格式，因此需要設置回退機制，讓不支持這些格式的瀏覽器使用較為通用的圖片格式（如 JPEG 或 PNG）。

使用 <picture> 標籤來設置多格式圖片的加載順序。

<picture>
    <!-- WebP 格式圖片 -->
    <source srcset="image.webp" type="image/webp">
    <!-- AVIF 格式圖片 -->
    <source srcset="image.avif" type="image/avif">
    <!-- 默認格式 -->
    <img src="image.jpg" alt="Image description">
</picture>