Skip to content
배우기 측정 블로그 Case studies 정보
이 페이지에서
  • Lighthouse 네트워크 페이로드 감사 실패 방식
  • 스택별 지침
    • Angular
    • Drupal
    • Joomla
    • WordPress
  • 리소스

막대한 네트워크 페이로드 방지

May 2, 2019 — 업데이트됨 May 29, 2020
Available in: Español, Português, Русский, 中文, English
Appears in: 성능 감사
이 페이지에서
  • Lighthouse 네트워크 페이로드 감사 실패 방식
  • 스택별 지침
    • Angular
    • Drupal
    • Joomla
    • WordPress
  • 리소스

대규모 네트워크 페이로드는 긴 로드 시간과 높은 상관관계가 있습니다. 또한 사용자는 이로 인해 많은 비용을 지불해야 합니다. 예를 들어 사용자는 더 많은 셀룰러 데이터에 대한 비용을 지불해야 할 수 있습니다. 따라서 사이트 와 지갑에서 사용자 환경을 개선하기 위해 페이지 네트워크 요청의 전체 크기를 줄이는 것이 좋습니다.

전 세계에서 사이트 액세스 비용을 알아보려면 WebPageTest의 내 사이트 비용은 얼마일까요?를 확인해보세요. 구매력을 고려하기 위해 결과를 조정할 수 있습니다.

Lighthouse 네트워크 페이로드 감사 실패 방식 #

Lighthouse는 페이지에서 요청한 모든 리소스의 전체 크기를 KiB(kibibytes) 단위로 표시합니다. 가장 큰 요청이 먼저 표시됩니다.

Lighthouse의 막대한 네트워크 페이로드 방지 감사에 대한 스크린샷

HTTP 아카이브 데이터를 기반으로 하는 중간 네트워크 페이로드는 1,700~1,900KiB입니다. 가장 높은 페이로드가 표시되도록 지원하기 위해 Lighthouse는 전체 네트워크 요청이 5,000KiB를 초과하는 페이지에 플래그를 지정합니다.

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

페이로드 크기를 줄이는 방법 #

전체 바이트 크기를 1,600KiB 미만으로 유지하는 것을 목표로 하십시오. 이 목표는 10초 이하의 Interactive 시간을 달성하면서 이론적으로 3G 연결에서 다운로드할 수 있는 데이터의 양을 기반으로 합니다.

다음은 페이로드 크기를 줄이는 몇 가지 방법입니다.

  • 페이로드가 필요할 때까지 요청을 연기합니다. 한 가지 가능한 접근 방식은 PRPL 패턴을 참조하십시오.
  • 요청을 최대한 작게 최적화합니다. 가능한 기술은 다음과 같습니다.
    • 네트워크 페이로드를 최소화하고 압축합니다.
    • 이미지에 대해 JPEG 또는 PNG 대신 WebP를 사용합니다.
    • JPEG 이미지의 압축 수준을 85로 설정합니다.
  • 페이지가 반복 방문 시 리소스를 다시 다운로드하지 않도록 요청을 캐시합니다. (캐싱의 작동 방식과 구현 방법을 알아 보려면 네트워크 안정성 랜딩 페이지)를 참조하십시오.

스택별 지침 #

Angular #

JavaScript 번들 크기를 최소화하려면 경로 수준 코드 분할을 적용하십시오. 또한 Angular 서비스 작업자로 자산을 미리 캐싱하는 것을 고려하십시오.

Drupal #

반응형 이미지 스타일을 사용하여 페이지에 로드되는 이미지의 크기를 줄이는 것을 고려하십시오. 보기를 사용하여 페이지에 여러 콘텐츠 항목을 표시하는 경우 페이지 매김을 구현하여 해당 페이지에 표시되는 콘텐츠 항목 수를 제한하는 것을 고려하십시오.

Joomla #

기사 카테고리에서 발췌문을 표시(예: "더 읽기" 링크를 통해)하고, 해당 페이지에 표시되는 기사 수를 줄이거나 긴 게시물을 여러 페이지로 나누거나 플러그인을 사용하여 댓글을 지연 로드하는 것을 고려하십시오.

WordPress #

게시물 목록에 발췌문을 표시하고(예: "more" 태그를 통해), 주어진 페이지에 표시되는 게시물 수를 줄이거나, 긴 게시물을 여러 페이지로 나누거나, 플러그인을 사용하여 댓글을 지연 로드하는 것을 고려하십시오.

리소스 #

막대한 네트워크 페이로드 방지 감사를 위한 소스 코드

마지막 업데이트: May 29, 2020 — 기사 개선하기
Return to all articles
공유
구독

Contribute

  • 버그 신고
  • 소스 보기

관련된 콘텐츠

  • developer.chrome.com
  • Chrome 업데이트
  • 웹 기초
  • 사례 연구
  • 팟캐스트
  • 쇼

연결

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • 전체 제품
  • 약관 및 개인정보 보호
  • 커뮤니티 가이드라인

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.