What is The PRPL Pattern?

Photo by Luca Campioni on Unsplash

If you've been reading about JAMstack, you've probably heard about the PRPL pattern.

What is it, and why does it speed up websites? Let's find out.

PRPL = Push, Render, Pre-cache, Lazy load

Websites that implement PRPL have the following properties:

• Push the most important assets for the initial route.
  You can do this with the help of <link> tags with rel="preload" (which tells the browser to load a resource as soon as possible), and HTTP/2.
• Render the initial URL as fast as possible.
  This means to get down the time to first website paint. Use Google Lighthouse to find blocking resources. Optimize the first paint by inlining critical JavaScript and CSS, and using async on non-critical assets. Rendering websites server-side also helps tremendously with the time to first paint. Inlining JS and CSS has other drawbacks, such as increasing your HTML size, delaying "Time to Interactive", and being harder to maintain from a development perspective. Only use it when you see no other way to optimize the first pain time.
• Pre-cache remaining resources.
  Using Service Workers, you can pre-cache websites and assets before your user opens the site, running in the background. If your framework does not offer this out-of-the-box, try a library like Workbox.
• Lazy-load non-critical assets and other routes.
  If your JavaScript bundles are big, some JS is likely more important than other. Reduce your bundle size by splitting your JS into critical and non-critical JS. Many frontend frameworks provide a way to split your bundles.
  The same goes for images. You can first load a smaller version of the image and then the higher-resolution versions. Use Progressive JPEGs for this. Many modern frameworks bring progressive image loading out-of-the-box.

Your Site Speed Matters

Google lowers your ranking when your performance is bad. Good website speed is an extremely relevant SEO parameter.

Update: Google recently (May 2020) even added Core Web Vitals as official ranking factors to their algorithm. These are performance measures that influence the user experience (loading speed, interactivity, and visual stability). This makes your site performance even more important than before.

Want to learn about a web-development framework with perfect Lighthouse scores out-of-the-box? Head over to my Gridsome series, where we build a blog from scratch!