關鍵轉譯路徑是指網頁開始在瀏覽器中轉譯之前所涉及的步驟。如要轉譯網頁，瀏覽器需要 HTML 文件本身，以及轉譯該文件所需的所有重要資源。
將 HTML 文件提供給瀏覽器的方式是在先前的一般 HTML 效能注意事項模組中說明。不過，在本單元中，我們將進一步瞭解瀏覽器下載 HTML 文件「之後」如何轉譯網頁。
循序算繪
網路本身是特性的。與使用之前安裝的原生應用程式不同，瀏覽器無法取決於網站是否具備轉譯網頁所需的一切資源。因此，瀏覽器能夠逐步轉譯網頁。原生應用程式通常有一個安裝階段，接著是執行階段。不過，如果是網頁和網頁應用程式，這兩種階段之間的界線會明顯不同，且瀏覽器是專為這個需求所設計。
瀏覽器有可轉譯網頁的資源後，通常就會開始執行。因此，選擇的顯示時機是從「何時」開始顯示：何時過早？
如果瀏覽器在僅含有部分 HTML (但尚未加入任何 CSS 或必要的 JavaScript) 時，就會盡快轉譯，那麼網頁將暫時看起來毀損，進行最終轉譯時也會大幅變更。比起一開始先顯示空白畫面，使用者體驗會較差，直到瀏覽器有足夠的資源進行初始轉譯，以提供更優質的使用者體驗。
另一方面，如果瀏覽器會等待「所有」資源可供使用，而不是進行任何依序轉譯，使用者會停留很長的時間；如果網頁早在很早的時間點可以使用，使用者通常就沒必要這麼做。
瀏覽器必須知道至少要等待多少資源，才不會顯示明顯毀損的體驗。另一方面，瀏覽器也不應等到所需時間過後再向使用者顯示部分內容。瀏覽器執行初始轉譯前的步驟順序，稱為「關鍵轉譯路徑」。
瞭解關鍵轉譯路徑有助於確保您不會因必要而阻擋初始頁面轉譯作業，進而改善網站效能。不過，同時請務必從重要轉譯路徑中移除必要的初始轉譯資源，避免太早進行轉譯。
(關鍵) 轉譯路徑
轉譯路徑包含下列步驟：
- 從 HTML 建立文件物件模型 (DOM)。
- 透過 CSS 建構 CSS 物件模型 (CSSOM)。
- 套用會修改 DOM 或 CSSOM 的任何 JavaScript。
- 從 DOM 和 CSSOM 建構算繪樹狀結構。
- 在網頁上執行樣式和版面配置作業，查看哪些元素符合位置。
- 繪製記憶體中元素的像素。
- 如果像素有重疊，請將其合成。
- 以實體方式將所有產生的像素繪製到螢幕上。
只有在完成所有步驟後，使用者才會看到內容。
這個轉譯程序會多次執行。初始轉譯會叫用這項程序，但隨著越來越多會影響網頁算繪的資源可供使用，瀏覽器會重新執行這項程序 (或僅包含其中部分內容)，更新使用者看到的內容。關鍵轉譯路徑著重於先前針對初始轉譯所概述的程序，並且取決於其所需的重要資源。
關鍵轉譯路徑上有哪些資源？
瀏覽器必須等待一些重要資源下載完成，才能完成初始轉譯。這些資源包括：
- HTML 部分。
<head>元素中含有禁止算繪的 CSS。<head>元素中含有禁止轉譯的 JavaScript。
關鍵在於瀏覽器會以串流的方式處理 HTML。只要瀏覽器收到網頁 HTML 的任何部分，瀏覽器就會立即開始處理。瀏覽器接著可以 (而且經常會) 決定在接收網頁的其餘 HTML 前，先決定是否要顯示良好內容。
重要的是，在初次轉譯時，瀏覽器通常「不會」等待：
- 所有 HTML。
- 字型。
- 圖片。
- 在
<head>元素之外 (例如放在 HTML 結尾的<script>元素) 以外的無法算繪的 JavaScript。 <head>元素外的未算繪 CSS，或是具有media屬性值，但不適用於目前可視區域的 CSS。
字型和圖片通常會被瀏覽器視為要在後續頁面重新轉譯時填入的內容，因此無需預留初始轉譯。但這可能代表初始轉譯中剩餘的空白區域，而文字會隱藏在字型等待或直到有可用圖片為止。更糟的是，如果特定類型的內容並未保留足夠空間 (尤其是 HTML 中未提供圖片尺寸時)，網頁的版面配置可能會在之後載入該內容時改變。這部分的使用者體驗是由累計版面配置位移 (CLS) 指標衡量。
<head> 元素是處理重要算繪路徑的關鍵。下一節將詳細說明。最佳化 <head> 元素的內容是網站效能的重要環節。不過，您目前只需知道 <head> 元素包含網頁及其資源的中繼資料，但無法查看使用者實際能看見的內容，即可瞭解重要轉譯路徑。可見內容包含在 <head> 元素的 <body> 元素中。瀏覽器轉譯任何內容之前，必須「同時」轉譯內容，以及有關如何轉譯內容的中繼資料。
不過，並非所有 <head> 元素中參照的資源都必須在初始網頁轉譯作業中完成，因此瀏覽器只會等待這些資源。如要找出重要轉譯路徑中的資源，您必須瞭解會阻擋和剖析器的 CSS 和 JavaScript。
會妨礙顯示的資源
瀏覽器會將某些資源視為非常嚴重，因此瀏覽器在處理頁面時會暫停轉譯。根據預設，CSS 屬於這個類別。
當瀏覽器看到 CSS (無論是在 <style> 元素中的內嵌 CSS，或由 <link rel=stylesheet href="..."> 元素指定的外部參照資源) 時，瀏覽器在完成下載及處理該 CSS 之前，會避免轉譯其他任何內容。
光是資源會阻擋轉譯，並不一定代表瀏覽器不會執行任何其他作業。瀏覽器會盡可能提高效率，因此當瀏覽器發現需要下載 CSS 資源時，會提出要求並暫停轉譯，但同時會繼續針對 HTML 的其餘部分執行「處理」作業，同時尋找其他可以執行的工作。
會禁止轉譯網頁的資源 (例如 CSS) 用於封鎖系統找到網頁時的所有轉譯作業。這表示部分 CSS 是否會妨礙轉譯，取決於瀏覽器是否已找到該 CSS。部分瀏覽器 (原先也使用 Firefox，現在也是 Chrome) 只會禁止轉譯會阻擋資源下方的內容轉譯。這意味著，對於關鍵會妨礙顯示路徑而言，我們通常對 <head> 中的禁止轉譯資源感興趣，因為這類資源會有效禁止轉譯整個網頁。
近期的創新技術為 blocking=render 屬性，已新增至 Chrome 105。如此一來，開發人員就能將 <link>、<script> 或 <style> 元素明確標示為禁止轉譯，直到元素處理完成為止，但同時可讓剖析器在這段期間內繼續處理文件。
會阻擋剖析器的資源
會阻止剖析器的資源透過繼續剖析 HTML 來防止瀏覽器尋找其他工作。根據預設，JavaScript 會封鎖剖析器 (除非明確標示為「非同步」或「延遲」)，因為 JavaScript 會在執行時變更 DOM 或 CSSOM。因此，在知道要求的 JavaScript 對網頁 HTML 的影響前，瀏覽器無法繼續處理其他資源。同步 JavaScript 因此會封鎖剖析器。
剖析器會封鎖資源也能夠有效地阻止轉譯。由於剖析器無法接續超過會剖析的限制資源，因此必須等到全部處理完畢後，才能存取及轉譯內容。瀏覽器可以在等候期間轉譯到目前為止接收的任何 HTML，但若影響重要轉譯路徑，<head> 中的任何會封鎖剖析器資源，實際上代表所有網頁內容都遭到封鎖。
封鎖剖析器除了會阻礙轉譯作業，還可能帶來龐大的效能成本。因此，瀏覽器會在主要 HTML 剖析器遭到封鎖時，嘗試使用次要 HTML 剖析器 (稱為預先載入掃描器) 下載後續資源，藉此降低上述成本。雖然不像實際剖析 HTML 一樣好事，但至少可讓瀏覽器的網路功能提前在封鎖的剖析器之前執行，這表示日後再次封鎖的可能性將會降低。
識別封鎖的資源
許多效能稽核工具會識別轉譯和剖析器封鎖的資源。WebPageTest 會在資源網址左側以橘色圓圈標示會禁止轉譯的資源：
所有會阻擋轉譯的資源都必須先下載和處理，然後才能開始轉譯，這類資源將以瀑布中的深綠色實線標出。
Lighthouse 也會醒目顯示會禁止轉譯的資源，但必須以更巧妙的方式醒目顯示，且只有在資源實際上會延遲網頁轉譯時。如果您想避免系統將誤判的情況降到最低，這項功能可有效避免系統誤判。透過 Lighthouse 執行與上述 WebPageTest 圖片相同的網頁網址，只會將其中一個樣式表視為會阻擋轉譯資源。
最佳化關鍵轉譯路徑
要最佳化關鍵轉譯路徑，必須縮短接收 HTML 的時間 (以第一個位元組時間 (TTFB) 指標表示)，並降低轉譯資源造成的影響。我們會在下一個單元中探討這些概念。
關鍵內容轉譯路徑
長久以來，關鍵轉譯路徑本身就和初始轉譯而言無關緊要。不過，越來越多網站效能的以使用者為中心的指標出現，這也讓您不太確定重要轉譯路徑的終點應為第一次繪製，還是之後才會出現的更內容繪製。
另一種檢視方式是將專注時間停留在最大內容繪製 (LCP)，或甚至是首次內容繪製 (FCP) 之前，做為內容轉譯路徑的一部分 (或其他人可能會稱之為主要路徑)。在此情況下，您可能需要納入不一定封鎖的資源 (因為這是關鍵轉譯路徑的典型定義)，但轉譯內容繪製時必須使用。
無論您對「重大」的定義為何，瞭解要保留任何初始轉譯內容和您的金鑰內容都很重要。第一個繪製效果會測量為使用者轉譯「任何內容」的第一個可能機會。在理想情況下，這應該不會有意義，而非像背景顏色之類的資訊，但即使沒有內容，也仍然有值向使用者呈現「內容」，而這正是評估傳統定義之重要轉譯路徑的引數。同時，在評估向使用者顯示主要內容的時間時也相當重要。
識別內容轉譯路徑
許多工具都可以識別 LCP 元素及其轉譯時間。除了 LCP 元素外，Lighthouse 還能協助識別 LCP 階段和每個階段花費的時間，協助您瞭解在哪些階段最適合最佳化工作：
如果是更複雜的網站，Lighthouse 也會在單獨的稽核中醒目顯示關鍵要求鏈結：
這項 Lighthouse 稽核功能會觀察所有載入的資源 (優先順序較高)，因此含有 Chrome 設為高優先順序資源的網路字型和其他內容，即使實際上並非會阻擋轉譯資源也一樣。
學以致用
重要算繪路徑是指什麼？
關鍵轉譯路徑涉及哪些資源？
<head> 元素中含有禁止算繪的 CSS。<head> 元素中含有禁止轉譯的 JavaScript。為什麼網頁轉譯功能會阻礙轉譯功能的必要部分？
為什麼 JavaScript 會封鎖 HTML 剖析器 (假設未指定 <script> 元素的 defer、async 或 module 屬性)？
<script> 就會受剖析器阻擋及會阻擋轉譯。下一項：最佳化資源載入
本單元探討瀏覽器轉譯網頁的一些原理，特別是完成頁面初始轉譯的必要知識。下一個單元將說明如何瞭解如何最佳化資源載入，藉此改善這個轉譯路徑。