網站速度優化教學,改善 SEO 排名的重要因素
Ariane
By: Ariane

網站速度優化教學,改善 SEO 排名的重要因素

分類: 網站設計與架設 標籤: | |

隨著網路技術的發展,網站速度的優化也成為網站設計的重要元素。Google 是一間重視用戶體驗的公司,因此良好的用戶體驗是網站排名非常關鍵的標準之一,2020 年 5 月 28 日,Google 更是宣布將網頁體驗(Page Experience) 列為新的排名依據,並於 2021年 5 月上線。網站速度快,能有效增進用戶體驗,並改善網站排名,因此網站速度的重要性不容小覷。本文將先解說影響網站速度的因素和網路速度的重要性,而後再接著介紹自我檢測網站速度的小工具和網站速度優化的重點。

#1 哪些因素會影響網站速度?

網站速度是指從瀏覽器請求網站到完全加載所需的時間。一個網站的速度通常會受到以下幾個因素影響:

  • 伺服器回應時間:
    從請求網站到伺服器回應所需的時間,因此速度的快慢與伺服器的等級有關。
  • 下載時間:
    從伺服器回應到瀏覽器完全下載所需的時間,這與網站本身大小、所需資源、用戶網路速度有關。
  • 前端加載時間:
    從下載完成到網站完全顯示所需的時間,這與網站寫法和用戶設備的等級有關。

#2 網站速度為什麼重要?

網站速度影響的層面很廣,主要包含以下三點:

#2-1 影響網站 SEO 排名

Google 早在 2010 年時就發表過官方聲明,表示網站的速度和效能將正式影響搜尋排名,但由於 Google 本身從未公開過演算法,因此即使是在業界的我們也很難具體地描述速度對排名影響的程度多大,不過依據我們的經驗,速度的確會影響排名,尤其在手機的搜尋更是如此,但究竟是速度本身影響排名,還是速度影響了使用者的點擊與跳出率進而影響排名,就不能肯定了。

#2-2 影響 Google 的爬取額度(Crawl Budget)

當 Google 爬蟲造訪一個網站時,它會試圖獲取網站的所有內容,包括文字、圖像和JavaScript 程式碼。如果網站速度很慢,爬蟲可能無法在指定時間內獲取所有內容,而這可能會導致 Google 搜尋引擎無法獲得完整的網站資訊,或讓使用者僅能得到刪減過後的 Google 爬取頁面。

#2-3 影響使用者體驗以及轉換率

跳出率


網頁速度對使用者體驗和轉換率有極大的影響,根據 Google 的調查,載入網頁時間為 1 到 3 秒時,用戶的跳出率增加了 32%,而當載入網頁時間為 1 到 5 秒時,用戶跳出率的增幅竟高達 90%!而 Portent 的研究則顯示,載入網頁時間為 1 秒時,其用戶的轉換率為載入網頁時間 5 秒的三倍!因此,當用戶造訪一個網站時,網頁加載速度越快,用戶體驗就越好,轉換率也越高;反之,若網頁加載速度過慢,用戶可能會感到不耐煩,並在網頁加載完前離開網站,或是遇到圖像無法加載、JavaScript 程式碼失效等問題。這些都可能會降低用戶體驗,因而導致高跳出率和低轉換率

轉換率

#3 網站速度檢測小工具

讀到這裡,你是否想了解你的網站速度如何?那就不妨試試看以下兩種自我檢測的工具:

#3-1 基礎檢測工具:Google PageSpeed Insights

測試結果1

Google PageSpeed Insights 是一個由 Google 開發的免費工具,可幫助網站所有者分析、評估其網站的速度、性能和使用者體驗,並為其提供 1 到 100 分的得分(如下圖),同時提供一些改進建議,包括減少 HTTP 請求、壓縮圖像、壓縮 CSS 和 JavaScript 程式碼、使用瀏覽器快取等等,供網站所有者改善使用,以提高其速度和性能。

測試結果2

#3-2 進階檢測工具:WebPageTest

WebPageTest 也是一個免費的網站性能測試工具,可以測試網站在不同瀏覽器和地理位置下的速度和性能,非常適合國際品牌公司測試網站在不同國家的表現。WebPageTest 提供了詳細的分析報表,包括從 DNS 解析到網站加載時間、首次字節時間、加載狀態碼、DOM 準備時間、頁面完全加載時間等各種指標,還提供了有關網站加載的時間軸、圖表和數據表,可以幫助網站所有者找到網站速度和性能方面的問題,並確定問題的原因。

#4 如何優化網站速度

網路速度1

在了解了網站速度的重要性之後,我們必須在進行網站速度優化前,先評估自己的情況:

在評估完自己的情況,找到合適的方法和工具後,我們將接著介紹能著手進行網站速度優化的方向。

維護網站

#4-1 網站體驗三大核心指標

Google 於 2020 年提出了網站體驗核心指標(Core Web Vitals),以評估用戶在網站的瀏覽體驗狀況,其中包含了以下三大項目:

  • 最大內容繪製(Largest Contentful Paint, LCP)
    透過顯示最大內容元素所需時間,可以反映網站的讀取速度。當網站載入第一個畫面時,其中最大的元素所需時間即為最大內容繪製(Largest Contentful Paint, LCP)。以下圖為例,最大的元素即為左側的手提包圖片,而 LCP 即表示該圖片被瀏覽器呈現出來的時間。Google 建議 LCP 應該控制在 2.5 秒以內,才能達到最佳的讀取速度。
範例

  • 首次輸入延遲(First Input Delay, FID)
    首次輸入延遲(First Input Delay, FID)顯示當用戶首次與網頁上的物件互動時,網站產生相應反應的時間,此為影響網站互動體驗和速度的關鍵。舉例來說,當用戶欲瀏覽下一篇文章,在點擊網頁上的連結後,網站用以處理用戶需求的時間即為 FID,Google 建議 FID 最佳時間為 100 毫秒(0.1秒)以內。值得注意的是,只有分離式的點擊行為會被視為「首次互動」,而滑鼠捲動、畫面放大縮小等連續行為不會計入 FID 中。
  • 累計版面配置轉移(Cumulative Layout Shift, CLS)
    在載入網頁時,網頁會需要一段時間進行移動型排版,而網頁元素大小的變化,也會使網頁產生飄移感,此指標便是適用於反映網站在載入時的視覺穩定性。Google 將此指標的得分規範在 0.1 以內,因此若在 PageSpeed Insights 上測得的得分高於 0.1 ,即會被視為不及格。

#4-2 效能

Google 基於上述三大核心指標,針對網站效能部分提出的最佳化建議和診斷報告包含以下項目:

項目指標分類解決人員項目重要度
避免鏈結關鍵要求FCP, LCP一般操作人員
User Timing 標記和測量結果前端工程師
降低要求數量並減少傳輸大小 前端工程師
最大內容繪製元素LCP前端工程師
缺少包含 width 或 initial-scale 的 標記找不到任何 `` 標記TBT前端工程師
避免長時間在主要執行緒上執行的工作TBT前端工程師
排除禁止轉譯的資源FCP, LCP前端工程師
使用合適的圖片大小一般操作人員
延後載入畫面外圖片前端工程師
壓縮 CSSFCP, LCP前端工程師
壓縮 JavaScriptFCP, LCP前端工程師
減少無用的 CSSFCP, LCP前端工程師
圖片編碼有效率 (壓縮圖片)一般操作人員
提供 next-gen 格式的圖片後端工程師
啟用文字壓縮FCP, LCP伺服器管理者
預先連上必要來源FCP, LCP前端工程師
初始伺服器回應時間很短FCP, LCP伺服器管理者
避免進行多次頁面重新導向FCP, LCP前端工程師
預先載入重要要求FCP, LCP前端工程師
使用影片格式的動畫內容LCP一般操作人員
請移除 JavaScript 套件中重複的模組TBT前端工程師
避免將舊版 JavaScript 提供給新型瀏覽器TBT前端工程師
預先載入最大內容繪製圖片LCP前端工程師
避免耗用大量網路資源LCP前端工程師
使用有效的快取政策處理靜態資產伺服器管理者
避免 DOM 過大TBT後端工程師
JavaScript 執行時間TBT前端工程師
將主要執行緒的工作降到最低TBT前、後端工程師
載入網站字型時沒有任何文字消失FCP, LCP前端工程師
盡量減少第三方程式碼的使用量TBT前、後端工程師
使用門面元件延遲載入第三方資源TBT前、後端工程師
未延遲載入最大內容繪製圖片LCP前端工程師
避免大量版面配置轉移CLS前端工程師
使用被動事件監聽器來提升捲動效能前端工程師
避免使用 document.write()前端工程師
避免使用非合成的動畫CLS前端工程師
圖片元素具有明確的 width 和 heightCLS前端工程師

(以上項目的解決人員與重要度排序是依據 Procrustes 的執行經驗所得,是一個廣泛的平均認知,不一定完全適用於你的品牌。)

Google PageSpeed Insights 提供了詳盡的網站效能診斷,且針對每個診斷項目都有簡單的說明和建議的解決方式。以下僅針對我們認為較重要的項目說明,若想了解更多,可參考 Google PageSpeed Insights

  • 缺少包含 width 或 initial-scale 的 <meta name=”viewport”> 標記找不到任何 `<meta name=”viewport”>` 標記
    <meta name=”viewport”>不僅會根據行動裝置螢幕大小將應用程式最佳化,還能避免使用者輸入內容出現 300 毫秒的延遲。
  • 排除禁止轉譯的資源
    當 Google PageSpeed Insights 的報告出現「排除禁止轉譯的資源」時,表示網站內有過多的 JavaScript 和 CSS 程式檔案,因而干擾了首次畫面的顯示。此時,我們就需要延遲 JavaScript 和 CSS 程式檔案的顯示時間、壓縮或刪除不必要的 JavaScript 和 CSS 程式檔案。
  • 使用合適的圖片大小
    圖檔是網站中最常見的資源之一,使用合適的圖片大小可以降低文件的檔案大小,並縮短下載時間。
  • 延後載入畫面外圖片
    建議在所有重要資源載入完成之前,延遲載入畫面外圖片和隱藏項目,以縮短互動的準備時間。
  • 圖片編碼有效率(壓縮圖片)
    經過最佳化的圖片載入速度較快,且能節省使用者的行動數據用量。
  • 提供 next-gen 格式的圖片
    優化圖檔除了上面提供的方法之外,還有 Google 現今提倡的新世代圖片格式(next-gen),包含 WebP 和 AVIF 等圖片格式,不僅能提供更好的圖片品質,同時也能縮小圖檔大小,進而提高網頁的速度,但要注意的是,並不是所有的瀏覽器都支援這些格式的圖片,因此在使用前務必先考慮瀏覽器的兼容性。
  • 初始伺服器回應時間很短
    請確保伺服器能快速回應主要文件,因為這會影響到所有其他要求的回應時間。
  • 避免進行多次頁面重新導向
    重新導向會延遲網頁載入時間,因此我們應避免或降低網站進行此動作。
  • 使用有效的快取(cache)政策處理靜態資產
    用戶每次造訪一個網站,Google 就要去該網站重新爬取網頁內容、程式碼、圖片等所有的網頁資訊,非常耗時,但若能利用瀏覽器的快取功能,便可以減少下載時間、提升網站加載速度。
  • 避免 DOM 過大
    大型 DOM 會增加記憶體用量、延長樣式運算的時間,並產生費工的版面配置重排。簡言之,瀏覽器通常需要讀取完網頁所有元素,才能了解該網頁應如何運作,所以網頁元素愈多,瀏覽器就需要愈多時間讀取,進而阻塞了網頁操作的反應時間。
  • 將主要執行緒的工作降到最低
    建議你縮短剖析、編譯及執行 JavaScript 所耗費的時間,提供較小的 JavaScript 酬載可能會有幫助。
  • 盡量減少第三方程式碼的使用量
    第三方程式碼可能會嚴重影響載入效能。請盡量減少不必要的第三方供應商,並在網頁的主要內容載入完畢後,再載入第三方程式碼。
  • 避免大量版面配置轉移
    這些 DOM 元素對於網頁的「累計版面配置位移」(CLS) 影響最大。
網路速度2

#5 結論

雖然網站速度對用戶體驗和 SEO 排名都有重要的影響,本文也針對網站速度優化提供了一些自我檢測工具的資訊和可著手進行優化的方向,但這也只是影響 SEO 排名的眾多因素之一,做好網站速度優化並不能保證一定能提升排名。此外,做好網站速度優化,成功吸引用戶造訪我們的網站後,更重要的是要擁有好的網站內容,才能讓用戶留下來,畢竟用戶使用搜尋引擎不就是為了解決遇到的困難或問題嗎:)?

有想法嗎?我們很期待與你交流喔~

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

專欄主題

    • 數位轉型 cover
    • 數位轉型 page

    數位轉型知識手冊

    by Procrustes 作者群

    「數位轉型」並不是一個解決方案,而是一種企業經營的思維:「持續性的改善並迭代,最終才能創造高效率、高收益的企業體質!」,Procrustes 收錄各種對數位轉型有幫助的文章,讓你了解數位轉型的執行關鍵。

    • seo-guide-cover
    • seo-guide-page

    SEO 入門指南:全面掌握 SEO 基本知識

    by 賴彤兒(Tony)

    此指南以深入淺出的方式整理所有 SEO 相關知識,並以合理的結構整理,讓你能在短時間內掌握 SEO 龐大的知識體系,是你進入 SEO 領域最好的入門磚。

更多優質文章