성능 감사
이러한 검사는 사용자가 페이지 콘텐츠를 보고 상호 작용하는 데 페이지가 최적화되었는지 확인합니다.
- 성능 감사 점수 #
- Lighthouse 성능 점수 Lighthouse가 페이지에 대한 전체 성능 점수를 생성하는 방법을 알아봅니다.
- Lighthouse 성능 점수
- 메트릭 #
- First Contentful Paint Learn about Lighthouse's First Contentful Paint metric and how to measure and optimize it.
- Speed Index Learn about Lighthouse's Speed Index metric and how to optimize it.
- 총 차단 시간 Lighthouse의 총 차단 시간 메트릭과 이를 측정하고 최적화하는 방법에 대해 알아봅니다.
- Largest Contentful Paint Learn about Lighthouse's Largest Contentful Paint metric and how to measure and optimize it.
- Cumulative Layout Shift Learn about the Cumulative Layout Shift (CLS) metric and how to optimize for it.
- First Contentful Paint
- 기회 #
- Eliminate render-blocking resources Learn about the render-blocking-resources audit.
- 적절한 크기의 이미지 uses-responsive-images 감사에 대해 알아봅니다.
- 오프스크린 이미지 지연 오프스크린 이미지 감사에 대해 알아봅니다.
- Minify CSS Learn about the unminified-css audit.
- 자바스크립트 축소 unminified-javascript 감사에 대해 알아보세요.
- Remove unused CSS Learn about the unused-css-rules audit.
- 이미지를 효율적으로 인코딩 uses-optimized-images 감사에 대해 알아보세요.
- Serve images in modern formats Learn about the uses-webp-images audit.
- 텍스트 압축 활성화 텍스트 압축을 활성화하여 웹 페이지 로드 성능을 향상시키는 방법에 대해 알아보십시오.
- 필수 원본에 사전 연결 uses-rel-preconnect 감사에 대해 알아보세요.
- 서버 응답 시간(TTFB) 단축 '첫 번째 바이트까지의 시간(TTFB)' 감사에 대해 알아봅니다.
- 여러 페이지 리디렉션 방지 페이지 리디렉션이 웹 페이지의 로드 속도를 늦추는 이유와 이를 피하는 방법을 배웁니다.
- 주요 요청 사전 로드 uses-rel-preload 감사에 대해 알아봅니다.
- Use video formats for animated content Learn about the efficient-animated-content audit.
- Reduce the impact of third-party code Learn how third-party code, like advertising networks and analytics services, affects page load performance, and how you can optimize third-party code.
- 합성되지 않은 애니메이션 방지 "합성되지 않은 애니메이션 방지" Lighthouse 감사를 통과하는 방법입니다.
- 파사드를 사용하여 타사 리소스를 지연 로드 파사드를 사용하여 타사 리소스를 지연 로드할 수 있는 기회에 대해 알아보세요.
- Eliminate render-blocking resources
- 진단 #
- 막대한 네트워크 페이로드 방지 사용자에게 제공하는 리소스의 전체 파일 크기를 줄여 웹 페이지 로드 시간을 개선하는 방법에 대해 알아봅니다.
- 효율적인 캐시 정책으로 정적 자산 제공 웹 페이지의 정적 리소스를 캐싱하여 반복 방문자의 성능과 안정성을 향상시키는 방법을 알아보세요.
- 과도한 DOM 크기 피하기 큰 DOM이 웹 페이지의 성능을 어떻게 감소시키고 어떻게 로드 시 DOM 크기를 줄일 수 있는지 알아봅니다.
- 중요한 요청 연결 방지 중요한 요청 연결이 무엇인지, 이것이 웹 페이지 성능에 어떠한 영향을 미치는지, 어떻게 그 효과를 줄일 수 있는지 알아봅니다.
- User Timing marks and measures Learn how the User Timing API can help you get real-world performance data for your web page.
- 자바스크립트 실행 시간 단축 JavaScript 실행이 페이지 성능을 저하시키는 방식과 속도를 높이는 방법에 대해 알아봅니다.
- Minimize main thread work Learn about the browser's main thread and how you can optimize your web page to reduce main thread load and improve performance.
- 웹폰트 로드 중에 텍스트가 계속 표시되도록 하기 글꼴 표시 API를 사용하여 웹 페이지 텍스트가 사용자에게 항상 표시되도록 하는 방법을 알아보세요.
- Keep request counts low and transfer sizes small Learn how high resource counts and large transfer sizes affect load performance. Get strategies for reducing request counts and transfer sizes.
- Ensure the page can be restored from the back/forward cache How to use Lighthouse to test if a page can be restored from the back/forward cache.
- 막대한 네트워크 페이로드 방지
- Retired metrics #
- 상호 작용까지의 시간 Lighthouse의 상호 작용까지의 시간 메트릭과 이를 측정하고 최적화하는 방법에 대해 알아봅니다.
- 첫 번째 의미 있는 페인트 Lighthouse의 첫 번째 의미 있는 페인트 메트릭에 대해 알아보고 측정하고 최적화하는 방법.
- First CPU Idle Learn about Lighthouse's deprecated First CPU Idle metric and how to optimize it.
- Max Potential First Input Delay Learn about Lighthouse's deprecated Max Potential First Input Delay metric and how to measure and optimize it.
- 상호 작용까지의 시간