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