Love Frontend
Community of frontend developers

What the PRPL pattern is? [ru] [es]

Author: Kamil Ocean
Publication date: 08.01.2020
infographic of PRPL pattern

Each letter means important thing for optimization of web page loading.

Push (or preload)

You should use link tag with attribute rel="preload" for the most important styles or scripts. Resources included this way will load first.

<link rel="preload" as="script" href="main.js">

Render the initial route as soon as possible

In other words: it means: improve First Paint. It means to inline critical CSS and JS, and to add async attribute for other resources

<script src="main.js" async></script>

Pre-cache assets

You could use Service Worker and Cache Storage API to cache resources at client.

Lazy load

Split your code into the chunks. Also use lazy loading for images.

<img src="example.jpg" loading="lazy" alt="" />

Inspired by: Apply instant loading with the PRPL pattern

Enter your email to subscribe on news