掌握核心網絡生命力:增強用戶體驗的指南

已發表: 2023-03-21

隨著電子商務繼續主導在線市場,企業必須在網站優化方面保持領先地位。 近年來出現的一個關鍵因素是 Core Web Vitals 的概念。 2020 年,谷歌為這些重要的網站元素建立了具體指標,為電子商務企業提供了更直接的途徑來提高網站排名。 但究竟什麼是 Core Web Vitals,企業如何優化它們以獲得最大影響? 在本文中,我們將仔細研究 Core Web Vitals 並分享優化它們的基本工具,以便您的電子商務網站在競爭中保持領先地位。

相關文章:企業主需要了解的關於核心網絡生命力的 7 件事

為什麼 Core Web Vitals 如此重要

1. Core Web Vitals 影響您網站的 Google 搜索排名

2. 它們對於提供出色的用戶體驗至關重要

3. 優化 Core Web Vitals 可以增加網站的流量和收入

優化 Core Web Vitals 對於在線商店所有者和開發人員提供最佳用戶體驗、在 Google 搜索結果中排名更高並最終增加收入至關重要。 這三個核心指標——最大內容繪製 (LCP)、首次輸入延遲 (FID) 和累積佈局偏移 (CLS)——基於網站的加載速度、交互性和視覺呈現。

通過確定這些指標的優先級,您的網站可以為客戶提供流暢、響應迅速且具有視覺吸引力的體驗。 在設計或優化您的網站時,不要忽視 Core Web Vitals,因為它們可能是良好和出色用戶體驗之間的區別,並最終影響您的收入。

什麼是 Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) 是衡量網頁最重要內容元素(例如圖像或文本框)加載時間的重要指標。 它是 Core Web Vitals 的關鍵組成部分之一,Core Web Vitals 是提供無縫用戶體驗所必需的一組指標。 優化您網站的 LCP 可以減少頁面加載時間並改善整體用戶體驗,從而增加客戶保留率和獲取率。

我們 Perspective 經常收到改進 Core Web Vitals 的 LCP 的請求。 您可以在下面看到我們為一位客戶所做的 Largest Contentful Paint (LCP) 優化示例:

1.優化前最大的Contentful Paint

2.優化後最大的Contentful Paint

另請閱讀:宏碁 vs 聯想 Chromebook:哪一款適合您?

Largest Contentful Paint 低的最常見原因是什麼:

1.服務器響應時間慢

2. 未優化的JS和CSS

3.資源加載慢

4.客戶端渲染慢。

如何增加 Largest Contentful Paint

Largest Contentful Paint Core Web Vitals

我們創建了一小部分優化方法,這些方法在我們的工作中不斷應用,因此我們建議如下:

1.刪除不用的JS代碼,最小化生產模式下的文件。

2. 最好在模塊(塊)中編寫 CSS 規則,這樣一些選擇器的樣式化不會阻止其他選擇器。 此外,我們建議避免製作一長串選擇器。 所有要測試的 CSS 文件或庫都應該存儲在本地,而不是通過 CDN 下載。

3. 壓縮圖像以加快加載速度並使用新格式。 例如,將 JPEG 轉換為 1/3 尺寸的 WebP,而不會降低質量。

4. 我們建議使用響應式圖片(鏈接)來優化圖片的下載速度和用戶體驗。 這裡有一點很重要。 img 標籤有兩個關鍵屬性:

1. src——表示原始圖片來源。 來自 src 屬性的圖像被搜索引擎掃描並考慮在排名中,因此有必要在此處指定最佳質量的圖像。

2. srcset – 允許您指定圖像的各種版本。 瀏覽器從 srcset 屬性中的圖像中選擇要加載和顯示的圖像,具體取決於運行它的桌面設備或移動設備的屏幕尺寸。

5.我們不建議在<img>標籤屬性中添加loading=”lazy”。

刪除惰性屬性以增加最大的內容繪畫

什麼是累積佈局偏移 (CLS)

Cumulative Layout Shift (CLS) 是一項重要的視覺穩定性指標,用於量化頁面加載期間意外佈局偏移的程度。 它是通過所有超過閾值 0.1 的佈局偏移分數的總和來衡量的。 隨著用戶體驗成為現代 Web 開發的中心舞台,改進 CLS 已成為企業的首要任務。 因此,客戶經常要求改進這一關鍵績效指標也就不足為奇了。

另請閱讀:2023 年真人娛樂場的增長

Cumulative Layout Shift (CLS) 不良的最常見原因是什麼

視覺穩定性指標對於確保流暢無縫的用戶體驗至關重要。 然而,視覺穩定性差可能是由多種技術因素造成的。 一些常見的罪魁禍首包括圖像和多媒體文件的大小、GraphQL 查詢和未優化的輪播。

圖像和多媒體文件的大小不正確

當圖像或多媒體文件沒有指定大小時,瀏覽器無法在加載項目時分配適當的空間量。 這可能會導致頁面佈局不斷變化,從而導致糟糕的用戶體驗。

未優化的 GRAPHQL 查詢

在漸進式 Web 應用程序 (PWA) 上加載圖像或 GraphQL 塊時,未能預留空間可能會導致頁面在加載後“跳轉”。 這可能會導致不良的佈局變化並對性能指標產生負面影響。

未優化的輪播

使用非平滑和非組合動畫的未優化輪播可能會觸發頁面佈局的重新計算,從而導致 Cumulative Layout Shift (CLS) 分數不佳。 雖然用戶可能幾乎察覺不到輕微的變化,但它會顯著影響頁面的整體佈局變化和視覺穩定性。

如何改進視覺穩定性指示器和 Cumulative Layout Shift

How to improve visual stability indicator and Cumulative Layout Shift Core Web Vitals

使用佔位符

實施佔位符是一種廣泛採用的技術,可以提高網站的感知性能。 佔位符用作視覺提示,指示下載正在進行並且站點正常運行。 圖像最有效的方法是設置高度和寬度屬性。

使用佔位符提高 Core Web Vitals 的性能得分

這種策略讓瀏覽器在完全加載之前為圖像保留必要的空間,防止意外的佈局變化。 下面是使用 img 標籤實現此技術的示例。

<img data-src=”image.webp” width=”380″ height=”120″ alt=”image”>

通過定義 height 和 width 屬性,瀏覽器可以為圖片分配空間,防止圖片加載時佈局發生偏移。 因此,用戶將體驗到更流暢、視覺上更穩定的瀏覽體驗。

FRONT-DASPLAY:SWAP

為了獲得最佳的 Cumulative Layout Shift (CLS) 分數,開發人員可以利用 font-display:swap 屬性在自定義字體文件完全加載之前以系統字體顯示文本。 所需 CSS 字體文件中的 font-face 規則應指定字體文件路徑並包含 font-display:swap 屬性。

以下是如何使用 font-display:swap 屬性定義字體規則的示例:

@font-face {Font-family: “Proxima Nova”;src: url(“../fonts/proximanova-regular.woff2”) format(“woff2”);font-display: swap;}

使用 font-display:swap 屬性,瀏覽器將立即以系統字體顯示文本,直到自定義字體文件完全加載。 這種技術可以防止意外的佈局偏移並提高頁面的視覺穩定性,從而帶來更好的用戶體驗。

另請閱讀:全球經濟狀況對加密貨幣價值的影響

CSS 變換

CSS 轉換功能是一種有影響力的工具,開發人員可以利用它來增強網站的性能和用戶體驗。 例如,使用 CSS 變換可以幫助緩解與加載圖像輪播相關的問題,從而帶來更快、更用戶友好的瀏覽體驗。

通過 GraphQL HTML 元素優化 CMS 塊的加載(尤其是在 PWA 項目上)時,建議使用固定高度設置 CSS 屬性。 這種方法有助於防止意外的佈局變化,並確保頁面在加載後視覺上穩定。

通過實施這些技術,企業可以提高 Core Web Vitals 分數,並提供更流暢、更愉快的用戶體驗。 在我們最近的一個案例中,我們通過在 CSS 文件中添加 font-display:swap 屬性、設置最小高度和優化字體加載 (@font-face) 顯著提高了 CLS 分數。

1. 核心 Web VITALS 優化之前的在線商店

2. Core Web VITALS 優化後的在線商店

什麼是首次輸入延遲 (FID)?

首次輸入延遲 (FID) 是衡量網站交互性的關鍵指標。 First Input Delay 衡量站點響應用戶與頁面的首次交互(例如單擊按鈕或在表單字段中鍵入)所需的時間。

在 Magento 2 中使用 FID

在 Magento 2 中,許多用戶交互都會影響站點的 FID,例如單擊實時聊天按鈕、將產品添加到購物車或完成購買。 如果這些交互沒有響應並且不向用戶提供即時反饋,則可能會導致緩慢且令人沮喪的用戶體驗。

為確保最佳用戶體驗,必須實現小於 100 毫秒的 FID 分數。 這可以通過各種優化技術來實現,例如最小化 JavaScript 執行時間、優化第三方腳本和優化服務器響應時間。 通過優化 FID,企業可以提供響應更快、更具吸引力的網站,讓用戶保持參與和滿意。

如何優化首次輸入延遲

任務分解

增強首次輸入延遲 (FID) 的推薦方法是將較長的任務劃分為更小、更易於管理的子任務。 冗長的任務會使主線程負擔過重,阻礙用戶輸入的處理和執行。 任何阻礙流程超過 50 毫秒的代碼段都屬於冗長任務。

確定 FID 需要在真實條件下進行測量,因為真正的用戶與網頁的交互對於獲得精確測量至關重要。

在真實條件下進行測試

要準確測量首次輸入延遲 (FID),建議使用專門的工具來衡量實際條件下的性能。 一些這樣的工具包括:

1. PageSpeed Insights測試;

2. Search Console(Core Web Vitals 報告);

3. Chrome用戶體驗報告;

由於 FID 需要用戶交互,因此在實驗室環境中進行測試是不可行的。 相比之下,現場指標通過分析用戶行為來捕捉真實世界的表現。 然而,總阻塞時間 (TBT) 是一種評估首次內容繪製 (FCP) 和交互時間 (TTI) 之間的時間的指標,可以在實驗室環境中測量,並且與現場條件下的 FID 密切相關。 TBT 還擅長識別與交互相關的問題。 因此,在實驗室環境中增強 TBT 的任何優化也將改善用戶的 FID。 Lighthouse 是一個可以有效衡量 TBT 的工具。

另請閱讀:構建自定義 Shopify 店面的分步指南

啟用按需下載

您可以使用第三方代碼來啟用網頁的按需下載。 例如,您可以啟用按需下載,以便頁面底部的橫幅或廣告僅在滾動到視圖附近時顯示。 主要思想是優先下載為用戶提供最重要價值的 Web 元素,而不是那些可以在線末尾下載的元素。

優化JavaScript

為了提高網站性能,刪除任何不必要的 JavaScript 文件至關重要。 一種推薦的方法是推遲 JavaScript 文件的下載,直到需要它們為止。 該技術最初使瀏覽器能夠獲取關鍵的 Web 元素,例如 HTML 和 CSS。 在此之後,可以評估腳本,從而促進更快的加載時間。 採用這種策略對於具有大量 JavaScript 擴展的網站特別有用,例如許多 Magento 商店使用的 Mega Menu 擴展。 這種技術允許網站所有者簡化加載過程並提供更高效的用戶體驗。 因此,刪除未使用的 JavaScript 是一項基本的優化技術,應該考慮提高網站性能。

更多改善核心網絡生命力的指標

More indicators to improve Core Web Vitals user experience audit

除了上述三個主要的 Core Web vitals 之外,還存在幾個補充指標。

First Contentful Paint(FCP)

First Contentful Paint (FCP) 是一個有價值的指標,有助於衡量頁面顯示其初始圖像或文本塊所花費的時間。 該指標包括 DNS 請求、服務器請求、服務器端操作和 DOM 主要呈現的處理時間。 雖然 DNS 和網絡速度等因素超出了我們的控制範圍,但減少服務器端任務的處理時間並優化樣式和腳本的加載可以顯著影響性能。 具體來說,Google 建議優先在網頁的頭部部分僅包含關鍵樣式,並在可能的情況下使用樣式標籤而不是鏈接標籤,以盡量減少不必要的服務器請求。

為了進一步提高網站性能,Google Analytics 提供了大量關於用戶行為和參與度的信息。 例如,通過使用用戶計時報告,網站所有者可以監控特定操作和事件的持續時間,包括頁面加載、用戶交互和其他自定義事件。 此數據可以幫助識別需要優化的網站區域並跟踪所做的任何更改的有效性。

速度指數指標

FCP 測量第一個元素顯示的時間,而速度指數 (SI) 指標通過考慮頁面對用戶完全可見所需的時間來捕獲網頁的整體加載速度。 它全面概述了頁面加載性能,並考慮了網絡速度和服務器處理時間的影響。 通過結合使用 FCP 和 SI,網站所有者可以獲得網站性能的全面概覽,並採取適當的措施來增強用戶體驗。

SI 考慮了影響網頁性能的各種因素,包括網絡速度、服務器處理時間和加載資源的大小。 該指標在加載過程中定期計算網頁的視覺完整性,並分配一個代表頁面速度的分數。 SI 分數越低,頁面加載速度越快,用戶體驗越好。

為了改進 SI,Web 開發人員可以使用各種優化技術,包括最小化 CSS 和 JavaScript 等外部資源、減小圖像大小以及利用瀏覽器緩存來加速資源加載。 通過使用 Google Analytics 和 WebPageTest 等工具分析 SI 分數,網站所有者可以識別需要優化的區域並進行更改以提高網站性能。 最終,通過提高網站性能和增強用戶體驗,網站所有者可以提高參與度、增加轉化率並發展業務。

與 Next Paint 的交互

Interaction to Next Paint (INP) 是衡量用戶與網頁交互和顯示視覺響應之間的時間的關鍵指標。 該指標與需要頻繁用戶交互的頁面特別相關,例如社交媒體平台和電子商務網站。 INP 提供對網頁響應能力的寶貴見解,並幫助確定需要優化以改善用戶體驗的區域。

INP 是通過選擇當前網頁訪問期間最近的用戶交互並測量網頁響應視覺更新所花費的時間來計算的。 此更新可以包括各種更改,例如新圖像或文本塊的外觀、元素的位置或大小調整或複雜動畫的執行。 通過測量用戶交互和視覺響應之間的時間,INP 可以對網頁的感知性能提供有價值的見解,並幫助確定需要優化的區域。

為了改進 INP,Web 開發人員可以實施一系列優化技術,例如盡量減少 JavaScript 的使用以及減小圖像和視頻的大小。 此外,利用 Intersection Observer API 和 Web Workers 等現代 Web 技術可以通過卸載資源密集型任務和減少主線程上的工作負載來幫助提高性能。

另請閱讀:法語翻譯將如何對您的業務產生積極影響?

第一口時間 (TTFB)

首字節時間 (TTFB) 是頁面性能的重要指標。 它表示發送請求後服務器接收第一個數據字節所花費的時間。 TTFB 值受多種因素影響,例如網絡延遲、服務器處理時間和網站代碼的複雜性。 較低的 TTFB 值是可取的,因為它表示更快的加載時間和更好的用戶體驗。 網站的理想響應時間在 250 到 350 毫秒之間,而任何超過 500 的響應時間都被認為是較長的響應時間,會對網站的性能產生負面影響。

為了提高 TTFB 值,網站所有者可以使用各種工具和技術。 一種這樣的技術是查詢緩存,將頻繁訪問的數據存儲在緩存中,允許更快的訪問和檢索。 像 Varnish 這樣的工具可以充當服務器和用戶之間的緩存層,提高網站速度並減少服務器負載。 對於 PWA 項目,可以使用 Service Worker 來緩存 HTML 內容,當內容髮生變化時可以更新這些內容,提供對經常訪問的內容的更快訪問。

對於 Magento 項目,全頁緩存也可以提高 TTFB 值。 全頁緩存允許緩存整個頁面,減少服務器運行大量代碼和從數據庫檢索信息的需要。 啟用全頁緩存後,瀏覽器可以直接從緩存中讀取頁面,從而加快加載速度並改善用戶體驗。

因此,您不應該製作盡可能多的頁面和塊,而是盡可能減少它們。

推薦用於 Core Web Vitals 審計的工具

Lighthouse 是一個強大的網絡性能審計工具,可以幫助開發人員診斷網站速度和交互性問題。 它結合了現代網絡技術和最佳實踐,提供深入的網站性能分析,並提供可操作的優化見解。 通過運行 Lighthouse 審計,開發人員可以快速識別提高站點速度、交互性和其他關鍵指標的機會。

燈塔報告有幾個部分:

1.站點性能:分析站點下載速度

2. 特點:描述如何加速您的站點並提高性能。

3. 診斷:指出需要注意和糾正的地方

4. Progressive web程序:詳細審核

5.可用性:關於如何改進用戶體驗設計的部分

6. 最佳實踐:大多數網站可靠優化的最佳方法

在運行審核之前,您可以使用分析頁面加載按鈕來調整審核級別以適合您的興趣(性能、SEO、可訪問性等)。

審核開始後,您的審核報告將顯示在新窗口中。 它也可用於在 PageSpeed Insights 網站上進行測量。

不要忘記,Core Web Vitals 的指標將在過去 28 天內採用。

另請閱讀:最好的 Apple MacBook Air 和 MacBook Pro 筆記本電腦是什麼?

結論

總之,請考慮聯繫我們的 Core Web Vitals 審核團隊,以確保為您的在線商店提供良好的用戶體驗。 儘管 Core Web Vitals 指標可能看起來很抽象,但它們可以使您的網站更加用戶友好。 此外,這些指標與您網站代碼的功能有著明確的聯繫,使它們相對容易改進。

根據我們的經驗,優化這些指標可以快速提高排名和轉化率。 通過衡量 Core Web Vitals,您可以查明需要優化的區域並增強網站的整體用戶體驗。 因此,請不要猶豫,聯繫 Core Web Vitals 審核團隊,了解它對您的在線業務的積極影響!