網站速度優化怎麼做?網頁效能測試3工具+5大優化網頁速度步驟!

網站速度優化怎麼做?網頁效能測試3工具+5大優化網頁速度步驟!
適文

適文

19 min read

2024-04-10更新

技術 SEO

# SEO優化

# SEO排名

# SEO做法

網站速度測試對SEO有多重要?網頁速度如何影響使用者?網站測試工具有哪些?本文將介紹LCP、FID、CLS網頁速度核心指標,並且分享網站速度優化5步驟及3種網頁效能測試工具,幫你的網站做網頁載入速度測試!

網站速度是什麼?網站速度優化重要嗎?Google怎麼看?

網站速度英文為Website Speed,指的是使用者進入網站後能順利瀏覽、點擊網頁、甚至與內容互動的時間指標。

研究如何提升SEO排名的人一定都知道,維持良好的網站速度幾乎是不可少的關鍵,但這說法來源可考嗎?其背後的邏輯概念又是什麼?讓我們聽聽Google怎麼說!同時也分別從「人」與「搜尋引擎」這2個面向來解釋網站速度的重要性。

(延伸閱讀:SEO是什麼?SEO優化怎做?SEO搜尋引擎最佳化完整教學

(一) 網頁開啟速度會影響SEO排名?原來Google早就證實了!

網站速度會影響SEO的消息並不是空穴來風,往回追溯到2010年,Google內部人員就已經明確對外宣稱他們將網站速度與效能加入了排名算法,原因無他,正是考量到網站使用者體驗[1]!

Google相信,網站速度會影響使用者諸多行為,而Section也根據這些影響進行了數據統計[8]:

網站速度如何影響使用者的行為?

  1. 影響使用者的瀏覽頁數:使用者在2秒的網頁加載時間,平均瀏覽了8.9個頁面;在7秒的網頁則平均只瀏覽了3.7個頁面。
  2. 影響使用者的跳出率:Section的數據顯示,2秒的平均網頁加載時間僅有9.61%的跳出率;3秒則達到13.0%,
  3. 影響業主的營運成本:根據估計,網站每延遲100毫秒就可能造成高達1%的損失,電商網站Adore Beauty經實測也得出「更快的網頁可增加16.5%的轉化率」成果。

除了做為「人」的使用者體驗會優化之外,其實在Google運作上也有諸多好處!

(二) 關於Google爬蟲的工作值:爬取額度 Crawl Budget

不論是上架新網站往新網頁,要開始競爭SEO排名前,都必須先經過Google搜尋引擎「檢索連結、網頁」並「將內容建立索引」,通常我們將負責爬取的機器人稱為「網路爬蟲或網路蜘蛛」。

爬蟲每天都有成千上萬的資料需要檢索,為了維護效率與公平性,Google會限制爬蟲在同一個網站爬取的時間,這個限制區間就是所謂的「爬取額度(Crawl Budget)」。

爬取額度Crawl Budget示意圖

你可能好奇,既然早晚都是要爬完那些網頁的,那為什麼不讓爬蟲一次完成?

試想,今天有一個超級大電商或媒體網站,一口氣新增了各種不同類型的大量內容並上架,如果要一次爬完,那不僅爬蟲跟主機都會不堪負荷,連帶也會壓縮到其他網站被爬取的機會,假如這個網站還不斷上架新內容,那主機豈不是要爆了?

為了避免這種狀況衍伸出系統過勞及分配不公的現象,Google決定設定爬取額度,以確保整體系統的運作能順利進行。

★正因為有爬取額度的限制,因此網站速度便會直接影響爬蟲爬取的快慢!

我們隨意假設爬蟲一次會在網站停留30秒,頁面1秒就能載入的網站,對比要花10秒鐘才能載入的網站,誰更具優勢也就不必明說了!

不過大網站或速度慢的業主也不用擔心自己的網頁就這麼被放生,爬蟲有自己巡視的一套循環,只要網站架構沒有問題,基本上反覆造訪後都可以把網頁檢索完成,只是時間上會比較晚一點而已。

但如果你的網頁有SEO排名需求,想要加快被爬取的速度,進而能早早被建立索引的話,可以優先考慮這2點:

  • 提升網站速度,增加爬取的效益
  • 1次不要新增太大量的內容,讓Google在時間內也爬得完

(三) 網頁開啟速度快就是一切?不!它只是其中一項指標!

關於這點,Google也給出了提醒,在同一篇聲明的尾端有提到:

雖然網站速度成為了排名其中1項依據,但它的重要性不如頁面的「相關性」[1]!

簡單來說,就算網站速度快到可以用0.01秒就載入頁面,但如果內容與使用者需求毫無相關,對SEO排名仍是毫無用處的!

找出適合網站的核心關鍵字長尾關鍵字,分析完使用者需求後並產出相關內容,這些是基本但重要性最高的部分,有了好的內容,網站速度才會是有效果的加分項。

(想了解關鍵字如何查找,可參考:鍵字行銷大補帖:概念/操作/排名優化完整教學!(附年度關鍵字排行榜)

至於要如何檢視網站速度,可以善用市面上許多的網頁測試工具!

How to test pagespeed?3種Web Page Speed Test 工具輕鬆上手!

雖然網站速度的快慢會影響使用者的行為反應,但實際上及不及格可不是使用者說了算,更不是用業主個人體感來判斷!想知道這項指標的數值,你需要專業的(至少是專門為此設計的)網頁測試工具協助。

(一) 使用線上Web Speed Test可以檢測什麼問題?

大部分的檢測工具在進行Webspeed Test時,可以幫忙從不同切入點分析是否合格,例如:

  • 網站內容哪些圖片沒壓縮導致檔案過大
  • 網站HTML、Javascript、CSS等程式檔案大小有沒有影響效能
  • 程式碼有沒有壓縮到最小的程度
  • 使用的中文雲端字體是不是檔案太大
  • 是不是為了追蹤網站行為而載入了過多的外掛系統
  • 確認內容傳遞網路(Content delivery network)能否正確執行並傳遞資料
  • 網站整體的載入時間加總多少
  • 分析包含很多頁面資訊的頁首
  • 有沒有JavaScript或CSS禁止轉譯(Render-blocking)的問題
  • 在各個區域檢查網站的效能,以及各種瀏覽器的渲染速度

假如這些點都在及格範圍,或者都有排除問題的話,基本上你的網站速度檢測成果應該是很良好的。

(二) 有哪些網路速度測試工具可使用?推薦選哪一種比較好?

因為越來越多人投入SEO,連帶重視網站速度的人數也提升,相對應的線上測試工具自然是琳瑯滿目,信手拈來就將近20個,不過我們真的需要這麼多種工具嗎?不同工具測出來的數值多少都有落差,那應該要相信誰?

如果你還沒有用順手的工具,也還不清楚什麼比較適合自己,建議你參考Google的建議,用PageSpeed、YSlow或WebPagetest就好囉!

Google推薦檢測網站速度的3種工具

1. PageSpeed Insights(舊名PageSpeed Tools)

PageSpeed Insights會依照Chrome報告中蒐集了28天的真實使用者體驗數據進行分析,將網站質量依照1-100分區別為「良好、需改進、較差」這3個等級。

  • 良好-90分以上:使用綠色圓圈表示
  • 需要改進-50到90分:使用琥珀色方塊表示
  • 較差-低於50分:使用紅色警告三角形表示

其中包含不同指標的性能,例如:First Contentful Paint、Largest Contentful Paint、Speed Index、Cumulative Layout Shift、 Time to Interactive和Total Blocking Time等。

2. YSlow

這項來自Yahoo的工具可以分析至少23種網站指標,業主可以根據結果與修改建議進行調整,簡單總結,YSlow有這5種特色:

  • 能根據實際使用者的數據對網頁進行評分
  • 能提供改進頁面性能的建議
  • 能總結並簡述頁面的組成
  • 顯示有與頁面有關的統計數據
  • 提供性能分析工具,包括Smush.it™和JSLint。

3. WebPagetest

同樣以能創造使用者更高質感體驗為核心的WebPagetest,在打造Web Speed Test工具時涵蓋了下列3項特色:

  • 測試網站在全球的用戶、現代設備和最新瀏覽器版本的真實體驗
  • 用影片的方式記錄用戶的視覺體驗與站點的技術測量,幫助業主更直觀看到頁面加載的方式
  • 使用 DNS、TCP、TLS等深度指標剖析網頁

(三) 挑選網站速度測試工具:符合需求最重要!

在Google官方內部人員對談的其中一支影片中,John Mueller 、Martin Splitt大意提到[2]:

所有工具的指標都是一種參考值,畢竟影響各個指標的因素有很多種,無法輕易單用一個數字代表一切,所以使用什麼工具其實都沒關係,只要符合你的需求就好,最重要的是提升使用者造訪網站的體驗,而不是一味追求數字。

如何優化網站速度?以網站使用者體驗為首要任務!

根據Google Search Console的數據統整,網站速度對使用者的跳出率有明確的比例可循[3]:

  • 如果網頁載入時間從1秒增加到3秒,跳出率就會增加32%
  • 如果網頁載入時間從1秒增加到6秒,跳出率就會增加106%

Google本身對網站速度的快慢定義也有梳理出實際的時間區段[4]:

  • 快:0~2.5秒
  • 普通:2.5~4秒
  • 慢:4秒以上

這時你已經可以透過工具測出自家網站的狀態了,但拿到報告後要看懂這些數據背後所代表的意義,必須要先了解指標的涵義,下段就為各位介紹幾項重要的檢測指標。

(一) 網站速度核心指標:LCP、FID、CLS

Google相當重視使用者的體驗,對此也不斷祭出新的調整,在2021年最新演算法中,Google宣布將LCP、FID、CLS等網站速度核心指標(Core Web Vitals)列入SEO搜尋排名成效的一部分,接者就帶你來看這些指標分別代表什麼!

★LCP(Largest Contentful Paint):最大內容繪製

LCP是以使用者為中心去測量感知加載速度的重要指標!

當你打開頁面時,網站載入那些首先映入你眼簾的形象文字、LOGO、圖片或影片等元素的時間就是LCP,該項指標會在頁面的主要基本內容加載完畢後進行標註[5]。

通常網站的加載速度壓在2.5秒以內,才會得到較為良好的LCP分數;2.6~4秒以下則為需要改善,4秒以上就會得到速度低落的結果了[3]。

★FID(First Input Delay):首次輸入延遲時間

FID是以使用者為中心去測量加載響應度的指標[6]。

當使用者第一次與網頁內的元素互動,例如點擊連結、按鈕、圖片、影片、視窗時,網頁給出回應的時間點就是FID的測量指標。

通常速度在100毫秒以下是表現良好,101~300毫秒可能會需要改善,一旦超過300毫秒,甚至更久,慢到使用者以為這網站壞掉,那就代表速度太過低落。[3]

★CLS(Cumulative Layout Shift):累計版面配置轉移

CLS是以使用者為中心去測量視覺穩定性的指標[7]。

當網頁第一時間呈現給使用者的文字、圖片、影片或連結、按鈕等元素,與實際加載完成的時間有落差,可能就會出現「跑版、位移」的狀況,這個落差就是CLS偵測的項目。

通常偵測到0代表沒有任何位移情形;如果出現正數,在0.1以下都算良好,0.1~0.25會需要改善,0.25以上就建議趕緊修正吧[3]!

從上述這3項指標都不難看出,使用者體驗真的是優化網站速度最重要的關鍵,所以若確定需要進行優化,一定要把這點放在心上。

LCP、FID、CLS的指標數據

(二) 運用5大網站速度優化步驟找回你的競爭力!

5大網站速度優化步驟

1.檢測網站速度、產出調查報告

使用順手或符合所需的網站速度檢測工具,輸入想分析的網站產出調查報告。

2.分析數據、找出問題點

了解指標的代表內容後,針對報告上的數據找出是否有需要改善的地方。

3.與相關人員討論如何解決

針對問題點找該項目的負責人,例如工程師或網站/圖片設計師、影音剪輯師等,協調出可以改進的方法,例如圖片、影片製作完需事先壓縮至多少大小、程式碼及技術如何調整等。

4.定案後進行調整

確認修改方式及內容後就選定時辰更新上去,盡量全面改善、優化到位。

5.持續檢測及追蹤網站狀況

調整完後可再進行網站速度檢測,若還有問題就持續調整,若一切安好只要定期追蹤,避免再度出現相關情形即可。

(三) 進行網站速度優化時容易產生的迷思

有個重點大家必須要明白,網站乘載越多東西,就越可能導致速度便慢;反之,想提升網站速度,需要割捨的項目也就越多!

但每個網站的性質與呈現都不同,如果為了追求最完美的數字,捨棄掉網站的靈魂與實用性,這無疑會讓自己陷入更深的僵局。

所以回到GOOGLE告誡大家的那句老話:不要一味追求最完美的數字,只要能讓使用者操作順暢,得到最大的滿足,業主是可以適當的在檢測數據及網站功能性中取得平衡的!

以上就是網站速度的相關資訊,如果你有其他指標或工具使用上的疑問,或者不確定自己的SEO報告該怎麼解讀,甚至希望專人為你分析,都歡迎點擊下方立即諮詢按鈕,Welly團隊會有專員為您服務!

參考資料

[1] Google Search Console:Using site speed in web search ranking

[2] Youtube Google Search Central:Site Speed: What SEOs Need to Know

[3] Google Search Console:網站使用體驗核心指標報告

[4] Think With Google:網站速度常見問題

[5] web.dev:Largest Contentful Paint 最大內容繪製(LCP)

[6] web.dev:First Input Delay 首次輸入延遲 (FID)

[7] web.dev:Cumulative Layout Shift 累積布局偏移 (CLS)

[8] Section:How Page Load Time Affects Bounce Rate and Page Views

適文

適文

創辦人兼執行長

曾在美國 LinkedIn 擔任軟體工程師,熟悉 AI、演算法與搜尋機制,回國後透過深入研究 SEO 優化,成功於 2021 年創立 Welly SEO,如今服務過 250+ 客戶,擁有在大型展覽、課程講授的豐富經驗 。

分享至

img_CTA

台灣最專業的 SEO 行銷團隊!

現在就與 Welly 一起將目標關鍵字攻上 Google 首頁吧!

其他主題

行銷理論

從行銷策略到多種行銷手法, 行銷人必學的理論文章以最淺顯易懂的方式呈現給你!

SEM & 廣告

SEM 是什麼?社群廣告如何操作? 想要自學投放廣告必看文章!

SEO 新知

Google 演算法更新、最新的 SEO 趨勢等, Welly SEO 都為你統整在這!

延伸閱讀
Hreflang是什麼?瞭解後設置多國語言網站再也不困難!
適文

適文

2024-04-12

Polly

Polly

2024-04-17

適文

適文

2024-04-12

適文

適文

2024-04-12

Kira

Kira

2024-04-12

適文

適文

2024-04-12

Polly

Polly

2024-04-12