Houssein Djirdeh
PRPL is an acronym that describes a pattern used to make web pages load and become interactive, faster:
- Preload the late-discovered resources.
- Render the initial route as soon as possible.
- Pre-cache remaining assets.
- Lazy load other routes and non-critical assets.
In this guide, learn how each of these techniques fit together but still can be used independently to achieve performance results.
Audit your page with Lighthouse
Run Lighthouse to identify opportunities for improvement aligned with the PRPL techniques:
- Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
- Click the Lighthouse tab.
- Select the Performance and Progressive Web App checkboxes.
- Click Run Audits to generate a report.
For more information, see Discover performance opportunities with Lighthouse.
Preload critical resources
Lighthouse shows the following failed audit if a certain resource is parsed and fetched late: