在 Google 的幫助下，讓您的網站快速、易於訪問且安全

martinez999

社群聚集在一起，這是一場數字活動，旨在討論平臺和工具生態系統的最新發展，讓開發人員有機會互相交談並詢問他們的想法向團隊提出緊迫的問題。在這三天裡，Google 團隊本著樂於助人的精神分享了一系列更新和新聞，併為網路開發人員提供了在這個充滿挑戰的時期保持網站穩定、強大和可訪問所需的所有工具和指導。 本文得到了我們在 Google 的親愛的朋友和web.dev LIVE的組織者的大力支援，web.dev LIVE 是一個致力於 Web 開發及其最新技術的數字活動。謝謝你！ 網路開發現場 今年早些時候，Chrome 團隊宣佈了Web Vitals計劃，旨在提供統一的指導、指標和工具，幫助開發人員在網路上提供出色的使用者體驗。Google 搜尋團隊最近還宣佈，他們將評估頁面體驗作為排名標準，並將核心網路生命指標作為其基礎。 2020 年核心 Web Vitals 的三大支柱是頁面內容的載入、互動性和視覺穩定性，這些指標通過以下指標來衡量： 解釋三個指標的圖示：最大內容繪製、首次輸入延遲和累積佈局偏移 2020 年核心網路生命（大預覽） 最大內容繪製測量感知的載入速度，並在頁面主要內容可能已載入時在頁面載入時間軸中標記點。 首次輸入延遲衡量響應能力並量化使用者在嘗試首次與頁面互動時感受到的體驗。 累積佈局偏移可衡量視覺穩定性並量化頁面內容的意外移動量。 在 web.dev LIVE 上，我們分享了有關如何優化 Core Web Vitals以及如何使用Chrome DevTools 探索網站或應用程式的 Vitals 值的最佳實踐。我們還分享了許多其他與效能相關的演講，您可以在第一天日程中的web.dev/live上找到這些演講。 工具.報告  網路是一個複雜的平臺，即使在最好的情況下，為其開發也可能具有挑戰性。構。

建工具旨在讓 Web 開發人員的生活更輕鬆，但結果是構建工具本身變得相當複雜。 為了幫助 Web 開發人員和工具作者克服 Web 的複雜性，我們構建了tooling.report。該網站可幫助您為下一個專案選擇正確的構建工具，決定從一種工具遷移到另一種工具是否值得，或者找出如何將最佳實踐納入您的工具配置和程式碼庫中。我們的目標是解釋選擇構建工具時涉及的權衡，並記錄如何遵循任何給定構建工具的最 電話號碼資料 佳實踐。 我們根據我們認為代表 Web 開發最佳實踐的內容為該報告設計了一套測試。這些測試使我們能夠確定哪種構建工具可以讓您遵循哪些最佳實踐，並且我們與構建工具作者合作，以確保我們正確使用他們的工具並公平地代表它們。 知名構建工具 webpack v4、Rollup v2、Parcel v2 和 Browserify+Gulp 的概述和比較 tooling.report上當前一組庫的比較報告（大預覽） tooling.report 的初始版本涵蓋了 webpack v4、Rollup v2 和 Parcel v2 以及 Browserify+Gulp，我們認為它們是目前最流行的構建工具。在社群的幫助下，我們構建了 tooling.report，可以靈活地新增更多構建工具和附加測試。 因此，如果您認為應該測試或缺少最佳實踐，請在 GitHub 問題中提出，如果您準備編寫新增我們未包含在初始集中的新工具，我們歡迎您做出貢獻！ 同時，您可。

以閱讀有關我們構建 tooling.report 的方法的更多資訊，並通過 web.dev LIVE觀看我們的會議以瞭解更多資訊。 最新的 Chrome 開發者工具和 Lighthouse 6.0   大多數 Web 開發人員每天都會在開發人員工具上花費大量時間，因此我們希望確保我們的工具能夠提高工作效率，無論是用於除錯還是用於稽核和修復問題以改善使用者體驗。 CHROME DEVTOOLS：新問題選項卡、顏色缺陷模擬器和 WEB VITALS 支援  Chrome DevTools 最強大的功能之一是它能夠發現網頁上的問題並將其提請開發人員注意 - 當我們進入隱私優先網路的下一階段時，這是最相關的。為了減少控制檯的通知疲勞和混亂，我們推出了“問題選項卡”，該選項卡主要關注三類關鍵問題：Cookie 問題、混合內容和COEP 問題。觀看我們關於使用“問題”選項卡查詢和解決問題的會議，瞭解更多資訊。 Chrome DevTools 時間線的螢幕截圖，開發人員可以在其中跟蹤和測量指標、效能等 Chrome DevTools 中的新問題選項卡（大預覽） 此外，隨著Core Web Vitals成為我們認為每個開發人員都必須跟蹤和衡量的最關鍵的指標集之一，我們希望確保開發人員能夠輕鬆跟蹤他們在這些閾值方面的表現。因此，我們在Chrome DevTools 時間軸中添加了這三個指標。 最後，隨著越來越多的開發人員關注可訪問性，我們還推出了色覺缺陷模擬器，它允許開發人員模擬視力缺陷，包括視力模糊和各種其他型別的色盲。我們非常高興能夠將此功能帶給希望使其網站對色盲更加友好的開發人員，您可以在我們的DevTools 最新動態會議中瞭解有關此功能和許多其他功能的更多資訊。