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