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