你重視網站速度嗎？
我們很重視。
我們看到自己架的網站速度評測獲取高分，心情是很爽的。
為何要求網站速度一定要快，主要有二大原因：
1、使用者體驗良好。
2、會影響到SEO分數。
以下就來說說我們如何讓網站的速度快。
影響網頁開啟速度的因素有哪些？
我們能控制的因素
- 伺服器：如何選擇廠商、主機規格、環境配置？
- 網站程式：程式結構、程式碼有沒有進行優化？
- 網站圖片：如何使用最恰當的圖片、對圖片進行壓縮？
- 加速方法：如何使用快取、GZIP、CDN 與清除過期檔案？
我們無法控制的因素
- 使用者的載具（電腦、筆電、手機）規格
- 使用者網路連線速度
該如何選擇網站的伺服器？
如果是自架主機，我們就不在此討論了，因為微型網站尚可不需要投入獨立主機昂貴的成本與專職 MIS 人力。
我們如何選擇？
我們不選擇伺服器，我們選擇與專業伺服器代管團隊。我們專業在於網站設計，那並不代表我們在伺服器領域也是專家。所以，我們選擇讓專業的 Cloudways 團隊來代管伺服器，Cloudways 在業界的評價非常高，收費雖略高於共享主機，但他們對於 WordPress 、Joomla、Prestashop 系統都非常熟，你想想：別人都已經把效能調到最優了，何不把網站交給他們代管。我們幾年下來，對 Cloudways 非常滿意。
如何優化網站程式？
舉 WordPress 的例子，你加了什麼外掛，就等於你加了什麼程式到網站中，外掛加愈多，網站速度就愈慢，然而，為了讓網站擁有某些功能，加外掛是不可避免的，所以我們會怎麼做？
- 首先我們會評估「這個功能非要不可嗎？它對網站轉換率真的有幫助嗎？」，這樣才能在第一關就減少外掛的安裝。
- 有達到同樣的功能，有很多外掛都可以達成。我們會把這些外掛都先進行測試，從評價、功能、效能方面評估，選擇最優的那一款外掛安裝到網站上。
- 佈景主題對網站速度影響很大，我們曾經對不同的佈景主題進行測試，最讓我們滿意的是 GeneratePress ，它在 WordPress 啟用安裝數: 200,000+，評價數：超過1000，獲得5星評價比率高達 99.9%。
- 如果使用頁面編輯器（如：Divi、Elementor、Brizy、、），一定會讓網頁檔案變肥，但為了頁面美觀，也只能接受了，這些頁面如果用網頁測試工具，跑出來的分數都不會太優，但分數也不會太在意，重要的是使用者實際體驗的速度。加個速度優化的外掛會很有幫助。
重視網站圖片的處理
圖片對一個網站或是部落格，相當重要，它會佔據網站空間，消耗網站流量，影響網站效能、使用者體驗、SEO排名，所以我們制定出一套圖片優化 SOP，來優化網站速度。
- 很多佈景主題及外掛會自動產生產生一拖拉庫的縮圖，但真正會用到只有1~2張，浪費大部分的空間，也造成網站肥大、速率變慢。首先，我們得找出網站內網頁中每個區塊中會用到的原始圖及縮圖尺寸。除了必要的尺寸留著，其它尺寸都禁止自動產生。
- 圖片上傳之前，就裁切好正確尺寸，並且壓縮再上傳到網站，也就是說，如果只需要用到 800 x 800 px 的圖片，不需要上傳 2000 x 2000 px 的圖片，圖片檔案大小，嚴重影響到網頁開啟速度，雖然這會多花我們一些時間，但對於非常重視網站速度的我們，一定會這樣做。
- 推薦 3 款我們最常用的剪裁及壓縮圖片工具給你
- tinypng 一次最多壓縮20張圖片，每張最大5M。https://tinypng.com/
- squoosh 一次壓縮1張圖片，可調尺寸及壓縮率。https://squoosh.app/
- Smart Resize 多張批量裁切及壓縮，可調尺寸及壓縮率。https://www.smartresize.com/zh-tw
使用快取、GZIP與CDN 加速網頁開啟
我們既然是選擇 Cloudways 代管我們的網站，所以也就使用他們開發出來的 Breeze 快取外掛 。
- 什麼是快取？
讓伺服器告訴瀏覽器，常用的檔案不需要在每次開啟網頁時重新載入，讓以前就瀏覽過網頁的訪客，載入先前下載過的資源，這樣就不需要再透過網路重新下載一次，可以減少等待載入的時間。 - 什麼是 GZIP ？
在頁面傳輸到瀏覽器之前進行壓縮。當網頁大小通過壓縮減少時，它將加載更快。 - 什麼是 CDN ？
內容傳遞網路 (CDN)，簡單說就是：它會幫你的網站的檔案或快取頁面，分送到世界各地的主機伺服器，瀏覽你網站的訪客靠近什麼位置，就由最近的伺服器傳送檔案給他，速度自然就比較快了。 - 我們會定期把過期無用的檔案刪除，減少主機負擔，就算網站已經很久了，依然能保持輕快。
關於快取外掛
我們測試了許多Wordpress快取外掛，最終決定使用WP Rocket ，加了之後速度真的快很多，但在PageSpeed Insights的分數並沒有很優，不過不用太在意分數啦！
測試你的網站速度
工具1：PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/
工具2：GTmetrix https://gtmetrix.com/