數位行銷
一. PageSpeed Insights (PSI) 和 SEO 有沒有關係？
當然有，而且是密不可分的關係！
事實上，Google 的官方文獻中多次強調網站效能（包括速度和使用者體驗）對 SEO 具有重要影響。
說明如下：
1. 網站體驗核心指標（Core Web Vitals）:
Google 在其官方網站上明確提到，
核心網站指標（如 LCP、FID 和 CLS）是衡量網站使用者體驗的重要標準，
並且這些指標對於網站排名有影響。
PageSpeed Insights 是測量這些指標的工具之一。
2.網站效能與排名:
Google 的搜尋引擎優化指南中提到，
網站的效能影響用戶體驗，從而影響搜尋排名。
網站加載速度、響應時間和流暢度等都會對網站的 SEO 表現產生影響。
3. Google 的發表:
Google 曾經在BLOG和相關文章中提到，
良好的網站速度和使用者體驗是提升排名的關鍵因素。
PageSpeed Insights 提供的數據和建議有助於網站改進這些方面。
二. 什麼是 Google PageSpeed Insights？
Google 的 PageSpeed Insights (PSI) 就像一位默默無聞的好幫手，
提供我們一個免費的工具來分析網頁在手機和桌面上的表現。
它給我們的，是一份充滿價值的報告（也就是網站體驗核心指標），幫助我們評估用戶的體驗如何。
這個工具會給我們一個從 0 到 100 的分數，高分通常意味著網站在速度和效率上已經做得相當不錯了。
PSI 使用 Lighthouse（這個開源的自動化工具）來分析網頁的效能和品質，
然後根據這些數據，提供一些改進的建議。
這些建議告訴我們如何讓網頁更好，更快，更適合每一位等待的用戶。
三. 如何使用 PageSpeed Insights ?
請點擊以下網址
https://pagespeed.web.dev/?hl=zh-TW
輸入網址，再點擊【分析】按鈕，靜待結果的揭曉。
結果會分為「行動裝置」和「電腦」兩個部分，
通常我們會以行動裝置的報告為主，
因為 Google 的自然排名是以手機版網站作為主要參考的。
根據 Google 的標準，分數 90 分以上是很棒的，
50 到 89 分則需要改進，
而低於 50 分則被認為是不佳的。
如果網站多數頁面分數都低於 90 分，
那代表你的用戶體驗並不好，
甚至對 SEO 造成負面影響。
但也不要太執著於追求每一頁的完美 100 分。
畢竟客戶最關心的不是你的分數，
而是能否快速找到他們需要的訊息或解決方案。
記住，分數只是工具之一，用戶體驗才是最重要的。
四. PageSpeed Insights 分數如何影響 SEO？
Google 並不會直接用 PageSpeed Insights (PSI) 的分數來決定網站排名，
但這個分數的確與頁面加載速度有關，
而頁面加載速度是 Google 確認的排名因素之一。
當網頁加載速度慢時，用戶會感到沮喪，進而離開你的網站。
而如果頁面加載迅速，用戶更可能停留並與網站互動，
這會帶來更好的用戶體驗。
良好的用戶體驗會獲得搜尋引擎的青睞，
因為搜尋引擎會獎勵那些提供優質頁面體驗的網站。
提高 PSI 分數有可能對搜尋排名產生很好的影響。
注意：雖然頁面速度很重要，但其他因素，如內容品質、反向連結和技術 SEO，才能在搜尋結果中獲得高排名。
五. 什麼是 網站體驗核心指標？
簡單的說，就是了解網站友好度的三個關鍵數據
網站體驗核心指標就像是網站的健康檢查，
它幫助我們評估網站的用戶友好度，
主要是根據加載時間、互動性和視覺穩定性來評估。
這裡有三個主要的指標：
1. 最大內容繪製（LCP）：
這個指標是測量網頁加載的表現，
特別是頁面上最大的內容元素變得可見所需的時間。
簡單來說，就是網站內容展示的速度。
2. 互動到下一次繪製（INP）
這個指標測量頁面的反應速度，
特別是頁面對用戶互動的反應快慢。
例如，當你點擊一個按鈕時，頁面多快能回應你的操作。
3. 累計版面配置位移（CLS）：
這個指標測量頁面的視覺穩定性，
就是頁面內容在加載過程中移動的程度。
它告訴我們頁面是否在加載過程中會讓內容亂跳。
還有一些值得注意的指標包括：
4. 首次內容繪製（FCP）：
這個指標測量頁面顯示第一個內容元素所需的時間。
5. 首次輸入延遲（FID）：
這個指標測量頁面對首次用戶互動的回應時間，
例如點擊按鈕或連結的時間。
（FID 曾經是三個核心網站指標之一，2024 年 3 月起由 INP 取代。）
6. 首次字節時間（TTFB）：
這個指標測量網頁伺服器的反應速度，
就是瀏覽器接收來自伺服器的第一個數據字節所需的時間。
六. 如何解讀 PageSpeed Insights 的表現分數？
Google PageSpeed Insights 會針對以下幾個類別給出分數：
1. 網站效能（Performance）：
這是 FCP（首次內容繪製）、速度指數、TBT（總阻塞時間）、LCP（最大內容繪製）和 CLS（累計版面配置位移）等指標的加權平均分數。
這個分數表示網頁在速度和優化方面的表現。
2. 無障礙功能（Accessibility）：
這個類別評估頁面在導覽便利性、圖片的替代文字、以及視障用戶的色彩對比等方面的因素。
3. 最佳作法（Best Practices）：
這個類別測量網頁是否有遵循網頁開發最佳作法。
包括使用現代網頁技術、優化代碼、確保安全連結、必要的 meta 標籤，及有效管理 JavaScript 等。
4. SEO（搜尋引擎優化）：
這個類別專注於頁面如何為搜尋引擎進行優化，考慮到的方面有 metadata（元數據）、結構化數據和手機友好性等。
當你繼續往下滾動，你會看到一個名為「診斷」的項目清單。
這裡會列出一些診斷項目，幫助你更深入了解網站的效能問題和改進建議。
七. 如何用 Google 的建議改善網站
這些來自 Google 的建議，是為了讓網站表現更出色。
它們可能會包括一些簡單的步驟，
比如優化圖片、簡化程式碼，或者縮短伺服器回應時間。
google 會列出網站在效能檢查中未能達標的項目，
還會告訴你如果修復這些問題，可能會帶來怎樣的改變。
請點擊每一個項目，深入了解問題的根源，以及如何去修正它。
當你按照這些建議進行了調整後，別忘了再重新檢測一次，
看看網站的表現是否有改善。
還可以在一天中的不同時間進行分析，有時即使沒有做出改變，
得分也可能會有所不同。
1. 使用 Google Search Console 改善網頁指標
登入 Google Search Console ，點擊左邊工具列「 網站使用體驗核心指標」，找出需要改善的網頁，依據指示進行改善
2. 排除禁止轉譯的資源、降低第三方程式碼的影響
這些阻礙渲染的資源會影響網頁加載的速度，
因為 CSS、JavaScript 和字型檔案等資源會迫使瀏覽器在顯示頁面之前先加載它們。
消除這些阻礙可以讓你的頁面加載更快，並提升 Google 網頁速度測試的分數。
按照以下步驟進行操作：
(1) 在 PSI 報告的「診斷」部分尋找「除禁止轉譯的資源、降低第三方程式碼的影響」，
(2) 點擊建議旁邊的箭頭，查看造成問題的資源清單，
這會顯示哪些資源阻礙了頁面的快速渲染，並提供潛在的時間節省（以毫秒為單位）。
(3) 確認阻礙渲染的資源後，下一步是判斷哪些資源對網站功能不是必需的，
以便可以移除、內嵌或延遲加載。
如果你對程式或網站開發不太熟悉，歡迎與益盛科技我們聯絡，我們會預估所需時程及報價金額。
3. 減少伺服器回應時間
也就是第一個位元組的時間（TTFB），
是指瀏覽器從伺服器接收到第一個位元組的時間。
如果 TTFB 太慢，會影響頁面加載速度，
因為這會延遲瀏覽器接收頁面內容的時間。
當用戶嘗試訪問一個網頁時，瀏覽器會發送網路請求來獲取內容。
伺服器接收到請求後，會送出頁面內容。
當瀏覽器等待伺服器回應超過 600 毫秒時，
Google PageSpeed Insights 會提供建議「減少初始伺服器回應時間」。
要減少伺服器回應時間，你可以嘗試以下方法：
(1) 選擇快速的網頁主機服務：
選擇益盛科技為您提供快速伺服器和低延遲的網頁主機服務商。
請參考我們以下的客戶，網站及流量移轉至益盛科技後都有顯著提升
(2) 簡化伺服器的應用程式邏輯：
優化程式碼並移除不必要的處理過程，以便更快地生成網頁。
(3)正確索引資料庫表：
改善查詢效能。
如果需要，考慮升級到更快速的資料庫系統。
(4) 提升伺服器效能：
增加更多隨機存取記憶體（RAM）和升級到更快的處理器，讓伺服器能更有效地處理更多請求。
(5) 使用內容傳遞網路（CDN）：
將網頁資源分佈在多個伺服器上，這樣可以縮短資源傳遞到用戶的時間。
4. 優化網站圖片
圖片（尤其是大型圖片）可能會顯著增加頁面載入時間。
Google 的網站速度測試報告會顯示頁面上所有未經適當調整的圖片，
並顯示目前的大小和潛在的節省量（以千位元組（KiB）為單位）。
調整圖片大小可以節省數據並改善頁面載入時間。
優化圖片有很多種方法，值得慶幸的是，這些方法相對簡單。
你可以：
- 使用像 TinyPNG 或 ShortPixel 這樣的工具壓縮圖片，再上傳到網站上。
- 根據每張圖片的需求選擇適當的圖片格式（JPEG、PNG、GIF 或 WebP），以優化文件大小並保持圖片品質。
- 使用“srcset”屬性，根據使用者的設備提供適當大小的圖片。
- 使用像 LazyLoad 或 WordPress、joomla 外掛來延遲加載圖片。
如果你使用的是 WordPress 網站，這些操作比較容易自己完成。以下是如何使用 TinyPNG 優化圖片的步驟：
(1) 登入 WordPress。 點擊“添加插件”。
(2) 然後搜尋“TinyPNG”。
(3) 找到插件後，點擊“安裝”，再點擊“啟用”。
(4) 註冊帳號後，前往“媒體庫”，選擇“批量優化”。
(5) 這個插件會顯示你已上傳的圖片數量以及你節省了多少空間。
5.避免鏈結關鍵要求：
即避免一個頁面需要下載多個檔案和資源才能完成。
假設你是某家寵物食品店的電商經理。
在貓咪食品登入頁面上，文字會在可愛的小貓圖片加載完成後才顯示。
為了讓這些圖片顯示，CSS 檔案必須先加載，依此類推。
每個請求都依賴於前一個請求，這樣就形成了一個連結。
如果其中任何一個資源無法加載，瀏覽器就無法呈現頁面，這會導致顯著的延遲。
要避免這些鏈結，你需要設定優先級。
這樣關鍵資源可以先加載，讓頁面顯示出來，而不那麼重要的內容則在之後加載。
一個有效的方法是將「async」和「defer」屬性加到網站的代碼中。
「async」屬性告訴瀏覽器在文件或資源在背景加載的同時，繼續加載和顯示頁面的其他部分。
「defer」屬性則指示瀏覽器在頁面對用戶可見之後再下載文件或資源。
這樣頁面會先顯示，然後再加載那些不那麼關鍵的內容。
如果你無法自己修改網站代碼，可以請益盛科技幫你添加「async」和「defer」的腳本標籤。
需要注意的是，使用這些屬性可能會對某些類型的Script造成問題。
實施之前務必要進行充分的測試。
6. 預加載關鍵請求
是指告訴瀏覽器優先下載關鍵資源，這樣最重要的文件能夠更快地加載。
關鍵請求是指頁面在早期加載階段所需的資源。
最常見的關鍵請求是字體，但這也可以應用於 JavaScript 文件、CSS 文件和圖片等資源。
這樣做的好處是，瀏覽器會先處理這些關鍵資源，
使得頁面在用戶訪問時能夠更快速地顯示重要內容。
如果網站是運行在 WordPress 上，
可以使用像是 Preload Images 和 Pre* Party 這樣的插件來支援預加載功能。
如果不是，建議請開發人員來識別關鍵請求，並在代碼中添加預加載標籤。
7. 減少 CSS 和 JavaScript
CSS 是網頁設計中不可或缺的一部分，
但 CSS 文件經常比實際需要的要大，這會拖慢網站速度。
同樣地，JavaScript 對於網站的功能也很重要，
但如果代碼未經過優化，也會顯著地減慢網站的速度。
減少代碼的大小——這個過程稱為「壓縮」——可以速度更快。
有許多工具可以壓縮代碼，例如 Toptal CSS Minifier、Toptal JavaScript Minifier 和 Minify。
也可以考慮使用設計輕量且快速加載的 JavaScript 框架或庫，如 jQuery 或 React。
如果網站運行在 WordPress 上，可以使用插件來協助完成這項工作。
常見的 CSS 和 JavaScript 壓縮插件包括 Hummingbird、LiteSpeed Cache 和 W3 Total Cache。
以下是如何使用 Hummingbird 來壓縮你的代碼：
(1) 登入 WordPress，從儀表板選單中選擇「插件」。
(2) 點擊「新增插件」，然後點選「啟用」來安裝 Hummingbird。
(3) 在儀表板選單中找到「Hummingbird」，並完成設定。
(4) 然後回到「儀表板」，繼續進行設定。
(5) 確認文件在 Gzip 壓縮部分標記為「啟用」
在 Hummingbird 插件中，確保你的文件在 Gzip 壓縮區域標記為「啟用」。
Gzip 壓縮可以進一步壓縮 CSS 和 JavaScript ，減少其大小，提高加載速度。
如果你使用的是 joomla 網站，joomla 本身就內建這個功能了，以下是相關步驟：
(1) 登入 JOOMLA，在左邊選單選擇「全站設定」 ->「系統」 -> 「伺服器」
(2) 將Gzip頁面壓縮選擇「是」
8. 延後載入畫面外圖片
另一種解決圖片相關的頁面加載緩慢問題的方法，是延後載入畫面外圖片，
可以優先加載那些可見的圖片，讓頁面加載得更快。
在網速較慢的行動裝置上，這種方法可以顯著縮短頁面的加載時間。
如果你使用的是 WordPress，可以使用像 Lazy Loader 這樣的插件來輕鬆實現延遲加載。
如果是使用joomla 4 ，則已經內建這個功能了。
9. 避免 DOM 過大
DOM 是一種樹狀結構，用來表示網頁的 HTML 結構。
當 DOM 大小過大時，可能會導致加載時間變慢，影響用戶體驗。
要減少 DOM 的大小，您可以採取以下幾個步驟：
(1) 請開發團隊移除不必要的元素和屬性：
清理 HTML 代碼，刪除未使用的 JavaScript 或 CSS 文件。
(2) 使用伺服器端渲染 (SSR)：
在將頁面發送到客戶端之前，先在伺服器上渲染頁面。
(3) 避免使用大多數視覺化頁面建構器：
這些工具常常會生成過於冗長的 HTML 代碼。
將文字粘貼到所見即所得 (WYSIWYG) 頁面建構器中後，
須記得清理不必要的樣式語法。
(4) 尋找程式碼乾淨的主題和外掛：
選擇程式碼簡潔的主題和外掛來減少 DOM 大小。
(5) 使用工具如 Google 的 Chrome DevTools：
這些工具可以幫助您分析 DOM 大小並找出需要改進的地方。
10. 修復多重頁面重定向 Redirect
重定向就像是把流量從一個 URL 轉送到另一個 URL 的小幫手，
但這個過程可能會拖慢你的網站速度。
多個連續的重定向，這些就叫做重定向鏈。
當舊頁面被刪除，新頁面取而代之時，這些問題就會出現。
原始 URL 和最終 URL 之間，可能會有好幾個中間頁面，這樣的連鎖反應會讓網站變得更慢。
Google 允許最多追蹤 10 次重定向，
但為了提升 PageSpeed Insights 分數，
最好還是保持網站的結構簡單。
獲取網站重定向概覽的最簡單方法是使用像Site Audit 這樣的 SEO 工具。
點擊「issues」標籤，並在搜尋框中輸入「redirect」。
然後，點擊「# redirect chains and loops.」。
它會顯示一份報告，其中包含頁面清單、其重定向類型以及重定向的數量。
如果你發現了重定向鏈，請登入網站後台修正它們。
記得刪除不必要的重定向，並設定新的重定向，將流量直接從原始頁面引導到當前頁面。
許多免費的 WordPress 插件（如 Easy Redirect Manager、Redirection 和 Simple Page Redirect）可以修改或設定重定向。
以下是使用 Easy Redirect Manager 的步驟：
(1) 登入 WordPress，點選「插件」然後「新增」。
(2) 搜尋「Easy Redirect Manager」，然後點選「安裝並啟用」。
(3) 點擊「管理重定向」。
(4) 在「Redirect Rules」標籤中，輸入舊網址和你想重定向到的新網址。
(5) 點擊「儲存」。
而 joomla 有內建此功能，點選「系統」->「管理」->「重新導向」
它能將網站上已經不存在的頁面、網址，重新導向到其他相關聯且有效的頁面。
（當頁面刪除，更改別名、分類或其他因素，導致頁面或網址消失）
11. 避免過度使用第三方代碼
第三方代碼包括 scripts, pixels, plugins.，它們可能會拖慢頁面速度，
並對 PageSpeed Insights 分數產生負面影響。
第三方代碼通常來自其他公司，例如用於分析網站性能的工具或廣告追蹤器。
有些第三方代碼是必要且有用的。
例如， Google Analytics 來測量網站效能，或 Facebook 像素來追蹤廣告活動。
還有一些不再需要的第三方代碼，例如那些你不再使用的工具和平台。
應該定期審核網站上的第三方代碼，並刪除任何不必要的部分。
在 PageSpeed Insights 報告中，Google 會標示第三方代碼，包括傳輸大小和主線程阻塞時間。
特別注意灰色條中的公司名稱，這些是運行代碼的第三方公司。
Google 也會對這些公司進行分類（標籤管理器、社交、工具、分析），幫助你了解它們的用途。
記下任何認識或不再需要的公司名稱，並移除它們的代碼。
如果你希望更仔細地審核你的網站，使用 Site Audit 工具會是一個不錯的選擇。
這個工具能幫助你掃描整個網站，尋找超過 140 個技術和 SEO 問題，並生成一份詳盡的報告，指出所有需要改進的地方。
來看看怎麼做：
首先，打開這個工具並選擇你的網站。
在「Overview」標籤中，你會看到「Site Health」網站健康的指標。
這個指標以 0 到 100 的比例顯示你網站的健康分數，並告訴你網站的排名。
你還會看到網站上發現的「Errors」錯誤、「Top Issues」主要問題等的概覽。
接下來，點擊「Issues」問題標籤。
這個工具會顯示一份完整的「錯誤 Errors」、「警告 Warnings」和「通知 Notices」清單，這些都是需要注意的問題。
它還會突出顯示受影響的頁面數量。
點擊「為什麼以及如何修復 Why and how to fix it」來查看特定問題的詳細資訊，以及解決該問題的方法。
這樣可以幫助你找出並解決大多數影響網站整體健康和SEO的問題，還能改善PSI分數。
此外，Semrush還會顯示你隨時間的進展，像這樣：
可以設定自動化審核，以隨時掌握任何出現的問題。
八. 相關文章
SEO：電子商務 內容行銷 帶來 曝光率增加6倍，點擊率增加19倍
SEO 從零開始：打造月營業額100萬的 電商 網站策略大揭秘
網頁設計 問與答：
SEO 及 廣告投放 問與答 https://des13.com/faq/seo.html
網站建置 報價相關 https://des13.com/faq/quote.html
網站建置 技術相關 https://des13.com/faq/webtech.html
購物網站 網路開店 https://des13.com/faq/e-commerce.html
B2B形象官網建置 https://des13.com/faq/b2b.html
網站升級維護 https://des13.com/faq/upgrade.html
推薦閱讀：omo跨境品牌電子商務購物網站 全後台模組化形象官網
簡易電子書下載：一頁式網頁設計電子書
如果您喜歡我們的文章，歡迎分享！也歡迎查看我們的其他文章。如果有任何疑問也歡迎加line和我們聯絡
全後台模組化形象官網，符合各式商業模式與需求，請參考：https://des13.com/service/rwd.html
Written by Ring
作者：益盛科技 專案經理
通過Google Ads-Measurement Assessment
15年 網站專案管理及人員管理實務經驗。
具網站美編企劃繪製能力
具多媒體網頁設計與 RWD設計之實務經驗
