如何減少 WordPress 上的互動時間 (TTI)？

已發表: 2024-04-05

關注@Cloudways

您是否曾經造訪過一個似乎永遠無法真正進行任何互動操作的網站？

令人沮喪，不是嗎？

那麼，您可能只需要修復網站的互動時間 (TTI)。

TTI 表示使用者可以有效參與頁面、點擊按鈕、填寫表單或捲動而不會遇到延遲的持續時間。延長的 TTI 會對使用者體驗和 SEO 排名產生不利影響。

在本部落格中，我們將了解如何測量互動時間 (TTI) 以及減少互動時間以使 WordPress 網站載入速度更快的策略。

讓我們開始吧…

了解交互時間 (TTI)
互動時間和首次輸入延遲之間有什麼區別？
如何測量交互時間 (TTI)
如何監控互動時間（TTI）？
交互時間對效能有什麼影響？
是什麼原因導致 WordPress 上的互動時間 (TTI) 變慢？
如何縮短互動時間 (TTI)
Cloudways 如何減少 WordPress 上的互動時間 (TTI)？

了解交互時間 (TTI)

TTI 代表網頁完全互動的持續時間，這意味著使用者可以積極地與其元素互動，而不會遇到明顯的延遲。

TTI 包含多種因素，包括伺服器回應時間、腳本執行、視覺元素的呈現以及使用者裝置功能。因此，TTI 提供了對網頁效能的全面了解，而不僅僅是載入時間。

為了優化 TTI，網站管理員應專注於解決效能瓶頸、優化程式碼、確定關鍵任務的優先順序以及實施 Web 優化技術的最佳實踐。

加入超過 12,000 家喜愛我們託管 WordPress 託管的機構！

告別對內部 IT 團隊的需求。體驗閃電般快速的託管、專業的 24x7x365 支援以及客戶期望從您的代理商獲得的效能。

現在試試

互動時間和首次輸入延遲之間有什麼區別？

公制	互動時間 (TTI)	首次輸入延遲 (FID)	不同之處
定義	網頁變得完全互動所需的時間。這意味著所有主要資源都已加載，並且頁面可以快速響應用戶輸入。	使用者第一次互動和瀏覽器對該互動做出回應之間的時間。它測量使用者與其互動後頁面回應所需的時間。	TTI 著重於頁面對使用者互動的整體準備情況，而 FID 則專門測量使用者輸入和頁面回應之間的延遲。
意義	指示使用者何時可以有效地存取網頁並立即執行任務。	衡量與網頁初始互動期間的使用者體驗。	TTI 反映了網頁參與的準備情況，而 FID 則評估第一次互動期間的回應能力。
成分	TTI 考慮各種因素，例如 JavaScript 執行、渲染和資源加載，以確定頁面何時準備好進行互動。	FID 主要取決於使用者與頁面互動後瀏覽器的處理時間。它受到 JavaScript 執行和事件處理等因素的影響。	雖然這兩個指標都涉及 JavaScript 執行、渲染和事件處理，但 FID 特別關注使用者互動後的回應時間。
使用者感知	當達到 TTI 時，使用者會認為網頁已完全載入並準備好進行互動。	使用者在與網頁的初始互動過程中註意到延遲或回應問題，這可能會影響他們對其可用性的看法。	TTI 影響整體使用者體驗，而 FID 直接影響初始互動期間的回應能力感知。
測量挑戰	由於影響頁面準備情況的各種因素（包括非同步載入和依賴性），TTI 測量可能很複雜。	FID 測量可能會受到使用者互動時間和瀏覽器處理變化的影響，這使得準確擷取延遲變得具有挑戰性。	TTI 測量需要考慮整體頁面狀態，而 FID 測量需要擷取特定的使用者互動延遲。

如何測量交互時間 (TTI)

TTI 分數使用 HTTP 檔案中的資料來評估頁面的互動時間 (TTI) 與真實網站的 TTI 的比較。

TTI 指標（以秒為單位）	顏色編碼
0–3.8	綠色（快速）
3.9–7.3	橙色（中）
7.3以上	紅色（慢速）

如何監控互動時間（TTI）？

為了準確測量 TTI，必須考慮各種因素。其中包括網路延遲、伺服器回應時間、瀏覽器渲染功能以及網頁內容的複雜性。

監控工具

燈塔
網頁測試
GTmetrix
谷歌頁面速度洞察

交互時間 (TTI) 是 Lighthouse 報告效能部分中監控的六個指標之一。

注意：TTI 作為指標已從 Lighthouse 10 中刪除。較新的替代指標（例如最大內容繪製 (LCP)、總阻塞時間 (TBT) 和下次繪製交互作用 (INP)）通常是替代 TTI 的更好指標。

使用 Lighthouse 報告中的「機會」部分來確定可為您的頁面帶來最高價值的增強功能。

交互時間對效能有什麼影響？

緩慢的 TTI 可能會讓使用者感到沮喪，導致更高的跳出率和更低的參與。如果一個網站無法滿足這些期望，用戶可能會放棄它，轉而選擇提供更流暢、更有效率體驗的競爭對手。

TTI 也會影響搜尋引擎優化 (SEO) 工作。谷歌等主要搜尋引擎在對網站進行排名時優先考慮使用者體驗。由於TTI是用戶體驗的關鍵指標，因此它間接影響網站的搜尋引擎排名。

TTI 較快的網站更有可能在搜尋結果中排名較高，從而推動自然流量並提高可見度。

開發人員必須仔細管理資源並確定關鍵任務的優先級，以減少 TTI 並提高整體效能。

圖片來源： onely

是什麼原因導致 WordPress 上的互動時間 (TTI) 變慢？

有許多因素可能會導致 WordPress 網站的互動時間 (TTI) 變慢，從而影響使用者體驗並可能影響效能指標。

讓我們來看看其中的一些：

1. 託管服務提供者

共享託管計劃（其中多個網站共享相同的伺服器資源）通常會因為資源限制和伺服器負載增加而導致 TTI 變慢。

選擇提供專用或託管 WordPress 託管解決方案的託管提供者至關重要。

透過利用 Cloudways 託管服務，網站所有者可以減輕 TTI 的擔憂，並為用戶提供無縫的瀏覽體驗。

2. 外掛和主題

雖然 WordPress 外掛提供了有價值的功能，但過多或優化不當的集合可能會阻礙網站速度並增加互動時間 (TTI)。

Cloudways Breeze 外掛程式是簡化 WordPress 網站效能的可行解決方案。該外掛程式提供專為提高網站速度和效能而設計的最佳化功能，有助於減輕因外掛程式和主題效率低下而導致的 TTI 延遲負擔。

此外，並非所有 WordPress 主題都針對開箱即用的效能進行了最佳化。某些主題可能會優先考慮視覺美觀而不是效能優化，導致程式碼臃腫、資源利用率低和載入時間變慢。

3. 資料庫優化

影響 WordPress 上 TTI 的另一個因素是資料庫優化。 WordPress 網站嚴重依賴資料庫來儲存內容、設定和使用者資料。

優化不佳的資料庫存在不必要的混亂、未優化的查詢或碎片表，可能會增加伺服器回應時間，從而減慢 TTI。

定期資料庫維護（例如清理未使用的資料、最佳化查詢和實施快取機制）可以透過簡化資料庫操作和減少伺服器負載來幫助提高 TTI。

4. 第三方集成

第三方整合、外部腳本和網路延遲等外部因素也會影響 WordPress 上的 TTI。

整合外部服務（例如社群媒體小工具、分析腳本或廣告平台）可能會引入額外的依賴項，並增加載入和呈現網站內容所需的時間。

此外，網路延遲（尤其是對於從遠端位置或網路連線速度較慢存取網站的訪客而言）可能會透過延遲從伺服器檢索網站資產來延長 TTI。

如何縮短互動時間 (TTI)

提高 TTI 需要採用整體方法來優化 Web 效能。以下是一些有助於改進 TTI 的最佳實踐：

1.優化內容繪製

優化內容繪製 (FCP) 可以透過建立優化的使用者互動基準來縮短互動時間 (TTI)。 TTI 關注的是使用者能夠與頁面交互，而 FCP 關注的是第一部分內容何時呈現。以下是優化 FCP 對 TTI 的影響：

減少渲染阻塞資源：大型 JavaScript 檔案等資源可能會阻止瀏覽器渲染內容。程式碼分割、非同步或延遲屬性等技術可以幫助首先確定渲染內容的優先順序。
優先考慮關鍵資產：預先載入關鍵資源，例如首屏內容和關鍵 JavaScript 檔案。這確保了它們在需要時隨時可用，從而最大限度地減少渲染和互動的延遲。
優化以加快載入時間：任何加快內容載入速度的方法（包括 FCP）通常都會有助於加快 TTI。這可能涉及優化圖片大小、減少 HTTP 請求或實作瀏覽器快取。

3. 預加載密鑰請求

預先載入關鍵請求是提高 Web 應用程式互動時間 (TTI) 的另一種有效策略。當瀏覽器解析 HTML 文件時，它會識別渲染頁面所需的外部資源，例如腳本、樣式表和字體。

通常，當瀏覽器在 HTML 中遇到這些資源時，會按順序取得這些資源，這可能會導致延遲並阻礙 TTI。

 <!DOCTYPE html>
<html lang="en">
<頭>
  <元字元集=“UTF-8”>
  <meta name =“viewport”content =“width = device-width，initial-scale = 1.0”>
  <title>預先載入範例</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="preload" href="ritic-script.js" as="script">
</頭>
<正文>
  <!-- 您的 Web 應用程式內容位於此處 -->
  <script src="app.js"></script>
</正文>
</html>

在此範例中，帶有 rel= " preload" 屬性的<link>標記指示瀏覽器將 critical-script.js 檔案作為高優先級資源取得。

3. 最小化總阻塞時間

最小化 TBT 還可以改善其他效能指標，例如首次內容繪製 (FCP) 和最大內容繪製 (LCP)，有助於全面增強 Web 效能和可用性。

使用 Breeze Cloudways 的最佳化插件，您可以簡化網站的 CSS 和 JavaScript 文件，減少載入時間並輕鬆提高整體效能。

4. 減少輸入延遲

造成 TTI 緩慢的一個重要因素是輸入延遲，即使用者啟動操作（例如點擊按鈕）和瀏覽器確認操作之間的延遲。

若要減少輸入延遲，您可以：

縮短 JavaScript 執行時間：

縮小和壓縮：透過刪除不必要的字元和空格來減少 JavaScript 檔案的大小。這使它們能夠更快地下載，從而最大限度地減少主執行緒佔用的時間。
優化 JavaScript 程式碼：檢查程式碼是否效率低。避免在關鍵渲染部分使用複雜的演算法或過多的 DOM 操作。探索非同步程式技術，例如 async/await 或 Promise 來提高反應能力。

延遲載入：延遲載入非關鍵 JavaScript 程式碼，直到使用者需要它。這釋放了主線程來渲染和處理用戶互動。

5. 優化 JavaScript 執行

JavaScript 執行效率低下可能會導致處理時間增加，從而導致渲染和使用者互動回應延遲。

透過優化 JavaScript 執行，開發人員可以簡化腳本的載入和處理，減少瀏覽器解析和執行 JavaScript 程式碼所需的時間。

優化 JavaScript 執行涉及程式碼精簡、捆綁和延遲載入等技術，旨在減少檔案大小、消除不必要的程式碼執行並將非關鍵腳本推遲到需要時。

6. 最小化主執行緒工作

主執行緒處理諸如解析 HTML 和 CSS、執行 JavaScript 以及在螢幕上繪製內容等任務。當過載時，它會顯著延遲用戶互動。

要最小化主執行緒工作，您可以：

優化關鍵渲染路徑：

最小化主執行緒工作：主執行緒渲染網頁。透過減少 FCP 關鍵元素（如首屏內容）上的工作量，您可以更快地將其釋放出來用於使用者互動。這可能涉及減少資源或推遲非關鍵腳本等技術
程式碼拆分：將大型 JavaScript 檔案分解為較小的區塊。 最初僅載入必要的程式碼，以使頁面互動速度更快。其餘程式碼可以在背景載入。這減少了主執行緒的前期處理負擔。
使用 Web Workers ：Web Workers 是獨立的線程，可以處理長時間運行或運算量大的 JavaScript 任務。這可以釋放主執行緒來執行使用者互動處理等關鍵任務。

7. 減少第三方程式碼的影響

減少第三方程式碼的影響有助於縮短網站或 Web 應用程式的互動時間 (TTI)。第三方腳本（例如分析追蹤器、社交媒體小工具或廣告腳本）可能會顯著延遲頁面載入並阻礙用戶互動。

減輕第三方程式碼影響的一種有效策略是非同步載入。透過非同步載入第三方腳本，瀏覽器可以繼續解析和渲染頁面的主要內容，而無需等待外部資源完全載入。

 <腳本非同步src =“https://example.com/third-party-script.js”></腳本>

8. 延後非必要的第三方腳本

另一種方法是延遲載入非必要的第三方腳本，直到關鍵渲染路徑完成之後。這可確保重要內容優先考慮，進而加速 TTI。腳本標籤中的“defer”屬性可以延遲執行腳本，從而允許它們在後台加載，而不會延遲初始渲染。

以下是延遲載入第三方腳本的方法：

 <腳本延遲src =「https://example.com/third-party-script.js」></腳本>

9.減少累積佈局偏移

減少累積佈局偏移 (CLS) 可以顯著改善網站或 Web 應用程式的互動時間 (TTI)。 CLS 是指網頁載入時元素發生意外移動，通常是由圖像、字體或非同步內容載入延遲引起的。

減少 CLS 的一種方法是優化資源載入。確保圖像和其他資源具有預先定義的尺寸有助於瀏覽器在渲染期間為其分配空間，從而防止佈局突然變化。

10. 預先連接到所需的來源

預先連接到所需的來源是一種強大的最佳化技術，在改善 Web 應用程式的互動時間 (TTI) 方面發揮著至關重要的作用。

如果沒有預先連接，每次應用程式需要從 API 取得資料時，瀏覽器都必須建立新連接，導致延遲增加和 TTI 變慢。

以下是使用 HTML 程式碼實現預先連接的方法：

 <!DOCTYPE html>
<html lang="en">
<頭>
  <元字元集=“UTF-8”>
  <meta name =“viewport”content =“width = device-width，initial-scale = 1.0”>
  <title>預先連線範例</title>
  <link rel="preconnect" href="https://api.example.com">
</頭>
<正文>
  <!-- 您的 Web 應用程式內容位於此處 -->
</正文>
</html>

為開發者和機構提供最快的 WordPress 託管，每月只需 11 美元*

使用 Cloudways LAMP + NGINX 混合堆疊體驗極快的伺服器速度。使用 Cloudways Hosting 改善您的核心 Web 活力並增強您的 WordPress。

現在試試

Cloudways 如何減少 WordPress 上的互動時間 (TTI)？

為了展示 Cloudways 如何幫助縮短 WordPress 網站的互動時間 (TTI)，我在 Cloudways 上建立了一個示範網站。

我使用 Google PageSpeed Insights 進行了初步速度測試，以測量互動時間 (TTI)。結果如下。

接下來，我登入 Cloudways 儀表板並導航到伺服器管理部分。
然後，我啟用了 Varnish、Memcached 和 Redis 等服務，這些服務優化了快取機制並增強了資料庫效能。

之後，在我的示範網站上，我安裝了 Bot Protection 和 Breeze 等插件，這應該會減少伺服器負載並縮短回應時間。

優化後，您可以看到 TTI、FCP、CLS 和整體 PageSpeed 得分的提高，表明用戶體驗和搜尋引擎友善性得到增強。

結論

TTI 在不同類型的 Web 應用程式和使用者環境中可能存在顯著差異。例如，由於內容複雜性和互動元素的差異，簡單的部落格可能比功能豐富的電子商務平台實現更低的 TTI。

透過了解 TTI 及其根本因素，開發人員可以發現改進機會、簡化載入流程，並在各種 Web 應用程式和環境中提供無縫的使用者體驗。

如果您正在尋找一種簡單的方法來提高 Core Web Vitals 分數，為什麼不遷移到 Cloudways？借助我們優化的技術堆疊和 Cloudflare Enterprise 等高級附加元件，實現卓越效能比以往任何時候都更容易。

經常問的問題

Q）什麼是互動 (TTI) 的最佳時間？

A)良好的互動時間 (TTI) 通常低於 3 秒，這表示網站可以在短時間內實現完全互動並回應使用者輸入，從而優化使用者體驗和參與度。

問）「交互時間」一詞的定義是什麼？

A)互動時間（TTI）是指網頁在初始載入後完全互動並回應使用者輸入所需的持續時間，這對於評估使用者體驗和網站效能至關重要。它測量從頁面開始加載到視覺上完成並可以順利處理用戶互動的時間。

Q）DOMInteractive 和互動時間有什麼不同？

A) DOMInteractive 標記 HTML 文件何時已完全載入和解析，而互動時間 (TTI) 指示網頁何時完全互動並回應使用者輸入，考慮了 JavaScript 執行和其他資源載入延遲，提供了更全面的衡量標準使用者體驗準備情況。