네트워크 페이로드가 클수록 로드 시간이 길어질 수 있습니다. 또한 사용자에게 비용이 발생합니다. 예를 들어 사용자가 더 많은 셀룰러 데이터 요금을 지불해야 할 수 있습니다. 따라서 페이지의 네트워크 요청 총 크기를 줄이면 사이트에서의 사용자 환경과 지갑에 도움이 됩니다.
Lighthouse 네트워크 페이로드 감사 실패 방식
Lighthouse는 페이지에서 요청한 모든 리소스의 총 크기를 키비바이트(KiB)로 표시합니다. 가장 큰 요청이 먼저 표시됩니다.
HTTP Archive 데이터에 따르면 중간 네트워크 페이로드는 1,700~1,900KiB입니다. 가장 큰 페이로드를 표시하기 위해 Lighthouse는 총 네트워크 요청이 5,000KiB를 초과하는 페이지를 표시합니다.
페이로드 크기를 줄이는 방법
총 바이트 크기를 1,600KiB 미만으로 유지하는 것이 좋습니다. 이 타겟은 Time to Interactive(TTI)가 10초 이하를 유지하면서 3G 연결에서 이론적으로 다운로드할 수 있는 데이터의 양을 기반으로 합니다.
페이로드 크기를 줄이는 방법은 다음과 같습니다.
- 요청이 필요할 때까지 지연시킵니다. 가능한 접근 방식 중 하나는 PRPL 패턴을 참고하세요.
- 요청을 최대한 작게 최적화합니다. 가능한 기법은 다음과 같습니다.
- 페이지가 재방문 시 리소스를 다시 다운로드하지 않도록 요청을 캐시합니다. 캐싱의 작동 방식과 구현 방법은 네트워크 안정성 방문 페이지를 참고하세요.
스택별 안내
Angular
경로 수준 코드 분할을 적용하여 JavaScript 번들의 크기를 최소화합니다. 또한 Angular 서비스 워커로 애셋을 미리 캐싱하는 것이 좋습니다.
Drupal
반응형 이미지 스타일을 사용하여 페이지에 로드되는 이미지의 크기를 줄여보세요. Views를 사용하여 페이지에 여러 콘텐츠 항목을 표시하고 있다면 페이지로 나누기를 구현하여 주어진 페이지에 표시되는 콘텐츠 항목의 수를 제한하는 것이 좋습니다.
Joomla
도움말 카테고리에 발췌문을 표시하거나(예: '더 읽어보기' 링크 사용), 특정 페이지에 표시되는 도움말의 개수를 줄이거나, 긴 게시물을 여러 페이지로 나누거나, 플러그인을 사용하여 댓글을 지연 로드해 보세요.
WordPress
게시물 목록에 발췌문을 표시하거나('더보기' 태그 사용 가능), 특정 페이지에 표시되는 게시물의 개수를 줄이거나, 긴 게시물을 여러 페이지로 나누거나, 플러그인을 사용하여 댓글을 지연 로드해 보세요.