目錄
網站顯示速度慢，不但對使用者體驗有負面影響，也會讓網頁在搜尋結果的排名往後退。前一陣子錢鼠的朋友就遇這個問題，令他十分困擾。一般來說，解決的方式有兩個，一是把網頁「變小」，二是減少瀏覽器跟伺服器要求的檔案數量。
找出大圖片，進行適當壓縮
當網頁顯示速度慢，第一個要懷疑是否用了太大的圖片，例如圖片寬度看起來是600像素，實際上卻是2048像素，此時你可以這麼做：
- 以版面可容納的寬度為準，在電腦裡先把要用的圖片「真正地」縮小。
- 如果是JPG格式的話，做出2張不同壓縮品質的圖片，用肉眼比較看看，畫質差異不明顯的話，應該選擇壓縮品質低的圖片，有效減少檔案大小。
- 除非一定要用PNG圖片，轉存成JPG格式的話，至少省下一半的檔案大小，當然您也可以轉檔成WebP的格式，這樣會更小。
- 幫圖片指定寬度、高度，讓瀏覽器知道預留多大的位置，避免為了下載圖片而阻擋瀏覽器繼續顯示接下來的網頁元素。
▲紅框中的圖片寬度約為600像素。
▲在新分頁開啟圖片，發現它比網頁的寬度還要大，不僅拖慢網頁速度，也浪費頻寬(=錢)。
用Chrome 瀏覽器找出肥大圖片檔案
如果網頁裡面的圖片蠻多的，逐一打開檢查太花時間了，此時可以用Chrome 瀏覽器內建的「開發人員工具」列出所有網頁圖片的資訊，快速找出需要瘦身的圖片檔案。
如右圖示：打開「開發人員工具」後，點一下「Network」頁籤，把「Disable cache」打勾，並按一下「Images」表示只看圖片檔案，然後重新整理網頁。我們從「Size」欄可以清楚看到圖片大小。
用 Google PageSpeed Insights 幫網頁顯示速度做健檢
除了圖片，網頁結構、CSS、JavaScript等等，也有優化的技巧，看似千頭萬緒，此時先用免費的 Google PageSpeed Insights 來檢查，根據結果一步一步改善吧！
PageSpeed Insights 的使用方式很簡單，把網頁的網址丟進去分析即可。它會給你一個整體分數(愈高愈好)，從SEO的觀點來看，電腦版90分、行動版80分以上是比較理想的；指引問題在那裡，並提出明確的改善之道，例如減少伺服器回應時間、啟用壓縮功能、最佳化圖片、壓縮 JavaScript、壓縮 HTML……等等。
▲Google PageSpeed Insights網址：https://pagespeed.web.dev/
類似的工具包括 gtmetrix.com、websiteoptimization.com 等等，如果你本身沒有技術能力，拿這些資訊請工程師幫忙處理吧！
JavaScript、CSS 是網頁必備元素，也是優化重點
許多網頁健檢工具都會提到 JavaScript、CSS檔案要進行優化，小編以過去的實作經驗，提出一些要點讓大家參考：
- Javacript、CSS程式碼採用外部檔案連結，不要直接放到HTML標籤裡面，也要減少檔案數量。
- 壓縮JavaScript、CSS檔案。
- 把CSS檔案的內容適當分拆，一個網站會有許多不同版型的網頁，避免載入不需要的CSS。
- 採用CSS Sprites，把網頁裡會重複用到的小圖片集合成一張圖片，避免瀏覽器跟伺服器要求的檔案過多。
- 幫網頁元素加上互動效果的JavaScript 程式碼應該放在最後面，也就是靠近標籤之前。
- 當你要置入第三方的 JavaScript 程式碼(例如流量統計、再行銷用途……)，記得選擇「非同步」版本。
▲壓縮過的CSS檔案大概長這樣！把不必要的空白、分行拿掉，降低檔案大小，讓整體速度變快。
除了以上可以自我檢查、調校的技巧，選用優質的虛擬主機或雲端主機也是必備條件，他們可以提供穩定的硬體效能、頻寬，讓網頁不會「卡卡」，進階的技巧則是採用CDN機制，這又是另一個值得寫一篇的主題了。
