PRPL 是一種縮寫，說明用於載入網頁 快速提升互動性
- 預先載入遲到的資源。
- 盡快轉譯初始路線。
- 預先快取剩餘的資產。
- 延遲載入其他路徑和一般資產。
在本指南中，您可以瞭解這些技巧如何相輔相成，但還是 進而帶來更出色的成效
使用 Lighthouse 稽核網頁
執行 Lighthouse，找出符合 PRPL 的改進機會 技巧：
- 按下 Control+Shift+J 鍵 (或在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
- 按一下「Lighthouse」分頁標籤。
- 勾選「效能」和「漸進式網頁應用程式」核取方塊。
- 按一下「執行稽核」即可產生報表。
詳情請參閱「使用 Lighthouse 探索效能商機」一文。
預先載入重要資源
如果剖析特定資源並剖析特定資源，Lighthouse 會顯示以下稽核失敗項目 延遲擷取：
預先載入
是一項宣告式擷取要求，會指示瀏覽器要求瀏覽器預先載入掃描器找不到的資源，例如 background-image 屬性參照的圖片。在 HTML 文件的標題中加入包含 rel="preload" 的 <link> 標記，即可預先載入延遲找到的資源：
<link rel="preload" as="image" href="hero-image.jpg">
新增 <link rel="preload"> 指令之後，系統會啟動該資源的要求，並將其儲存在快取中。隨後瀏覽器就可以視需要擷取資訊。
如要進一步瞭解如何預先載入重要資源，請參閱 「預先載入重要資產」指南。
盡快算繪初始路徑
如有資源延遲首次繪製時間，Lighthouse 會發出警告。 網站向螢幕顯示像素時：
為了改善 First Paint，Lighthouse 建議內嵌重要的 JavaScript 和
並延後執行
async、
以及內嵌在不需捲動位置的重要 CSS這麼做可以提高效能
不需要在伺服器之間來回往返，進而擷取會妨礙轉譯的資產。
不過，從開發的角度來看，內嵌程式碼較難維護
無法分別快取。
另一個改善 First Paint 的做法，是伺服器端轉譯， 您網頁的 HTML。這會在指令碼期間立即向使用者顯示內容 仍在擷取、剖析及執行不過，這麼做可能會讓 HTML 檔案酬載可能會大幅影響互動所需時間， 或應用程式變為互動並能回應 使用者輸入內容
您無法在 建議您只考慮內嵌樣式和伺服器端 重要性遠大於應用程式的利弊。你可以 歡迎參考下列資源，進一步瞭解這兩個概念。
預先快取資產
作為 Proxy，服務工作站可以直接從快取中擷取資產 而非伺服器這樣不僅能讓使用者 並加快 重複造訪。
使用第三方程式庫簡化服務工作站產生程序 除非您有較複雜的快取需求 因此，使用 Kubernetes Engine 即可。例如： Workbox 提供了 建立並維護 Service Worker 的工具 快取資產。如要進一步瞭解 Service Worker 和離線可靠性， 請參閱可靠性學習路徑中的服務工作處理程序指南。
延遲載入
如果透過網路傳送過多資料，Lighthouse 會顯示失敗的稽核作業。
這包括所有資產類型，但大型 JavaScript 酬載更是如此 而耗用的資源會多花上許多。 Lighthouse 也會視情況提供警告。
如要傳送小型的 JavaScript 酬載，其中只包含 使用者會先載入您的應用程式，視需求分割整個套件和延遲載入區塊。
分割套件後，請預先載入更多區塊 的標記 (請參閱預先載入重要資產指南)。 預先載入可確保更迅速地擷取並下載更重要的資源 。
除了視需求分割及載入不同的 JavaScript 區塊之外 Lighthouse 也針對延遲載入不重要的圖片提供稽核功能。
如果您在網頁中載入許多圖片，請延遲所有位於需捲動位置的圖片，或是 裝置可視區域外 (請參閱「使用延遲載入圖片」)。
後續步驟
現在您已經瞭解 PRPL 模式背後的幾個基本概念了 請繼續閱讀本章節的下一份指南瞭解詳情 請務必記得，並非所有技術都需要 套用變更達成下列任一事項後， 明顯的效能提升
- 預先載入重要資源。
- 盡快轉譯初始路線。
- 預先快取剩餘的資產。
- 延遲載入其他路徑和一般資產。
如要進一步瞭解 PRPL 模式，請參閱下文。