在SEO文章教學中有提到，SEO可以簡單分成內容SEO和技術SEO兩大核心。此篇，我們以技術SEO為命題，向你詳細說明每一項技術SEO工程，是怎麼製作的。
在2024, 2025年，Google持續公布 SEO 權重的新規則，其中，網站速度一直是佔比50%以上的重要指標。技術SEO牽涉到相當多資料工程學的知識，金蘋果在交付網站給你前會一一將所有工程學難題化解。
1. 網頁使用者體驗衡量 – Pagespeed Insights
Pagespeed Insights是由Google所推出，用於測量網頁速度，同時給出分數作為評斷該網頁是否『爬蟲友善』，來讓爬蟲決定這個網站是否能在技術SEO拿下高分。
Pagespeed Insights的評分方式主要分成兩塊：
- 使用者體驗
- 網站效能
使用者體驗就是爬蟲『模擬真實訪客』進入你的網站後，開始打開偵測器蒐集資訊並且得到每一個項目的評分。
網站效能是爬蟲利用一些後端程式碼（比方curl指令、 ping指令….），來偵測你網站主機的優劣與否，以及程式碼是否撰寫精良。
基本上，使用者體驗跟網站效能都牽涉到一個一個工程難題的突破，我們會在第二大點之後詳細說明如何突破。
1.1 使用者體驗評分項目與優化工程：
| 意思 | 金蘋果會幫你 | |
| 最大內容繪製 （LCP） | 跑出『最大那一張圖或影片』的時間 | 優化CSS、 優化網站圖片、 優化網站字體、優化網站Javascript、 使用PRPL模式 |
| 下個畫面的互動 （INP） | 看網頁時『所有點擊』的『總反應速度』 | 把程式碼拆開執行 |
| 累計版面配置轉移 （CLS） | 測試網站的視覺穩定性 | 選擇簡單的動畫、 避免使用跳出視窗功能 |
| 首次內容繪製 （FCP） | 跑出網站『第一個內容』的時間 | 使用快取技術、 使用高效主機、 避免重定向 |
| 跑出第一字節時間 （TTFB） | 網站請求到回應完成的時間 （但網站內容還不一定show出來） | 使用高效主機 使用高級CDN伺服器 |
1.2 網站效能評分項目與優化工程：
| 意思 | 做法 | |
| 首次內容繪製 （FCP） | 跑出網站『第一個內容』的時間 | 使用快取技術、 使用高效主機、 避免重定向 |
| 最大內容繪製 （LCP） | 跑出『最大那一張圖或影片』的時間 | 優化CSS、 優化網站圖片、 優化網站字體、優化網站Javascript、 使用PRPL模式 |
| 封鎖時間總計 （TBT） | 延遲累計的時間 | 優化CSS |
| 累計版面配置轉移 （CLS） | 測試網站的視覺穩定性 | 選擇簡單的動畫、 避免使用跳出視窗功能 |
| 速度指數 （SI） | 從剛連到網站，到『所有網站內容』全部Show出來的時間 | 大規模壓縮網站圖片、 大規模砍掉動畫、特殊設計、特殊字體 |
2. 高速主機
在談談主機之前，我們要先了解，架設網站其實就跟開設一般的實體店面。而主機，就像是你這個店面的毛胚屋。如果毛胚屋爛，牆壁一堆龜裂，你覺得裝潢怎麼可能好呢？
2.1 主機 = 實體店面的毛胚屋結構
想像一下如果40年前你想在台北開一個雜貨店，你會怎麼做？
- 選一個塊地，租下他
- 向台北市商務局，申請門牌號碼
- 在這塊地蓋一個簡單的毛胚屋
- 請裝潢公司，把毛胚屋裝潢成你想要的樣子
- 將商品上架
- 開始宣傳，販賣
現在，在架設網站，原理是一模一樣的
- 選一個塊地，租下他
= 選一個主機，租用一個硬碟空間 - 向台北市商務局，申請門牌號碼
= 向網域管理公司，申請一個網域 - 在這塊地蓋一個簡單的毛胚屋
= 在伺服器安裝必要的作業軟體（Linux , Nignx , WordPress…） - 請裝潢公司，把毛胚屋裝潢成你想要的樣子
（ex: 金蘋果進行網頁版型的設計） - 將商品上架
- 開始宣傳，販賣
2.2 我們使用最高端的主機：Google Compute Engine主機
這個世界上有些大公司為了解決這個問題，其實已經花數億到上百億幫你把主機蓋好了，等著你租賃就可以了。其中最知名的三大國際主機巨頭：Google、Amazon、Microsoft Azure
所有最知名的主機商包括以下：
| 主機位置 | 優點 | 網店推薦指數 | |
| Google主機 | 台灣、 香港、 日本、 新加坡、 …… | 1. 偏貴 2. 台灣有點，大幅提昇速度 | ★★★★★ |
中華電信 | 台灣 | 1. 便宜 2. 台灣有點，大幅提昇速度 3. 介面難操作 | ★★★★ |
| Amazon | 香港、 日本、 新加坡、 …… | 1. 偏貴 2. | ★★ |
| 微軟Azure | 香港、 日本、 新加坡、 …… | 1. 偏貴 2. 提供 Windows介面，適合『一定要在Windows上跑的軟體』 | ★★ |
2.3 主機效能大幅影響網站效能分數
網頁內容可以簡單區分成動態文件跟靜態文件。靜態文件簡單說就是圖片 + 影片，可以用CDN技術來加速。然而凡是只要動態文件，包括電商平台、購物車、會員系統、文章、字體、即時更新頁面等等，全部都大幅仰賴主機性能。
主機就如同毛胚屋，工法好的可以耐震十級並且不會漏水漏電，工法不好的除了漏水龜裂之外甚至容易當負荷過載就坍塌，實在不可不慎。
結論：主機效能對於處理動態效能至關重要！
2.4 我們的主機在台灣：大幅減少海底電纜延遲
Google主機在台灣有據點，因此我們使用Google主機。
我們剛剛提到動態內容的處理大幅依賴主機效能，但事實上除了主機效能之外，第二名的影響因素就是『主機的地理位置』。
為什麼地理位置很重要，因為所有的點擊、下單、加入會員等等『訪客訊號』，都必須要透過電纜傳輸，最終才由主機處理。如果『訊號』必須要走海底電纜，那就變成傳去的路上有『海底電纜延遲』，傳回的路上也有海底電纜延遲。當訪客所有的瀏覽、點擊，每一步都有這樣的延遲時，他會覺得用起很卡，很不順，就大幅增加跳離頁面的機率。
值得慶幸的是，雖然Amazon、Microsoft目前在台灣沒有據點，但是Google有！這也是台灣商家的一大福音，也是金蘋果大力推薦Google主機的原因。
4. 快取技術
『快取』（Cache）這兩個字相信對於想要架設網站的人，或多或少都有聽過。然而，對於『快取』的理解，可能多數人都會覺得『很難』、『很深奧』，並且很難掌握他到底在什麼層面上可以幫助網頁速度的提升。
4.1 快取是什麼？其實快取就是圖書館中的『常用書區』
我們先來講快取的定義是什麼。快取是一個暫存區域，用於儲存『最近使用』或『經常使用』的數據，以便在需要時能快速訪問，無需再次從遠端或慢速的存儲設備中讀取。
我非常喜歡下圖的解釋，來自『Caching – Simply Explained』。他是用圖書館作為例子。想像一下，當你想要做一個研究（比方研究乾隆皇帝歷史），必須經常翻閱古籍。在圖書館中，你勢必經常會在『清史相關藏書』那個櫃位繞來繞去。
但是很神奇的是，你發現最終，你大部分翻閱的書就兩本：『清史稿』（趙爾巽等著），跟『清高宗實錄』（嘉慶朝編修），剩下什麼『盛京內務府檔』、『乾隆朝大小金川之役研究』、甚至『養心殿造辦處史料輯覽』，你可能久久才會去書架上拿下來翻一次。
那這個時候，『清史稿』跟『清高宗實錄』，就是你『清史相關藏書』的『快取』！你發現，你只需要借這兩本書回家，因為，這兩本書已經涵蓋90％你所需要的資訊！
註：”Cache” 來自法語的『避難儲藏室』的意思。因為當你準備要避難的時候，你會發現小小的『儲藏室』的存貨，已經涵蓋你90％日常所需。因此電腦科學借用這個概念，把這個技術稱之為『Caching技術』。
4.2 三大快取技術
三大快取技術包括：
- PHP快取
- 動態快取
- 靜態快取
4.3 快取一：PHP快取
4.4 快取二：動態快取
4.5 快取三：靜態快取