最佳化資源載入作業

在先前的單元中，我們介紹了重要轉譯路徑的一些理論 ，以及轉譯封鎖和剖析器資源會如何延遲 顯示網頁初始轉譯結果現在您已瞭解 您已準備好學習最佳化關鍵指標的技巧 轉譯路徑

網頁載入時，HTML 會參照許多資源，提供 網頁的外觀和版面配置，以及網頁的互動功能 傳送 YAML 檔案本單元將介紹 以及這些資源對網頁載入時間的影響。

禁止轉譯

如上一個單元所述，CSS 是「禁止轉譯」render-blocking資源。 因為這會阻止瀏覽器在 CSS 物件模型前顯示任何內容 (CSSOM)。瀏覽器會封鎖轉譯功能，防止 無樣式的內容 (FOUC)，不適合使用者體驗。

在上部影片中 任何樣式。如此一來，所有樣式都會在網頁的 CSS 從網路載入完畢 未設定樣式的網頁版本 立即替換為樣式化版本

一般而言，「FOUC」是平常不常看到的事物，但這個概念 非常重要，可讓您瞭解瀏覽器封鎖轉譯作業的「原因」 到 CSS 完成下載並套用至網頁為止禁止轉譯 因此，您會希望將應用程式 讓 CSS 維持在最佳狀態

剖析器封鎖

parser-blocking 資源會中斷 HTML 剖析器，例如 <script> ，但不含 async 或 defer 屬性。當剖析器遇到 <script> 元素，瀏覽器必須先評估並執行指令碼 繼續剖析 HTML 的其他部分。這屬於設計模式，因為指令碼 在 DOM 建構的期間修改或存取 DOM。

<!-- This is a parser-blocking script: -->
<script src="/script.js"></script>

使用外部 JavaScript 檔案 (不含 async 或 defer) 時，剖析器會 會遭到封鎖，直到檔案遭到下載、剖析及 執行狀態使用內嵌 JavaScript 時，剖析器同樣會遭到封鎖，直到 剖析並執行內嵌指令碼。

預先載入掃描器

預先載入掃描器是採用次要 HTML 格式的瀏覽器最佳化功能 剖析原始 HTML 回應的剖析器，以尋找並推測 隨後主要 HTML 剖析器就會發現這些資源適用對象 例如，預先載入掃描器可讓瀏覽器開始 在 <img> 元素中指定的資源 (即使 HTML 剖析器遭到封鎖) 並同時擷取及處理 CSS 和 JavaScript 等資源

為了利用預先載入掃描器，必須納入重要資源 顯示在伺服器傳送的 HTML 標記中下列資源載入模式 預先載入掃描器無法辨識：

  • CSS 使用 background-image 屬性載入的圖片。這些圖片 參照位於 CSS 中，且預先載入掃描器無法找到。
  • 動態載入的指令碼已插入 <script> 元素標記格式 轉換為 DOM，或使用動態 import() 載入的模組。
  • 使用 JavaScript 在用戶端上呈現的 HTML。這類標記包含在 字串，而且預先載入項目無法找到這些字串 或是掃描器
  • CSS @import 宣告。

這些資源載入模式全都是遲到的資源 並未受益於預先載入掃描器請盡量避免使用這類警告。如果 雖然我們「無法」排除這類模式，不過您還是可以使用 preload 提示可避免資源探索作業延遲。

CSS

CSS 會決定網頁的呈現和版面配置。如先前所述 是會妨礙顯示的資源 只要將 CSS 最佳化 對整體網頁載入時間的影響

壓縮

壓縮 CSS 檔案能縮減 CSS 資源的檔案大小， 下載速度更快主要做法是將內容從 來源 CSS 檔案，例如空格和其他隱形字元 新最佳化的檔案的結果：

/* Unminified CSS: */

/* Heading 1 */
h1 {
  font-size: 2em;
  color: #000000;
}

/* Heading 2 */
h2 {
  font-size: 1.5em;
  color: #000000;
}

/* Minified CSS: */
h1,h2{color:#000}h1{font-size:2em}h2{font-size:1.5em}
敬上

以最基本的形式，CSS 壓縮就是很有效的最佳化方法 改善網站的 FCP，在某些情況下甚至這麼做例如 bundlers 可在正式環境中自動執行這項最佳化功能 建構應用程式

移除未使用的 CSS

顯示任何內容之前，瀏覽器必須先下載並剖析所有內容 完成剖析所需的時間也包含 未使用的值如果你使用的是結合所有 CSS 的套裝組合 使用者可能下載了比其他 CSS 更多資源的 CSS 轉譯目前網頁所需的資源

如要找出目前網頁未使用的 CSS，請使用 Chrome 的涵蓋範圍工具 開發人員工具。

Chrome 開發人員工具中的涵蓋率工具螢幕截圖。系統會在底部窗格中選取一個 CSS 檔案，顯示目前頁面版面配置未使用大量 CSS 檔案。
Chrome 開發人員工具中的涵蓋範圍工具適合用來偵測 CSS ( JavaScript)。可用來分割 CSS 檔案 到多個資源中由不同頁面載入 提交尺寸較大的 CSS 組合，以致延遲網頁顯示時間。

移除未使用的 CSS 會產生兩倍效果：除了減少下載次數以外 變更轉譯樹狀結構結構，因為瀏覽器需要 也能減少 CSS 規則

避免使用 CSS @import 宣告

雖然看起來便利，但請避免在 CSS 中使用 @import 宣告：

/* Don't do this: */
@import url('style.css');

與 <link> 元素在 HTML 中的運作方式類似，@import 宣告 CSS 可讓您從樣式表匯入外部 CSS 資源。 這兩種方法的主要差異在於 HTML <link> 元素 作為 HTML 回應的一部分，因此發現速度比 CSS 更快 透過 @import 宣告下載的檔案。

這是因為 @import 宣告必須 後，內含該檔案的 CSS 檔案必須先下載。這個 會導致所謂的「請求鏈」(以 CSS 為例)， 網頁一開始顯示所需的時間另一個缺點 無法透過 @import 宣告載入的樣式表 預先載入掃描程式，進而成為被發現會妨礙轉譯的資源。

<!-- Do this instead: -->
<link rel="stylesheet" href="style.css">

在大多數情況下，您可以改用@import <link rel="stylesheet"> 元素。<link> 元素可讓樣式表 同時下載、縮短整體載入時間，@import 宣告，會「連續」下載樣式表。

內嵌重要的 CSS

下載 CSS 檔案所需的時間可能會增加網頁的 FCP。內嵌 <head> 文件中的重要樣式 CSS 資源；如果執行正確，可縮短初始載入時間， 並不會清除使用者的瀏覽器快取。可載入其餘的 CSS 非同步，或附加在 <body> 元素的結尾。

<head>
  <title>Page Title</title>
  <!-- ... -->
  <style>h1,h2{color:#000}h1{font-size:2em}h2{font-size:1.5em}</style>
</head>
<body>
  <!-- Other page markup... -->
  <link rel="stylesheet" href="non-critical.css">
</body>
敬上

缺點是，內嵌大量 CSS 會在初始值中加入更多位元組 HTML 回應。由於 HTML 資源往往無法快取很長一段時間，或 也就是說，內嵌 CSS 不會快取到可能 外部樣式表也使用相同的 CSS測試並評估網頁的 以便做出取捨

CSS 示範

JavaScript

JavaScript 可以吸引網路上大部分的互動，但需要支付相關費用。 運送過多 JavaScript 可能導致網頁在網頁回應時變慢 甚至可能造成回應速度問題 拖慢互動速度 這可能會讓使用者感到困擾

禁止轉譯 JavaScript

載入不含 defer 或 async 屬性的 <script> 元素時， 瀏覽器會阻止剖析和轉譯，等到指令碼下載、剖析與 執行狀態同樣地，內嵌指令碼會封鎖剖析器，直到指令碼剖析完畢為止 和執行狀態

async對defer

async 和 defer 允許外部指令碼在不封鎖 HTML 的情況下載入 使用 type="module" 的指令碼 (包括內嵌指令碼) 時剖析器 將自動延後。不過，async 和 defer 有些許差異。 至關重要

呈現各種指令碼載入機制，皆針對非同步、延遲、type=&#39;module&#39; 等各種屬性，詳細說明剖析器、擷取和執行角色以及這三項的結合
來源：https://html.spec.whatwg.org/multipage/scripting.html

透過 async 載入的指令碼會在下載後立即剖析並執行， 而透過 defer 載入的指令碼則會在 HTML 文件剖析作業執行時執行 完成：這個會與瀏覽器的 DOMContentLoaded 事件同時發生。 此外，async 指令碼的執行順序可能有誤，而 defer 指令碼 並按照標記中出現的順序執行。

用戶端轉譯

一般而言，請避免使用 JavaScript 轉譯任何重要內容或 網頁的 LCP 元素中。這項技術稱為用戶端轉譯，是一種技術 大量用於單頁應用程式 (SPA)。

透過 JavaScript 轉譯的標記會側重預先載入掃描器，做為資源 用戶端轉譯標記中所包含的網頁，都「無法找到」。這個 可能會延遲下載重要資源 (例如 LCP 映像檔) 的下載作業瀏覽器 指令碼執行後，才會開始下載 LCP 映像檔 將元素加入 DOM因此，指令碼只有在執行 已經找到、下載及剖析這就是所謂的關鍵要求 鏈結，因此應避免使用。

此外，使用 JavaScript 算繪標記的可能性較高 長時間工作，而不是從伺服器下載的標記。 請求。大量使用 HTML 的用戶端轉譯功能可能會對 HTML 造成不良影響 互動延遲時間。特別是在網頁的 DOM 顯示在 非常大，在 JavaScript 修改時觸發大量轉譯作業 DOM 的運作方式

壓縮

和 CSS 類似，壓縮 JavaScript 能縮減指令碼資源的檔案大小。 如此一來，瀏覽器就能加快下載速度， 以更快的速度剖析和編譯 JavaScript。

此外，壓縮 JavaScript 比壓縮功能更進一步 例如 CSS 和其他素材資源壓縮 JavaScript 時，不只會去除 包含空格、定位點和註解等標記 JavaScript 是縮短的。這項程序有時也稱為「清除」。目的地： 請看看以下 JavaScript 原始碼，瞭解差異：

// Unuglified JavaScript source code:
export function injectScript () {
  const scriptElement = document.createElement('script');
  scriptElement.src = '/js/scripts.js';
  scriptElement.type = 'module';

  document.body.appendChild(scriptElement);
}

如果上述 JavaScript 原始碼經過扭曲處理，結果可能會看起來像 如下所示：

// Uglified JavaScript production code:
export function injectScript(){const t=document.createElement("script");t.src="/js/scripts.js",t.type="module",document.body.appendChild(t)}

在上述程式碼片段中，您會看到人類可讀的變數 來源中的 scriptElement 已縮短為 t。套用至大型資料集 指令碼收集後，節省下來的費用可能相當可觀 由網站實作 JavaScript 提供的功能。

如果您使用整合工具處理網站的原始碼， 通常是自動完成正式環境Uglifier，例如 Terser、 例如，您也可以透過高度設定 的完整性。 不過，任何清除工具的預設值通常足以使系統發出警告 在輸出大小與保存功能之間取得適當平衡

JavaScript 示範

學以致用

如要在瀏覽器中載入多個 CSS 檔案，下列何者是最佳方式？

CSS @import 宣告。
請再試一次。
多個 <link> 元素。
答對了！

瀏覽器預先載入掃描器的功能為何？

這是次要 HTML 剖析器，可檢查原始標記以探索 才能更快找到這些資源
答對了！
偵測以下項目中的 <link rel="preload"> 個元素： HTML 資源。
請再試一次。

為什麼瀏覽器預設會暫時禁止剖析 HTML 下載 JavaScript 資源？

預防無樣式的內容 (FOUC) 內容，
請再試一次。
因為評估 JavaScript 需要耗用大量 CPU 資源，而且暫停 HTML 剖析可提供較多頻寬，讓 CPU 完成載入指令碼。
請再試一次。
因為指令碼可以修改或以其他方式存取 DOM。
答對了！

下一項：為瀏覽器提供資源提示

現在，您已瞭解 <head> 元素中載入資源的方式 系統載入網頁和各種指標後，我們才繼續推進去。未來 單元、資源提示，並講解如何提供實用提示 瀏覽器開始載入資源及開啟跨來源連線 才能充分利用這些伺服器