Blazor Server 與 CLS：Google 搜尋排名的潛在隱憂

| .NET | 2 Reads

Copyright Notice: This article is an original work licensed under the CC 4.0 BY-NC-ND license. If you wish to repost this article, please include the original source link and this copyright notice.
Source link: https://v2know.com/article/1172

前言

最近我在 Google Search Console 的 Core Web Vitals 報表中，發現大量頁面被標示為「CLS 表現不佳」。這讓我開始深入探究自己的網站是否因為使用 Blazor Server 框架而導致 Cumulative Layout Shift（CLS） 分數過高，進而影響 SEO 排名。

本文將記錄我針對這個問題的調查過程與結論，並說明：

  • 為什麼 Blazor Server 可能導致 CLS 問題

  • 我的網站中實際引發 CLS 的因素

  • CLS 是否真的會影響 Google 搜尋排名

  • 是否一定需要優化這些問題

什麼是 CLS？

CLS（Cumulative Layout Shift） 是衡量頁面在載入過程中視覺元素是否突然跳動的指標。
Google 將 CLS 納入 Core Web Vitals 之一，認為它反映了使用者對網站的第一印象與可用性。

良好的 CLS 分數應小於 0.1，而超過 0.25 就會被視為「差」。

我的網站為何 CLS 過高？

使用 Blazor Server 的潛在風險

一開始我以為只是廣告或圖片尺寸沒設定，但深入分析後發現，Blazor Server 本身的架構就容易導致 CLS 問題。這是因為：

  1. 首次畫面是空的：Blazor Server 採用 SignalR 建立連線後才會回傳內容，因此初次載入常見「白屏」或瞬間畫面跳動。

  2. 畫面是逐步 patch 出來的：元件會一批批更新，而不是一次完整載入，會造成 DOM 元素延遲出現或重新排列。

  3. 圖片與字型通常延遲載入：若圖片未指定尺寸或使用動態路徑，會在載入後打亂排版。

這些問題本身就容易使 CLS 偏高。

我的實作細節進一步加重 CLS 問題

靜態檢查我的 Blazor Server 程式碼時，發現以下會加重 CLS 的因素：

✅ Google 自動廣告（Auto Ads）

在 FrontendLayout.razor 中載入：

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxx"
        crossorigin="anonymous"></script>

這段會自動插入廣告容器，但不保留空間，導致內容被推擠。

✅ JavaScript DOM 操作

在文章頁面載入後，會透過 JavaScript 修改 DOM，包括：

  • 將 <table> 包進 .table-scroll 容器

  • 移除圖片 height 屬性

  • 加上程式碼高亮與複製按鈕

  • 修改 <time> 標籤內容

這些操作都是在首次渲染後進行，會改變元素位置或尺寸，導致版面跳動。

✅ 圖片沒有設定尺寸

我一度以為讓圖片 height:auto 就沒事，但其實如果沒指定寬高占位，瀏覽器無法在載入前預留空間，也會導致 CLS 上升。

那 Blazor Server 框架本身會導致高 CLS 嗎？

這問題的答案有兩個層面：

  • 理論上：Blazor Server 並不「強制」導致高 CLS。只要你處理得當，仍可達到良好表現。

  • 實務上：Blazor Server 確實容易出現高 CLS，因為它的動態 patch 機制與 SignalR 延遲渲染，讓畫面容易「突變」。

也就是說，如果你沒有提前預留圖片區塊尺寸、使用 Skeleton UI、或靜態渲染關鍵元素，那 Blazor Server 就很容易讓 CLS 過高。

Google 官方是否明確表示「CLS 會影響 SEO 排名」？

✅ 是的，CLS 會影響排名，但有前提：

根據 Google Search Central 的官方說法：

  • Core Web Vitals 是搜尋排名因素的一部分。

  • CLS 屬於 Page Experience（使用者體驗）指標之一。

  • 當內容品質相近時，CLS 表現佳者排名會更高。

⚠️ 但 CLS 不是唯一排名因素

內容品質仍然最重要。若你網站內容很強，就算 CLS 稍微差，也仍可能保持好排名。但如果和競爭對手內容品質差不多，而你的 CLS 很糟，那你的頁面很可能就會被擠下去。

那我可以不去管這些 CLS 問題嗎？

如果你網站內容完全沒競爭對手（例如內部系統、稀有專業知識等），CLS 暫時不是問題。

但如果你希望：

  • 排名穩定、上升；

  • 網頁載入體驗更佳；

  • 降低跳出率、提升轉換率；

那麼改善 CLS 絕對值得投資。

結語

Blazor Server 是一個強大的框架，但其預設行為確實容易導致 CLS 問題。若你像我一樣同時使用自動廣告、DOM 動態操作與圖片不設尺寸，那 CLS 高分簡直是「預定義結局」。

未來我會進一步調整：

  • 預留廣告與圖片空間

  • 優化首次渲染與 Skeleton UI

  • 減少 DOM 初始修改

希望這篇文章對同樣使用 Blazor Server 的開發者有所啟發。

如果你也遇到 CLS 過高，或者想知道怎麼優化自己 Blazor 頁面的 Core Web Vitals，歡迎留言討論或分享經驗。

This article was last edited at