<h1>PRPL</h1>
<p>The <a href="https://web.dev/apply-instant-loading-with-prpl/">PRPL</a> pattern is a pattern used to improve web page loading, thus improving user experience. PRPL stands for:</p>
<ul>
<li><strong>P</strong>: push or preload</li>
<li><strong>R</strong>: render initial route</li>
<li><strong>P</strong>: pre-cache</li>
<li><strong>L</strong>: lazy load</li>
</ul>
<p>It is recommended to use Lighthouse to audit page and help identify problems. Lighthouse provides also some hints in fixing the problems.</p>
<h2>Preloading</h2>
<p>Preloading assets using the <code>rel=preload</code> attribute on <code>link</code> tag.</p>
<h2>Render initial route</h2>
<p>Inline CSS and critical JS only to have a fast first paint. Include only the assets that are present above the fold.
For better development maintenance, server side rendering could be used instead of inlining but be aware that it can cost you on Time To Interactive. Think about the different tradeoffs.</p>
<h2>Precache</h2>
<p>Use service workers to cache assets so as to avoid too many requests to server when possible.</p>
<h2>Lazy loading</h2>
<p>Lazy load images outside the viewport or below the fold using the lib <code>lazysizes</code> for example.</p>


Pascal

PRPL Pattern

PRPL

Preloading

Render initial route

Precache

Lazy loading