web.dev 直播總結

我們為期 3 天的線上社群活動期間公布的重大新聞與最新消息摘要,並提醒即將舉辦的區域性活動。

我們也剛結束為期三天的活動 web.dev LIVE,一些網路社群齊聚一堂,討論網頁開發的狀態。我們每天都以不同的地區時區展開活動,而 Google 員工也分享了一系列更新、最新消息和秘訣,致力協助開發人員提供各項工具與指引,確保網路穩定、功能強大且易於存取。

如果您錯過部分直播活動,系統會錄下所有講座內容,供您在 YouTube 上觀看。我們也即將在世界各地舉辦區域性活動,這些活動都是由 Google Developer Group 籌辦,也會針對 web.dev LIVE 活動所涵蓋的主題提供深入說明。

以下將深入說明過去三天分享的一些新聞和動態。

網站使用體驗指標

Chrome 團隊宣布推出網站體驗指標計畫,提供完整的指引、指標和工具,協助開發人員提供絕佳的網路使用者體驗。Google 搜尋團隊也最近宣布,將評估網頁體驗納入排名標準,並納入 Core Web Vitals 指標做為基礎。

2020 年網站體驗核心指標的三大要素為網頁內容的載入、互動和視覺穩定性,而這些指標是根據下列指標擷取:

插圖:網站體驗核心指標。
  • 最大內容繪製會測量感知載入速度,並在網頁主要內容載入可能完成的時間,標示網頁載入時間軸的時間點。
  • 「首次輸入延遲時間」可測量回應速度,量化使用者首次與網頁互動時獲得的體驗。
  • 累計版面配置位移可測量視覺穩定性,並量化網頁內容非預期的移動次數。

在 web.dev LIVE 中,我們分享瞭如何針對 Core Web Vitals 進行最佳化的最佳做法,以及如何使用 Chrome 開發人員工具探索網站重要價值。我們還在第 1 天的時間表的 web.dev/live 中,也分享了許多其他與效能相關講座的內容。

tooling.report

在網路上開發出平台最廣泛的平台可能並非易事。建構工具通常都是網站開發專案的核心,負責處理開發人員和產品生命週期。

我們觀察到建構設定檔並不容易,為了協助網頁開發人員「和」工具作者克服網路複雜度,我們打造了 tooling.report。這個網站可協助您為下一個專案選擇合適的建構工具,判斷從某項工具遷移至另一項工具是否值得,或是設法將最佳做法整合至工具設定和程式碼集。

我們設計了一套測試,用來判斷哪些建構工具可遵循網頁開發最佳做法。我們與建構工具作者合作 確保我們正確使用他們的工具,並以公正的方式呈現

toolsing.report 使用者介面的螢幕截圖。

tooling.report 的初始版本涵蓋了 webpack v4、Rollup v2、Parcel v2 和 Browserify with Gulp,是目前最熱門的建構工具。我們打造了 toolsing.report,讓社群成員協助您靈活地新增更多建構工具和其他測試。

如果您缺少應測試的最佳做法,請在 GitHub 問題中提出建議。如果您準備編寫測試或新增初始設定中並未包含的新工具,歡迎貢獻您的貢獻

在此期間,歡迎進一步瞭解 tooling.report 建構方法,並觀看 web.dev 直播講座

網路隱私權與安全性

Chrome 認為開放網路世界尊重使用者隱私,並維持主要使用情境,讓所有人享有安全的網路體驗。

在 2019 年,Chrome 提議更新 Cookie 標準,以限制 Cookie 使用第一方情境,並要求使用 Cookie 明確標示第三方內容。具體來說,這為攻擊跨網站要求偽造攻擊提供了一道防線。Chrome、Firefox、Edge 和其他瀏覽器目前正在採用這項提案。

儘管 Chrome 因 COVID-19 疫情而決定暫時復原這些變更,很遺憾地,在人最容易遭受攻擊的期間內,一般而言,這類攻擊的數量也會增加。因此,透過 Chrome 84 穩定版 (2020 年 7 月中旬),變更將再次推出至所有 Chrome 80 以上版本。詳情請參閱 SameSite Cookie 指南以及 web.dev LIVE 工作階段

此外,Chrome 在 Privacy Sandbox 橫幅下方,推出了幾項標準提案,旨在支援使用網路平台實現生活的多種需求,同時以更尊重使用者隱私的方式完成這項提案。Chrome 會積極收集這些提案的意見回饋,並在 W3C 的開放論壇中參與討論,與其他單位的提案和想法一同討論。如要進一步瞭解這項計畫,請參閱開放式網路的安全性與隱私權

最後,檢視使用者安全性時,Spectre 是一個安全漏洞,表示在某個瀏覽器程序中執行的惡意程式碼,可能能夠讀取與該程序相關聯的任何資料,即使該程序是來自不同的來源也一樣。其中一種瀏覽器緩解措施是網站隔離,也就是將每個網站編入獨立的程序。觀看 web.dev 直播講座,進一步瞭解全新的跨源開啟程式和嵌入工具政策 (COOP 和 COEP)。

運用強大功能打造網路

Chrome 希望您能自由打造最優質的網頁應用程式,讓各種裝置的使用者都能發揮最大的觸及率。我們將 PWA 的安裝性和穩定性與功能專案 (Project Fugu) 結合,將重點放在簡化平台專屬應用程式與網頁之間的隔閡,協助您建構並提供優質體驗。

首先,Chrome 團隊努力幫助網頁程式開發人員和使用者進一步控管安裝體驗在網址列加入安裝促銷資訊,以及更多功能。儘管網路的普及,但部分商家還是必須在商店中發布應用程式。為了協助達成這個目標,Chrome 推出了 Bubblewrap 程式庫和 CLI,可讓您輕鬆將 PWA 發布到 Play 商店。事實上,PWABuilder.com 現已在背景使用 Bubblewrap。只要按幾下滑鼠,即可產生 APK,並將 PWA 上傳至 Play 商店,前提是必須符合條件

其次,Chrome 與作業系統緊密整合,例如使用 Web Share API 叫用系統層級共享服務,藉此分享相片、歌曲或任何內容,或是從其他應用程式分享時接收內容。您可以讓使用者即時掌握最新資訊,或用應用程式標記通知使用者是否有新活動。此外,現在使用者可以透過應用程式捷徑快速執行特定動作。本功能將於 2020 年 7 月中旬的 Chrome 第 84 版中推出。

最後,Chrome 也在開發新的功能,打造出過去難以實現的新情境,例如讀取及寫入使用者本機檔案系統中的檔案的編輯器,或是取得本機安裝字型清單,讓使用者能在設計中使用這些字型。

在 web.dev LIVE 中,我們探討了許多其他功能和功能,讓您提供與平台專屬應用程式相同的體驗。您可在第 2 天的時間表中前往 web.dev/live 查看所有工作階段。

Chrome 開發人員工具和 Lighthouse 6.0 的新功能

Chrome 開發人員工具:「問題」分頁、顏色缺失模擬器和網站體驗指標支援

Chrome 開發人員工具其中一項最強大的功能,就是可以找出網頁上的問題,並引起開發人員注意。隨著我們進入以隱私權為優先的網路的下一階段,這是最常見的問題。為減少控制台中通知的疲勞程度和簡潔區域,Chrome 開發人員工具推出了「問題」分頁,方便您從三種重大問題著手:Cookie 問題複合型內容COEP 問題。觀看 web.dev LIVE 工作階段,瞭解如何在「問題」分頁中尋找及修正問題

「問題」分頁的螢幕截圖。

此外,隨著網站體驗核心指標成為網頁程式開發人員最需要追蹤及評估的最重要指標之一,開發人員工具也希望確保開發人員能夠輕鬆追蹤這些門檻帶來的成效。這三項指標現在會顯示在 Chrome 開發人員工具「效能」面板中

最後,越來越多開發人員以無障礙設計為重心,開發人員工具也導入了色彩視覺障礙模擬器,方便開發人員模擬模糊視覺和其他類型的視覺障礙。如要進一步瞭解相關資訊和其他許多功能,請參閱「開發人員工具的新功能」講座。

視覺障礙模擬器的螢幕截圖。

Lighthouse 6.0:全新指標、Core Web Vitals 研究室評估資料、新版效能分數、全新稽核功能

Lighthouse 是一項開放原始碼自動化工具,可協助開發人員改善網站效能。在最新的版本中,Lighthouse 團隊著重於根據指標提供深入分析,讓您可以在關鍵維度之間充分掌握使用者體驗品質。

為確保一致性,Lighthouse 已新增對 Core Web Vitals 的支援:LCPTBT (FID 的 Proxy,因為 Lighthouse 是研究室工具,且 FID 只能在實際環境中測量) 和 CLS。Lighthouse 還移除了三個舊指標:First Meaningful PaintFirst CPUIdleMax Potential FID。這些項目之所以遭到移除,是因為其指標變異性和較新的指標,能夠更準確反映 Lighthouse 要衡量的使用者體驗。此外,Lighthouse 也根據使用者的意見,調整各項指標在整體效能分數中的佔比。

Lighthouse 也新增了評分計算工具,以便您比較版本 5 和 6 的分數,進而協助您探索效能分數。使用 Lighthouse 6.0 執行稽核時,報告會提供計算機連結,並填入您的結果。

最後,Lighthouse 新增了多項新稽核,並著重在 JavaScript 分析和無障礙功能。

新稽核的清單。

請觀看速度工具的新功能講座瞭解詳情。

瞭解詳情

感謝社群成員一同討論網路平台的機會和挑戰。

這篇文章總結了事件的部分重點,但還有其他許多重點。如果您想直接透過電子郵件接收更多內容,請務必查看所有工作階段,並訂閱 web.dev 電子報。並前往 web.dev/live 的「地區性活動」部分,尋找您所在時區的近期活動!