如何優化網站速度？｜速度影響成因｜實際改善方法

更新日期： 2022 年 4 月 25 日

什麼是提高網站轉換率（例如訂購率、註冊率）最簡單的方式？

不是改善文案標題或改變轉換鈕的顏色，相反的，答案是提高網站的載入速度。

因為網站速度這件事的背後，代表它能提供更好的使用者體驗。

一份來自 Google 的研究表示，轉換率與網站載入所需花費的時間有著一定關聯。

該研究還表示，當使用者點擊進網頁時，若發生載入延遲的現象，將可能損失一半以上的潛在客戶。

網站速度與轉換率的關係

根據研究顯示，如果你的網站載入，所需花費的時間超過三秒以上。

有超過一半以上的使用者，會在看到該網頁前就先行離去。

如果你覺得 3 秒鐘還不夠久，你可以查看下方 Google 針對載入秒數，得出相對應跳出率的數據。

此外，Google 還針對 90 萬次的廣告點擊研究中，得出一個尷尬的數據。

大多數網站的著陸頁平均載入時間，約為 22 秒鐘。

此數字比使用者願意等待的時間，還遠遠超過七倍以上。

除此之外，SOASTA 這間公司經由機器學習此方法。

針對載入時間、網站大小、轉換率這三者的關係，給出更詳細精準的數據。

他們表示：

「若網頁的元件數量，從 400 個增至 6000 個，將會導致轉換率下跌 95%」

白話文來說，網頁含有越多數據或元素，將導致網站速度變更慢，從而導致轉換率下跌。

常見的元件有「文字」、「圖片」、「影音」等等。

當一個網站載入速度變緩慢，要直接找出確切的原因並不容易。

雖然我們可以掃視內含的圖片與文字，但卻無法看出 JavaScript 程式問題，以及網站重新轉址的次數多寡。

幸運的是，有一個工具能幫助你了解，自己的網站速度到底如何，並找出問題癥結點。

什麼是 GoogleSpeed Insights？

Google PageSpeed Insight 是一種工具，讓你能快速簡單的檢測網站速度。

在查詢框內輸入網址並點擊「分析」，就能快速得到網站速度的報告。

該報告會基於以下兩種參數做為評估考量，同時還會提供完整的修正建議。

• 頭版區塊載入時間（above-the-fold）：當使用者要查看一個網頁時，該網頁載入最上方區塊的內容，所需花費的時間。

• 完整頁面載入時間（full page load）：瀏覽器載入完整網頁，所需花費的時間總長。

根據 Google 的說法，他們表示：

網站速度洞察報告，是檢測該網頁在手機裝置、電腦裝置的運作成效。

它會查看該網頁的網址兩次，一次是針對手機使用者，另一次則是針對電腦使用者

同時，網頁速度洞察報告，還會根據速度表現，從 0 至 100 給出一個對應分數。

分數越高，代表網站速度品質越好。

通常分數高於 85 分以上，代表成效表現良好。

但有一個問需要思考：「到底需要表現多好，才足以滿足使用者真正的需求？」

如何改善網站速度？

當你看到自己網站的速度報告，充滿了許多紅色與黃色的圖示。

這代表你的網站，有一些載入問題需要解決。

雖說 Google 此工具會描述出網站的問題，遺憾的是這些錯誤訊息，並不是很好理解。

因此，我們可以先從以下幾種方法著手改善。

避免網頁落地頁重新轉址

如果你的網頁尚未被設計成「響應式」網站，可能會使該頁面根據不同的裝置，將使用者導向不同的網址。

此種載入網址重新移轉的情況，將會使網站速度變非常慢。

我們以 example.com 此網址為例，可根據網站設計的形式，區分成三種不同的況狀。

• 最佳情況：example.com 採用響應式網站設計，無須轉址

• 中等情況：example.com 須轉址成 m.example.com，變相拖累手機板使用體驗

• 糟糕情況：example.com 須轉址成 www.example.com，再轉址成 m.example.com，非常緩慢的使用者體驗。

每當網站訪客需經歷一次網址重新定向，瀏覽器就會停止載入內容，導致花費時間增加。

為了避免這種情況發生，我們需要使用響應式網站設計。

以此確保使用者不論採用哪種裝置，都能保一定品質的使用者體驗。

將網頁檔案壓縮

在 2012 年時，瀏覽器載入一個網站所需下載的平均大小為 1.1 MB。

到了 2016 年時增加為 2.5 MB，又過一年後則上升 3.4 MB。

對網站主來說，「壓縮」讓網站體積變大的同時，又能保持良好載入速度的關鍵。

我們以蝦皮網站為例，點擊滑鼠右鍵，點選「檢查」→「network」，可以看到 size 一列。

我們以其中一份網頁 JavaScript 語法的檔案為例。

可以發現原始檔案 1.5 MB，但經壓縮後剩 380 KB。

透過壓縮，減少了接近 9 成的檔案大小。

因此可知，壓縮網站大小對於載入速度，絕對關鍵影響因素。

一般來說，能最有效壓縮網頁大小的方式，為端（伺服器）到端（瀏覽器）的 「HTTP 壓縮技術」。

此技術是利用伺服器在傳輸資料前，就會先將檔案壓縮至定位。

過程中，只須確保檔案穩定傳送到瀏覽器端。

等到瀏覽器接收到檔案後，再自行解壓縮呈現出來。

目前最常見的網頁壓縮技術，為「gzip 」應用最廣泛。

我們不需要從伺服器端，取得完整的網頁檔案。

相反的，只需要獲取檔案容量相較小的壓縮版本，即可藉此減少載入花費時間。

減少 CSS、HTML、JavaScript 檔案大小

若想提升瀏覽器載入網站的速度，我們可以移除不重要、多餘的程式碼。

除了親手改善較糟糕的程式碼，Google 還建議我們可以使用以下工具：

• HTML 優化工具：HTML mnifier
• CSS 優化工具：CSSNano、csso
• JavaScript 優化工具：Uglify、Closure Compiler

此外，你還可以有效利用 Google 的 AMP 計畫。

AMP 是 Accelerated Mobile Pages 縮寫，中文名稱為「手機加速行動網頁」。

它是一種針對手機使用者，特別開發的網頁設計框架。

當網站主套用此技術規範時，雖說可能限制網站功能，但會帶來有效的速度加速。

優化網頁頭版內容

說來奇怪，其實網頁速度須考量的點，不單單只有載入時間，還包括「感知效能」（perceived performance）。

WordPress 專家 Brain Jackson 在 KeyCDN 網站中，解釋道：

我們可以將「感知效能」一詞，解釋成「覺得網站載入需花費的時間」。

感知效能的重點在於使用者，而不是網頁測速工具。

因此「感知效能」跟「實際網站速度」兩者並不相同。

我們可以將「感知效能」想像成生理時鐘，網站載入時間則是客觀時數。

整體來看，兩者齊頭並進，但又並非總是如此。

為了加速感知效能，我們需要優先載入，對使用者重要的內容。

舉例來說，網站應優先載入首頁的文字，而非第三方套件軟體。

因此，當一個網站程式碼架構不良，它將讓使用者的感知效能變更糟。

如果當網頁載入最後一部分的元素，剛好又是訪客最想查看的內容。

使用者會覺得網站載入時間，將變得更久。

加快伺服器回應時間

伺服器回應時間，是指伺服器載入內容給使用者，所需花費的時長。

根據 Google 研究，以下是可能的成因

• 資料庫查詢
• 路由器緩慢
• 網站架構
• 函式庫
• CPU 資源不足
• 暫存不足

Raelene Morey 認為，糟糕的網站主機託管服務，是網站速度的主要殺手。

她如此告誡讀者：

若一個便宜的網站託管服務，願意提供每月 3.95. 美元，讓顧戶擁有無限的瀏覽量上限與空間，看起來似乎很划算。

但與其對應的代價，就是只有緩慢的網站速度，並常常在流量較高的時候網站當機。

如果你想要網站速度輕量化，並確保網站效能良好。

你需要去調查一個合適的網站託管。

如果你真的希望網站速度很快，可能會想要網站託管包不是存放在共用主機上。

最後，該作者測試了無數個網站託管服務，並最後選擇了 WP Engine。

該伺服器幫助她達到 Google 建議的「 低於 200 毫秒的伺服器反應時間」。

若你的網站速度緩慢，可以考慮學習她的方法，或升級你現有的網路託管服務方案。

清除禁止轉譯的 JS 程式碼

當瀏覽器從伺服器接收到網頁程式碼後，會將其進行版面配置、繪製、合成。

最後，將完整的圖像畫面呈現使用者。

我們將上述過程稱為「轉譯」，也由於此過程類似繪畫的技巧，因此也稱為「渲染」。

當網站使用 JavaScript 語法時，能夠產生具有互動性的網頁元素，並且支援一些強大的第三方網站套件。

但 JS 卻也有個問題，就是它可能導致瀏覽器停止解析程式碼。

若你在檢測網站狀況時，看到一則錯誤警告：「停止使用禁止轉議的 JavaScript 語法」。

則代表網站有一部分的 JS 程式碼片段，會阻止瀏覽器載入網頁頭版的內容。

例如第三方網站互動套件，就是常常造成此問題的主因。

我們可以透過以下方法，改善此問題：

利用瀏覽器的暫存機制

當網站完整載入給使用者前，瀏覽器與伺服器之間，需要提交多次的資源請求。

在這過程中，每新增一次資源請求，就須會花費更多時間。

「暫存」功能讓你的瀏覽器，能「暫時記住」曾載入過的特定網頁元素。例如標題、選單、商標等等。

當瀏覽器緩存越多網頁元素時，就能讓使用者花費越少時間，再次載入先前已轉譯的內容。

最後，就能使網頁速度變更快。

Google 建議網站內容，至少能讓瀏覽器保持至少一周以上。

至於對於一些基本的網頁配置，保持一年不更動是最好不過的事。

圖片優化

在一篇部落格文章中，Google 測試者特別警告網站主，應該了解圖片對於網站速度的影響。

內文寫道：

圖像元素如網站圖示、圖標、商標以及產品圖片，非常容易佔據網頁檔案，達到三分之二以上的大小。

當網頁的圖片檔案過大，就可能對於網頁速度，甚至是轉換率造成巨大的影響。

根據研究，一個含有許多圖片的網頁，相較於含有較少圖片的網頁，轉換率會下跌約 38% 的差異。

所幸，優化圖片是一件簡單的事情。

我們只要將 PNG 檔轉換成 JPEG 檔，就能輕鬆節省網頁的空間，以及載入所需花費的時間。

我們可以使用 Google 的圖片壓縮程式碼，如：Guetzli 以及 Zopfli，達到減少圖片大小的功能。

話說如此，在你開始選擇壓縮圖片的方法前，應該思考自己是否真的有那些圖片的需求。

反問：「那些圖片真的能增加網頁的價值嗎？或者其實並不需要他們？」

如果答案屬於後者，請將他們全部一起丟進回收桶，減少網頁的數據與時間吧！

問題統整