「網站速度」決定你的網站是否會被Google推薦排名,你不重視,那Google就不會重視你

「網站速度」決定你的網站是否會被Google推薦排名

SEO優化幾乎是一個公開的秘密,網路上洋洋灑灑的教程,幾乎人人都可以做SEO優化,但是在網站載入速度才是真正考驗技術的時候,如何讓一個網站看起來擁有精緻的外觀又可以有迅雷不及掩耳的載入速度,Google在2010年就發過聲明,網站的速度與效能將會正式影響搜尋結果排名,網路速度屬於終至高強度的訊號,而訊號強度紙會被設定的越來越高,相對我們要越來越重視網路速度的優化,才能對應的上Google不斷提高標準的門檻。

善用Google Page Speed Insight來知道Google怎麼看待你的網站速度

這個工具是Google官方所開發的免費檢測工具,不用擔心一些外面不知名測網速網站有駭入網站的風險,畢竟每個人的手機、電腦、電信、所在的網路環境都不同,所以自己的體感速度不能做為依據,我們還是要以Google的判斷為主,才能確定我們的SEO優化是否有效果。所以接下來就教大家簡單使用這個小工具,一起來檢測一下自己的網站,並且與網站技術人員好好討論一下網站的優化方向唷!

1. 進入https://pagespeed.web.dev/ 輸入你要檢測的網址後點擊分析

輸入你要檢測的網址

2. 你可以選擇看[行動裝置]或[電腦]的檢測數據,按右邊的[展開檢視畫面]可以看到詳細數據。大家可以看到六個主要網站體驗核心指標,每個指標都有一個綠橘紅連成的長條圖,這個長條圖的數據皆為真實造訪網頁使用者所產生的資料。

網站體檢核心指標評估
網站體檢核心指標評估詳細資訊
  • Largest Contentful Paint(LCP):顯示最大內容元素所需時間,可反應出網站的讀取速度,簡單來說就是你的網站的第一個畫面內的最大的物件被呈現出來的時間為多久,Google建議 Largest Contentful Paint(LCP)最佳是在5秒以內。根據Light House的定義,Largest Contentful Paint (LCP)所測量的網頁元素可以是圖片、文字區塊、也可以是影片。Google將 Largest Contentful Paint (LCP)列為最重要的指標也是因為Google相信 Largest Contentful Paint (LCP)這樣的測量方式可以反應你的網站使用者體驗,如果你網頁的第一個最大物件Loading太慢的話,肯定對於使用者體驗是不好的。Largest Contentful Paint (LCP)的改善方法包括:減少伺服器的反應時間、改善網站資源的載入速度、優化會阻擋瀏覽器呈現網站物件的JavaScript/CSS(有些JavaScript或CSS會擋住瀏覽器呈現網頁上的物件,導致你網頁上的物件呈現較慢)
  • First Input Delay(FID):首次輸入延遲,反應網站互動體驗與速度的關係,使用者首次要與你網頁上的物件互動時,你的網站花了多少時間來產生相對應的反應,基本上只有分離式的點狀行為會被計算為『首次互動』,像是"點擊"便是點狀的行為,而滑鼠捲動、畫面的放大縮小這些是屬於連續性行為則不會被計算在 FID裡面。Google官方規範並建議 First Input Delay(FID)必須要在100毫秒(也就是1秒)以內。Google主張如果有使用者點擊了網頁上的元素,但網頁慢到根本幾乎沒有反應,讓使用者懷疑該連結是否失效、或懷疑網站是否有技術上問題,這樣的感受是非常不佳、對使用者體驗也很有害的。
  • Cumulative Layout Shift(CLS):累計版面配置轉移指數,反應網站的視覺穩定度,(CLS)是用來反應網站在Loading時的視覺穩定度,Google規範的分數是在1以內,如果你用這個工具測出來是高於0.1就是不及格的。動畫和過渡如果做得好,確實是一個在更新頁面內容時不讓用戶感到突兀的好方法。頁面內容突然發生意外偏移幾乎無一例外會造成糟糕的用戶體驗。但如果內容從一個位置逐步又自然地移動到下一個位置,這通常有助於用戶更好地明白當前狀況,並引導他們適應狀態之間的變化。佈局偏移只有在用戶並不期望其發生時才算是壞事。換言之,對用戶交互(單擊鏈接、點選按鈕、在搜索框中鍵入信息等)進行響應的佈局偏移通常沒有問題,前提是偏移發生的時機與交互時機足夠接近,使用戶對前後關係一目了然。
  • First Contentful Paint(FCP):首次内容繪製,首次內容繪製(FCP)指標測量頁面從開始加載到頁面內容的任何部分在屏幕上完成渲染的時間。對於該指標,”內容”指的是文本、圖像(包括背景圖像)、<svg>元素或非白色的<canvas>元素。是測量感知加載速度的一個以用戶為中心的重要指標,因為該項指標會在用戶首次在屏幕上看到任何內容時,在頁面加載時間軸中標記出相應的點,迅捷的FCP 有助於讓用戶確信某些事情正在進行。網站應該努力將首次內容繪製控制在8秒或以內。為了確保您能夠在大部分用戶的訪問期間達成建議目標值,一個良好的測量閾值為頁面加載的第75個百分位數,且該閾值同時適用於行動裝置和桌面設備。
  • Time to First Byte (TTFB):收到第一個數據的時間,就是當使用者的滑鼠點擊網站的那一刻開始,到接受到一個數據資料之間所等待的時間就稱之為TTFB,所以當你的網站TTFB時間越短,就代表你的伺服器響應速度越快,影響TTFB的三大因素:使用者傳送請求到主機的時間、主機接受請求抓取資料的時間、主機回傳資料給使用者的時間。因此當你的主機與使用者之間的網路連線如果不好的話,也會導致TTFB的時間過長的時間發生,所以建議選擇優質的虛擬主機、優質的DNS服務、使用緩存快取外掛,才能給使用者最好的網站瀏覽體驗。
  • Interaction to Next Paint (INP):與下一個圖像交互,交互是在同一邏輯用戶手勢期間觸發的一組相關輸入事件。例如,觸摸屏設備上的“點擊”交互包括多個事件,例如pointerup、pointerdown和click,所有這些都可能導致整個交互的延遲。INP不僅僅是關於第一印象。它涵蓋了從頁面開始加載到用戶離開頁面時可能發生的整個交互範圍。通過對所有交互進行抽樣,可以全面評估響應能力。這使得 INP 成為比 FID 更可靠的響應指標。最好將 INP 視為類似於Cumulative Layout Shift (CLS),因為它是一個在頁面的整個生命週期中不斷變化和更新的指標。與CLS一樣,您不希望在用戶離開頁面之前記錄INP值。

響應性指標適用於廣泛的用例非常重要。為確保你的網頁達到此目標,在現場記錄的頁面加載的第 75個百分位處測量的一個很好的閾值,行動裝置和桌面設備進行細分:

  1. 低於或等於200 毫秒的 INP意味著您的頁面具有良好的響應能力。
  2. 超過200 毫秒或低於500 毫秒的 INP意味著您的頁面的響應能力需要改進。
  3. 超過500 毫秒的 INP意味著您的頁面響應能力較差。
診斷效能問題
查看矩形式樹狀結構圖

從診斷部分都可以逐一展開看到問題細節,就可以再回到網站去找問題盡可能進行排除。

 

診斷項目
排除禁止轉譯的資源

大部分網站電腦檢測的分數都會比行動裝置來的高

桌面型的診斷畫面

使用Think with Google測試你的網站,獲得一份你的網站行動改善報表

這是專門為了行動版網站測試設計的一個報表工具,你只要輸入你的網址就可以寄送一份約17頁的pdf檔的改善資料到你的郵件信箱。

1. 進入https://www.thinkwithgoogle.com/intl/zh-tw/feature/testmysite/ 輸入你想要檢測的網址。

Think with Google輸入您的網域

2. 你可以看到你的網站在使用4G連線速度下測試結果是幾秒,若想要得到更詳細的資訊請按[取得完整報表]。

整個初步頁面評估

3. 依序填寫你的信箱,可同時寫多人,第二行是公司名(也可以填個人名字、代稱),第一個訂閱Think with Google寄送的電子郵件要打勾。點[取得完整報表],馬上就會收到郵件了。

立即取得專屬報表
您的報表已寄出

收到信件後直接打開就可以看到報告書,報告書會給你一些明確的指標,以及一些能夠協助改善的功能與額外工具,還有市場分析概要,讓你可以快速知道你哪裡不足,可以先處理哪個問題。

已收到報表郵件

Google認為

速度快的網站會在1秒內開始載入內容。

速度慢的網站則超過2.5秒才開始載入。

速度一般的網站平均在1到2.5秒內開始載入。

提升網站速度可帶來更多轉換並降低跳出率,個人化與貼近客戶需求的體驗是贏得客戶青睞的關鍵,讓客戶能夠在網站中流暢地採取重要動作,可吸引他們迅速完成轉換程序,了解如何方便使用輕鬆完成交易。

以下是為了能夠滿足段落所需的長度而定義的無意義內文,請自行參酌編排。

將網站載入時間縮短0.1秒,轉換率級可提升8%

你可以

  1. 更新你的圖片,試著縮減圖片檔的大小,讓圖片可以更快的載入,此外,在畫面外載入圖片也可以加快網頁速度。
  2. 清理你的程式碼,移除不必要的程式碼並壓縮所有的CSS和JavaScript,盡量提升網站載入和執行的速度。
  3. 加快速度並持續維持,當你的網站已經採用新的修正方法後,你仍應該持續測試和評估哪些做法有效,哪些需要改進,建議每季返回察看以監控成效。
  4. 善加利用CMS,使用CMS外掛程式來縮短網站載入時間,你就完全不需要寫程式。例如使用WordPress、Weebly、Wix等等。
  5. 運用漸進式網頁應用程式(PWA)提升網站載入速度,利用現代網頁設計技巧和API,打造出快速且可靠的行動版網站,可為使用者提供最佳瀏覽體驗。Google覺得PWA對於行動版網頁很重要,因為它不僅載入迅速,只需不到一秒,Google就是愛追求任何快的事物,網頁可以迅速與使用者進行互動,可動態回應任何輸入,回訪者幾乎可以即時載入不需等候,在網路不穩定也能運作,還可以完全離線作業,另外可透過手機主畫面進行存取,可全螢幕啟動,透過推波通知輕鬆接觸舊訪客,堪稱完美。

77%的智慧型手機消費者表示,如果業者的行動版網站或應用程式具有快速購買功能,它們會更願意向該業者進行購物。

如何讓你的更多客戶順暢地完成轉換?在報告書也有提供幾個建議工具可以協助你在網站上提供給你的客戶有一個流暢的轉換程序,大家可以在報告書中連結詳情。

  1. 註冊/登入與結帳一氣呵成,讓使用者能以Google帳戶登入,並使用自動填入功能,讓系統自動使用者已儲存的資訊已加快結帳速度。
  2. 改善網頁體驗,漸進式網頁應用程式(PWA)提供類原生功能、穩定性和可安裝性,讓你不受裝置與地點的限制觸及所有使用者。
  3. 提供便利的付款方式,結帳時放棄購買是轉換率低的主要原因之一,所以請務必讓使用者在行動裝置上也能輕鬆完成交易。
  4. 啟用深層連結,可利用Android和iOS適用的深層連結(分別稱做應用程式連結和通用連結),完美地連結網頁與應用程式頁面。

小編收到是17頁的報告書,它裡面會有很多連出去的瞭解詳情,會比較像一個公版報告書感覺。

採用下列系統專屬建議來改善網站速度

小編總結

相對來說我覺得Google Page Speed Insight會比Think with Google更直接看到數據,在網站架構上哪裡需要改進比較一目了然,但是我明白Think with Google是希望我能夠完全以一個行動版網站的角度去設計網頁,所以它會直接套很多工具給我,而不是站在我的網站的修改角度如何去改到他們的標準,所以覺得如果你目前是已經有一個網站,想要知道Google怎麼去看待你的網站,可以主要參考Google Page Speed Insight,並且盡可能按照建議去改善,而另外可到Think with Google取得一份建議報告,瞭解一下自己的網站跟他們理想的PWA版網站落差多遠,可以做為日後一個改進目標,我相信這份報告書還會再演變的,未來提供的資訊可能會更多更詳細,所以小編也會持續關注,也請大家持續關注此篇教學唷!