PRPL은 웹페이지를 로드하여 대화형으로 빠르게 만드는 데 사용되는 패턴을 설명하는 약어입니다.
- 나중에 발견된 리소스를 미리 로드합니다.
- 가능한 한 빨리 초기 경로를 렌더링합니다.
- 나머지 애셋을 사전 캐시합니다.
- 다른 경로 및 중요하지 않은 애셋을 지연 로드합니다.
이 가이드에서는 이러한 각 기법이 어떻게 결합되는지를 알아봅니다. 그러나 여전히 독립적으로 사용하여 성능 결과를 얻을 수 있는 방법을 알아봅니다.
Lighthouse로 페이지 감사하기
Lighthouse를 실행하여 PRPL 기법과 관련된 개선 기회를 파악합니다.
- `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- Lighthouse 탭을 클릭합니다.
- 성능 및 프로그레시브 웹 앱 체크박스를 선택합니다.
- 감사 실행을 클릭하여 보고서를 생성합니다.
자세한 내용은 Lighthouse로 성능 기회 탐색을 참고하세요.
중요 리소스 미리 로드
Lighthouse는 특정 리소스가 파싱되어 늦게 가져온 경우 다음과 같은 실패한 감사를 표시합니다.
미리 로드는 브라우저의 미리 로드 스캐너에서 검색할 수 없는 리소스(예: background-image 속성에서 참조하는 이미지)를 요청하도록 브라우저에 지시하는 선언적 가져오기 요청입니다. rel="preload"가 있는 <link> 태그를 HTML 문서 헤드에 추가하여 나중에 발견된 리소스를 미리 로드합니다.
<link rel="preload" as="image" href="hero-image.jpg">
<link rel="preload"> 지시문을 추가하면 해당 리소스에 대한 요청이 시작되고 캐시에 저장됩니다. 그러면 브라우저에서 필요할 때 검색할 수 있습니다.
중요 리소스 미리 로드에 관한 자세한 내용은 중요 애셋 미리 로드 가이드를 참조하세요.
최대한 빨리 초기 경로 렌더링
사이트에서 픽셀을 화면에 렌더링하는 순간, 즉 첫 페인트를 지연시키는 리소스가 있는 경우 Lighthouse에서 경고를 표시합니다.
첫 번째 페인트를 개선하기 위해 Lighthouse는 중요한 JavaScript를 인라인하고 async를 사용하여 나머지 작업을 지연할 것을 권장하며, 스크롤 없이 볼 수 있는 부분에 사용되는 중요한 CSS를 인라인 처리할 것을 권장합니다. 이렇게 하면 렌더링 차단 애셋을 가져오기 위한 서버 왕복이 제거되므로 성능이 개선됩니다.
그러나 인라인 코드는 개발 관점에서 유지 관리하기가 더 어려우며 브라우저가 별도로 캐시할 수 없습니다.
첫 번째 페인트를 개선하는 또 다른 방법은 페이지의 초기 HTML을 서버 측에서 렌더링하는 것입니다. 이렇게 하면 스크립트를 가져오고 파싱하고 실행하는 동안 사용자에게 콘텐츠가 즉시 표시됩니다. 하지만 이 경우 HTML 파일의 페이로드가 크게 증가하여 상호작용 시작 시간 또는 애플리케이션이 대화형이 되어 사용자 입력에 응답하는 데 걸리는 시간이 손상될 수 있습니다.
애플리케이션에서 첫 페인트를 줄이는 하나의 정답은 없으며, 이점이 애플리케이션의 장단점을 능가하는 경우에만 인라인 스타일과 서버 측 렌더링을 고려해야 합니다. 이 두 개념에 관한 자세한 내용은 다음 리소스를 참조하세요.
애셋 사전 캐시
서비스 워커는 프록시 역할을 하여 반복 방문 시 서버가 아닌 캐시에서 직접 애셋을 가져올 수 있습니다. 이렇게 하면 사용자가 오프라인일 때도 애플리케이션을 사용할 수 있을 뿐만 아니라 재방문 시 페이지 로드 시간이 빨라집니다.
라이브러리에서 제공하는 것보다 훨씬 복잡한 캐싱 요구사항이 있는 경우를 제외하고 서드 파티 라이브러리를 사용하여 서비스 워커 생성 프로세스를 간소화하세요. 예를 들어 Workbox는 서비스 워커를 만들고 유지관리하여 애셋을 캐시할 수 있는 도구 모음을 제공합니다. 서비스 워커 및 오프라인 안정성에 대한 자세한 내용은 안정성 학습 과정의 서비스 워커 가이드를 참조하세요.
지연 로드
네트워크를 통해 너무 많은 데이터를 전송하는 경우 Lighthouse에 감사 실패가 표시됩니다.
여기에는 모든 애셋 유형이 포함되지만 큰 자바스크립트 페이로드는 브라우저에서 파싱 및 컴파일하는 데 시간이 걸리기 때문에 특히 비용이 많이 듭니다. Lighthouse는 필요한 경우 이에 관한 경고도 제공합니다.
사용자가 애플리케이션을 처음 로드할 때 필요한 코드만 포함된 더 작은 JavaScript 페이로드를 전송하려면 요청 시 전체 번들과 지연 로드 청크를 분할합니다.
번들을 분할한 후에는 더 중요한 청크를 미리 로드합니다 (중요 애셋 미리 로드 가이드 참고). 미리 로드하면 브라우저에서 더 중요한 리소스를 더 빨리 가져오고 다운로드할 수 있습니다.
Lighthouse는 요청 시 다양한 JavaScript 청크를 분할하고 로드하는 것 외에도 중요하지 않은 이미지의 지연 로드에 대한 감사도 제공합니다.
웹페이지에서 많은 이미지를 로드하는 경우 페이지가 로드될 때 스크롤해야 볼 수 있는 부분 또는 기기 표시 영역 밖의 이미지를 모두 지연하세요 (지연 크기를 사용하여 이미지 지연 로드 참고).
다음 단계
이제 PRPL 패턴의 기본 개념을 이해했으므로 이 섹션의 다음 가이드로 넘어가서 자세히 알아보세요. 모든 기법을 함께 적용할 필요는 없다는 점에 유의해야 합니다. 다음 작업을 수행하면 성능이 눈에 띄게 향상됩니다.
- 중요한 리소스를 미리 로드합니다.
- 가능한 한 빨리 초기 경로를 렌더링합니다.
- 나머지 애셋을 사전 캐시합니다.
- 다른 경로 및 중요하지 않은 애셋을 지연 로드합니다.
PRPL 패턴에 대해 자세히 알아볼 수 있습니다.