반응형
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/
https://web.dev/apply-instant-loading-with-prpl/
반응형
'웹_프론트엔드 > 로드맵 챌린지' 카테고리의 다른 글
서버사이드렌더링이란? SSR, Server Side Rendering (0) | 2023.04.19 |
---|---|
PWA - RAIL 모델 (0) | 2022.11.23 |
PWA API - Credentials (0) | 2022.03.30 |
PWA API - Payments (0) | 2022.03.29 |
PWA API - Device Orientation (0) | 2022.03.28 |