Thumbnail of Sparka Digital's blog post about site speed optimization

4招輕鬆提升網頁載入速度

Table of Contents

網頁速度與用戶體驗

相信很多缺乏網頁開發經驗的人,都會碰到網頁載入速度過慢的問題。網頁載入速度與品牌的線上用戶體驗息息相關。假如網頁等了10秒依然沒有任何東西出現的話,不難想像瀏覽器另一端的用戶將會感到很不耐煩。

因此,一個好的網頁除了外觀吸引,容易使用外,還需要顧及載入速度,才能營造出良好的用戶體驗。如果你的網頁為了美化外觀而犧牲了其功能性,其實是本末倒置的做法。

載入速度對生意的影響

網頁速度過慢對銷量的負面影響,可以在兩個層面體現:

  1. 轉化率(Conversion Rate)
  2. 網頁流量(Site Traffic)

從轉化率的角度出發,外國的研究指出,網頁載入的首5秒之中,平均每多加1秒的載入時間,轉化率就會下跌超過4%。因此,過慢的載入速度會直接令你失去原本有機會消費的潛在客戶。

另外,從網頁流量的角度出發,Google一直以來都強調網頁速度是影響搜索排位的因素之一。雖然坊間就網速對搜索排位的影響有多大並沒有一致的結論,但從常理推測,在其他條件不變的前提下,Google必定會優先推薦用戶體驗較佳的網頁。因此,載入速度過慢或多或少都會降低網頁的自然流量(Organic Traffic)。

如何測試網頁速度

Google PageSpeed 是最常用的網頁測試工具之一。只需要輸入自家網站的URL,然後稍等一會,PageSpeed就會總結網頁的速度表現。

PageSpeed會顯示網頁的綜合分數,並列出有關網頁速度的問題,和建議的解決方法。用家亦可在上方選擇觀看行動版和電腦版的數據。

Google PageSpeed界面中,會顯示改善網頁的建議。左上角可以選擇行動版和電腦版的數據。

接下來,筆者將會介紹一些較為容易實行的方法來提升網頁的速度。

方法1:優化圖片

筆者在幫助客戶解決網頁速度的問題時,最常碰到的毛病就是沒有優化的圖片。

要優化圖片,可以從三個角度入手:

圖片格式

首先,如果你的照片並不需要透明背景,或者不需要壓縮後保持同樣質素的話,請盡量使用JPG來代替PNG的圖片來降低圖片的載入速度。

另外,如果你的圖片屬於向量圖的話,絕大部分情況都應該使用SVG格式。SVG比起JPG或PNG這些點陣圖(Bitmap)格式的圖片,除了佔用的空間大大減少外,SVG圖片無論在什麼大小的屏幕顯示,都不會出現起格/失真的問題。

不過,由於社交媒體多數禁止分享SVG格式的圖片(措施為了網站保安而設立,有興趣的讀者可以自行研究SVG的保安問題),因此筆者不建議使用SVG作為網頁文章的縮圖(Thumbnail)。

如果你利用瀏覽器放大下面的漢堡,左邊SVG的圖片不會失真,右邊PNG的圖片則會起格/變得朦朧。

同一個漢堡,SVG格式佔了4KB
同一個漢堡,PNG格式佔了23KB

調整圖片大小

如果你的圖片大小遠遠超過網頁實際需要的尺寸(例如以一張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提供的例子,說明檔案會如何被壓縮:

JavaScript code samples
壓縮前的程式碼(示範用)
Minified JavaScript code samples
壓縮後的程式碼(示範用)

筆者自己是使用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的問題,歡迎找我們來聊聊!

分享內容

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email