Lighthouse와 Chrome DevTools로 성능 감지 기술을 한층 강화하세요.
개발자는 사이트에서 로드되는 서드 파티 스크립트를 제어할 수 없는 경우가 많습니다. 서드 파티 콘텐츠를 최적화하기 전에 사이트 속도가 느려지는 원인을 파악해야 합니다. 🕵️
이 도움말에서는 Lighthouse 및 Chrome DevTools를 사용하여 느린 서드 파티 리소스를 식별하는 방법을 알아봅니다. 이 게시물에서는 여러 기술을 함께 사용하는 것이 가장 좋은 강력한 기술을 설명합니다.
5분만 있으신 경우
Lighthouse 성능 감사를 사용하면 페이지 로드 속도를 높이는 데 도움이 되는 기회를 찾을 수 있습니다. 느린 서드 파티 스크립트는 자바스크립트 실행 시간 단축 및 대규모 네트워크 페이로드 방지 감사의 진단 섹션에 표시될 수 있습니다.
감사를 실행하려면 다음 단계를 따르세요.
- `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- Lighthouse 탭을 클릭합니다.
- 모바일을 클릭합니다.
- 성능 체크박스를 선택합니다. 감사 섹션에서 나머지 체크박스는 선택 해제할 수 있습니다.
- 고속 3G 시뮬레이션, CPU 4배 감속을 클릭합니다.
- 저장용량 지우기 체크박스를 선택합니다.
- 감사 실행을 클릭합니다.
서드 파티 사용
Lighthouse 서드 파티 사용 감사에는 페이지에서 사용하는 서드 파티 제공업체 목록이 표시됩니다. 이 개요를 통해 전체적인 상황을 더 잘 이해하고 중복된 서드 파티 코드를 파악할 수 있습니다. 감사는 Lighthouse 확장 프로그램에서 사용할 수 있으며 Chrome 77의 DevTools에 곧 추가될 예정입니다.
JavaScript 실행 시간 단축
Lighthouse 자바스크립트 실행 시간 단축 감사는 파싱, 컴파일 또는 평가하는 데 시간이 오래 걸리는 스크립트를 강조 표시합니다. 서드 파티 리소스 표시 체크박스를 선택하여 CPU 집약적인 서드 파티 스크립트를 찾습니다.
과도한 네트워크 페이로드 방지
Lighthouse 과도한 네트워크 페이로드 방지 감사는 페이지 로드 속도를 저하시킬 수 있는 서드 파티의 요청을 비롯한 네트워크 요청을 식별합니다. 네트워크 페이로드가 4,000KB를 초과하면 감사가 실패합니다.
Chrome DevTools에서 네트워크 요청 차단하기
Chrome DevTools 네트워크 요청 차단을 사용하면 특정 스크립트, 스타일시트 또는 기타 리소스를 사용할 수 없는 경우 페이지가 어떻게 동작하는지 확인할 수 있습니다. 실적에 영향을 미치는 것으로 의심되는 서드 파티 스크립트를 식별한 후 해당 스크립트에 대한 요청을 차단하여 로드 시간이 어떻게 달라지는지 측정합니다.
요청 차단을 사용 설정하려면 다음 단계를 따르세요. 1. `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다. 1. 네트워크 탭을 클릭합니다. 1. 네트워크 패널에서 요청을 마우스 오른쪽 버튼으로 클릭합니다. 1. 요청 URL 차단을 선택합니다.
DevTools 창에 요청 차단 탭이 표시됩니다. 여기에서 차단된 요청을 관리할 수 있습니다.
서드 파티 스크립트의 영향을 측정하려면 다음 단계를 따르세요.
- 네트워크 패널을 사용하여 페이지가 로드되는 데 걸리는 시간을 측정합니다. 실제 상황을 에뮬레이션하려면 네트워크 제한 및 CPU 제한을 사용 설정하세요. (연결 속도가 빠르고 데스크톱 하드웨어를 사용하는 경우 비용이 많이 드는 스크립트의 영향이 휴대전화에서만큼 대표적이지 않을 수 있습니다.)
- 문제가 있다고 생각되는 서드 파티 스크립트의 URL 또는 도메인을 차단합니다.
- 페이지를 새로고침하고 차단된 서드 파티 스크립트 없이 로드하는 데 걸리는 시간을 다시 측정합니다.
속도가 개선될 수 있지만 서드 파티 스크립트를 차단해도 기대한 효과가 나타나지 않는 경우도 있습니다. 이 경우 속도가 느려지는 URL을 파악할 때까지 차단된 URL 목록을 줄입니다.
측정을 세 번 이상 실행하고 중앙값을 확인하면 더 안정적인 결과를 얻을 수 있습니다. 서드 파티 콘텐츠는 페이지 로드마다 다른 리소스를 가져올 수 있으므로 이 접근 방식을 사용하면 더 현실적인 추정치를 얻을 수 있습니다. 이제 성능 패널에서 DevTools가 여러 녹화 파일을 지원하므로 이 작업이 조금 더 쉬워졌습니다.