如何立即載入網頁(專家技術與工具)
已發表: 2024-02-07快速地。 快點。 立即的。
當我們步入 2024 年時,一個突破性的時代即將到來,網站訪客可以預見到即時頁面載入將成為新常態的重大轉變。
加入我們,我們將探索網路瀏覽的演變,並擴展您為網站訪客帶來即時體驗的方式。
立即加載頁面意味著什麼?
即時載入頁面是指根據使用者要求快速、無縫地顯示網頁。 簡而言之,當網站訪客從您的網站加載頁面時,加載時間接近 0 秒。
實作即時頁面載入涉及優化各種後端和前端資源,例如最小化檔案大小、利用瀏覽器快取以及使用內容交付網路 (CDN)。
繼續閱讀以了解新增到您的最佳化工具箱的最新技術。
為什麼即時頁面載入很重要?
目標是透過提供快速回應的資訊存取來增強用戶體驗,這對於保持用戶對網站的參與度和滿意度至關重要。
NitroPack 最近的用戶研究顯示,網站訪客會在 2.75 秒後放棄頁面,如果後續頁面在 3 秒內加載,他們將訪問 60% 的頁面。
提供即時體驗也會對真實用戶與您的網站的互動方式產生積極影響,特別是導致透過核心網路生命和最大的內容繪製。
LCP 是眾所周知的最具挑戰性的效能指標,它是一個需要優化的複雜方面,幸運的是,它受到即時加載技術的嚴重影響。
現在網頁瀏覽的挑戰
雖然網路工程師盡最大努力彌補萬維網固有的弱點,但 53% 的行動用戶期望在 3 秒或更短的時間內快速加載頁面。
為了彌補這一差距,網站所有者如今使用多種策略來減少等待時間並保持競爭力,例如:
- 網路效能預算設定
- 手動和自動頁面加載優化
- 圖片、媒體和程式碼壓縮
- 實際效能(核心 Web Vitals)最佳化
- 使用者行為分析、客戶旅程優化等等!
不過,網站所有者不必只依賴內部資源。
Google Chrome 等瀏覽器和 NitroPack 等優化工具越來越多地尋找幫助加快載入時間的方法,旨在實現難以捉摸的「即時體驗」。
加入第一個由 AI 驅動的優化器(NitroPack 的 Navigation AI)的候補名單,以解鎖自動化即時體驗 →
手動即時頁面載入技術
利用瀏覽器功能和資源提示
解決即時瀏覽體驗的一種方法是優化您的網站,以實現未來的快速導航。
登陸網站後隨後載入網頁。
像link rel=prefetch這樣的資源提示是易於實現的 API,在網頁渲染中優先順序較低。 它被添加到您網站的 HTML 中,並受到瀏覽器的良好支援(Safari 落後)。
由 Barry Pollard 本人介紹,Chromium 最近令人興奮的發展是推測規則 API。
推測規則 API 是更新、更規範的 API,用於預取或預渲染整個網頁。 它是一個基於 JSON 的 API,允許指定預先完善或預先渲染的連結以及更高級的用例。
透過使用推測規則 API,您可以預期初始頁面載入時間明顯快於 2.5 秒,甚至接近最初的幾毫秒。 這可以透過利用 API 指定用於預先渲染或預取的網頁 URL 清單來實現,瀏覽器將在後台執行該清單。
截至 2024 年 1 月底,推測規則 API 有了全新的增強功能,基本上透過將 URL 新增至文件而不是清單中,我們可以更好地控制 URL。 這使我們能夠指定瀏覽器執行頁面和頁面上的元素所包含的 URL 的觸發器和優先順序。 然後,您可以指定「渴望」級別,這基本上代表您對使用者點擊這些連結的信心。
解鎖 WordPress 上的即時頁面加載
Adam Silverstein 透露 WordPress 效能團隊正在致力於新的推測規則 API 的更穩定的實現。
目前,重點仍然是讓生態系統中的網站所有者和開發人員可以使用 API 的一小部分功能,以在將其成為核心的一部分之前測試效率和採用率。 以下是 WordPress 用戶迄今為止可以利用的功能:
Performance Lab 外掛程式中的一個模組
僅實現推測規則 API 前端的獨立插件(應用保守的「渴望」級別,但開發人員可以自由修改行為)
預設排除 WP 管理路由,但需要 WP 開發人員確定他們想要避免或優先考慮的路由(即,避免預先渲染和預取購物車,但優先考慮明顯的未來導航)
WordPress 效能團隊也致力於在生態系統的外掛程式中實現更複雜的實作。 這樣做的目的是減輕開發人員在確定哪些路線是最優先、哪些路線不可行時必須做的一些繁重工作。
如何在任何網站上自動立即載入頁面
NitroPack 推出導航 AI(測試版)
Navigation AI 是 NitroPack 的最新產品。 它是一種基於人工智慧的網頁瀏覽優化器,可主動預測和分析使用者行為,以在客戶旅程中預先渲染整個頁面。 導航人工智慧允許網站所有者在桌面和行動裝置上提供即時瀏覽體驗,從而提高客戶參與度和轉換率。
加入 Navigation AI 的候補名單,讓您的網站為即時使用者體驗做好準備 →
人工智慧導航如何運作?
NitroPack 的導航 AI 基於推測規則 API 構建,並提供自動化解決方案,以在預渲染頁面和非預渲染頁面之間實現高回報、低風險的平衡。 它由精簡的 JavaScript 程式碼片段實現,並且在瀏覽器中運行時完全與平台無關。
導航人工智慧能夠透過將整個過程分為兩個階段來解決這個複雜的方程式:
第一階段:根據資料對頁面載入應用人工智慧增強的初始預測,而不將其傳遞給推測規則 API(以免壓垮瀏覽器)
第二階段:分析使用者行為,調整預測,並在我們確定下一步操作是什麼後指示推測規則 API 預渲染(或預取)頁面。
由於該頁面已在背景繪製,因此結果是瞬時頁面載入。 在行動裝置上,導航 AI 依賴於識別用戶在頁面上的位置,並且考慮到較小的視口,它可以輕鬆預測他們將點擊的位置。
是什麼讓人工智慧導航如此強大? (+數據)
導航人工智慧根據三個自訂指標來衡量成功:
預測精度:導航 AI 成功預測了所有使用者互動中有多少
浪費精度:導航 AI 未能預測所有使用者互動中有多少,導致瀏覽器緊張
瀏覽器榮譽率:表示頁面是否確實正確預先渲染/預取(如果沒有,我們會檢查瀏覽器效率或使用者的網路強度,以幫助導航 AI 適應類似情況)
基於 1,200 個網站,Navigation AI 已經顯示出驚人的結果。
導航 AI 真實結果
結果#1:使用 Navigation AI 的網頁始終顯示約 2.86 秒的載入時間,而沒有使用 Navigation AI 的網頁則為 6.12 秒
結果 #2:使用 Navigation AI,預先渲染頁面的 LCP 提高了 85%(從 3.1 秒到 0.4 秒),CLS 提高了 80%(從 0.3 秒到 0.06 秒) 。 對於預取頁面,Navigation AI 將 LCP 提高了 52%(從 3.1 秒縮短到 1.5 秒)。
結果 #3:借助 Navigation AI,整個網站的效能指標顯著提高: LCP 提高 15%,CLS 提高 8%,TTFB 提高 26%
快速的初始頁面加載時間、穩定的佈局以及對互動的快速響應能力使網站所有者能夠讓用戶保持滿意並長時間參與,並最終以更高的轉換率。
即時載入技術:準確性和權衡
在決定預渲染/預取哪些頁面時取得適當的平衡與您對使用者行為的理解程度有關。 手動方法需要仔細考慮過去的使用者體驗和資料分析,以實現「中等風險,中等回報」的場景。
理想情況下,您需要加倍關注熱圖並探索用戶在您的網頁上執行的操作 - 他們點擊的位置、向下滾動的距離以及他們傾向於忽略的內容。
由於瀏覽器可以處理有限數量的預渲染/預取請求,因此網站所有者和開發人員應該:
排除商標連結、登出頁面、成功購買頁面、加入購物車頁面等路線。
優先考慮主要號召性用語 (CTA) 按鈕、了解更多頁面、邏輯後續導航等路線。
或者,您可以將資料處理和預測能力委託給諸如 Navigation AI 之類的自動化工具。
常見問題解答
後台預渲染/預取頁面是否顯示在分析中?
如果使用者尚未登陸相關頁面,則不會計入分析(例如 Google Analytics)。 請記住,推測規則 API 仍處於早期階段,根據您使用的分析供應商,他們可能決定以某種方式包含此資料。 目前,預先渲染/預取頁面僅在使用者實際登陸時才計入 Chrome 使用者體驗報告 (CrUX)。
瀏覽器將預渲染頁面的快取版本保留多久?
開發人員無法控制持續時間。 但是,Chrome 會將使用者未選擇的預呈現頁面的所有快取版本儲存在 HTTP 快取中。 這樣,如果用戶決定稍後返回它們,它們的載入速度仍然更快。
導航人工智慧中審查使用者操作的人工智慧有多重?
AI 完全由 NitroPack 伺服器處理,不在瀏覽器中執行。 導航 AI JavaScript 僅使用來自 NitroPack 伺服器的現成結果,而不是運行整個 AI 模型本身。
即時載入技術適用於使用者登陸的第一個頁面(例如主頁)還是僅適用於後續瀏覽?
預渲染/預取技術不適用於首次造訪網站的情況。 然而,Chrome URL 欄開始透過識別我們經常搜尋的 URL 並提前載入它們來使用預渲染
例如,輸入 www.goo 很可能會觸發 www.google.com 頁面在背景載入(當然,取決於個人使用者的搜尋活動)。
目前,也有人在探索Google搜尋引擎欄如何融入預先渲染。