How to achieve Performance using the PRPL Pattern

The PRPL pattern is an idea around how to use underlying technology to produce a great web app experience. PRPL is an acronym that explains a pattern used in making web pages load fast and interactive.

What is really a PRPL Pattern?
PRPL is a web site architecture developed by Google for building websites and apps that work exceptionally well on smartphones and other devices with unreliable network connections. learn more https://web.dev/apply-instant-loading-with-prpl/

PRPL Pattern stands for

Push (or preload) the most important resources.
Render the initial route as soon as possible.
Pre-cache remaining assets.
Lazy load other routes and non-critical assets.

PUSH: Pushing the most important resources

Preload is a fetch request that tells your browser to request a certain resource as soon as possible. Important resources can be preloaded by adding a tag with rel="preload" to the head of your HTML document.

The rel="preload" attribute value can be set to several file formats, including CSS, JS, fonts, images and more we will also need to specify:

The path to the resource in the href attribute.
The type of resource in the as attribute.

For CSS, the value should be as="style", and for JavaScript as="script".

Using as to specify the type of content to be preloaded allows the browser to prioritize the resource loading more accurately. Helps stores in the cache for future requests, reusing the resource when the need arise. Helps correct content security policy to the resource. and set the correct Accept request headers for it.

RENDER: Rendering the initial route

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

First paint means the time it takes for the user to see First Meaningful Content. The next thing to think about is Time to Interactive which the essential time it takes for the thread to settle and the user can interact with the page.

Another way to improve first paint is to server side render our HTML file, it helps displays contents to the user while the scripts still fetching, parsing and executing.

Pre-cache: Pre-cache remaining assets

To provide a smooth loading of assets for your users, it is important that the server does as much work as possible to load those assets before the session begins.

By doing this, the user’s experience is not disturbed by interruptions as the server tries to load assets in the middle of a session, often causing delays in rendering.

Service workers can fetch assets directly from the cache rather than the server on repeat visits. This not only allows users to use your application when they are offline, but also results in faster page load times on repeat visits. With precaching, the assets are already loaded and are immediately ready for use.

Service worker can be added through creating the file and writing our own logic or with the use of a library such as Workbox.

Workbox is a google library that provides an easy way to precache files, ensuring that as your service worker changes, the precached files are maintained efficiently, only downloading updated files and cleaning up after the service worker is made redundant.

The most common way to precache files with Workbox is to call theprecacheAndRoute method and pass it a list of URLs along with their revision information.

Lazy loading: other routes and non-critical resources

Lazy loading is the method of delaying load of resources until they’re actually needed to improve performance and save system resources. For example, if a web page has an image that the user has to scroll down to see, you can display a placeholder and lazy load the full image only when the user arrives to its location.

The benefits of lazy loading include:

Reduces initial load time — Lazy loading a webpage reduces page weight, allowing for a quicker page load time.

Bandwidth conservation — Lazy loading conserves bandwidth by delivering content to users only if it’s requested.

System resource conservation — Lazy loading conserves both server and client resources, because only some of the images, JavaScript and other code actually needs to be rendered or executed.

There are several open source libraries that can be used to implement lazy loading, including:

blazy.js — blazy.js is a lightweight JavaScript library for lazy loading and multi-serving images, iframes, video and other resources.\

LazyLoad — LazyLoad is a script that automatically loads images as they enter the viewport.

PRPL is just a technique.

The PRPL pattern is just an acronym that represents four steps which are

Push (or preload) the most important resources.

Render the initial route as soon as possible.

Pre-cache remaining assets.

Lazy load other routes and non-critical assets.

Reference & links

https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
https://developers.google.com/web/tools/workbox/guides/precache-files
https://web.dev/apply-instant-loading-with-prpl/