專爲電腦白癡設計的網站速度優化攻略：8 大技巧教你在不碰到程式語言的情況下，大幅度提升網站速度
Google 早在 2010 年時就有提到網站速度是 SEO 排名的條件之一，但這些年 Google 看似都沒有對那些 “龜速” 的網站有什麽大動作。
直到 2020 年時，Google 再次推出 Core Web Vitals（簡稱 CWV，中文翻譯為網站體驗核心指標）的演算法大更新之後，網站速度又再度引起所有架站者的重視。
不過，對於沒有任何編程經驗的電腦白癡來説（就像我 XD），要想深入優化網站速度，並且通過 Core Web Vitals 的測試是有一定的難度的，但這也並非辦不到的任務。
這篇文章 Zac 就想跟大家分享 8 個實用技巧，讓你在不用編程的情況下，依然有機會能提升自己的網站速度，這些技巧包含了…
網上速度優化必做的三件事
- 嚴格控制圖片的體積大小
- 盡可能刪掉一切不必要的外掛
- 選擇輕量的佈景主題
網上速度優化的五個進階技巧
- 選擇優良的主機
- 利用 CDN 服務
- 安裝快取外掛
- 不要過度依賴頁面編輯器
- 減少廣告數量
以上的方法也成功讓我的網站速度獲得很大的提升…
在接下來的内容，我將會更詳細的講解以上提到的網站速度優化方法，以及透露所有我正使用的優化工具，還有我在各個工具上所做的設定，文末也會回答一些關於網站速度的常見問題。
如果你也想學習如何在不碰到程式語言的情況下優化網站速度，那 Zac 就在此邀請你繼續讀下去吧！
内容目录
要想網站速度不受太大影響，你必須遵守的三大黃金鐵則
#1：嚴格控制圖片的體積大小
圖片可以説是一篇文章相當重要的一個視覺元素，但如果圖片優化的不好，後續圖片數量多了起來之後，遭殃的就會是我們的網站速度。
我自己在將圖片上傳到 WordPress 以前，都會事先用 Image Resizer 將圖片調整到合適的大小（通常都是 600 * 600 px 以内）。
PNG 或 JPG 圖檔格式對我來説不是那麽重要，主要會確保即將上傳的圖片，它們體積必須得在 100 KB 以下。
我也有在網站上安裝 ShortPixel 這款圖片優化外掛，這樣一來系統就會自動縮小那些尺寸或體積過大的圖片。
有興趣的朋友，以下是我在安裝 ShortPixel 之後所做的一些設定，供你參考看看：
ShortPixel 圖片優化外掛設定分享
（一）Genaral 基本設定
- 將 Compression Type 設定爲 Lossy
- 勾選 Also include thumbnails 功能
- 勾選 Image backup 功能
- 勾選 Remove EXIF 功能
- 在 Resize large images 的設定，使用 Shortpixel 預設的 924*924，並在下方點選 Cover 全覆蓋選項
（二）Advanced 進階設定
- 勾選 CMYK to RGB conversion 功能
- 在 Next Generation Images 的選項中，勾選 Also create WebP version 的選項
- 勾選 Optimize Retina images 功能
- 勾選 Optimize PDFs 功能
- 勾選 Optimize media on upload 功能
（三）Cloudflare 設定
- 因爲我的網站有用 Cloudflare CDN 的服務，因此就有順手將 Shortpixel 跟 Cloudflare 進行連接，以便之後系統在優化/恢復圖片檔案時，Cloudflare 也能同步更新。
#2：盡可能刪掉一切不必要的外掛
要説 WordPress 最强大的地方，應該會是它那龐大的外掛市集。就是因爲有了這個市集， 造就了 WordPress 現在完整的生態圈，任何你想要的功能或想解決的問題，基本上都能找到相應的外掛來辦到。
雖説外掛在很大程度上提高了 WordPress 網站整體的自由度，但安裝過多的外掛實際上是會給網站速度帶來不小的負擔，因爲每安裝一個新外掛就很有可能給網站產生龐大的程式碼。
我就有遇過幾位新手初期在架設 WordPress 網站的時候，往往都是沒意識到外掛數量過多的問題，從而影響到網站的速度。
我强烈建議網站安裝的外掛越少越好，只安裝對網站 SEO 和行銷有幫助的外掛就好。如果可以，盡可能將外掛數量限制在 20 個以下。
#3：選擇輕量的佈景主題
在選擇佈景主題方面，Zac 會以輕量，還有客制程度作爲兩大主要考量。
在嘗試了那麽多的佈景主題之後，Zac 最滿意的兩個佈景主題是 Astra 和 Kadence，它們不只是定制性高，加載速度也很不賴，兩者也有提供免費版可使用。若之後想要付費升級的話，他們也有買斷方案可選購。
值得一提的是，與免費版的 Astra 相比之下，免費版的 Kadence Theme 開放了更多付費級的功能。所以如果你還不想要花錢購買佈景主題的話，可以考慮使用 Kadence Theme。
Zac 現在主要用的正是付費版的 Kadence Theme，還有搭配後面會提到的 Kadence Blocks 作爲主要架站工具。
想要網站速度的 90 分以上，你還可以實行的進階優化策略（第 1 和 4 個是 Zac 大幅度提升網站速度的兩大關鍵技巧！）
#1：選擇優良的主機
爲什麽選擇可靠的主機很重要？
如果你曾看過國外的其他網站速度優化教學，你會發現當中大部分的架站 KOL 都會特別强調虛擬主機對於網站速度的重要性，而且往往都會説出這麽一段話：
A good web host will solve 50% of your page speed issues. | 一個好的虛擬主機可以解決一半以上的網站速度問題。
Zac 在優化網站速度的時候，第一件做的事就是先將網站從 Bluehost 搬家到 Cloudways。完成搬家過後，Zac 也確實感受到網站速度有顯著的提升。
常見的網站主機類型
目前市面上的網站主機主要可分爲 3 大類，分別是：
共享主機（Shared Hosting）：主機提供商主要會將一個伺服器的空間分成很多單位，並同時租借給幾十個，甚至上百個網站。由於這些網站是共享同一個伺服器的資源，因此每當有一個網站很耗資源時，其他網站便會直接受到影響。
VPS 主機（VPS Hosting）：VPS 全名為（Virtual Private Server），利用了虛擬化的技術將一臺伺服器進一步切分成多個虛擬服務器，這麽聽起來 VPS 有點像共享主機，但它倆最大的區別就是 VPS 切分出來虛擬服務器都是個別獨立的，意思就是各個網站都有專屬的資源，並不會跟其他網站共享或瓜分資源。
專屬主機（Dedicated Hosting，又稱 Managed Hosting）：簡單來説就是整個伺服器都會專屬於一個網站，以用來應付該網站的各項需求，整體的資源量相對高了很多，但也因此費用一般較高，比較適合已經有一定規模的大型網站。
網站主機選擇建議
如果你是架站新手，剛開始網站流量還很低的時候，建議可以先利用共享主機，因爲這類型的主機費用都很便宜，一般不會超過 5 美元/月。
一旦之後網站流量成功提升起來，就可以考慮更換到速度成效更佳的 VPS 或專屬主機，Zac 是建議每月固定有 1 萬的網站瀏覽量時就可以考慮搬家了。
主機選擇方面，對於共享主機，Zac 是最推薦 Bluehost，每當 Zac 有新的利基網站 Idea 時，一開始也主要會先用 Bluehost 來架構新網站。
而 VPS 主機，我當然會推薦自己現在用著的 Cloudways 的 Linode VPS 主機方案啦~
若預算充足的朋友想要用專屬主機，則可以選擇口碑相當不錯的 WPX 專屬主機。Zac 以前也用過 WPX 的一段時間，但後來因爲費用因素就沒再繼續使用了。
不過，不得不説 WPX 的主機速度真的超級快，後臺的操作介面也非常直覺，重點是他們的客服品質簡直是一級棒，任何問題都能在短時間内獲得解決，現在完全不排除之後 Zac 還會再搬家到 WPX 主機。
#2：利用 CDN 服務
什麽是 CDN？
CDN 全名為 Content Delivery Network，中文翻譯爲內容傳遞網路。
簡單來講，CDN 供應商會透過一種技術盡可能的將全球的伺服器互相連接起來，並且將我們網站的資料以暫存檔案的形式（cached data）存放在這些伺服器中。
之後每當有人瀏覽我們的網站，CDN 系統便會利用最靠近該瀏覽者的伺服器，以更快的速度將網站上的資料傳送給他。
擧個例子：
- 假設你的網站主機是位於美國，而你的網站主要服務的是台灣和香港讀者。
- 如果你的網站是沒有設定 CDN 的話，網站資料就會從美國主機傳送到這些位在台灣和香港讀者。
- 但如果是有設定 CDN，網站資料就會從最靠近這些讀者的伺服器（例如：日本）傳送給這些讀者。
- 由於距離上縮短很多，網站的加載速度 & 使用者體驗也就會進一步獲得提升。
CDN 服務供應商推薦 – Cloudflare
現在市面上最熱門，同時也是 Zac 最推薦的 CDN 服務供應商會是 Cloudflare，他們也有提供免費方案可選擇。
Zac 在 Cloudflare 上做了哪些設定？
雖説 Cloudflare 的免費方案在功能上會有所限制，但當中所開放的功能對於大部分人來説就已經十分夠用了。
以下就是 Zac 在給自己的網站連接上 Cloudflare 之後，在後臺做的一些設定，給各位參考看看：
（一）SSL/TLS 設定
- 在 SSL/TLS 概觀的區域，將 SSL/TLS 加密模式設定為 完整。
（二）速度設定
- 開啓 自動縮製 的所有選項，讓 Cloudflare 自動幫我們壓縮網站上的原始碼檔案大小。
- 啓用 Brotli 功能，加速訪客 HTTPS 流量的網頁載入時間。
（三）Caching 網站快取設定
- 將快取等級設定爲 標準。
- 將瀏覽器快取 TTL 的時間設定爲 4 小時。
- 啓用 Always Online 功能，這樣每當原始伺服器遭遇當機時，我們的網站依舊可以保持上線讓讀者繼續瀏覽，而非顯示錯誤頁面。
#3：安裝快取外掛
什麽是快取外掛？
要知道什麽是快取外掛（Caching Plugin），我們得先來瞭解什麽是 ‘快取 Caching’。
簡單來講，快取就是我們的網站經過一種技術所產生出來的一個靜態緩存頁面。再更白話一點，我們可以把快取理解成網站網頁的副本。
而快取外掛就是幫助我們爲網站生成快取頁面（aka 副本）的工具。
這樣一來，每當有人瀏覽我們的網站時，伺服器就可以直接把該副本呈現給這些瀏覽者，從而省去了每次都得連線到主機 & 重新生成新頁面的繁瑣過程，有效加快網站的加載速度。
不過，很多快取外掛也會具備其他好用的網站速度優化功能，像是圖片/影片延遲載入、檔案壓縮、資料庫優化等等。
快取外掛推薦 – WP Rocket
WP Rocket 是目前討論度蠻高的一款快取外掛。
這款快取外掛之所以會獲得那麽多 WordPress 專家青睞的主因，無非就在於它具備的優化工具是數一數二的全面，可以很有效的協助站長來進一步提升網站的速度。
此外，WP Rocket 的操作介面也相當直覺好操作，重點是它的相容性也非常高，很少會出現與其他的外掛產生衝突的情況。
Zac 在 WP Rocket 上做了哪些設定？
以下就是 Zac 在給自己的網站安裝了 WP Rocket 之後，在後臺做的一些設定，給各位參考看看：
（一）快取設定
- 啓用行動裝置快取
- 將快取生命週期設定爲 10 小時
（二）檔案最佳化設定
- 啓用壓縮 CSS 功能
- 啓用最佳化 CSS 分派 & Load CSS Asynchronously（非同步載入 CSS）
- 啓用壓縮 Javascript 功能
- 啓用非同步載入 Javascript 功能
- 啓用 Delay Javascript Execution（延遲載入 Javascript）
（三）媒體優化設定
- 同意針對圖片使用延遲載入
- 同意針對 iFrame 與影片使用延遲載入
- 同樣使用預覽圖片取代 YouTube 播放器
- 啓用 Add Missing Image Dimension 功能，這樣每當有圖片無法順利呈現時，系統會自動在該處放上跟圖片一樣大小的空白處，以防止讀者在瀏覽的過程中出現過大的佈局偏移（layout shifts），保護讀者的瀏覽體驗。
（四）預先載入設定
- 啓用預先載入功能（Activate Preloading）
- 同意啓用以網站地圖為快取的預先載入功能
- 勾選自己正使用的 SEO 外掛所產生的 XML Sitemap，我自己是使用 Rank Math。
- 啓用 Link Preloading
- 在預先取得的 URL 欄位那裏輸入以下的連結設定。
//maps.googleapis.com
//maps.gstatic.com
//fonts.googleapis.com
//fonts.gstatic.com
//ajax.googleapis.com
//apis.google.com
//google-analytics.com
//www.google-analytics.com
//ssl.google-analytics.com
//youtube.com
//api.pinterest.com
//cdnjs.cloudflare.com
//pixel.wp.com
//connect.facebook.net
//platform.twitter.com
//syndication.twitter.com
//platform.instagram.com
//disqus.com
//sitename.disqus.com
//s7.addthis.com
//platform.linkedin.com
//w.sharethis.com
//s0.wp.com
//s.gravatar.com
//stats.wp.com
（五）資料庫優化設定
- 這裡的設定我全都勾選了，並且將頻率設定成每月自動清理一次。
（六）Heartbeat 設定
- 這邊我基本上是跟著 WP Rocket 預設的設定。
（七）附加功能
- 由於我在設定 Shortpixel 的時候，有選擇將每張圖片都另外轉換成 WebP 圖片檔，因此我這邊有開啓 WebP Compatibility 的功能，讓 WP Rocket 來負責爲這些 WebP 圖片檔建立快取 & 呈現給瀏覽者。
- 因爲我有使用 Cloudflare，所以自然的我有在這啓用 Cloudflare 的附加功能，並且將我的 Cloudflare 賬號與 WP Rocket 進行連接。
免費替代方案 – Breeze
值得注意的是，如果你是用的是前面推薦的 Cloudways，他們有為站長提供免費的快取外掛 – Breeze，不過就算是你使用的其他主機也還是可以使用這款外掛。
Breeze 在 WordPress 的外掛市集中也獲得了相當不錯的評價，所以如果你不想付費購買 WP Rocket，其實也可以用 Breeze 來作爲替代方案，而且我個人覺得 Breeze 的介面與操作方式跟 WP Rocket 有幾分相似。
對 Breeze 有興趣的朋友，也可以點這邊查看 Cloudways 官方發佈的 Breeze 安裝 & 設定教學。
#4：不要過度依賴頁面編輯器
頁面編輯器的潛在隱患
頁面編輯器對於架站方面雖說很方便，也很適合沒有編程經驗的架站新手，但它們最大的隱患就是會間接產生很多不必要的程式碼，進而連累網站速度。
Zac 一直以來都深知這一點，但由於我本身是個不折不扣的電腦白癡（打從心裏特別排斥編程的那種），想要完全移除掉平時習慣用的 Elementor，但卻又找不到可以替代 Elementor 的方案，直到我在看到以下的 YouTube 影片…
這位 YouTuber 的名叫 Jack Cao，是一位來自新加坡小有名氣的網賺 & 架站專家，他在影片中就分享了該如何從一個完全利用 Thrive Architect（知名頁面編輯器）的網站更換到 WordPress 内建的古騰堡（Gutenberg）編輯器。
更好的替代方案：利用 WordPress 内建的古騰堡編輯器來編輯網頁與文章
Zac 隨即也在此影片中得到一些啓發，並跟著影片中的教學及建議，一步步將自己網站中的 Elementor 移除掉，之後也主要利用古騰堡編輯器（外加 Kadence Blocks 擴充外掛）來作爲網頁編輯的主要工具。
Zac 可以拍胸脯地説，正是移除頁面編輯器的這一個優化策略，給我的網站速度帶來非常非常大的提升！
話雖如此，古騰堡編輯器與其他頁面編輯器相較之下，前者在網頁編輯上還是會有不少的劣勢，因爲就算是有安裝了 Kadence Blocks 擴充外掛的古騰堡編輯器，它的客制程度相對來説還是非常有限的。
所以説，如果你需要的進階編輯功能目前只有頁面編輯器才有提供，説實話你也不必像 Zac 一樣做的那麽極端。
你還是可以用頁面編輯器，只是説我會强烈建議你盡可能利用它來製作網站上比較重要的頁面就好，千萬千萬千萬不要用頁面編輯器來寫文章！
否則之後文章數量一多，網站速度是真的會嚴重被干擾的，到時候就真的很難救回來囖 （>…<）
#5：減少廣告數量
無論你用的是 Google 官方的廣告置入平臺 – Google Adsense，還是其他第三方廣告交易平臺，像是 Ezoic、Mediavine、Adthrive 等等，它們無一例外都是會給網站速度帶來一定程度的負擔。
我自己是覺得中文網站透過廣告所賺到的收益與國外英文網站相比之下，通常會低很多。
再加上廣告會拖慢網站速度，所以在很久以前就已經將這個網站上的所有廣告都移除了，在那之後也主要用 Likecoin 來彌補廣告收益的缺陷。
不過，我也明白廣告是很多部落客的收益來源之一。若廣告對你來説是很重要的收入來源，那你大可不必只爲了提升網站速度而完全移除站上所有的廣告，這是完全不切實際的。
但是，如果你自己也覺得自己的網站的廣告置入的也有點多，進而嚴重影響到網站速度和讀者體驗，減少廣告數量可能就是唯一的策略了。
值得一提的是，像 Ezoic、Mediavine、Adthrive 這類的第三方廣告交易平臺也都有為使用者提供免費的網站速度優化工具。
所以說，如果你使用的是這些廣告平臺的服務，那就記得善用他們的優化工具，盡可能的確保網站速度不受到太大影響的情況下，自己也能透過廣告賺到可觀得收入。
關於網站速度優化的常見問題
#1：網站速度究竟是如何影響 SEO 的？
這其實不難理解，由於網站速度跟使用者體驗有很大的關係，而 Google 恰好又十分重視使用者體驗，所以如果網站速度過慢，造成讀者觀感嚴重下滑的情況下，自然就比較不利於該網站的 SEO 。
簡言之，優化網站速度不一定能讓它的曝光量在短時間内暴漲，但速度過慢卻一定會對網站的 SEO 有所影響。
#2：網站速度究竟得多快才算合格？
根據 Google 的相關研究報告指出，如果一個網頁在手機上的加載時間超過 3 秒，就有超過一般的瀏覽者會選擇離開。
除此之外，我在網上搜索相關的資料時，普遍看到的回答也都是說 2 ~ 3 秒的網頁加載速度是多數瀏覽者能夠接受的範圍。
雖説要將網頁速度優化到 3 秒以下，確實會有一定的難度，但如果你跟我一樣是對網站速度有一定的要求的話，建議可以嘗試使用前面分享的策略去優化看看。
#3：如果有按照以上的優化策略去執行，大約需要多少的花費？
如果你有打算跟著我所分享的方式去優化自己網站速度，以下我就來簡單羅列一下我這次優化個人網站所做的全部開銷，讓你大概知道一下整體的所需費用。
| 工具名稱 | 選擇方案 | 方案價格 |
| Cloudways | Linode 1GB | 每月 12 美元 |
| Shortpixel | 100k 圖片優化一次性付費方案 | 59 美元 |
| Kadence 佈景主題與擴充外挂 | Essential Bundle | 每年 129 美元 |
| Cloudflare | 免費方案 | 完全免費 |
| WP Rocket | Single 年繳方案 | 每年 49 美元 |
總花費：12 + 59 + 129 + 49 = 249 美元
#4：如果已經有用 Cloudflare，還需要安裝快取外掛嗎？
快取外掛的工作就是幫我們先預先產生網站上的所有頁面，幫助網路伺服器省去重新製作這些頁面的時間。
而 Cloudflare 的作用就是會進一步利用 CDN 的技術，將這些内容用更快的速度呈現給全球各地的讀者。
也就是説，Cloudflare 和快取外掛，這兩種工具若使用得當，它們那相輔相成的作用是可以很大程度提升網站整體的效能。
此外，雖然 Cloudflare 已經有相應的快取和檔案壓縮功能，但它所具備的功能還是非常有限的。
所以我才會願意付費購買 WP Rocket 去做一些進階的設定，而且當中也有不少 Cloudflare 沒有具備的設定。
#5：有哪些好用的工具可以測試網站速度？
市面上可以測試網站速度的工具有很多，但我通常使用 PageSpeed Insight（Googe 官方測試工具），以及 GT Metrix 來測試我自己的網站速度。
#6：是否有網站速度優化的手把手線上課程？
Zac 在過去曾經買過一個部落格經營課程 – The Blog Builder Kit，當中也有包含網站速度優化的課程，名叫 Pagespeed for Bloggers。
但如果你只想單獨購買 Pagespeed for Bloggers 課程的話也是可以的，單獨購買的話只要價 97 美元一次性費用。
這課程背後的導師名叫 Matt Giovanisci，是個來自美國小有名氣的部落格經營專家，目前手上也正經營幾座利基網站，其中最成功的一個網站 – SwimUniversity.com，每一年能爲他帶來超過 50 萬美元的收益，非常驚人！
而 Matt 也是個格外重視網站速度，以及讀者的閲讀體驗的架站者，因此他的所有網站的速度都非常快，對讀者來説也十分易於閲讀，Zac 的網站排版與設計就是照著 Matt 的方式去製作的。
如果你英文不錯，可以考慮看看 Pagespeed for Bloggers 這門課，如果最後不滿意也不必擔心，因爲 Matt 有提供 30 天的退款保證哦~
另外值得一提的是，Matt 也曾經他的一位朋友 – Sean Ogle 優化過他的公司網站。
而 Sean 實際上也是一名小有名氣的 YouTuber & 接案專家，他就曾在一支影片中分享了 Matt 所用的一些網站速度優化策略，當中就有不少是 Pagespeed for Bloggers 課程裏有深入教到的優化技巧。
有興趣的朋友可以看看以上我剛提到 Sean 的那支影片：
總結：網站結構越簡單，就是優化網站速度的最佳方案
少，卻更好。
以上是取自《子彈筆記》中的一句名言，但它之後也慢慢變成了 Zac 的座右銘（主要也是因爲 Zac 是極簡主義的崇尚者啦 XD）。
在架站，或經營部落格時，Zac 也是都會盡可能地保持簡單，只會在網站上放上真正對讀者，還有 SEO 有幫助的元素或功能，其他的都會一律刪掉。
簡單的網站結構不僅僅是對網站速度有幫助，越簡單的結構也可間接幫助讀者減少不必要的干擾，讓他們可以瀏覽的更開心。
況且，有時候網站越複雜，後續想給網站速度做優化時，往往會需要花掉更多的時間與費用。
那 Zac 就先分享到這邊吧~ 因爲這篇文章裏所分享的網站速度優化資訊能帶你一些啓發。
當然，如果你有想要分享的網站速度優化小撇步，也歡迎到下方留言哦~
Peace ✌️
