Table of Contents
網頁速度與用戶體驗
相信很多缺乏網頁開發經驗的人，都會碰到網頁載入速度過慢的問題。網頁載入速度與品牌的線上用戶體驗息息相關。假如網頁等了10秒依然沒有任何東西出現的話，不難想像瀏覽器另一端的用戶將會感到很不耐煩。
因此，一個好的網頁除了外觀吸引，容易使用外，還需要顧及載入速度，才能營造出良好的用戶體驗。如果你的網頁為了美化外觀而犧牲了其功能性，其實是本末倒置的做法。
載入速度對生意的影響
網頁速度過慢對銷量的負面影響，可以在兩個層面體現：
- 轉化率（Conversion Rate）
- 網頁流量（Site Traffic）
從轉化率的角度出發，外國的研究指出，網頁載入的首5秒之中，平均每多加1秒的載入時間，轉化率就會下跌超過4%。因此，過慢的載入速度會直接令你失去原本有機會消費的潛在客戶。
另外，從網頁流量的角度出發，Google一直以來都強調網頁速度是影響搜索排位的因素之一。雖然坊間就網速對搜索排位的影響有多大並沒有一致的結論，但從常理推測，在其他條件不變的前提下，Google必定會優先推薦用戶體驗較佳的網頁。因此，載入速度過慢或多或少都會降低網頁的自然流量(Organic Traffic)。
如何測試網頁速度
Google PageSpeed 是最常用的網頁測試工具之一。只需要輸入自家網站的URL，然後稍等一會，PageSpeed就會總結網頁的速度表現。
PageSpeed會顯示網頁的綜合分數，並列出有關網頁速度的問題，和建議的解決方法。用家亦可在上方選擇觀看行動版和電腦版的數據。
接下來，筆者將會介紹一些較為容易實行的方法來提升網頁的速度。
方法1：優化圖片
筆者在幫助客戶解決網頁速度的問題時，最常碰到的毛病就是沒有優化的圖片。
要優化圖片，可以從三個角度入手：
圖片格式
首先，如果你的照片並不需要透明背景，或者不需要壓縮後保持同樣質素的話，請盡量使用JPG來代替PNG的圖片來降低圖片的載入速度。
另外，如果你的圖片屬於向量圖的話，絕大部分情況都應該使用SVG格式。SVG比起JPG或PNG這些點陣圖（Bitmap）格式的圖片，除了佔用的空間大大減少外，SVG圖片無論在什麼大小的屏幕顯示，都不會出現起格/失真的問題。
不過，由於社交媒體多數禁止分享SVG格式的圖片（措施為了網站保安而設立，有興趣的讀者可以自行研究SVG的保安問題），因此筆者不建議使用SVG作為網頁文章的縮圖（Thumbnail）。
如果你利用瀏覽器放大下面的漢堡，左邊SVG的圖片不會失真，右邊PNG的圖片則會起格/變得朦朧。
調整圖片大小
如果你的圖片大小遠遠超過網頁實際需要的尺寸（例如以一張7000 x 4000的圖片作為文章的小插圖），你便需要減少圖片的大小來提升網頁速度。
線上有很多工具（例如onlinejpgtools）都提供調整圖片大小的功能。筆者建議使用一些可以自動維持圖片長寬比（Aspect Ratio）的工具，令縮小後的圖片不會變形。
壓縮圖片
對於一些降低質素後，亦不太影響網頁體驗的圖片，我們可以壓縮它們來換取更快的載入時間。同樣地，網上有很多工具都免費提供壓縮圖片的功能。
方法2：延後載入（Lazy Loading）
延後載入（Lazy Loading）的好處，顧名思義，就是把圖片延後到需要使用時才載入。簡單來說，設定了Lazy Loading的圖片，會在瀏覽器滑動到該部分時才載入。因此，Lazy Loading可以大幅縮短網頁初次完成載入的時間。
啟動Lazy Loading的方法有很多。如果你能夠直接編輯網頁的HTML檔，其實在相片的<img> tag裡加上loading=“lazy”便可。
<img src=”benson.jpg” loading=”lazy”>
不過這個方法並不是所有瀏覽器都能夠使用，因此使用前需要先查詢瀏覽器是否支援這種方法。
如果你像筆者般，利用WordPress來搭建網站的話，其實很多市面上的免費插件（Plugin）都可以幫到你。筆者自己使用的是SG Optimizer，不過這個插件只限於在Siteground上寄存的網站，因此如果你不是使用Siteground伺服器的話，便應該使用其他主流的Lazy Load插件（例如Lazy Load By WP Rocket）。
方法3：壓縮網頁
把網頁的CSS和JavaScript檔案壓縮，是另一個簡單提升載入速度的方法。
編程師在設計網頁時，往往會加入很多增加可讀性的元素。例如在程式碼中加入Comment來描述程式碼的功用等。不過，瀏覽器其實不需要這些元素來理解程式碼，而這些增加可讀性的元素往往會令檔案的大小明顯增加。
因此，我們可以利用壓縮網頁檔案的插件，來縮小CSS和JavaScript檔案。具體來說，插件會把原有檔案中不必要的元素移除（例如隔行，Comment等），來縮小載入過程中檔案的大小。
以下是由外國網站Imperva提供的例子，說明檔案會如何被壓縮：
筆者自己是使用W3 Total Cache的。作為提供免費版本的插件，W3 Total Cache的性能都相當不俗。
另外，如果插件在自動壓縮時遺留一些CSS或JavaScript的檔案，你可以在Google PageSpeed測試報告中的建議找到它們，然後手動把檔案的位置加入壓縮插件（例如W3 Total Cache）的設定中。
方法4：使用網頁快取（Cache）功能
網頁快取（Cache）簡單而言，就是瀏覽器第一次登陸某個網頁時，為了下次可以更快載入而把網頁的檔案儲存在瀏覽器裡面。
Cache對於提升初次到訪者的載入速度是沒有幫助的，但對於再次到訪的用戶則可以大幅提升載入速度。
同樣地，很多市面上的插件都提供網頁Caching的功能。例如筆者使用的W3 Total Cache，或者WP Rocket等。
如果你負責設計網頁，又希望自己的瀏覽器可以馬上看見網頁設計改動後的模樣，你可以把瀏覽器中的Cache移除。每個瀏覽器清除Cache的步驟都不一樣，因此你需要搜尋自己瀏覽器的相關指示。
提示：Chrome 的用戶可以按Ctrl+F5直接繞過瀏覽器的Cache來載入網頁，這樣你便可以看見最新的網頁版面了。
其他方法
提升網頁速度的方法還有千千萬萬種。例如：使用CDN，挑選適合的寄存服務商等。筆者這篇文章只是涵蓋了較為容易實行的4個方法。因此如果你希望繼續提升網頁載入速度的話，不妨多看看其他網上內容。
Sparka Digital是位於香港的Digital Marketing Agency。提供廣告製作，廣告投放，社交媒體營銷，及網頁開發服務。如果你希望提升產品/服務銷量，或者遇到Digital Marketing的問題，歡迎找我們來聊聊！