PWA - PRPL 패턴

PRPL 패턴이란?

PRPL은 웹 페이지를 인터랙티브하고 더 빠르게 로드하는 패턴으로 Google Chrome 팀이 고안했다. 오프라인이거나 데이터 절약 모드에서 네트워크 지연이 높은 모바일 기기를 위한 것이다. PRPL은 다음을 함축하고 있는 약어다.

• Preload the most important resources. 가장 중요한 리소스를 미리 로드해라.
• Render the initial route as soon as possible. 최초 라우팅을 가능한 빨리 렌더링해라.
• Pre-cache remaining assets. 남은 assets를 미리 캐싱하라.
• Lazy load other routes and non-critical assets. 다른 라우팅과 덜 중요한 assets를 레이지로딩해라.

 

Preload

<link> 태그에 rel="preload"를 추가하면 중요한 리소스를 미리 로드할 수 있다.

<link rel="preload" as="style" href="css/style.css" />

 

Render

웹 앱의 초기 경로는 지연 로드(레이지로딩)되지 않고 최대한 빨리 렌더링되어야 한다는 규칙을 Initial Contentful Paint라고 한다. 이를 위해 렌더링 차단 리소스를 제거하고, CSS 전달을 최적화해야 하며, 서버 사이드 렌더링을 활용할 수 있어야 한다. React의 경우, hydrate api를 통해 서버 렌더링 앱을 빌드할 수 있다.

import React from "react" 
import ReactDOM from "react-dom" 
import App from "App"

ReactDOM.hydrate(<App />, window.root)

 

Pre-cache

assets 요청이 있을 때, 미리 캐시된 브라우저에서 assets이 제공되는 기술이다. 모바일 기기가 오프라인일 때, 또는 반복적으로 페이지에 접근했을 때 페이지 로딩을 빠르게 해준다.

 

 

Lazy-load

지연 로딩(레이지 로딩)은 응답 시간과 리소스 소비를 최적화함으로서 많은 웹 앱 성능 문제의 위험을 최소화할 수 있다.

<img src="./big-image.jpg" loading="lazy" />

 

참고

https://blog.logrocket.com/prpl-pattern-solutions-for-modern-web-app-optimization/

PRPL pattern: Solutions for modern web app optimization - LogRocket Blog

https://web.dev/apply-instant-loading-with-prpl/

PRPL 패턴으로 즉시 로딩 적용