From 406afdd147ad27db3485ec8d9875febaeafe5e65 Mon Sep 17 00:00:00 2001 From: CYBAI Date: Thu, 17 Dec 2020 22:28:38 +0900 Subject: [PATCH] fixup! Translate 2020 Performance chapter into Traditional Chinese --- src/content/zh-TW/2020/performance.md | 218 +++++++++++++------------- 1 file changed, 108 insertions(+), 110 deletions(-) diff --git a/src/content/zh-TW/2020/performance.md b/src/content/zh-TW/2020/performance.md index 6771095cae5..da7c5025e37 100644 --- a/src/content/zh-TW/2020/performance.md +++ b/src/content/zh-TW/2020/performance.md @@ -2,82 +2,80 @@ part_number: II chapter_number: 9 title: 效能 -description: 2020 Web Almanac 的效能章節涵蓋了 Core Web Vitals、Lighthouse Performance Score、First Contentful Paint (FCP) 以及 Time to First Byte (TTFB)。 +description: 2020 Web Almanac 的效能章節涵蓋了 Core WebVitals、Lighthouse Performance Score、First Contentful Paint (FCP) 以及 Time to First Byte (TTFB)。 authors: [thefoxis] reviewers: [borisschapira, rviscomi, obto, noamr, Zizzamia, exterkamp] analysts: [max-ostapenko, dooman87] translators: [cybai] -thefoxis_bio: Karolina 是 Calibre 的 Product Design Lead。她主要負責打造最全面的速度監測平台。她同時也是為您蒐集效能相關訊息與資訊的 Performance Newsletter 發起人之一。Karolina 也時常寫有關於效能如何影響使用者體驗的文章。 +thefoxis_bio: Karolina 是 Calibre 的產品設計主管。她主要負責打造最全面的速度監測平台。她同時也是為您蒐集效能相關訊息與資訊的 Performance Newsletter 發起人之一。Karolina 也時常寫有關於效能如何影響使用者體驗的文章。 discuss: 2045 results: https://docs.google.com/spreadsheets/d/164FVuCQ7gPhTWUXJl1av5_hBxjncNi0TK8RnNseNPJQ/ queries: 09_Performance -featured_quote: 糟糕的效能並不只是讓使用者挫折或是對業務目標造成負面影響，他還築起了現實生活中人們與網路世界的屏障。今年的全球疫情那些已經存在的屏障。 +featured_quote: 糟糕的效能並不只是讓使用者挫折或是對業務目標造成負面影響，他還築起了現實生活中人們與網路世界的屏障；今年的全球性疫情更凸顯了那些已經存在的屏障。 featured_stat_1: 25% -featured_stat_label_1: Sites with good FCP on mobile +featured_stat_label_1: 擁有 Good 的 FCP 的手機版網頁 featured_stat_2: 18% -featured_stat_label_2: Sites with good TTFB on mobile +featured_stat_label_2: 擁有 Good 的 TTFB 的手機版網頁 featured_stat_3: 4% -featured_stat_label_3: Sites with unchanged Performance Score in LH6 +featured_stat_label_3: 在 Lighthouse 6 時效能分數（Performance Score）未改變的網站 --- -## Introduction +## 簡介 緩慢的速度無庸置疑地對使用者體驗造成了負面的影響，因此對於轉換率也是。但糟糕的效能並不只是讓使用者挫折或是對業務目標造成負面影響，他還築起了現實生活中人們與網路世界的屏障。今年的全球性疫情[更凸顯了那些已經存在的屏障](https://www.weforum.org/agenda/2020/04/coronavirus-covid-19-pandemic-digital-divide-internet-data-broadband-mobbile/)。隨著遠端學習、遠端工作還有遠端社交興起，人們的生活重心突然就被移到網路世界。微弱的訊號以及缺乏資源取得可用設備將這個轉變顯得更痛苦，即使不是非常嚴重，也已經對很多人造成影響。針對訊號強度、設備以及網路速度的不平等性儼然成為全球性現實生活的測試。 效能調校工具在近幾年持續成長來描繪出各式各樣的使用者體驗，並使工程師更容易找到問題的根本原因。從[去年的效能章節](../2019/performance)開始，在這個領域中，已經有許多重要的開發貢獻改變了我們如何監控速度的方式。 -隨著很受歡迎的品質檢測工具 Lighthouse 釋出 Lighthouse 6 後，[眾所皆知的效能分數（Performance Score）背後的演算法已經有了重大的改動](https://calibreapp.com/blog/how-performance-score-works)，因此分數也隨之變動。新釋出的[Core Web Vitals](https://calibreapp.com/blog/core-web-vitals)提供一套新的衡量標準來描述不同面向的使用者體驗。未來他將成為搜尋排行的要素之一，也將促使開發社群聚焦於新的速度準則。 +隨著很受歡迎的品質檢測工具 Lighthouse 釋出 Lighthouse 6 後，[眾所皆知的效能分數（Performance Score）背後的演算法已經有了重大的改動](https://calibreapp.com/blog/how-performance-score-works)，因此分數也隨之變動。新釋出的[Core WebVitals](https://calibreapp.com/blog/core-web-vitals)提供一套新的衡量標準來描述不同面向的使用者體驗。未來他將成為搜尋排行的要素之一，也將促使開發社群聚焦於新的速度準則。 -在此章節，我們將透過這些新工具來透視[Chrome User Experience Report (CrUX)](https://developers.google.com/web/tools/chrome-user-experience-report)提供的真實效能資料並分析相關的準則。在這邊必須特別註記，由於 iOS 的限制，CrUX 手機版的結果並不包含 Apple 手機作業系統的裝置。這個事實無可否認地影響了我們的分析，特別是當我們以國家為單位在檢視效能衡量標準時。 +在此章節，我們將透過這些新工具來透視[Chrome User Experience Report (CrUX)](https://developers.google.com/web/tools/chrome-user-experience-report)提供的真實效能資料並分析相關的準則。在這邊必須特別註記，由於 iOS 的限制，CrUX 手機版的結果並不包含 Apple 手機作業系統的裝置。這個事實無可否認地影響了我們的分析，特別是當我們以國家為單位在檢視效能衡量標準時。 讓我們一起一探究竟吧。 -## Lighthouse Performance Score +## Lighthouse 效能分數（Performance Score）{Lighthouse 效能分數} -在 2020 年五月時，[Lighthouse 6 被釋出](https://github.com/GoogleChrome/lighthouse/releases/tag/v6.0.0)。在此主版號更新中，受歡迎的效能檢測組針對效能分數（Performance Score）演算法做了顯著的改變。效能分數（Performance Score）可以說是檢測網站速度的最佳寫照 (high-level portrayal)。在 Lighthouse 6 之中，以六項（不是五項）衡量標準來評估分數：First Meaningful Paint、First CPU Idle 被移除並以 Largest Contentful Paint (LCP) 取代之、Total Blocking Time（TBT, the lab equivalent of First Input Delay）以及 Cumulative Layout Shift (CLS)。 +在 2020 年五月時，[Lighthouse 6 被釋出](https://github.com/GoogleChrome/lighthouse/releases/tag/v6.0.0)。在此主版號更新中，受歡迎的效能檢測組針對效能分數（Performance Score）演算法做了顯著的改變。效能分數（Performance Score）可以說是檢測網站速度的最佳寫照 (high-level portrayal)。在 Lighthouse 6 之中，以六項（不是五項）衡量標準來評估分數：First Meaningful Paint、First CPU Idle 被移除並以 Largest Contentful Paint (LCP) 取代之、Total Blocking Time（TBT, the lab equivalent of First Input Delay）以及 Cumulative Layout Shift (CLS)。 -新的分數演算法調整了新一代的效能衡量標準的優先度：Core Web Vitals，以及降低 First Contentful Paint (FCP)、Time to Interactive (TTI) 以及 Speed Index 的優先度並減少他們的分數權重。此演算法現在也會將三個層面的使用者體驗個別強調： **互動性**（Total Blocking Time 及 Time to Interactive）、**視覺穩定性**（Cumulative Layout Shift）以及**體感載入速度**（First Contentful Paint, Speed Index, Largest Contentful Paint）。 +新的分數演算法調整了新一代的效能衡量標準的優先度：Core WebVitals，以及降低 First Contentful Paint (FCP)、Time to Interactive (TTI) 以及 Speed Index 的優先度並減少他們的分數權重。此演算法現在也會將三個層面的使用者體驗個別強調： **互動性**（Total Blocking Time 及 Time to Interactive）、**視覺穩定性**（Cumulative Layout Shift）以及**體感載入速度**（First Contentful Paint, Speed Index, Largest Contentful Paint）。 -此外，該分數會根據桌機和手機的不同來使用不一樣的參考標準做計算。 實際上來說，這代表對桌機的標準較嚴格（預期較快的網頁）而在手機上標準較寬鬆（因為手機效能比桌機較慢）。你可以透過 [Lighthouse 分數計算機](https://googlechrome.github.io/lighthouse/scorecalc/)來比較 Lighthouse 5 及 6 之間的差異。所以，分數上到底如何改變了呢？ +此外，該分數會根據桌機和手機的不同來使用不一樣的參考標準做計算。 實際上來說，這代表對桌機的標準較嚴格（預期較快的網頁）而在手機上標準較寬鬆（因為手機效能比桌機較慢）。你可以透過 [Lighthouse 分數計算機](https://googlechrome.github.io/lighthouse/scorecalc/)來比較 Lighthouse 5 及 6 之間的差異。所以，分數上到底如何改變了呢？ {{ figure_markup( - image="performance-change-in-lighthouse-score.png", - caption="Lighthouse 版本 5 跟版本 6 之間的效能分數（Performance Score）差異", - description="Column chart showcasing the change in Performance Score between versions 5 and 6. The highest percentage of websites (4%) observed no changes to the score, and the number of sites with score decreases outweighs score improvements.", + image="performance-change-in-Lighthouse-score.png", + caption="Lighthouse 版本 5 跟版本 6 之間的效能分數（Performance Score）差異", + description="此柱狀圖顯示出版本 5 與版本 6 之間的效能分數（Performance Score）差異。最高有 4% 的網頁在分數上沒有任何改變，除此之外，分數下降的網站比分數改善的網站還多。", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3ukFCTxx__dTBLwDQ3K_hCtXdLRGOGUYdR_TO043n_aCTdcwkxPUku9Qfoal6BESiV5RMtd0nEbqT/pubchart?oid=786955541&format=interactive", sheets_gid="518150031", sql_file="lh6_vs_lh5_performance_score_02.sql" ) }} -由上表得知，有 4% 的網頁在效能分數（Performance Score）上沒有任何改變，但是分數變差的網頁比分數改善的網頁多。由下圖可以更直接的看到，效能分數（Performance Score）級距變得更差了（尤其是從百分比 10 至 25 的區間呈現下滑的曲線）： +由上表得知，有 4% 的網頁在效能分數（Performance Score）上沒有任何改變，但是分數變差的網頁比分數改善的網頁多。由下圖可以更直接的看到，效能分數（Performance Score）級距變得更差了（尤其是從百分比 10 至 25 的區間呈現下滑的曲線）： {{ figure_markup( - image="performance-lighthouse-score-distributions-yoy.png", - caption="Lighthouse 5 及 6 的 Lighthouse 效能分數（Performance Score）分佈圖", - description="在 Lighthouse 5 及 6 得到 0-100 效能分數（Performance Score）網站的散佈圖。隨著在 Lighthouse 6 的演算法改變，在百分比 0-25 的網站比率提高了，而 50-100 的比率減少了。", + image="performance-Lighthouse-score-distributions-yoy.png", + caption="Lighthouse 5 及 6 的 Lighthouse 效能分數（Performance Score）分佈圖", + description="在 Lighthouse 5 及 6 得到 0-100 效能分數（Performance Score）網站的散佈圖。隨著在 Lighthouse 6 的演算法改變，在百分比 0-25 的網站比率提高了，而 50-100 的比率減少了。", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3ukFCTxx__dTBLwDQ3K_hCtXdLRGOGUYdR_TO043n_aCTdcwkxPUku9Qfoal6BESiV5RMtd0nEbqT/pubchart?oid=926035471&format=interactive", sheets_gid="1303574513", sql_file="lh6_vs_lh5_performance_score_distribution.sql" ) }} -比較 Lighthouse 5 及 Lighthouse 6 之後，我們可以發現分數的分佈已經改變了。在 Lighthouse 6 演算法之下，我們可以觀察到在百分比 0 至 25 之間的頁面比率是上升的，而百分比 50 至 100 之間則在下降。而在 Lighthouse 5 時，可以看到有 3% 的頁面是得到 100 分的，在 Lighthouse 6 上，這個比率降低到只有 1%。 +比較 Lighthouse 5 及 Lighthouse 6 之後，我們可以發現分數的分佈已經改變了。在 Lighthouse 6 演算法之下，我們可以觀察到在百分比 0 至 25 之間的頁面比率是上升的，而百分比 50 至 100 之間則在下降。而在 Lighthouse 5 時，可以看到有 3% 的頁面是得到 100 分的，在 Lighthouse 6 上，這個比率降低到只有 1%。 在針對演算法做了大量修改後，這樣子的變化是可預期的。 -## Core Web Vitals: Largest Contentful Paint +## Core WebVitals: Largest Contentful Paint {core-web-vitals-largest-contentful-paint} -Largest Contentful Paint (LCP) 是指標性的時間基準衡量標準，此項會回報最大的 [above-the-fold element](https://web.dev/lcp/#what-elements-are-considered) 被 render 所需時間。 +Largest Contentful Paint (LCP) 是指標性的時間基準衡量標準，此項會回報最大的 [above-the-fold element](https://web.dev/lcp/#what-elements-are-considered) 被 render 所需時間。（註：above-the-fold element 的意思是，一進到網頁時，不滑動所看到的畫面。above-the-fold 原意來自於一份未打開的報紙所看到的封面。） -※ `above-the-fold element` 的意思是，一進到網頁時，不滑動所看到的畫面。`above-the-fold` 原意來自於一份未打開的報紙所看到的封面。 - -### LCP by device +### 根據不同裝置來分析 LCP {{ figure_markup( image="performance-lcp-by-device.png", - caption="以裝置為單位的 LCP 效能綜合分析表", - description="此柱狀圖顯示出有 53% 的桌機版網頁以及 43% 的手機版網頁被分類為 Good 體驗的網頁", + caption="根據不同裝置來分析的 LCP 效能綜合分析表", + description="此柱狀圖顯示出有 53% 的桌機版網頁以及 43% 的手機版網頁被分類為 Good 體驗的網頁", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3ukFCTxx__dTBLwDQ3K_hCtXdLRGOGUYdR_TO043n_aCTdcwkxPUku9Qfoal6BESiV5RMtd0nEbqT/pubchart?oid=696629857&format=interactive", sheets_gid="1270303192", sql_file="web_vitals_by_device.sql" @@ -86,12 +84,12 @@ Largest Contentful Paint (LCP) 是指標性的時間基準衡量標準，此項 在上表中，我們可以觀察到有 43% 至 53% 的網頁有好的 LCP 效能（低於 2.5 秒）：大多數網頁都會將重要資源根據優先度排序後，使得重要的多媒體能夠被快速的載入。對一個相對新的衡量標準來說，這是一個樂觀的訊號。在桌機及手機間些微的差距有可能是因為網路速度的不同、裝置性能以及圖片尺寸（尺寸較大或是針對桌機尺寸的圖片均須花較長時間下載並 render）所引起。 -### LCP by geographic location +### 根據地理位置來分析 LCP {{ figure_markup( image="performance-lcp-by-geo.png", - caption="以國家為單位的 LCP 效能分析表", - description="此柱狀圖顯示出最高的 Good 百分比的 LCP 效能分佈在歐洲及亞洲國家之間。韓國以 76% 的 Good 數據位居第一，而印度以 16% 的數據排名最後。", + caption="根據地理位置來分析的 LCP 效能分析表", + description="此柱狀圖顯示出最高的 Good 百分比的 LCP 效能分佈在歐洲及亞洲國家之間。韓國以 76% 的 Good 數據位居第一，而印度以 16% 的數據排名最後。", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3ukFCTxx__dTBLwDQ3K_hCtXdLRGOGUYdR_TO043n_aCTdcwkxPUku9Qfoal6BESiV5RMtd0nEbqT/pubchart?oid=1936626175&format=interactive", width="645", height="792", @@ -100,52 +98,52 @@ Largest Contentful Paint (LCP) 是指標性的時間基準衡量標準，此項 ) }} -`Good` LCP 數值高於其他等級（`Needs Improvement` 及 `Poor`）的網站大多分布在歐洲及亞洲國家之間，其中由韓國（南韓）以 76% 的 `Good` 位居第一。南韓在手機速度這方面一直都是領導者，在今年十月 [Speedtest Global Index](https://www.speedtest.net/global-index) 的報告中更有著令人印象深刻的 145Mbps 下載速度的數據。日本、捷克、台灣、德國以及比利時也都是有著相當高速且穩定的手機網路速度的國家。澳洲雖然在手機網路速度保持領先順位，但整體來說卻受到桌機版緩慢的連線時間及網路延遲時間（latency）影響而排名下滑。 +Good LCP 數值高於其他等級（Needs Improvement 及 Poor）的網站大多分布在歐洲及亞洲國家之間，其中由韓國（南韓）以 76% 的 Good 位居第一。南韓在手機速度這方面一直都是領導者，在今年十月 [Speedtest Global Index](https://www.speedtest.net/global-index) 的報告中更有著令人印象深刻的 145Mbps 下載速度的數據。日本、捷克、台灣、德國以及比利時也都是有著相當高速且穩定的手機網路速度的國家。澳洲雖然在手機網路速度保持領先順位，但整體來說卻受到桌機版緩慢的連線時間及網路延遲時間（latency）影響而排名下滑。 在我們的資料中，印度以僅有 16% 的好體驗持續呈現在最後一名。儘管在印度第一次接觸網際網路的人口數持續在成長，但手機及桌機網路速度[仍然是個問題](https://www.opensignal.com/reports/2020/04/india/mobile-network-experience)；4G 的平均下載速度是 10Mbps、3G 的平均下載速度是 3Mbps 而桌機則低於 50Mbps。 -### LCP by connection type +### 根據連線方式來分析的 LCP {{ figure_markup( image="performance-lcp-by-connection-type.png", caption="以連線方式為單位的 LCP 效能分析表", - description="此柱狀圖顯示出在 4G 有 48% 的網站呈現 Good 的 LCP。在 3G 時，被評為 Good 的網站比例驟減至 8%；2G 時剩下 1%，而慢速 2G 則是 0%。另外在離線狀態時為 18%。", + description="此柱狀圖顯示出在 4G 有 48% 的網站呈現 Good 的 LCP。在 3G 時，被評為 Good 的網站比例驟減至 8%；2G 時剩下 1%，而慢速 2G 則是 0%。另外在離線狀態時為 18%。", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3ukFCTxx__dTBLwDQ3K_hCtXdLRGOGUYdR_TO043n_aCTdcwkxPUku9Qfoal6BESiV5RMtd0nEbqT/pubchart?oid=97874305&format=interactive", sheets_gid="306222260", sql_file="web_vitals_by_ect.sql" ) }} -LCP 能夠顯現出計時方面的效能優點，當最大的 above-the-fold element 被 render 時（包括圖像、影片或 block 層級包含文字的元素），一點也不意外越慢的網路造成網路連線不佳的比例越高。 +LCP 能夠顯現出計時方面的效能優點，當最大的 above-the-fold element 被 render 時（包括圖像、影片或 block 層級包含文字的元素），一點也不意外越慢的網路造成網路連線不佳的比例越高。 -可以發現網路速度及好的 LCP 效能有明確的關聯，但即使是 4G 也只有 48% 的結果被歸類為 `Good`，其餘的一半仍有改進空間。自動化多媒體最佳化、提供正確的尺寸及格式還有為 Low Data Mode 做最佳化都能夠改善效能。詳情請看[LCP 改善指南](https://web.dev/optimize-lcp/)。 +可以發現網路速度及好的 LCP 效能有明確的關聯，但即使是 4G 也只有 48% 的結果被歸類為 Good，其餘的一半仍有改進空間。自動化多媒體最佳化、提供正確的尺寸及格式還有為 Low Data Mode 做最佳化都能夠改善效能。詳情請看[LCP 改善指南](https://web.dev/optimize-lcp/)。 -## Core Web Vitals: Cumulative Layout Shift +## Core WebVitals: Cumulative Layout Shift {core-web-vitals-cumulative-layout-shift} -Cumulative Layout Shift (CLS) 量化了在訪問網頁時，可視區域（viewport）中有多少元素移動了。並非透過時間性單位（秒或毫秒）來計算特定區快的互動性，CLS 協助我們找出訪問網頁時不如預期的頁面移動並以此來評分使用者體驗。 +Cumulative Layout Shift (CLS) 量化了在訪問網頁時，可視區域（viewport）中有多少元素移動了。並非透過時間性單位（秒或毫秒）來計算特定區快的互動性，CLS 協助我們找出訪問網頁時不如預期的頁面移動並以此來評分使用者體驗。 因此，相較於其他此章節提到的衡量標準，CLS 是一個不一樣且更完整的新型態 UX 衡量標準。 -### CLS by device +### 根據不同裝置來分析 CLS {{ figure_markup( image="performance-cls-by-device.png", - caption="以裝置為單位的 CLS 效能分析表", - description="此柱狀圖顯示出有超過半數的網站擁有 Good 的 CLS 數值，在桌機有 54%，而在手機則有 60%。在兩種情境下都只有 21% 的網站被評為 Poor 的 CLS。", + caption="根據不同裝置來分析的 CLS 效能分析表", + description="此柱狀圖顯示出有超過半數的網站擁有 Good 的 CLS 數值，在桌機有 54%，而在手機則有 60%。在兩種情境下都只有 21% 的網站被評為 Poor 的 CLS。", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3ukFCTxx__dTBLwDQ3K_hCtXdLRGOGUYdR_TO043n_aCTdcwkxPUku9Qfoal6BESiV5RMtd0nEbqT/pubchart?oid=1672696367&format=interactive", sheets_gid="1270303192", sql_file="web_vitals_by_device.sql" ) }} -根據 CrUX 資料顯示，在桌機及手機裝置中有半數以上的網站得到 `Good` CLS 分數。被評為優質的桌機版網頁及手機版網頁之間有些微的差距（大約 6 個百分比），後者（手機版）較優。我們可以推測手機版佔有 `Good` CLS 比率，是因為有些手機版網站會透過較少功能及較少視覺化效果來做最佳化。 +根據 CrUX 資料顯示，在桌機及手機裝置中有半數以上的網站得到 Good CLS 分數。被評為優質的桌機版網頁及手機版網頁之間有些微的差距（大約 6 個百分比），後者（手機版）較優。我們可以推測手機版佔有 Good CLS 比率，是因為有些手機版網站會透過較少功能及較少視覺化效果來做最佳化。 -### CLS by geographic location +### 根據地理位置來分析 CLS {{ figure_markup( image="performance-cls-by-geo.png", - caption="以國家為單位的 CLS 效能分析表", - description="此柱狀圖顯示出前 28 名的國家至少有 50% 的網站呈現出 Good 的 CLS。而中階（Needs Improvement）數值的網站則在各國之間穩定地呈現 11-15%。", + caption="根據地理位置來分析的 CLS 效能分析表", + description="此柱狀圖顯示出前 28 名的國家至少有 50% 的網站呈現出 Good 的 CLS。而中階（Needs Improvement）數值的網站則在各國之間穩定地呈現 11-15%。", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3ukFCTxx__dTBLwDQ3K_hCtXdLRGOGUYdR_TO043n_aCTdcwkxPUku9Qfoal6BESiV5RMtd0nEbqT/pubchart?oid=1861585123&format=interactive", width="645", height="792", @@ -154,52 +152,52 @@ Cumulative Layout Shift (CLS) 量化了在訪問網頁時，可視區域（viewp ) }} -在不同地區的 CLS 效能原則上都表現的不錯，且至少有 56% 的網站得到 `Good` 的評比。對感知視覺穩定性來說，這是一個很棒的消息。此外，我們可以同樣觀察到排名較前面的國家與 LCP 排名較前面的國家相似，其中包括韓國、日本、捷克、德國以及波蘭。 +在不同地區的 CLS 效能原則上都表現的不錯，且至少有 56% 的網站得到 Good 的評比。對感知視覺穩定性來說，這是一個很棒的消息。此外，我們可以同樣觀察到排名較前面的國家與 LCP 排名較前面的國家相似，其中包括韓國、日本、捷克、德國以及波蘭。 -相較其他的衡量標準（例如 LCP），視覺穩定性較少受到地理位置或是網路延遲時間的影響。排名最佳與最差的國家之間，`Good` 百分比的差距在 LCP 有 61% 之差，但在 CLS 僅有 13%。根據以上數據，評分中段的網頁相對地少，反倒是 `Poor` 的使用者佔了 19% 至 29%。造成 CLS 分數下降的因素有很多種，詳情請見 [Cumulative Layout Shift 最佳化指南](https://web.dev/optimize-cls/)。 +相較其他的衡量標準（例如 LCP），視覺穩定性較少受到地理位置或是網路延遲時間的影響。排名最佳與最差的國家之間，Good 百分比的差距在 LCP 有 61% 之差，但在 CLS 僅有 13%。根據以上數據，評分中段的網頁相對地少，反倒是 Poor 的使用者佔了 19% 至 29%。造成 CLS 分數下降的因素有很多種，詳情請見 [Cumulative Layout Shift 最佳化指南](https://web.dev/optimize-cls/)。 -### CLS by connection type +### 根據連線方式來分析的 CLS {{ figure_markup( image="performance-cls-by-connection-type.png", caption="以連線方式為單位的 CLS 效能分析表", - description="此柱狀圖顯示出 Good、Need Improvement 及 Poor 呈現平均分佈的 CLS 測量結果。離線及 4G 則各以 70% 和 64% 的 Good 體驗領先其他連線方式。", + description="此柱狀圖顯示出 Good、Need Improvement 及 Poor 呈現平均分佈的 CLS 測量結果。離線及 4G 則各以 70% 和 64% 的 Good 體驗領先其他連線方式。", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3ukFCTxx__dTBLwDQ3K_hCtXdLRGOGUYdR_TO043n_aCTdcwkxPUku9Qfoal6BESiV5RMtd0nEbqT/pubchart?oid=151288279&format=interactive", sheets_gid="306222260", sql_file="web_vitals_by_ect.sql" ) }} -除了離線及 4G 之外，其餘連線方式都有著合理地平均分佈的 CLS 分數。在離線的情境下，我們可以推測網站是由 Service Worker 來提供服務。因此，在離線方式下並不會有任何的下載延遲，也就得到了較高的 `Good` 分數。 +除了離線及 4G 之外，其餘連線方式都有著合理地平均分佈的 CLS 分數。在離線的情境下，我們可以推測網站是由 Service Worker 來提供服務。因此，在離線方式下並不會有任何的下載延遲，也就得到了較高的 Good 分數。 -針對 4G 比較難下明確的結論，但我們可以推測大概是因為 4G+ 的連線方式都是由桌機裝置所連線。如果此假設為真，web fonts 及圖像皆可以被 cache，因此也正面地影響了 CLS 的測量結果。 +針對 4G 比較難下明確的結論，但我們可以推測大概是因為 4G+ 的連線方式都是由桌機裝置所連線。如果此假設為真，web fonts 及圖像皆可以被 cache，因此也正面地影響了 CLS 的測量結果。 -## Core Web Vitals: First Input Delay +## Core WebVitals: First Input Delay {core-web-vitals-first-input-delay} -First Input Delay (FID) 用於測量首次使用者互動到瀏覽器可以反應該互動的時間差。FID 是能夠顯示你的網頁互動性有多高的好指標。 +First Input Delay (FID) 用於測量首次使用者互動到瀏覽器可以反應該互動的時間差。FID 是能夠顯示你的網頁互動性有多高的好指標。 -### FID by device +### 根據不同裝置來分析 FID {{ figure_markup( image="performance-fid-by-device.png", - caption="以裝置為單位的 FID 效能分析表", - description="此柱狀圖顯示出在兩種裝置上均有高比例的 `Good` 的 FID 效能；在桌機上有 100%，在手機上則是 80%", + caption="根據不同裝置來分析的 FID 效能分析表", + description="此柱狀圖顯示出在兩種裝置上均有高比例的 Good 的 FID 效能；在桌機上有 100%，在手機上則是 80%", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3ukFCTxx__dTBLwDQ3K_hCtXdLRGOGUYdR_TO043n_aCTdcwkxPUku9Qfoal6BESiV5RMtd0nEbqT/pubchart?oid=2090682651&format=interactive", sheets_gid="1270303192", sql_file="web_vitals_by_device.sql" ) }} -相較其他評比，手機及桌機均以高百分比分佈在 `Good` 比較不常見。在桌機中，基於 75% 網頁分佈來說，有 100% 的網站得到相當快的 FID 時間差，這也意味著體驗到互動延遲的使用者極少。 +相較其他評比，手機及桌機均以高百分比分佈在 Good 比較不常見。在桌機中，基於 75% 網頁分佈來說，有 100% 的網站得到相當快的 FID 時間差，這也意味著體驗到互動延遲的使用者極少。 -在手機中，有 80% 的網站被評比為 `Good`。較合理的解釋可能是，相較於桌機，手機的 CPU 性能較低，而網路延遲（導致 script 下載及執行的延遲）、電池功率以及溫度限制都是消耗 CPU 的潛在因素。以上所述因素皆有可能影響 FID 類型的互動性衡量標準。 +在手機中，有 80% 的網站被評比為 Good。較合理的解釋可能是，相較於桌機，手機的 CPU 性能較低，而網路延遲（導致 script 下載及執行的延遲）、電池功率以及溫度限制都是消耗 CPU 的潛在因素。以上所述因素皆有可能影響 FID 類型的互動性衡量標準。 -### FID by geographic location +### 根據地理位置來分析 FID {{ figure_markup( image="performance-fid-by-geo.png", - caption="以國家為單位的 FID 效能分析表", - description="此柱狀圖顯示出以國家為單位的完美 FID 效能。前 28 名的國家呈現出 79% 至 97% 如此近乎無 Poor 體驗的完美 Good FID 體驗數值。", + caption="根據地理位置來分析的 FID 效能分析表", + description="此柱狀圖顯示出每個國家皆有完美的 FID 效能。前 28 名的國家呈現出 79% 至 97% 如此近乎無 Poor 體驗的完美 Good FID 體驗數值。", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3ukFCTxx__dTBLwDQ3K_hCtXdLRGOGUYdR_TO043n_aCTdcwkxPUku9Qfoal6BESiV5RMtd0nEbqT/pubchart?oid=1107653062&format=interactive", width="645", height="792", @@ -208,34 +206,34 @@ First Input Delay (FID) 用於測量首次使用者互動到瀏覽器可以反 ) }} -FID 分數的地理分佈結果證實了上一段綜合裝置圖表的結果。最差還有 79% 網站得到 `Good` FID，而韓國則再次以驚人的 97% 在此項評比位居第一。有趣的是，在 CLS 及 LCP 的前幾名競爭者（如：捷克、波蘭、烏克蘭及俄羅斯）反倒在這裡跌至倒數的名次。 +FID 分數的地理分佈結果證實了上一段綜合裝置圖表的結果。最差還有 79% 網站得到 Good FID，而韓國則再次以驚人的 97% 在此項評比位居第一。有趣的是，在 CLS 及 LCP 的前幾名競爭者（如：捷克、波蘭、烏克蘭及俄羅斯）反倒在這裡跌至倒數的名次。 -再次強調，要推測出排名為何如此的原因不容易。 {# I think it IS easy to speculate why - precisely for the reasons you give! #} 如果假設 FID 與 JavaScript 執行性能有關係，在手機性能越好則越貴或甚至被當成奢侈品的國家，反而會得到較低的 FID 排名。波蘭身為 [iPhone 價格最貴](https://qz.com/1106603/where-the-iphone-x-is-cheapest-and-most-expensive-in-dollars-pounds-and-yuan/)國家之一就是個好例子；再加上[平均薪資較低](https://en.wikipedia.org/wiki/List_of_European_countries_by_average_wage#Net_average_monthly_salary)，一份薪水可能還不夠買一隻 Apple 旗艦機。相反地，澳洲的[平均薪資](https://www.news.com.au/finance/average-australian-salary-how-much-you-have-to-earn-to-be-better-off-than-most/news-story/6fcdde092e87872b9957d2ab8eda1cbd)足以讓澳洲人以一週的薪水就能夠買一隻 iPhone。幸運地是，除了有較 1-2% 慢能夠互動的網頁之外，低評分的網頁百分比大多為 0。 +再次強調，我們可以推測出為何如此，但我們會需要更多的分析來佐證我們的推測是正確的。如果假設 FID 與 JavaScript 執行性能有關係，在手機性能越好則越貴或甚至被當成奢侈品的國家，反而會得到較低的 FID 排名。波蘭身為 [iPhone 價格最貴](https://qz.com/1106603/where-the-iphone-x-is-cheapest-and-most-expensive-in-dollars-pounds-and-yuan/)國家之一就是個好例子；再加上[平均薪資較低](https://en.wikipedia.org/wiki/List_of_European_countries_by_average_wage#Net_average_monthly_salary)，一份薪水可能還不夠買一隻 Apple 旗艦機。相反地，澳洲的[平均薪資](https://www.news.com.au/finance/average-australian-salary-how-much-you-have-to-earn-to-be-better-off-than-most/news-story/6fcdde092e87872b9957d2ab8eda1cbd)足以讓澳洲人以一週的薪水就能夠買一隻 iPhone。幸運地是，除了有較 1-2% 慢能夠互動的網頁之外，低評分的網頁百分比大多為 0。 -### FID by connection type +### 根據連線方式來分析的 FID {{ figure_markup( image="performance-fid-by-connection-type.png", caption="以連線方式為單位的 FID 效能分析表", - description="此柱狀圖顯示出 Good FID 以高比例分佈在各個連線方式下。離線、3G 及 4G 則以高於 80% 的 Good 網站體驗領先其餘連線方式。", + description="此柱狀圖顯示出 Good FID 以高比例分佈在各個連線方式下。離線、3G 及 4G 則以高於 80% 的 Good 網站體驗領先其餘連線方式。", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3ukFCTxx__dTBLwDQ3K_hCtXdLRGOGUYdR_TO043n_aCTdcwkxPUku9Qfoal6BESiV5RMtd0nEbqT/pubchart?oid=808962538&format=interactive", sheets_gid="306222260", sql_file="web_vitals_by_ect.sql" ) }} -從 2G 的 73% 到 4G 的 87%，我們可以觀察到網路速度與快速的 FID 有直接關係。較快的網路可以幫助較迅速的 script 下載，固然也就加快了 parsing 的開始以及使得較少的 task block 在 main thread 上。這是一份很樂觀的結果報告，特別是評比不佳的網站比例不超過 5%。 +從 2G 的 73% 到 4G 的 87%，我們可以觀察到網路速度與快速的 FID 有直接關係。較快的網路可以幫助較迅速的 script 下載，固然也就加快了 parsing 的開始以及使得較少的 task block 在 main thread 上。這是一份很樂觀的結果報告，特別是評比不佳的網站比例不超過 5%。 -## First Contentful Paint +## First Contentful Paint {first-contentful-paint} -First Contentful Paint (FCP) 用於測量瀏覽器第一次 render 任何文字、圖片、非白色 canvas 或是 SVG 內容。FCP 能夠描繪出「在網站載入時，使用者需要等待多久時間才能看到第一個內容被呈現」，因此這是一項測量使用者體感速度的好指標。 +First Contentful Paint (FCP) 用於測量瀏覽器第一次 render 任何文字、圖片、非白色 canvas 或是 SVG 內容。FCP 能夠描繪出「在網站載入時，使用者需要等待多久時間才能看到第一個內容被呈現」，因此這是一項測量使用者體感速度的好指標。 -### FCP by device +### 根據不同裝置來分析 FCP {{ figure_markup( image="performance-fcp-desktop-distribution.png", - caption="以 Fast、Average 以及 Slow 分類的 FCP 效能的桌機版分佈圖", - description="以 Fast、Average 以及 Slow 分類的 FCP 效能的桌機版分佈圖。Fast 以線性分佈，但中間稍微突起。相較於 2019 年，由於 FCP 分類方式的改變，今年更多 Fast 與 Slow 的 FCP 體驗。", + caption="以 Fast、Average 以及 Slow 分類的 FCP 效能的桌機版分佈圖", + description="以 Fast、Average 以及 Slow 分類的 FCP 效能的桌機版分佈圖。Fast 以線性分佈，但中間稍微突起。相較於 2019 年，由於 FCP 分類方式的改變，今年更多 Fast 與 Slow 的 FCP 體驗。", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3ukFCTxx__dTBLwDQ3K_hCtXdLRGOGUYdR_TO043n_aCTdcwkxPUku9Qfoal6BESiV5RMtd0nEbqT/pubchart?oid=1953305743&format=interactive", sheets_gid="2122167666", sql_file="web_vitals_distribution_by_device.sql" @@ -244,20 +242,20 @@ First Contentful Paint (FCP) 用於測量瀏覽器第一次 render 任何文字 {{ figure_markup( image="performance-fcp-mobile-distribution.png", - caption="以 Fast、Average 以及 Slow 分類的 FCP 效能的手機版分佈圖", - description="以 Fast、Average 以及 Slow 分類的 FCP 效能的手機版分佈圖。Fast 仍然以線性分佈，但不像桌機版中間有個突起。相較於 2019 年，由於 FCP 分類方式的改變，今年更多 Fast 與 Slow 的 FCP 體驗。", + caption="以 Fast、Average 以及 Slow 分類的 FCP 效能的手機版分佈圖", + description="以 Fast、Average 以及 Slow 分類的 FCP 效能的手機版分佈圖。Fast 仍然以線性分佈，但不像桌機版中間有個突起。相較於 2019 年，由於 FCP 分類方式的改變，今年更多 Fast 與 Slow 的 FCP 體驗。", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3ukFCTxx__dTBLwDQ3K_hCtXdLRGOGUYdR_TO043n_aCTdcwkxPUku9Qfoal6BESiV5RMtd0nEbqT/pubchart?oid=38297781&format=interactive", sheets_gid="2122167666", sql_file="web_vitals_distribution_by_device.sql" ) }} -在上表中，FCP 分佈被拆成桌機及手機。[相較去年結果](../2019/performance#fcp-by-device)，可以發現到較少 FCP 指數呈現為 `Average`，反而可以觀察到無論是哪種裝置，`Fast` 及 `Slow` 的比率都升高了。此外，也可以發現手機使用者相較桌機使用者更頻繁的體驗較慢的 FCP 的情況仍然存在。整體來說，使用者們較可能體驗好的或差的體驗，而不是普通的體驗。 +在上表中，FCP 分佈被拆成桌機及手機。[相較去年結果](../2019/performance#fcp-by-device)，可以發現到較少 FCP 指數呈現為 Average，反而可以觀察到無論是哪種裝置，Fast 及 Slow 的比率都升高了。此外，也可以發現手機使用者相較桌機使用者更頻繁的體驗較慢的 FCP 的情況仍然存在。整體來說，使用者們較可能體驗好的或差的體驗，而不是普通的體驗。 {{ figure_markup( image="performance-fcp-mobile-year-on-year.png", - caption="2019 與 2020 年手機版網站 FCP 被標為 Good、Needs Improvement 以及 Poor 分佈相比", - description="此柱狀圖顯示手機版網站 FCP 被標為 Good、Needs Improvement 以及 Poor 在 2019 至 2020 間已經改變了。在 2020 年，有 75% 的網站是低於標準的 FCP。", + caption="2019 與 2020 年手機版網站 FCP 被標為 Good、Needs Improvement 以及 Poor 分佈相比", + description="此柱狀圖顯示手機版網站 FCP 被標為 Good、Needs Improvement 以及 Poor 在 2019 至 2020 間已經改變了。在 2020 年，有 75% 的網站是低於標準的 FCP。", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3ukFCTxx__dTBLwDQ3K_hCtXdLRGOGUYdR_TO043n_aCTdcwkxPUku9Qfoal6BESiV5RMtd0nEbqT/pubchart?oid=2037503700&format=interactive", sheets_gid="1270303192", sql_file="web_vitals_by_device.sql" @@ -266,14 +264,14 @@ First Contentful Paint (FCP) 用於測量瀏覽器第一次 render 任何文字 對比前年同期手機裝置的 FCP 數值的話，我們可以觀察到好的體驗變少了，且中等及不佳的體驗增加了。75% 的網站的 FCP 值低於平均。我們可以推測如此高比例的 FCP 數值低於理想值，必定是造成使用者感到挫折或是使用者體驗下降的原因之一。 -還有很多種因素可能造成繪製延遲，例如：server 延遲時間（以一些衡量標準來評估，例如：[Time to First Byte (TTFB)](#time-to-first-byte-ttfb) 以及 RTT），阻擋 JavaScript requests 或是沒被適當處理的客製化字體等等。 +還有很多種因素可能造成繪製延遲，例如：server 延遲時間（以一些衡量標準來評估，例如：[Time to First Byte (TTFB)](#time-to-first-byte-ttfb) 以及 RTT），阻擋 JavaScript requests 或是沒被適當處理的客製化字體等等。 -### FCP by geographic location +### 根據地理位置來分析 FCP {{ figure_markup( image="performance-fcp-by-geo.png", - caption="以國家為單位的 FCP 效能分析表", - description="此柱狀圖顯示出在 28 個國家之中只有 7 個國家擁有超過 40% 的網站被評為 Good 的 FCP 效能。相較於 2019，由於 FCP 評分標準的改變，Good 以及 Poor 的比例都增加了。", + caption="根據地理位置來分析的 FCP 效能分析表", + description="此柱狀圖顯示出在 28 個國家之中只有 7 個國家擁有超過 40% 的網站被評為 Good 的 FCP 效能。相較於 2019，由於 FCP 評分標準的改變，Good 以及 Poor 的比例都增加了。", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3ukFCTxx__dTBLwDQ3K_hCtXdLRGOGUYdR_TO043n_aCTdcwkxPUku9Qfoal6BESiV5RMtd0nEbqT/pubchart?oid=78259488&format=interactive", sheets_gid="1708427314", width="645", @@ -282,58 +280,58 @@ First Contentful Paint (FCP) 用於測量瀏覽器第一次 render 任何文字 ) }} -在我們開始分析前，值得一提的是，2019 年效能章節的 `Good` 及 `Poor` 評估標準和 2020 年不同。在 2019 年的標準中，FCP 低於 1 秒的網站被分類為 `Good`，高於 3 秒的才會被分類為 `Poor`。而在 2020 年的標準中，評分標準變成低於 1.5 秒為 `Good`、高於 2.5 秒為 `Poor`。 +在我們開始分析前，值得一提的是，2019 年效能章節的 Good 及 Poor 評估標準和 2020 年不同。在 2019 年的標準中，FCP 低於 1 秒的網站被分類為 Good，高於 3 秒的才會被分類為 Poor。而在 2020 年的標準中，評分標準變成低於 1.5 秒為 Good、高於 2.5 秒為 Poor。 -這個改變也代表著此數值分佈圖中被評為 `Good` 及 `Poor` 的網站都會變得更多。相較於[去年的結果](../2019/performance#fcp-by-geography)，我們可以觀察到此現象。以地理位置分佈來說，前十名最快的網站的國家與 2019 相同，但捷克與比利時的排名變前面且美國與英國的名次下降了。韓國以幾近於去年兩倍的 62% 的超快 FCP 數值領先在第一名（可以猜測受惠於評估標準的改變）。前幾名的國家也幾乎都是去年的 `Good` 的兩倍。 +這個改變也代表著此數值分佈圖中被評為 Good 及 Poor 的網站都會變得更多。相較於[去年的結果](../2019/performance#fcp-by-geography)，我們可以觀察到此現象。以地理位置分佈來說，前十名最快的網站的國家與 2019 相同，但捷克與比利時的排名變前面且美國與英國的名次下降了。韓國以幾近於去年兩倍的 62% 的超快 FCP 數值領先在第一名（可以猜測受惠於評估標準的改變）。前幾名的國家也幾乎都是去年的 Good 的兩倍。 -當中等階段（`Needs Improvement`）的百分比變少，FCP 數值不佳的網頁也隨之增加，尤其是倒數幾名的拉丁美洲及南亞地區國家。 +當中等階段（Needs Improvement）的百分比變少，FCP 數值不佳的網頁也隨之增加，尤其是倒數幾名的拉丁美洲及南亞地區國家。 再次強調，有可能有多種因素造成 FCP 降低，例如不佳的 TTFB 數值，但我們很難在不確定前因後果的情況下來證明為什麼 FCP 降低。舉例來說，假設我們想要分析特定國家的效能，比方說澳洲，我們會意外地發現他的名次很後面。澳洲的智慧型手機普及率是世界排名最高之一，並且他們擁有最快的手機網路以及相對高的平均所得。我們可能會因此輕易地認為澳洲的排名應該要更前面。但是，當我們考慮到較慢的定點連線、網路延遲時間以及在 CrUX 中缺少 iOS 的數據等，就可以慢慢理解為什麼澳洲的名次可能會在如此後面。以這樣的例子來說（只談論到表面的問題），我們就可以了解要完整了解每個國家的情況來分析此數據有多困難了。 -### FCP by connection type +### 根據連線方式來分析的 FCP {{ figure_markup( image="performance-fcp-by-connection-type.png", caption="以連線方式為單位的 FCP 效能分析表", - description="此柱狀圖顯示出在 4G 時僅有 31% 的網站呈現 Good 的 FCP。離線時此數值減少至 10%；其餘的連線方式則幾近於只有 Poor 的 FCP 體驗。", + description="此柱狀圖顯示出在 4G 時僅有 31% 的網站呈現 Good 的 FCP。離線時此數值減少至 10%；其餘的連線方式則幾近於只有 Poor 的 FCP 體驗。", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3ukFCTxx__dTBLwDQ3K_hCtXdLRGOGUYdR_TO043n_aCTdcwkxPUku9Qfoal6BESiV5RMtd0nEbqT/pubchart?oid=1949864731&format=interactive", sheets_gid="306222260", sql_file="web_vitals_by_ect.sql" ) }} -與其他衡量標準相同，FCP 同樣也受到連線速度影響。在 3G 網路下，只有 2% 的人感受到 `Good` 體驗，而在 4G 則有 31%。雖然這並不是最理想的 FCP 效能，但相較於去年有些地區[已經改善了](../2019/performance#fcp-by-effective-connection-type)，但需要再次強調的是這可能也是受到了 `Good` 及 `Poor` 的重新分類。我們同樣可以看到 `Good` 及 `Poor` 增加、中階（`Needs Improvement`）網頁減少的趨勢。 +與其他衡量標準相同，FCP 同樣也受到連線速度影響。在 3G 網路下，只有 2% 的人感受到 Good 體驗，而在 4G 則有 31%。雖然這並不是最理想的 FCP 效能，但相較於去年有些地區[已經改善了](../2019/performance#fcp-by-effective-connection-type)，但需要再次強調的是這可能也是受到了 Good 及 Poor 的重新分類。我們同樣可以看到 Good 及 Poor 增加、中階（Needs Improvement）網頁減少的趨勢。 -這個趨勢更進一步描繪出了數位差距，網路越慢且可能性能越差的裝置條件下的效能體驗越差。 改善慢速連線下的 FCP 與增強 TTFB 有直接關係，我們可以在 [Aggregate TTFB performance by connection type chart](#ttfb-by-connection-type) 觀察到 `Poor` TTFB = `Poor` FCP。 +這個趨勢更進一步描繪出了數位差距，網路越慢且可能性能越差的裝置條件下的效能體驗越差。 改善慢速連線下的 FCP 與增強 TTFB 有直接關係，我們可以在 [Aggregate TTFB 根據連線方式來分析的 performance chart](#ttfb-by-connection-type) 觀察到 Poor TTFB = Poor FCP。 對 [hosting provider](https://ismyhostfastyet.com/) 或是 [CDN](https://www.cdnperf.com/) 的選擇對於速度也許會有加乘效果。基於速度最快的可能選擇服務會幫助改善 FCP 及 TTFB，尤其是在網速較慢的情況。字體載入時間也深深影響了 FCP，所以[確保 Web Fonts 下載後是看得到的](https://web.dev/font-display/)也是值得一試的策略（特別是在較慢的網路通訊之下，下載這些資源都相當耗時）。 -仔細觀察「offline」的數據後，我們可以歸類出 FCP 數值的問題與網路型態**無關**。我們並沒有在此圖表中觀察到數值隨著網路型態變化而有重大的增加；當然，如果我們假設此問題與網路型態有關，那我們必定會觀察到此數值隨之增加。可以發現 rendering 並沒有隨著下載 JavaScript 而延遲，反倒是受到 parsing 及 execution 的影響。 +仔細觀察離線的數據後，我們可以歸類出 FCP 數值的問題與網路型態**無關**。我們並沒有在此圖表中觀察到數值隨著網路型態變化而有重大的增加；當然，如果我們假設此問題與網路型態有關，那我們必定會觀察到此數值隨之增加。可以發現 rendering 並沒有隨著下載 JavaScript 而延遲，反倒是受到 parsing 及 execution 的影響。 -## Time to First Byte +## Time to First Byte {time-to-first-byte} -Time to First Byte (TTFB) 是計算初始 HTML request 發出到第一個 byte 被返回到瀏覽器之間的時間。 迅速地處理 requests 很快的會影響到其他效能衡量標準，因為他們不只會延遲畫面繪製，還會延遲下載資源。 +Time to First Byte (TTFB) 是計算初始 HTML request 發出到第一個 byte 被返回到瀏覽器之間的時間。 迅速地處理 requests 很快的會影響到其他效能衡量標準，因為他們不只會延遲畫面繪製，還會延遲下載資源。 -### TTFB by device +### 根據不同裝置來分析 TTFB {{ figure_markup( image="performance-ttfb-by-device.png", - caption="以裝置為單位的 TTFB 效能分析表", - description="此柱狀圖顯示出在桌機版中有 76% 的網站被評為 Poor 的 TTFB 而在手機版則是 83%。Good 的 TTFB 網站比例不超過 24%。", + caption="根據不同裝置來分析的 TTFB 效能分析表", + description="此柱狀圖顯示出在桌機版中有 76% 的網站被評為 Poor 的 TTFB 而在手機版則是 83%。Good 的 TTFB 網站比例不超過 24%。", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3ukFCTxx__dTBLwDQ3K_hCtXdLRGOGUYdR_TO043n_aCTdcwkxPUku9Qfoal6BESiV5RMtd0nEbqT/pubchart?oid=1981576071&format=interactive", sheets_gid="1270303192", sql_file="web_vitals_by_device.sql" ) }} -在桌機中，有 76% 的網站**沒**被評為 `Good` 的 TTFB；在手機上，這個百分比甚至上升到 83%。當這項指標假設大多效能評估與工作都專注於前端及視覺上的 rendering 而非資源傳輸或是 server-side 的工作，我們也許可以假設此數據描繪出 TTFB 往往是個被過度分析的衡量標準。高 TTFB 會直接對其他過多的效能有負面的影響，這仍然是個需要被改善的領域。 +在桌機中，有 76% 的網站**沒**被評為 Good 的 TTFB；在手機上，這個百分比甚至上升到 83%。當這項指標假設大多效能評估與工作都專注於前端及視覺上的 rendering 而非資源傳輸或是 server-side 的工作，我們也許可以假設此數據描繪出 TTFB 往往是個被過度分析的衡量標準。高 TTFB 會直接對其他過多的效能有負面的影響，這仍然是個需要被改善的領域。 -### TTFB by geographic location +### 根據地理位置來分析 TTFB {{ figure_markup( image="performance-ttfb-by-geo.png", - caption="以國家為單位的 TTFB 效能分析表", - description="此柱狀圖顯示出 TTFB 的效能持續呈現低於標準的狀態，在 28 個國家之中僅有 4 個有超過 30% 的網站擁有 Good 的 TTFB 數值。當排名越低時，越可以發現被評為 Needs Improvement 的中階網站持續佔有超過 40%，而 Poor 體驗網站的比例也隨著名次下降而提升。", + caption="根據地理位置來分析的 TTFB 效能分析表", + description="此柱狀圖顯示出 TTFB 的效能持續呈現低於標準的狀態，在 28 個國家之中僅有 4 個有超過 30% 的網站擁有 Good 的 TTFB 數值。當排名越低時，越可以發現被評為 Needs Improvement 的中階網站持續佔有超過 40%，而 Poor 體驗網站的比例也隨著名次下降而提升。", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3ukFCTxx__dTBLwDQ3K_hCtXdLRGOGUYdR_TO043n_aCTdcwkxPUku9Qfoal6BESiV5RMtd0nEbqT/pubchart?oid=1135415956&format=interactive", width="645", height="792", @@ -342,14 +340,14 @@ Time to First Byte (TTFB) 是計算初始 HTML request 發出到第一個 byte ) }} -將今年的 TTFB 地理位置數據與 [2019 結果](../2019/performance#ttfb-by-geo)相比，可以注意到有更多較快的網頁了；但與 FCP 情況相似的是，TTFB 的衡量標準已經改變了。在去年，我們視 TTFB 低於 200ms 為快的，而高於 1000ms 為慢的；在 2020 年的衡量標準則變成低於 550ms 為 `Good` 而高於 1500ms 為 `Poor`。在如此重大改變之下，我們可以發現到圖表也跟著有了重大的改變；例如，在韓國 `Good` 網頁上升了 36% 或是台灣上升了 22%。總體來說，我們仍然可以觀察到相似的區域（例如亞太地區及特定歐洲地區）在這項數據保持領先。 +將今年的 TTFB 地理位置數據與 [2019 結果](../2019/performance#ttfb-by-geo)相比，可以注意到有更多較快的網頁了；但與 FCP 情況相似的是，TTFB 的衡量標準已經改變了。在去年，我們視 TTFB 低於 200ms 為快的，而高於 1000ms 為慢的；在 2020 年的衡量標準則變成低於 550ms 為 Good 而高於 1500ms 為 Poor。在如此重大改變之下，我們可以發現到圖表也跟著有了重大的改變；例如，在韓國 Good 網頁上升了 36% 或是台灣上升了 22%。總體來說，我們仍然可以觀察到相似的區域（例如亞太地區及特定歐洲地區）在這項數據保持領先。 -### TTFB by connection type +### 根據連線方式來分析的 TTFB {{ figure_markup( image="performance-ttfb-by-connection-type.png", caption="以連線方式為單位的 TTFB 效能分析表", - description="此柱狀圖顯示出 TTFB 深受連線方式影響，在 4G 及離線狀態各擁有 21% 及 22% 的 Good 的體驗的網站。其餘連線方式（除了僅有 1% 的 3G）幾乎是沒有 Good 的 TTFB 數值。", + description="此柱狀圖顯示出 TTFB 深受連線方式影響，在 4G 及離線狀態各擁有 21% 及 22% 的 Good 的體驗的網站。其餘連線方式（除了僅有 1% 的 3G）幾乎是沒有 Good 的 TTFB 數值。", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3ukFCTxx__dTBLwDQ3K_hCtXdLRGOGUYdR_TO043n_aCTdcwkxPUku9Qfoal6BESiV5RMtd0nEbqT/pubchart?oid=810992122&format=interactive", sheets_gid="306222260", sql_file="web_vitals_by_ect.sql" @@ -360,30 +358,30 @@ TTFB 會受到網路延遲時間及網路連線方式的影響。網路延遲時 看看[2018 年 12 月至 2019 年 11 月的全球手機網路速度](https://www.speedtest.net/insights/blog/content/images/2020/02/Ookla_Mobile-Speeds-Poster_2020.png)，我們可以發現全球的手機網路速度並不快。行動網路（例如 5G）的網路速度及科技標準沒有平均分佈，因此影響了 TTFB 的數據。舉例來說，[看看此奈及利亞的網路地圖](https://www.mobilecoveragemaps.com/map_ng#7/8.744/7.670) - 在奈及利亞大部分區域是被 2G 及 3G 所涵蓋，只有小部分範圍是 4G。 -驚人的是 offline 與 4G 之間的 `Good` TTFB 結果相似度。在有 service worker 的情況下，我們可以預期他可以舒緩一些 TTFB 的問題，但此趨勢並沒有被反映在上表中。 +驚人的是離線與 4G 之間的 Good TTFB 結果相似度。在有 service worker 的情況下，我們可以預期他可以舒緩一些 TTFB 的問題，但此趨勢並沒有被反映在上表中。 -## Performance Observer usage +## Performance Observer 的用途 {performance-observer-的用途} -能夠估算網站及應用程式的使用者體驗效能的衡量標準有百百種。但是，有時候那些既有的衡量標準並不一定符合我們的需求或是情境。[PerformanceObserver API](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver) 能夠讓我們取得透過 [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API)、[Long Task API](https://developer.mozilla.org/en-US/docs/Web/API/Long_Tasks_API)、[Event Timing API](https://wicg.github.io/event-timing/) 或[其他的低階 APIs](https://web.dev/custom-metrics/) 所客製的衡量標準資料。舉例來說，有了這些 API 的幫助，我們可以紀錄頁面之間轉換的時間或是量化 server-side-rendered (SSR) hydration 時間。 +能夠估算網站及應用程式的使用者體驗效能的衡量標準有百百種。但是，有時候那些既有的衡量標準並不一定符合我們的需求或是情境。[PerformanceObserver API](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver) 能夠讓我們取得透過 [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API)、[Long Task API](https://developer.mozilla.org/en-US/docs/Web/API/Long_Tasks_API)、[Event Timing API](https://wicg.github.io/event-timing/) 或[其他的低階 APIs](https://web.dev/custom-metrics/) 所客製的衡量標準資料。舉例來說，有了這些 API 的幫助，我們可以紀錄頁面之間轉換的時間或是量化 server-side-rendered (SSR) hydration 時間。 {{ figure_markup( image="performance-performance-observer-usage.png", - caption="以裝置為單位的 Performance Observer 使用率", - description="此柱狀圖顯示出採用 Performance Observer API 的比例很低，在桌機僅有 6.6% 而手機則有 7%。", + caption="根據不同裝置來分析的 Performance Observer 使用率", + description="此柱狀圖顯示出採用 Performance Observer API 的比例很低，在桌機僅有 6.6% 而手機則有 7%。", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3ukFCTxx__dTBLwDQ3K_hCtXdLRGOGUYdR_TO043n_aCTdcwkxPUku9Qfoal6BESiV5RMtd0nEbqT/pubchart?oid=632678090&format=interactive", sheets_gid="934401790", sql_file="performance_observer.sql" ) }} -上表指出，在我們調查的網站中，根據不同的裝置，大約有 6-7% 的網站使用 Performance Observer。這些網站可以透過上述的低階 API 來製作客製化的衡量標準，並利用 PerformanceObserver API 來整理搜集後，可以與其他的效能報告工具一起使用。這樣的採用率或許也道出多數使用者傾向使用既有的衡量標準（例如 Lighthouse）但對於如此方便的 API 也深感興趣。 +上表指出，在我們調查的網站中，根據不同的裝置，大約有 6-7% 的網站使用 Performance Observer。這些網站可以透過上述的低階 API 來製作客製化的衡量標準，並利用 PerformanceObserver API 來整理搜集後，可以與其他的效能報告工具一起使用。這樣的採用率或許也道出多數使用者傾向使用既有的衡量標準（例如 Lighthouse）但對於如此方便的 API 也深感興趣。 -## Conclusion +## 總結 -使用者體驗不單單只是個光譜，他更是一個基於重重因素所產生的光譜。為了不能忽視低於效能衡量標準或是無法體驗適當效能的人們，我們一定要設法了解並分析各個面向的數據。每個網頁訪問都述說著各自的故事。我們個人的以及國家層級的經濟狀況也敘述著我們能夠負擔的裝置型態以及網路提供者（internet provider）。我們生活的地方也深深影響著我們的網路延遲時間（澳洲人時常感受到這個痛苦），而且該國家的經濟也反應了當地行動網路覆蓋率。我們會訪問怎麼樣的網頁呢？我們為什麼想訪問那些網頁呢？了解 context 非常的重要，這不僅僅是為了要分析資料，也是為了能夠開發有足夠同理心、在乎是否容易被訪問且提供了快速的使用者體驗的網頁給所有的使用者。 +使用者體驗不單單只是個光譜，他更是一個基於重重因素所產生的光譜。為了不能忽視低於效能衡量標準或是無法體驗適當效能的人們，我們一定要設法了解並分析各個面向的數據。每個網頁訪問都述說著各自的故事。我們個人的以及國家層級的經濟狀況也敘述著我們能夠負擔的裝置型態以及網路提供者（internet provider）。我們生活的地方也深深影響著我們的網路延遲時間（澳洲人時常感受到這個痛苦），而且該國家的經濟也反應了當地行動網路覆蓋率。我們會訪問怎麼樣的網頁呢？我們為什麼想訪問那些網頁呢？了解 context 非常的重要，這不僅僅是為了要分析資料，也是為了能夠開發有足夠同理心、在乎是否容易被訪問且提供了快速的使用者體驗的網頁給所有的使用者。 -以粗淺的分析來說，我們可以看到新 Core Web Vitals 效能衡量標準有著樂觀的結果。**如果**我們不將 Largest Contentful Paint 的數據限縮到 Poor 體驗以及較慢的網路的話，至少在桌機及手機上，有一半的使用者體驗同時是好的。儘管新的衡量標準現在正有計劃在改善效能問題，但缺少對 FCP (First Contentful Paint) 以及 TTFB (Time to First Byte) 的改善方案仍然是個必須面對的嚴重問題。在這裡與 Largest Contentful Paint 相同網路型態 、快速網路連結以及桌機裝置的最不利。效能分數（Performance Score）也在速度方面呈現了下降的曲線（抑或是說，這比過去我們所測量過的數據更為準確）。 +以粗淺的分析來說，我們可以看到新 Core WebVitals 效能衡量標準有著樂觀的結果。**如果**我們不將 Largest Contentful Paint 的數據限縮到 Poor 體驗以及較慢的網路的話，至少在桌機及手機上，有一半的使用者體驗同時是好的。儘管新的衡量標準現在正有計劃在改善效能問題，但缺少對 FCP (First Contentful Paint) 以及 TTFB (Time to First Byte) 的改善方案仍然是個必須面對的嚴重問題。在這裡與 Largest Contentful Paint 相同網路型態 、快速網路連結以及桌機裝置的最不利。效能分數（Performance Score）也在速度方面呈現了下降的曲線（抑或是說，這比過去我們所測量過的數據更為準確）。 -根據這些數據所知，可能因為我們養尊處優（中至高收入的國家、高薪水且持有新又性能好的裝置）無法時常體會各式各樣的情境（例如較慢的網路連接速度），我們更應該要花心力來為這各式各樣的情境去改善效能。這同時也替我們強調了，我們在加速初始瀏覽器繪製（LCP 及 FCP）和資源傳送（TTFB）都還有許多未完成的事情。這些效能問題時常聽起來像前端的問題，但其實許多重要的改善是可以透過適當的 infrastructure 選擇或是在後端做出適當的修改所達成。再次強調，使用者體驗是由各式各樣因素所組成的光譜，所以我們必須一視同仁。 +根據這些數據所知，可能因為我們養尊處優（中至高收入的國家、高薪水且持有新又性能好的裝置）無法時常體會各式各樣的情境（例如較慢的網路連接速度），我們更應該要花心力來為這各式各樣的情境去改善效能。這同時也替我們強調了，我們在加速初始瀏覽器繪製（LCP 及 FCP）和資源傳送（TTFB）都還有許多未完成的事情。這些效能問題時常聽起來像前端的問題，但其實許多重要的改善是可以透過適當的 infrastructure 選擇或是在後端做出適當的修改所達成。再次強調，使用者體驗是由各式各樣因素所組成的光譜，所以我們必須一視同仁。 新的衡量標準為我們帶來了不一樣的視野來分析使用者體驗，但我們也莫忘既有的問題與數據。讓我們繼續在改善需要被加強的領域，還有為了將那些在低標準體驗的使用者們邁向好的使用者體驗繼續努力。快速且容易存取的網路是基本人權。