개인 예산, 비즈니스 예산 또는 가족 예산을 설정하면 지출 한도를 설정하고 그 한도를 초과하지 않습니다. 실적 예산도 같은 방식으로 작동하지만 웹사이트 실적에 영향을 미치는 측정항목에만 적용됩니다.
성능 예산을 설정하고 적용하면 사이트를 최대한 빠르게 렌더링할 수 있습니다. 이렇게 하면 방문자에게 더 나은 경험을 제공하고 비즈니스 측정항목에 긍정적인 영향을 미칩니다.
다음은 몇 가지 간단한 단계를 통해 첫 번째 실적 예산을 정의하는 방법입니다.
예비 분석
기존 사이트의 실적을 개선하려면 먼저 가장 중요한 페이지를 파악해야 합니다. 예를 들어 사용자 트래픽이 가장 많은 페이지나 제품 방문 페이지가 여기에 해당합니다.
주요 페이지를 확인했으면 이제 해당 페이지를 분석할 차례입니다. 먼저 사용자 경험을 가장 잘 측정하는 타이밍 마일스톤에 초점을 맞추겠습니다.
Chrome DevTools의 감사 패널 아래에 Lighthouse가 있습니다. 게스트 창의 각 페이지에서 감사를 실행하여 다음 두 번 기록합니다.
고도로 전문화된 검색엔진인 Doggos.com을 예로 들어보겠습니다. Doggos.com은 인터넷에서 모든 반려견 관련 콘텐츠의 색인을 생성하는 것을 목표로 하며 가장 중요한 페이지는 홈 및 검색결과 페이지입니다. 다음은 데스크톱 및 모바일 사이트의 FCP 및 TTI 측정치입니다.
| 데스크톱 | FCP | 상호작용까지의 시간 |
|---|---|---|
| 홈페이지 | 1,680 ms | 5,550밀리초 |
| 결과 페이지 | 2,060 ms | 6,690 ms |
| 모바일 | FCP | 상호작용까지의 시간 |
|---|---|---|
| 홈페이지 | 1,800 ms | 6,150밀리초 |
| 결과 페이지 | 1,100 ms | 7,870밀리초 |
경쟁사 분석
자신의 사이트를 분석한 후에는 경쟁업체의 사이트를 분석할 차례입니다. 유사한 웹사이트의 결과를 비교하면 실적 예산을 파악하는 데 매우 유용합니다. 이것은 확립된 프로젝트를 수행하든 처음부터 시작하든 상관없이 중요한 단계입니다. 경쟁사보다 빠르면 경쟁 우위를 점할 수 있습니다.
어떤 사이트를 살펴봐야 할지 잘 모르겠다면 다음과 같은 몇 가지 도구를 사용해 보세요.
- Google 검색의 'related:' 키워드
- Alexa의 유사 사이트 기능
- SimilarWeb
현실적으로 알아보려면 10개 정도의 경쟁업체를 찾아보세요.
타이밍 주요 시점의 예산
이 예에서 나온 틈새 검색엔진에는 경쟁업체가 많으므로 모바일 기기에 맞춰 홈페이지를 최적화하는 데 중점을 두겠습니다. 오늘날 인터넷 트래픽의 절반이 모바일 네트워크에서 발생하며 휴대전화 번호를 기본 번호로 사용하면 모바일 사용자뿐만 아니라 데스크톱 사용자에게도 도움이 됩니다.
유사한 모든 웹사이트의 FCP 및 TTI 시간을 사용하여 차트를 만들고 여러 항목 중에서 가장 빠른 속도를 강조표시합니다. 이 차트는 경쟁업체와 비교하여 웹사이트의 실적을 더 명확하게 보여줍니다.
| 사이트/홈페이지 | FCP | 상호작용까지의 시간 |
|---|---|---|
| goggles.com | 880밀리초 | 3,150밀리초 |
| Doggos.com | 1,800 ms | 6,500 ms |
| quackquackgo.com | 2,680 ms | 4,740밀리초 |
| ding.xyz | 2,420 ms | 7,040밀리초 |
개선할 여지가 있으며 이를 위한 좋은 가이드라인은 20% 법칙입니다. 연구에 따르면 응답 시간의 차이가 20%를 넘을 때 사용자가 체감하는 응답 시간이 20%를 넘는 것으로 나타났습니다. 즉, 최고의 비교 사이트보다 눈에 띄게 향상되려면 최소 20% 빨라야 합니다.
| 측정 | 현재 시간 | 예산 (경쟁사보다 20% 더 빠른 속도) |
|---|---|---|
| FCP | 1,800 ms | 704 ms |
| 상호작용까지의 시간 | 6,500 ms | 2,520밀리초 |
기존 사이트를 최적화하려는 경우 목표가 달성이 불가능해 보일 수 있습니다. 이것은 포기할 징후가 아닙니다. 작은 단계부터 시작하여 현재 속도보다 20% 빠르게 예산을 설정하세요. 거기부터 계속 최적화하세요.
Doggos.com의 경우 변경된 예산은 다음과 같습니다.
| 측정 | 현재 시간 | 초기 예산(현재 시간보다 20% 빠름) | 장기 목표(경쟁사보다 20% 더 빠른 목표) |
|---|---|---|---|
| FCP | 1,800 ms | 1,440 ms | 704 ms |
| 상호작용까지의 시간 | 6,500 ms | 5,200 ms | 2,520밀리초 |
다양한 측정항목 결합
견고한 성능 예산은 다양한 유형의 측정항목을 결합합니다. 마일스톤 타이밍에 대한 예산은 이미 정의되었으며 이제 2가지를 더 추가할 예정입니다.
- 수량 기반 측정항목
- 규칙 기반 측정항목
수량 기반 측정항목의 예산
총 페이지 용량에 관계없이 중요 경로 리소스 (압축/축소)를 170KB 미만으로 전송하세요. 이렇게 하면 저렴한 기기와 느린 3G에서도 웹사이트가 빨라집니다.
데스크톱 환경을 위한 예산을 늘릴 수 있지만 너무 과도하지는 마세요. 작년 HTTP 자료실 데이터에 따르면 데스크톱과 모바일 모두에서 페이지 크기의 중앙값이 1MB를 넘습니다. 성능이 뛰어난 웹사이트를 만들려면 이러한 중간 수치보다 훨씬 낮은 수치를 목표로 해야 합니다.
다음은 TTI 예산을 기반으로 한 몇 가지 예입니다.
| 네트워크 | 기기 | JS | 이미지 | CSS | HTML | 글꼴 | 총계 | 상호작용 시간 예산 |
|---|---|---|---|---|---|---|---|---|
| 느린 3G | Moto G4 | 100 | 30 | 10 | 10 | 20 | ~170 KB | 5초 |
| 느린 4G | Moto G4 | 200 | 50 | 35 | 30 | 30 | ~345 KB | 3초 |
| WiFi | 데스크톱 | 300 | 250 | 50 | 50 | 100 | ~750 KB | 2초 |
수량 측정항목을 기반으로 예산을 정의하는 것은 까다로운 비즈니스입니다. 많은 제품 사진이 있는 전자상거래 웹사이트는 주로 텍스트로 구성된 뉴스 포털과는 매우 다릅니다. 사이트에 광고나 분석이 있는 경우 제공하는 JavaScript의 양이 늘어납니다.
위의 표를 참고하여 작업 중인 콘텐츠 유형에 따라 조정하세요. 페이지에 포함할 내용을 정의하고 조사 결과를 검토한 후 개별 애셋 크기를 추측합니다. 예를 들어 이미지가 많은 웹사이트를 구축하는 경우 JS 크기를 더 엄격하게 제한합니다.
운영 중인 웹사이트가 있으면 사용자 중심의 실적 측정항목에 대한 실적을 확인하고 예산을 조정하세요.
규칙 기반 측정항목의 예산
매우 효과적인 규칙 기반 측정항목은 Lighthouse 점수입니다. Lighthouse는 앱을 5가지 카테고리로 평가하며 그중 하나는 성능 카테고리입니다. 성능 점수는 콘텐츠가 포함된 첫 페인트 및 상호작용까지의 시간을 포함한 5가지 측정항목을 기반으로 계산됩니다.
우수한 사이트를 구축하려면 Lighthouse 성능 점수를 100점 만점 중 85 이상으로 설정하세요. Lighthouse CI를 사용하여 pull 요청에 적용합니다.
우선순위 지정
사이트에서 어떤 수준의 상호작용이 기대되는지 자문해 보세요. 뉴스 웹사이트인 경우 사용자의 기본 목표가 콘텐츠를 읽는 것이므로 빠르게 렌더링하고 FCP를 낮게 유지하는 데 집중해야 합니다. Doggos.com 방문자는 가능한 한 빨리 관련 링크를 클릭하기를 원하므로 TTI가 낮은 것이 최우선입니다.
잠재고객 중 데스크톱과 휴대기기를 통해 탐색하는 사용자 집단을 정확히 파악하고 그 결과에 따라 우선순위를 지정하세요. 이를 파악하는 한 가지 방법은 Chrome 사용자 환경 보고서 대시보드를 통해 경쟁업체의 웹사이트에서 잠재고객이 어떤 행동을 하는지 확인하는 것입니다.
다음 단계
프로젝트 전반에 성능 예산을 적용하고 빌드 프로세스에 통합해야 합니다.