如何測量和優化最大的內容繪畫以獲得卓越的用戶體驗

已發表: 2022-02-16

談到在線成功，有很多方法可以實現。 優化的用戶體驗就是這樣一種方式。 谷歌將使用不同的用戶體驗和相關指標來對網站進行 SEO 排名。 它繼續生產多種工具來提高 Web 性能。 我們將在下面介紹 Google 希望改善用戶體驗的一些方法。

什麼是 Google Core Web Vitals？

在最近嘗試修改衡量標準並理解什麼是體面的用戶體驗時，谷歌調整了頁面的指標。 這些標準化指標被稱為核心網絡生命力，有助於對您網站上的真實用戶專業知識進行評級。

什麼是最大含量的油漆？

首先，讓我們看一下最大內容繪製（LCP）。 它是核心網絡生命體徵指標之一。 它測量視口中最大內容組件的加載時間，因為它變得可見。 TTFB 和 First Contentful Paint 等替代指標共同促進了實時頁面體驗，一旦頁面對用戶變得“有意義”，它們就不會出現。

通常，除非頁面上最重要的組件完全可見，否則頁面可能無法為用戶提供足夠的上下文。 因此，LCP 代表了用戶的期望。 作為一項核心 Web Vitals 指標，LCP 佔性能得分的 25%，這就是為什麼它是最重要的優化指標之一。

檢查 LCP 時間

根據谷歌，最大內容繪製的部件類別是：

  • <img> 元素
  • <svg> 元素內的 <image> 元素
  • <video> 元素（使用海報圖片）
  • 具有通過 URL 函數加載的背景圖像的元素
  • 由文本節點和/或其他內聯文本元素組成的塊級元素

LCP 如何測量？

當然，有多種方法可以測量網頁的 LCP。 最簡單的方法是使用包括 Lighthouse、PageSpeed Insights、Search Console 以及 Chrome 用戶體驗報告在內的可用平台之一。 例如，Google PageSpeed Insights 在其報告中指出了用於計算 LCP 的組件。

什麼是好的 LCP？

為了提供體面的用戶專業知識，您必須嘗試在您的站點上保持 2.5 秒或更低的 LCP。 您的大部分頁面加載應該發生在此閾值以下。 現在我們都知道 LCP 是什麼以及我們的目標應該是什麼，讓我們來看看增強 LCP 的方法。

（請添加名為 Majority of pages must load at an LCP of 2.5 seconds or lower.jpg 的圖片）

如何優化最大內容繪製 (LCP)

完全減少 LCP 的基礎系統是減少下載到用戶設備上的數據，減少管理內容所需的時間，並確保無縫的用戶體驗。

優化你的圖片

在大多數網站上，首屏內容通常包含 LCP 所需的超大圖像。 它可能是英雄形象、輪播或橫幅。 您必須優化這些圖片以獲得更強大的 LCP。

要優化您的圖片，您必須使用 ImageKit.io 等第三方圖片 CDN。 使用第三方圖片 CDN 的好處是，您只需針對您的實際業務，將圖片優化留給圖片 CDN。

響應式圖片的實時轉換

谷歌幾乎對所有網站都使用移動優先劃分。 這就是為什麼有必要針對桌面移動設備優化 LCP。 每個圖像都必鬚根據佈局的需求縮小。

例如，您希望商品詳情頁面上的圖片尺寸較小，而產品詳情頁面上的圖片尺寸較大。 這種調整大小可確保您似乎沒有使用超出該確切頁面所需的任何額外字節。

緩存圖片並提高交貨時間

圖片 CDN 使用內容交付網絡 (CDN) 來交付照片。 使用 CDN 可確保圖片從附近位置加載，而不是從可能位於世界另一端的服務器加載。

預加載重要資源

在某些情況下，如果影響 LCP，瀏覽器可能不會加載視覺對象。 例如，折疊頂部的橫幅圖像可以被視為 CSS 文件中的背景圖像。 由於瀏覽器在下載 CSS 文件之前不會知道圖像的相關信息，因此它不會加載它。

現在，如果您問“如何預加載最大的 Contentful 繪畫圖像？”，答案很簡單。 您可以通過使用帶有 rel=“preload”屬性的標籤將它們預加載到超文本標記語言文檔的頂部。

雖然您可以在文檔中預加載多個資源，但您必須將其限制為首屏圖片或視頻、頁面範圍的字體文件或基本的 CSS 和 JS 文件。

減少服務器響應時間

如果您的服務器加載時間比正常情況要長，那麼在屏幕上加載頁面所需的時間就會增加。 它與 LCP 一起對每個頁面速度指標產生負面影響。 為了提高您的服務器響應時間，您可以：

  • 分析和優化您的服務器
  • 使用內容交付網絡
  • 預連接到第三方來源
  • 使用 service worker 提供內容緩存優先
  • 壓縮文本文件

改善客戶端設備響應時間

如果您的頁面需要很長時間才能加載，它可能會讓潛在客戶感到反感。 幸運的是，您可以採取一些措施來確保其最終正確加載並創建無縫的用戶體驗。 這包括：

  • 內聯基本 CSS
  • 縮小並壓制內容
  • 針對客戶端渲染優化 LCP
  • 使用服務器端渲染
  • 使用預渲染

LCP 已成為與用戶體驗和旅程密切相關的重要搜索排名因素。 因此，如果您經營網絡業務，則必須優化這些組件以確保努力取得成功。

作者簡介

Ghia Marnewick 是一名作家、社交媒體經理和數字經理。 她為 Aumcore 撰寫內容，並熱衷於尋找與世界共享信息的新方式。