2020 年峰會主題演講：未來 Web 的性能和用戶體驗

在 WP Engine 的 2020 年峰會上，Google 產品經理 Mariya Moeva 討論了網絡的未來以及隱私、速度和培養優質用戶體驗在其中必鬚髮揮的重要作用。 了解 AMP、Site Kit 和 Web Stories for WordPress 等工具，您可以使用它們來評估和提升 WordPress 網站的性能。

會議幻燈片

Google 產品經理 Mariya Moeva 討論：

• Google 如何與 WordPress、WP Engine 和社區緊密合作以推進和支持 WordPress 生態系統。
• 分享有關 Google 幫助保持網絡蓬勃發展和健康並使其在未來發揮作用的三種主要方式的見解：
  • 速度和性能：定義與用戶體驗相匹配的指標，並以可操作的方式與社區分享。
  • 出色的用戶體驗：確保網站所有者和最終用戶在需要時在正確的上下文中獲得來自各種 Google 產品的最相關信息。
  • 隱私和安全：在尊重用戶隱私的同時設計支持生態系統的新模式。

這不僅僅是因為如果體驗緩慢，用戶會去其他地方，而且還因為用戶的期望向上移動，因為他們在日常數字生活中使用令人愉悅的本機應用程序體驗。

全文成績單

[00:00:00.03]

大家好。 我叫 Maria，是 Google 搜索團隊的一名產品經理。 我大部分時間都花在構建產品上，以幫助網站所有者在網絡上取得成功。

[00:00:09.08]

因此，今天我非常高興能與您分享 Google 認為保持網絡健康和繁榮的重要性，以及我們正在為此做些什麼，以及我們如何合作。

[00:00:21.03]

但為了向前看，讓我們先環顧四周，我們現在在哪裡？ 網絡環境是什麼樣的？

[00:00:27.07]

CMS 平台對於網絡的成功變得越來越重要。

[00:00:32.03]

我們看到使用 CMS 平台構建的網站的總體百分比穩步增長。

[00:00:37.08]

它們很重要，尤其是對於尾部和軀幹業務，而且對於也使用 CMS 的大型網站也是如此。

[00:00:44.04]

我們在 Google 與一系列 CMS 平台密切合作，以保持

網絡健康和私密。

[00:00:51.02]

當然，我們致力於與 WordPress 和社區密切合作，以推進和支持 WordPress 生態系統。

[00:00:59.04]

我們以多種方式做到這一點。 例如，通過為核心 WordPress 平台做出貢獻來提高延遲加載圖像等性能，或增加站點地圖等內容的發現。

[00:01:12.03]

我們還構建插件，這些插件提供來自各種 Google 產品的重要功能，或者展示如何在您的 WordPress 網站上啟用特定技術，例如 AMP。

[00:01:23.01]

我們將它們提供給 WordPress 插件目錄中的每個人。

[00:01:26.09]

最後但同樣重要的是，我們通過演講和讚助各種活動來積極參與社區活動，例如歐洲、亞洲和美國的各種 WordCamps，以及當地較小城市和其他行業活動。

[00:01:41.06]

當它與 WP Engine 一起出現時，我們也確實擁有蓬勃發展的關係，它跨越了我剛才提到的 WordPress 的所有相同領域。

[00:01:51.01]

例如，WP Engine 的平台現在提供谷歌云平台的計算優化虛擬機，這使得服務器執行時間大幅下降。

[00:02:01.00]

例如，像 boardingarea.com 這樣的網站遷移到這個新的基礎架構後，backend_processing_times 立即下降，從而使網站性能提高了 40%。

[00:02:13.00]

WP 引擎解決方案中心提供 AMP 插件和 Site Kit 等關鍵插件，Genesis Framework 與 AMP 兼容，可幫助客戶構建高性能和美觀的網站。

[00:02:25.06]

最後但並非最不重要的一點是，我們在 WordCamp US 或今天在這裡的 WP Engine 派對等重要活動中齊聚一堂。

[00:02:34.04]

除了 CMS 平台在網絡上的重要性之外，我們不能忽視的一個因素是，由於 COVID-19 大流行，世界在短短幾個月內在所有活動領域發生了翻天覆地的變化。

[00:02:46.09]

這也影響了網絡。 一些網站的訪問量和流量過載，而另一些網站則不得不暫時停止活動。

[00:02:57.07]

網絡現在對增長至關重要，在某些情況下，它是許多企業生存的唯一機會。

[00:03:05.01]

讓企業保持活力並幫助他們上網和在線發展是關鍵

在我們看來優先。

[00:03:12.08]

這對最終用戶也很重要，因為許多重要的服務和信息由於大流行而轉移到了網上。

[00:03:22.07]

了解所有這些後，讓我們看看我們認為對於保持網絡的繁榮和健康並使其在明天有用的真正重要的三個關鍵方向。

[00:03:32.08]

我們認為有三個關鍵領域。

[00:03:35.08]

確保網站速度快、性能高且可訪問。

[00:03:39.09]

確保網站所有者和最終用戶都能在網絡上享受出色的用戶體驗。

[00:03:46.00]

然後還要確保我們維持一個繁榮的生態系統，同時我們承認最終用戶的隱私和選擇。

[00:03:53.04]

所以，我現在想做的是告訴您我們在 Google 正在為這些領域中的每一個領域做些什麼，以及我們如何合作。

[00:04:01.01]

對於這三個重要領域中的每一個領域，我都想與您分享我們認為重要的內容以及我們正在採取的與生態系統中的合作夥伴合作的步驟，包括 CMS 平台、網站所有者和託管服務提供商。

[00:04:15.06]

在速度和性能方面，我們正在努力定義盡可能接近實際用戶體驗的指標，並以可操作的方式與社區分享。

[00:04:26.04]

為了獲得出色的用戶體驗，我們努力確保網站所有者和最終用戶都能在他們需要的時間和正確的上下文中獲得來自各種 Google 產品的最相關信息。

[00:04:38.05]

最後但同樣重要的是，為了隱私和安全，我們正在努力幫助設計一種支持生態系統同時尊重用戶隱私的新模式。

[00:04:49.00]

那麼，讓我們從速度和性能開始。

[00:04:51.07]

針對這些因素進行優化可以讓所有網絡瀏覽器和服務的用戶都更喜歡網絡，並幫助網站朝著用戶對移動設備的期望發展。

[00:05:02.00]

我們相信這將有助於網絡上的商業成功，因為用戶的參與度越來越高，並且可以以更少的摩擦完成他們需要的事情。

[00:05:12.01]

所以，我想我們都知道這一點，但值得重申的是，用戶至上對當今的網絡至關重要。

[00:05:18.08]

這不僅僅是因為如果體驗緩慢，用戶會去其他地方，而且還因為用戶的期望向上移動，因為他們在日常數字生活中使用令人愉悅的本機應用程序體驗。

[00:05:33.06]

這裡只是兩個統計數據，它們展示了相對較小的改進或延遲如何對用戶體驗產生重大影響並影響轉化率。

[00:05:45.02]

我們專注於高質量體驗的三個關鍵領域。 首先，快速加載。 所以你可以馬上看到一些東西。 然後是響應迅速的交互，最後是一個流暢、令人愉悅的頁面，不會移動或卡頓。

[00:06:00.09]

我們試圖衡量這三個屬性，我們很高興向您介紹它們並獲得您的反饋。

[00:06:06.03]

讓我們來看看吧。 這些是新指標，核心網絡生命力。

[00:06:12.03]

它是一組真實世界中以用戶為中心的指標，用於限定用戶體驗的關鍵方面。 他們測量網絡可用性的維度，例如低時間、交互性和內容加載時的穩定性。 這樣您就不會不小心點擊了您不想點擊的那個按鈕。

[00:06:30.06]

我們的目標是幫助網站所有者衡量和改善網絡上的用戶體驗。

[00:06:35.03]

對於其中的大多數指標，我們同時提供現場和實驗室數據，即基於用戶如何在 Chrome 中體驗此頁面的匯總統計數據，以及基於我們在頁面上運行的分析的數據。

[00:06:49.02]

因此，第一個指標是最大內容繪畫。 這是我們較新的指標之一，用於衡量網頁主要內容的加載速度和對用戶可見的速度。

[00:07:01.08]

該指標是大量研究和指標開發的結合。 它的前身是速度指數和第一次有意義的繪畫等指標。

[00:07:11.03]

LCP 旨在捕獲最大的內容元素何時在瀏覽器的視口中可見。 服務器響應時間、CSS 阻塞時間和資產子資源加載時間等主要因素會影響 LCP。 它在實驗室和現場數據集中均可用。

[00:07:32.02]

第二個指標是首次輸入延遲，它是一個僅限字段的指標，因為它需要真實的用戶交互。 它衡量的是瀏覽器第一次實際響應用戶在頁面上提供輸入所花費的時間。

[00:07:47.00]

查看首次輸入延遲非常重要，因為它可以指示用戶對網站響應能力的第一印象。

[00:07:56.04]

改善此指標的解決方案包括預先加載 JavaScript、代碼拆分等。

[00:08:03.06]

任何超過 300 毫秒的時間都會被用戶視為糟糕的體驗。 任何超過 100 毫秒的時間都是好的。

[00:08:14.01]

最後但同樣重要的是，Cumulative Layout Shift 或 CLS。 在幻燈片上，您可以看到一個示例，說明當該指標不是特別好時會發生什麼。

[00:08:24.03]

這會給用戶帶來很多挫敗感。 它測量視口中的元素在加載期間移動的量。

[00:08:32.09]

CLS 正在嘗試衡量一些事情，例如，以增加意外點擊廣告的機會的方式將廣告添加到列表中，或者擁有一個新聞頁面，其中故事照片在完全加載時將文本內容移到頁面下方。

[00:08:47.08]

為了計算佈局偏移分數，瀏覽器會查看視口大小和視口中不穩定元素在兩個渲染幀之間的移動。

[00:08:57.04]

佈局轉換分數是該運動的兩個測量值的乘積。 影響分數和距離分數。

[00:09:04.04]

換句話說，您正在測量實際移動了多少內容以及移動了多遠。

[00:09:11.00]

為了提供良好的用戶體驗，站點應努力使累積佈局偏移小於 0.1。

[00:09:18.09]

CLS 可以在現場和實驗室中測量，類似於 Largest Contentful Paint。

[00:09:24.04]

然而，正如我之前提到的，對於簡單的延遲，只是在現場。

[00:09:30.01]

我們正在使用我們所有不同的工具，以確保它們得到有效和一致的檢測，以便您可以獲得有關特定頁面或網站在這些指標上的表現的信息，並與您的團隊或與您的客戶。

[00:09:46.05]

當然，當我們談論性能時，要記住的一件事是，我們需要提及 AMP 框架。

[00:09:53.06]

這是一個 Web 組件框架，可輕鬆創建用戶至上的網站、電子郵件和故事。 它已經解決了網絡上的許多常見性能問題。

[00:10:03.05]

舉幾個例子，AMP 會自動處理諸如延遲加載非關鍵內容之類的事情。

[00:10:10.02]

因此，它會更快地加載可見內容，而頁面其他地方的其他元素則在後台下載。

[00:10:17.05]

它讓用戶更好地了解網站的重要性。 它還優化了對您網站的跟踪。

[00:10:24.01]

借助 AMP 分析組件，您可以一次測量行為和與您網站的交互，然後將它們有效地傳送到許多分析後端。

[00:10:35.02]

最後，它還使您能夠像向 HTML 標記添加屬性一樣輕鬆地實現響應式設計。

[00:10:42.08]

因此，如果您關心性能，這是一個有趣的框架來調查它是否適合您當前的站點設置，並且它將解決您的許多性能問題。

[00:10:52.05]

我們今天關注的第二個關鍵領域是出色的用戶體驗。

[00:10:57.09]

使企業主和內容創作者能夠採取正確的步驟，上網，擴大影響力，吸引更多訪問者並將他們轉變為客戶。

[00:11:08.07]

當我們與企業主和內容創建者交談時，我們一次又一次聽到的是，他們發現很難從各種複雜的報告中推斷出他們應該採取什麼步驟，尤其是當他們需要從多個報告中提取信息時產品，以便全面了解他們網站上發生的事情。

[00:11:28.02]

他們需要專注於自己的業務，他們沒有知識或時間也成為網絡專家。 他們不應該這樣做。

[00:11:36.05]

我們可以為他們提供關於如何改進和成長的直觀、易於理解和可操作的建議。

[00:11:44.06]

我們利用這些反饋來定義我們構建產品時的指導原則。 例如，WordPress 的插件，如 Site Kit。

[00:11:52.08]

我們的目標是在用戶需要的時間和地點準確地顯示信息。 直接在他們的 WP 管理儀表板中，我們消除了複雜的報告並僅顯示最相關的統計數據。 我們通過各種不同的 Google 產品來做到這一點。

[00:12:09.08]

無論指標來自分析、AdSense 還是頁面速度洞察，我們都會將其顯示在同一個易於使用的儀表板中，這樣人們就可以在一個地方檢查與其網站和 Google 相關的所有內容。

[00:12:24.01]

在實踐中應用這些原則的一個很好的例子是 Site Kit。 那是谷歌的 WordPress 官方插件。

[00:12:30.05]

它將目前來自四種不同谷歌產品的統計數據結合到一個非常簡單的儀表板上，直接在 WordPress 網站的管理儀表板上。

[00:12:40.09]

它一目了然地提供有關站點運行情況的信息。 讓真正忙碌的網站所有者可以輕鬆地定期跟進。

[00:12:50.00]

提供正確見解和上下文的方法確實引起了 WordPress 網站所有者的共鳴。

[00:12:55.09]

自 2019 年 11 月推出以來，我們看到了非常強勁的有機採用，目前我們的活躍安裝量超過 400,000，並且每天都在穩步增長。

[00:13:09.06]

那麼，Site Kit 有何特別之處？ 它旨在改善網絡旅程開始時的摩擦。

[00:13:16.06]

尤其是在初始設置期間，很多用戶不知道如何編輯他們的網站、放置跟踪片段或標籤以便從各種產品收集和訪問重要數據。

[00:13:29.05]

在用戶許可的情況下，Site Kit 可以代表他們處理這些問題，並在發送網站和連接正確的產品帳戶的最初時刻消除瓶頸。

[00:13:42.04]

這是一個例子。 一旦連接了這些產品，Site Kit 如何在需要時直接在用戶的儀表板中提供相關信息。

[00:13:51.08]

許多用戶更喜歡主動共享信息，讓他們知道什麼時候發生了重要的事情，而不是不得不自己一次又一次地檢查。

[00:14:01.03]

這也是將來自多種產品的信息組合成洞察力的機會。

[00:14:06.06]

比如，您最快的加載頁面也是頁面停留時間最長和訪問收入最高的頁面。

[00:14:13.01]

因此，這是來自 P 速度洞察力、口音和分析的三個統計數據，我們將它們放在一起是為了讓用戶了解正在發生的事情。

[00:14:23.00]

對於網站所有者和最終用戶而言，卓越用戶體驗的另一個關鍵方面是了解人們追求什麼內容以及如何有策略地創建內容以吸引更多訪問者和用戶。

[00:14:36.02]

我們在整個生態系統中觀察到一些變化，即正在消費的內容類型和受歡迎的內容。 我想和大家分享一下我們正在做些什麼來推動網絡朝著這個方向前進。

[00:14:50.01]

你們中的大多數人可能已經熟悉故事。 它們是第一種移動原生內容格式。 近四分之三的智能手機用戶在社交媒體上閱讀或查看可點擊的故事

媒體，至少每週一次。

[00:15:05.04]

64% 的用戶更喜歡故事格式，超過 75% 的用戶對閱讀熱門閱讀內容類別中的可點擊故事感興趣。

[00:15:16.08]

我們相信故事格式的作用超越了短暫的用例，它可以成為媒體領域的支柱。

[00:15:25.03]

故事是可以在任何可以看到網頁的地方看到的網頁，但在 Google，我們會加倍努力讓它們大放異彩。

[00:15:34.07]

因此，在選擇查詢時，例如，在紐約要做的事情。 我們將通過發布者故事觸發這樣的視覺塊。

[00:15:44.01]

Discover 是另一個故事浮出水面的產品，它在 Android 和 iPhone 用戶中都非常受歡迎，月活躍用戶超過 8 億，而這已經是兩年前的事了。

[00:15:59.04]

對於那些經常使用 Discover 的用戶，您可能已經在 Discover 中看到了這種外觀非常獨特的大型故事預覽體驗。

[00:16:08.06]

這些故事在提要中佔據了相當多的空間，如果您點擊其中一個，它會直接將您帶到發布者的故事中。

[00:16:16.06]

這已經成為今天的生活，它為許多出版商提供了可觀的流量。

[00:16:23.01]

我們希望幫助 WordPress 網站所有者更輕鬆地訪問故事格式。 因此，我們為 WordPress 插件創建了一個重新設想的故事。

[00:16:33.01]

我們著手構建一個編輯器，使製作視覺上令人驚嘆的故事變得簡單而有趣。

[00:16:39.02]

它具有眾多模板和許多功能，如屏蔽預設、將圖像拖放到其他圖像中、編輯字體、文本圖像、形狀和視頻的廣泛選項，所有這些都集成到一個非常簡單和直觀的 UI 中。

[00:16:54.04]

如果您希望在更好的版本發佈時收到通知，您可以在這張幻燈片上的短鏈接上表達您的興趣。

[00:17:01.08]

如果您想了解更多相關信息，您可以觀看

我的同事 Paul Bakaus，他今天將討論網絡故事插件並進行預覽。

[00:17:15.07]

最後但同樣重要的是，我想簡要概述一下我們對網絡隱私的願景，解釋實現該願景的途徑，並討論在該過程中共享反饋和協作的選項。

[00:17:29.07]

您可能已經看到有關 Chrome 計劃終止支持第三方 cookie 的頭條新聞。

[00:17:35.03]

但這一願景比頭條新聞所暗示的更廣泛、更微妙。

[00:17:40.06]

這實際上是關於發展網絡以更好地尊重用戶隱私，同時確保它繼續支持核心業務模型和用例，使網絡對每個人都充滿活力和健康。

[00:17:55.05]

網絡社區需要做更多工作來支持用戶隱私和選擇。

[00:18:01.03]

這意味著，解決支持內容和廣告相關性或欺詐預防等用例的相同技術也用於不需要的問題

在網絡上進行跟踪。

[00:18:15.04]

我們主要談論的是第三方 cookie 和秘密跟踪方法，例如指紋識別。

[00:18:21.05]

例如，雖然用戶可以通過瀏覽器設置控制基於 cookie 的跟踪，但他們無法真正選擇退出指紋識別，而且通常甚至無法知道它正在發生。

[00:18:31.07]

默認情況下，這些機制都不是私有的。

[00:18:36.02]

這就是為什麼我們認為負責任的方法是用新的隱私保護解決方案取代傳統做法。

[00:18:45.08]

將這項工作分為三個階段。 首先，我們今天已經可以做一些事情來提高 cookie 的安全性和選擇。

[00:18:55.01]

一個例子是新的 cookie 標籤政策，稱為 SameSite cookie，默認情況下使 cookie 成為第一方，從而提高安全性並減少秘密跟踪的機會。

[00:19:08.03]

它還確保通過安全連接訪問第三方 cookie。 4 月，Chrome 臨時回寫了 SameSite cookie 更改，以確保穩定性並避免網站分心，在 COVID-19 危機期間提供基本服務。 此推出最近剛剛恢復。

[00:19:29.07]

其次，我們支持開放和協作的努力，以開發新的網絡隱私標準。 這就是隱私沙盒倡議。

[00:19:39.09]

這項工作包括在不識別跨站點用戶的情況下創建新技術和支持關鍵用例，以及通過限制被動數據收集來減輕秘密跟踪的努力。

[00:19:55.00]

只有在這些新的隱私保護解決方案到位並且滿足生態系統的需求後，我們才會打算在 Chrome 中逐步停止對第三方 cookie 的支持。

[00:20:08.06]

因此，我們認為這三個領域對於繼續努力和改進至關重要，以確保今天和明天的網絡蓬勃發展。

[00:20:19.01]

我希望現在您能更好地理解為什麼每個人都如此重要，以及每個人正在發生哪些重大變化。

[00:20:26.06]

不用說，這也取決於您，無論是為了確保您的客戶或合作夥伴了解站點性能指標並從中受益，還是為了讓您的團隊或客戶訪問正確的統計數據和正確的上下文，或者也許為圍繞新隱私標準的討論做出貢獻。

[00:20:47.03]

我們可以一起讓最終用戶和網站所有者等人的網絡更安全、更快、更令人愉快。 謝謝。