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"> 지시문을 추가하면 해당 리소스에 대한 요청이 시작되어 캐시에 저장됩니다. 그런 다음 필요할 때 브라우저에서 정보를 가져올 수 있습니다.
중요한 리소스 미리 로드에 관한 자세한 내용은 중요한 애셋 미리 로드 가이드
<ph type="x-smartling-placeholder">초기 경로를 최대한 빨리 렌더링
첫 번째 페인트를 지연하는 리소스가 있으면 Lighthouse에서 경고를 표시합니다. 사이트가 화면에 픽셀을 렌더링하는 순간:
Lighthouse는 첫 페인트를 개선하기 위해 중요한 JavaScript와
지연 시간을 최소화하여
async님,
스크롤 없이 볼 수 있는 부분에 사용되는
중요한 CSS를 인라인으로 삽입할 수도 있습니다. 이렇게 하면 성능이 향상됩니다.
서버까지의 왕복을 없애 렌더링을 차단하는 애셋을 가져옵니다.
그러나 개발 관점에서 인라인 코드를 유지 관리하기가 더 어렵고
브라우저에서 별도로 캐시할 수 없습니다.
첫 번째 페인트를 개선하는 또 다른 접근 방식은 초기 페인트를 서버 측에서 렌더링하는 것입니다. 페이지의 HTML입니다. 이렇게 하면 스크립트가 실행되는 동안 콘텐츠가 즉시 사용자에게 표시됩니다. 계속 가져오고 파싱하고 실행하는 것입니다. 그러나 이로 인해 HTML 파일의 페이로드를 크게 손상시킬 수 있으며 이는 상호작용 시간에 피해를 줄 수 있습니다. 애플리케이션이 대화형이 되어 응답을 받기까지 걸리는 시간 입력됩니다.
첫 페인트를 줄일 수 있는 한 가지 방법은 스타일 및 서버 측 인라인 삽입만을 고려해야 합니다. 이점이 애플리케이션의 장단점을 상회하는 경우 이러한 렌더링을 사용할 수 없습니다 다음과 같은 작업을 할 수 있습니다. 다음 리소스를 통해 두 개념에 대해 자세히 알아보세요.
애셋 사전 캐시
서비스 워커는 프록시 역할을 하여 캐시에서 직접 애셋을 가져올 수 있습니다. 더 높은 수익을 얻을 수 있습니다. 이렇게 하면 사용자가 애플리케이션이나 애플리케이션 속도가 빠르지만, 사이트에서 페이지 로드 시간이 재방문
타사 라이브러리를 사용하여 서비스 워커 생성 프로세스를 간소화합니다. 라이브러리에서 가능한 것보다 더 복잡한 캐싱 요구사항이 있지 않는 한 제공합니다 예를 들어 Workbox는 웹 서버와 같이 서비스 워커를 만들고 유지관리하여 캐시 애셋에 저장됩니다 서비스 워커 및 오프라인 안정성에 대한 자세한 내용은 안정성 학습 과정의 서비스 워커 가이드를 참조하세요.
지연 로드
네트워크를 통해 너무 많은 데이터를 전송하면 Lighthouse에 실패한 감사 메시지가 표시됩니다.
여기에는 모든 애셋 유형이 포함되지만 특히 대규모 JavaScript 페이로드는 브라우저가 파싱 및 컴파일하는 데 걸리는 시간으로 인해 비용이 많이 듭니다. Lighthouse는 필요한 경우 이에 관한 경고도 제공합니다.
메시지를 전송할 때 필요한 코드만 포함된 더 작은 JavaScript 페이로드를 사용자가 처음에 애플리케이션을 로드하고 요청 시 전체 번들과 지연 로드 청크를 분할합니다.
번들을 분할한 후 더 큰 청크를 미리 로드합니다. 중요 (중요한 애셋 미리 로드 가이드 참고) 미리 로드하면 더 중요한 리소스를 더 빠르게 가져오고 다운로드할 수 있습니다. 확인합니다.
필요에 따라 서로 다른 JavaScript 청크를 분할하고 로드하는 것 외에도 Lighthouse는 중요하지 않은 이미지 지연 로드에 대한 감사도 제공합니다.
웹페이지에 많은 이미지를 로드하는 경우 스크롤해야 볼 수 있는 부분의 모든 이미지를 지연시키거나 페이지가 로드될 때 기기 표시 영역 밖에서 설정 (지연 크기를 사용하여 이미지 지연 로드 참고)
다음 단계
이제 PRPL 패턴의 기본 개념을 이해했으므로 이 섹션의 다음 가이드로 진행하여 자세히 알아보세요. 한 가지 테크닉이 모두 함께 적용됩니다. 다음과 같은 노력을 기울일 경우 성능이 크게 향상되었습니다
- 중요한 리소스를 미리 로드합니다.
- 가능한 한 빨리 초기 경로를 렌더링합니다.
- 나머지 애셋을 사전 캐시합니다.
- 다른 경로 및 중요하지 않은 애셋을 지연 로드합니다.
PRPL 패턴에 관한 자세한 내용을 확인할 수 있습니다.