介紹7年Edge大會–核心Web生命體徵以及從FID遷移到INP
在這一集的“超越邊緣”中，Ishan Anand主持了關於Google核心Web生命體徵的更改的討論，這是一組用於網站性能評估的重要指標。 與他一起的還有來自Edgio的Rob Wakerly和Ellery Womack，他們分享了有關如何適應變化和通過核心Web生命體徵的專業知識。 對話深入探討核心Web Vitals的技術方面，包括最大的Contentful Paint，累積版面配置偏移和首次輸入延遲等指標，突顯其在網站最佳化中的重要性。 團隊討論了改進這些指標的實用策略，例如暫存，使用圖像優化工具以及調整暫存控制標頭。 他們還參考了他們與各種公司合作的真實示例，提到優化核心Web Vitals對業務成果的重大影響，如轉化率和有機流量。 隨著Google準備將FID替換為INP (考慮更廣泛的用戶交互範圍的指標)，討論強調了保持這些指標領先並採用專家策略以確保網站滿足這些不斷變化的速度和響應標準的持續重要性。Ishan Anand：大家好，歡迎來到Beyond the Edge，我們深入了解影響現代數字業務的趨勢。 今天，我們的主題是“核心Web生命體徵”，谷歌使用所有重要的指標對您的網站速度進行排名。
我是您的主持人Ishan Anand，是頂級企業用來加速，優化和託管其任務關鍵型網站的Edgio應用程式和邊緣平臺的產品副總裁。 今天，Edgio的高級產品交付總監Rob Wakerley和Edgio的高級工程總監Ellery Womack加入了我的行列。 Rob，我們為什麼不從您開始呢？ 請告訴我們您的背景以及與核心生理訊號的關係。
Rob Wakerly：嘿，謝謝，Ishan。 很高興今天參加。 因此，我的背景是技術咨詢，包括為各種規模的企業和公司制定策略和交付定制技術以及實施。 幾年前我加入了Edgio，很快就了解到了核心Web生命體徵的所有知識，以及這些生命體徵對企業的影響至少有一部分。 因此，作為實施項目的一部分，這非常令人興奮，幫助客戶和各個行業改進其站點的Vitals核心以改善客戶體驗。
Ishan Anand：謝謝，很好，謝謝。 和Ellery，請告訴我們您對生命體徵核心的體驗。
Ellery Womack：謝謝Ishan。 過去三年來，我一直在Edgio工作，與我們的建築師，工程師和Q團隊合作，主要幫助我們的客戶從Edgio產品中獲得最大價值。 我們的其中一個方法是與客戶合作，改善他們的Vitals核心，以獲得更多收入和SCO優勢，我們在所有產品和所有平臺上實現這一目標。 因此，您可以是FINTECH，電子商務，Salesforce，Shopify等等，我們隨時為您提供幫助。
Ishan Anand：太棒了。 讓我們細分一下，從觀眾開始開始，核心網路生理訊息是什麼，為什麼如此重要？
Ellery Womack：所以在2022年5月，Google推出了Core Vitals，這是一套衡量Google認為影響用戶體驗的最重要技術KPI的指標。 目的是評估網頁的速度，響應速度和視覺載入。 初始指標是最大的Contentful Paint，它是衡量頁面上折疊上方最大可見元素的速度的指標。 這通常是您的行動號召以及累積版面配置偏移量，這是衡量內容呈現時在頁面上移動的程度。 您可能已經去過許多新聞網站，其中有很多廣告出現，這肯定會觸發不良的累積版面配置偏移或CLS分數在您的網站. 最後，第一個輸入延遲是指用戶進行第一次交互的時間(類似於選項卡或點擊)，頁面響應所需的時間以及您知道，重新繪製或重新渲染某些內容。 從2024年3月開始，FID將被INP或Interaction to Next Paint所取代，後者將查看網站上用戶旅程中的所有交互。
Ishan Anand：所以Rob Ellery只是把核心網路生命體徵從技術上說來的內容分解出來。 但你能把這一點轉化為它們如此重要的原因嗎？
Rob Wakerly：是的，讓我跳進去。 我認為核心Web生命體徵的其中一點是它為我們提供了一個通用的框架，一種通用的語言來談論網站的性能。 在此之前，沒有一個很好的方式來討論您的網站的執行情況。 你可能會說，啊，我的站點的性能不好，或者加載時間太長。 但您是如何衡量的呢？ 您知道常用的語言是什麼？ 我們沒有一個。 這是核心網路生理訊息的其中一個強大功能，就是它提供了通用的語言，為什麼它如此重要，因為這些都會極大地推動您網站的業務成果和業務績效。
當您思考這會如何影響您的網站時，大約43％的電子商務網站流量來自Google搜尋，而不是付費或直接通路的付費廣告等。 此外，大部分電子商務收入，73％來自搜索和被推薦到您的站點的人員，這兩種收入都受到核心Web生命體徵的影響。 因為Core Web Vitals是搜尋引擎優化的一部分，您在Google搜尋排名中的位置。 它也是您網站體驗的重要驅動因素。 當用戶訪問您的網站時，無論他們是否喜歡體驗，Core Web Vitals都將幫助您進行測量。 如果您擁有良好的核心Web生理參數，您就更有可能讓人們喜歡使用您的網站，也更有可能讓其他人使用您的網站。 它們確實對您的業務和您的網站上的線上狀態有廣泛的影響。
Ellery Womack：除了Rob所說的內容之外，當人們進行Google搜尋時，搜尋結果上的60%點擊率都會轉到前55個有機搜尋結果。 也就是說，如果您不在前三名，超過一半的點擊不會進入您的手中。 這只是為了強調確保你的網站快速的重要性，你想盡一切可能保持在前三個搜尋結果.
Ishan Anand：是的，我只是想強調，谷歌是如何衡量你的網站的速度的。 但與Google無關，改進這些指標可改善您的客戶體驗。 這是一種協同效應，非常有益。 在開始之前，我從http存檔和Chrome用戶體驗報告中提取了數據，Google在其中發布了任何獲得足夠流量的網站的當前核心生命體徵，並顯示53％的臺式機網站都通過了核心生命體徵，這意味著只有不到一半的網站失敗了。 45％的移動網站通過核心生命體徵，這意味著略高於一半的Web無法通過移動網站進行傳遞。 所以，對於那些沒有通過核心生理訊號的網布，略多於一半。 如果人們沒有通過艾勒里，他們可以做些什麼？
Ellery Womack：太棒了。 所以，你可以做很多事情來改善你的核心生理訊號，其中一項就是快取。 您想要確保在邊緣網路(如Edgio)上暫存盡可能多的內容。 這可以是CSS文件，圖像，HTML。 對於您的網頁，您希望使用圖像優化工具，以便為特定設備提供正確大小的圖像，並以正確的質量和格式提供正確的圖像。 如果是iPhone，您想要提供一種Web文件格式，該格式將經過壓縮並針對該設備進行優化。
您應確保您的源伺服器始終設定為使用適當的暫存控制標頭響應，以便您的瀏攬器知道我可以暫存此內容多長時間，這樣我就不需要返回到網際網路來重新提取此內容。 這非常適合靜態文件等文件，因為這些文件隨著時間的推移不會發生太大變化。 所以，想想您的CSS，JavaScript，圖像，字體。 您應該始終在瀏攬器中暫存這些內容。
我們希望客戶在HTML文檔頂部添加預載入和預連接標題。 這將首先你會注意到當你載入你的網站時，你將會有很多第三方呼叫，因為你可能會載入Google Tag Manager或Tealium，這將載入來自各地的Facebook，Instagram像素。 您的網站依賴於第三方系統，如您所熟知的Klaviyo和其他“立即購買”，“稍後付款”解決方案以及那些需要將資產載入頁面的系統。 每次發生這種情況時，您都必須打開連接，或者您可以下載該內容。 如果您可以新增這些預先連線，當頁面載入時，這些都會立即發生，這樣當您的網站準備好載入內容時，載入速度會更快一些，而且預先載入會讓您串流回應，讓您可以一次載入多個內容。
我們討論了LCP或最大的Contentful Paint，您知道這是您頁面上的行動號召或英雄形象。 您實際上可以通過添加預載入標籤將其載入到網頁中，這是您可以做的最重要的事情之一，以改進您最大的Contentful Paint。 我們還建議使用腳本管理，以便在非必要腳本中添加延遲和異步，有時甚至在發生某個瀏攬器事件時動態注入這些腳本。 但是，除了這一點，還有很多事情可以做。 我們在我們的網站上寫了一篇文章，名為”開發人員可以在24小時內免費加速網頁的五種方法“，我們將在這裡與播客鍊接起來。 所以我強烈建議大家去看看，如果你有問題，我們隨時都在這裡。
Ishan Anand：是的，那篇文章真的是很好的資源。 Rob，要傳球有多難？ 您可以舉出公司在糾正其核心Web生命體徵方面取得的一些示例結果？
Rob Wakerly：是的，這會產生巨大的影響，因為我剛纔談到這一點之前，我就把你從crux，Ishan，通過核心Web生命體徵的網站和不通過的網站上提取的數據綁在一起，就客戶的體驗而言，這一點很明顯。 例如，LCP的頁面載入時間平均縮短一秒，即可將轉換率提高8.4 %或更多。 我們就這個主題與許多客戶和人員進行了交談，他們不僅是技術團隊，而且也對此感到興奮，因為這會影響業務KPI。 例如，我們與一家大型床墊零售商合作，幫助他們在其主頁上提高LCP 80 %，並在其商品詳情頁面或商品類別頁面上進行類似改進。 單是商品詳情頁面上的轉化率提高了19％，他們就從中受益。 我們在Spangler Candy也看到了類似的結果。 他們實施了核心Web重要改進，實現了60％的改進。 因此，他們正在通過，他們看到客戶更喜歡他們的網站。 我們與一家跨國時尚集團合作，使他們的LCP速度提高了45％，每個用戶在該網站上的收入增長了76％。
我們看到這些結果與我們的客戶一致，只要簡單地更改技術，我們就不會這樣，甚至改變用戶體驗或網站設計也不會這樣。 這是性能優化，具體地導致這類增長，不僅收入和轉換，還增加了有機流量。 我們幫助Shoe Carnival實現了22 %的有機流量增長，因為這又與SEO息息相關。 因此，對許多不同的業務KPI有廣泛的影響。 當客戶可以參與這些項目並且ROI就在眼前時，這一點真的很令人興奮，這並不是什麼值得誇獎的事情。
Ellery Womack：您可能聽說Rob將這些簡單的變更稱為「簡單的變更」。 這裡通常有80/20或90/10規則和遊戲規則，其中大多數改善核心網路生命體徵和SEO的好處只需花費很少的精力。 對於想要繼續調整並獲得更多好處的客戶，需要做更多的工作。 但在許多情況下，我們可以通過少量的前期工作實現大部分收益。
Ishan Anand：是的，這正是我要去的地方。 在這個可能是AGI的智能聊天機器人程序和whiz bang功能的時代，提高網站的速度就像一種低落的成果，在很多情況下，它將真正帶來比大型轉型計劃更容易的有形投資回報。 因此，這是一種提高收入的方法，特別是在當前的經濟環境下。 Edgio如何幫助公司掌握核心Web生命體徵並進行改進？
Ellery Womack： 由於核心Web Vitals受到網站交付速度的影響(Edgio可以幫助您解決這一問題)，很明顯，由於我們是CDN，而且您網站代碼交付後的性能也很高，因此您確實需要合適的平臺和專業技術，而且經常需要兩者兼具。 我們提供了兩種獨特的組合。 您可以自己執行的快速邊緣開發平臺，也可以使用我們的專業性能專家，Rob和我的團隊幫助您解決代碼中任何位置的Core Web Vitals難題。 我們希望確保我們能夠非常快速地交付您的網站，同時確保所交付的內容針對Web瀏攬器進行優化，以便向Google報告的數據具有吸引力。 瀏攬您網站的用戶將獲得他們期望的結果。 我們希望他們能夠快速載入頁面，在頁面之間實現次秒級切換，這是我們可以幫助客戶實現的。
Ishan Anand：真正的差異化來源是，無論是在網絡中還是在代碼中，我們都可以成爲整個堆棧的真正合作伙伴。 既然我們已經介紹了核心Web生命體徵的含義以及它們為何如此重要，我們來談談核心Web生命體徵最近發生的變化，即從FID遷移到INP。 艾勒裡，想要帶我們了解一下嗎？
Ellery Womack：沒錯。 從第一個輸入延遲(FID)到交互到下一個畫圖(INP)的更改發生在2024年3月。 這裡的主要區別是FID僅在您的網頁和互動中測量的第一次交互。 Next Paint實際上會查看您網頁上發生的前50個互動，並將該群組中最差的互動排除在外，之後將查看接下來的50個互動，依此類推。 因此，這實際上是一個很難實現的指標，但許多客戶也發現，他們的快樂之路相當不錯。 人們登陸頁面，通常會先採取相同的行動。 就像你在電子商務站點的主頁上登入一樣，你可能會查看導航並轉到某個類別，然後你可以執行某個類別。 您可能要單擊產品磁跕並轉到PDP，然後從那裡您可能會添加到購物車和這條快樂的路徑。
在Interaction to Next Paint (與下一個畫圖的交互)上很容易得分，但在您遇到麻煩的地方，還有一些不太直觀的東西會在更改INP後傷害您。 我們通過幫助客戶所看到的，有時是一些不屬於快樂之路的事情會讓您感到困惑。 例如，您可能有注冊模式，單擊該模式將其關閉可能會很慢，或者以表格形式提交您的電子郵件以注冊獎勵可能會很慢。 我們已經看到PLP上的快速查看等內容打開和關閉緩慢，或者更改樣本需要一些時間來載入下一個圖像。
我們提供了一些工具和流程來幫助您解決這一問題，例如我們的預測性預取，在您單擊某個元素之前，我們可以將該內容載入到瀏攬器中，以便其已被暫存，從而使這些轉換非常快速。 但你知道當你看到我在主頁上登陸的快樂之路我去了PLD，PDP等等，優化這是非常簡單的。 很難找到其他能產生的互動，以及這些互動對微生物有何影響。 我們還有一個RUM工具，它代表實時用戶監控，Edgio客戶可以免費跟蹤和報告影響INP的所有交互。 它將幫助您在哪些頁面上確定哪些互動觸發了最差的INP分數，以便您的團隊可以確定優先級並解決這些問題。
Ishan Anand：我想深入了解一下你所指出的，這不僅僅是一個新的指標，而且比舊的FID更難通過。 所以，你可以從傳遞到突然不傳遞，也不會意識到它。 從某種意義上講，這與Google的任何大型更新一樣。 如果你在SEO領域，一切突然重新排列，天空在下降，你需要弄清楚如何恢復。 他們給了我們很多警告時間，他們真的給了我們數字。 如果你在INP上失敗，你會突然失敗核心生命體徵，這可能會影響你的排名。 “聯繫我們”肯定能提供幫助。
您在處理核心網路生理參數的過程中，學到了什麼誤解，或者學到了什麼東西，但您一開始就不欣賞這些東西。 這對聽眾來說是很有用的學習，Rob。
Rob Wakerly：我想當您通過一些研究或與能夠告訴您的人交談來了解核心Web Vitals時，您很快就會得到這個想法。 但我認為這是另一件事，好吧，我該怎麼辦？ 例如，如何衡量它們？ 我如何真正將其投入到我的發展流程中？ 假設我有一個網站，我想要改進它們。 Ellery談論了您可以做的一些事情來改進它，但是，衡量持續的情況並能夠進行說明的正確方法是什麼，比如如何做到這一點？
Ellery指出了實時測量站點上的RUM工具，這非常適合您的生產站點或實時站點。 但還有其他一些事情需要考慮。 由於您一直在開發網站的新版本，您如何測試這兩個版本？ 您不想等到將其投入生產進行測試。 嘿，我的表現是否至少和以前一樣或更好？
我想指出的是合成測試，而合成測試功能非常強大，因為您可以在任何環境中執行。 您可以在開發環境，QA環境，暫存環境中執行呲合測試來測量核心Web Vitals。 對於任何新發行候選版本，您都可以看到其執行狀況，正如我所說，確保其執行狀況與之前的版本相同或更好。 因為您最不想做的事情是在您的網站上引入變革，讓它為您的績效注入活力，而要等到太晚才發現這一點。 因此，合成測試非常重要。
我們討論了RUM的優點，因為它是實時的，您可以看到網站上的流量。 第三個類別，也許最重要的是實際的Chrome UX報告，或關鍵是根據您網站的表現，衡量Google在回顧28天內測量的內容和Google測量的縮寫。 這一點非常重要，因為這正是他們用於SEO的功能。 所以，當你想看看谷歌看到什麼以及他們如何根據有機結果對你進行排名時，確保你的關鍵是良好的狀態，或者如果不是，注意這一點，以便你可以解決它。 這些不同類型的性能測試和工具可以為所有這些添加另一層，這對於了解這些測試和工具的工作方式以及如何使用非常重要。
Ishan Anand：是的，你要指出的是倒退，就像你可能會讓自己表現出色，然後突然很容易就能像你提到的那樣添加一個變化，然後突然回到績效上。 這種情況可能非常，非常頻繁地發生。 在這種情況下，RUM等工具與核心生命體外的合成測試一起具有巨大價值。 您知道，這對Core Web Vitals的影響如何提高您在Google的搜尋排名，但我們也討論了它如何為客戶體驗帶來總體好處。 您是否可以更詳細地探討一下？
Rob Wakerly：是的，客戶體驗方面的其他一些問題。 如果您對Core Web Vitals感興趣，您可能還會對您的站點的暫存命中率感興趣，並且希望擁有某種暫存層，並將其用於站點上的靜態甚至動態內容。 因為如果您是從快取層面服務客戶，就像內容傳遞網路一樣，效能就會更高，這是改善效能的關鍵方法，就像Ellery之前所說的。
還有用戶體驗，您知道性能只是客戶體驗的一個方面。 因此，您可能想要考慮進行某種用戶體驗審核或評估，與競爭對手進行基準測試，以及檢查您的分析。 我想說，性能和您的分析是相輔相成的。 當您改善效能時，您想要立即追蹤您的分析測量結果，看看這種效能改善或降級對您關心的所有業務KPI的分析有何影響，例如轉換率，跳出率和每位使用者的收益。
最後是A/B測試。 通常，當您對績效進行更改時，A/B不僅可以測試並看到，我的更改速度更快，而且在轉換率或其他KPI方面，它在過去的體驗中贏得了多少勝利？ 因此，您可以通過AB測試性能來查看這些業務影響。 當然，你也可以在自己的一側進行AB測試。
Ishan Anand：實際上在A/B測試中，值得一提的是，該平臺的獨特之處在於，您可以通過A/B測試性能，而許多其他A/B測試工具實際上會對性能造成負面影響。
讓我們回顧一下，假設我已經知道核心網路生理訊息的重要性，因為我的大量流量都取決於Google寄送給我的流量，而且這也大幅改善了我的客戶體驗。 如您所知，技術或網站所有者應該採取哪些後續步驟來改進我的核心網路生理訊息？
Rob Wakerly：你一定要看看你的Crux報告，你的Chrome UX報告，看看你的核心生命體徵表現如何。 如果您不知道，現在是您看一看或詢問的絕佳機會。 您想要考慮的其他事項是性能對站點和用戶體驗的重要性。 現在也是考慮安全性和整體用戶體驗的絕佳時機。 您應該討論這些事項，並與支援網站或Web應用程式的技術或數字團隊保持一致。
執行性能測試。 想想一下，您的關鍵數據告訴您什麼，而全新的性能測試意味著什麼？ 它在不同站點上的性能是否不同？ 如果您有產品組合，在較低的環境下，其性能是否有所不同？ 您可以從這方面學到什麼？ 確保我剛纔提到過的一些事情是檢查我是否優化了圖像？ 我的暫存策略是什麼？ 等等，因為如果你不是有意地去做這些事情，你就有機會去解決這個問題，或者更有意識地去做你的網站和體驗的那些方面。
Ishan Anand：太棒了。 無論您是剛剛開始核心網路生理訊息之旅，還是深入瞭解並需要協助，您都可以隨時查看。 我們有一個工具Edgio Optimize，可以幫助您進行呲合測試或聯繫我們的團隊。 我們很樂意為您提供幫助。 這將是我們今天的核心網路生理訊息播客。 感謝Ellery和Rob，並感謝各位觀眾參加我們的Beyond the Edge大會。 下次見。
使用Edgio Optimize檢查您的網站性能
