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