성능 예산이란 무엇인가?
성능 예산(Performance Budget)이 중요한 이유.
웹 성능이 곧 비즈니스의 성패를 좌우하는 경우가 많습니다. 특히 웹 성능이 중요한 e-commerce와 같은 산업에서는 명확하게 웹 성능 목표를 지표로 만들고 관리하는 것이 중요합니다. 웹 성능을 계량이 가능하도록 수치화하여 기업의 목표로 삼을 때 가장 많이 사용하는 방법 중 하나가성능 예산(performance budget)입니다.
성능 예산이란 웹 성능에 영향을 미치는 다양한 요소를 제어하는 한계값을 의미합니다. 웹 페이지의 크기, 로딩하는데 걸리는 시간, 페이지에 포함된 이미지 파일의 수 등 다양한 값들이 존재합니다.
다음은 성능 예산을 목표화한 예제입니다.
● 메인 페이지의 모든 오브젝트의 파일 크기는 10MB를 넘지 말아야 한다.
● 모든 웹 페이지는 각 페이지 내 포함된 자바스크립트가 1MB를 넘지 말아야 한다.
● LTE 환경에서 모바일 기기의 Time-To-Interactive는 5초를 넘기지 말아야 한다.
웹 개발을 담당하는 팀과 개발자에게 성능 예산은 초기 사이트의 설계와 개발 시에 많은 영향을 줄 수 있습니다. 예를 들면 웹디자이너는 고해상도 이미지를 몇 개까지 사이트에 추가할 것인지, 웹 폰트를 위해 어떤 크기의 폰트 파일을 사용할 것인지 결정할 때 성능 예산을 고려합니다. 개발자와 인프라 담당자는 성능 예산에 결정된 최대 로딩 시간을 넘기지 않기 위해 프런트 엔드, 백엔드 혹은 네트워크 구간 어느 곳을 최적화할지 찾아내야 합니다.
성능 예산은 크게 세 가지 분류로 나눌 수 있습니다.
<성능 예산의 분류>정량 기반 지표(Quantity based metrics)
정량 기반 지표란 이미지, 스크립트, 폰트 등 웹 페이지 저작에 필요한 요소들에 대한 한계값입니다. 웹 페이지 설계 시 고려하는 대표적인 정량 기반 지표는 다음과 같습니다
● 이미지 파일의 최대 크기
● 웹 폰트 파일의 최대 개수
● 자바 스크립트 파일의 크기의 합
● 서드 파티 스크립트 개수의 합
단순히 파일 크기를 줄이고 파일의 개수를 줄였다 해서 웹 성능이 좋을 것이란 보장은 없습니다. 같은 크기, 같은 숫자의 요소를 사용한다고 해도 브라우저가 페이지 렌더링 시에 어떤 순서로 요소들을 호출하는지, 페이지 상의 레이아웃은 어떻게 설계되었는지에 따라 많은 변수가 있기 때문입니다. 따라서 정량 기반 지표뿐만 아니라 실제로 웹 성능 측정값에 대한 성능 예산이 필요합니다.
시간 기반 지표(Timing based metrics)
시간 기반 지표는 Milestone Timing이라도 하며, 앞에서 언급한 정량 기반 지표의 단점을 보완하는 성능 예산입니다. DOMContentLoaded, Load와 같이 실제로 브라우저에서 발생하는 다양한 웹 성능 이벤트 값을 측정하여 사용주가 느끼는 웹 성능에 대한 목표치를 설정하는 방식입니다. 대표적인 시간 기반 지표는 다음과 같습니다.
● FCP(First Contentful Paint):텍스트 또는 이미지와 같이 DOM의 첫 번째 비트를 표시하는 시점
● TTI(Time to Interactive):페이지가 사용자 입력에 안정적으로 응답하는 데 걸리는 시간을 측정
<First Paint와 First Contentful Paint 지표>규칙 기반 지표(Rule based metrics)
웹 성능 측정 도구들은 자체적으로 웹 성능 지표를 측정하여 각 사이트의 성능 점수를 메기는 알고리즘을 가지고 있습니다. 이 점수를 통해 개발자들은 전반적인 웹 성능 지표를 유사한 사이트들과 비교할 수 있고, 어느 측정 지표에서 점수가 낮아 개선 포인트로 삼아야 하는지를 결정할 수 있습니다. 또한 성능 측정 도구들은 측정 결과를 통해 어떻게 최적화를 진행해야 하는지 기술적 첨언도 해줍니다. 대표적인규칙 기반 매트릭스는다음과 같습니다
● 구글 Lighthouse의 성능 점수
● WebPageTest의 성능 점수
<구글 Lighthouse의 성능 점수>정량 기반 지표와 시간 기반 지표를개선할수록 규칙 기반 지표의 점수는 자연스레 높아집니다.
맺으며...
웹 사이트 기획자들은 사이트에 적합한 성능 예산이 어느 정도 되는지 초기에 가늠하기는 쉽지 않습니다. 일반적으로 경쟁사 사이트나 비슷한 산업 군의 대표적인 웹 사이트를 참고합니다. 가장 쉬운 접근 방법은 아주 직관적이고 단순하게 성능 예산 목표치를 설정하고 웹 사이트의 설계와 개발을 시작하는 것입니다. 예를 들면 "스마트폰 사용자가 LTE 환경에서 5초 미만의 로딩 타임을 가질 것"은 웹 성능 최적화에 지식이 없는 마케팅팀이라도 이해할 수 있는 목표치입니다.
웹 페이지는 업데이트가 잦기 때문에 콘텐츠의 변화로 인해 웹 성능 요소가 변경될 수 있습니다. 메인 이미지가 변경되거나 글꼴을 추가하거나 소셜 미디어 스크립트를 추가하는 등의 행위는 성능 예산을 벗어나는 작업이 수반될 수 있습니다. 따라서 최근에서는 형상 관리 및 새로운 버전 빌드 이후 배포 이전에 최종 성능 예산을 측정하고 관리하는 방법도 사용합니다. 구글의 LightHouse의 측정값을 빌드의 CI(Continuous Integration) 단계의 테스트 케이스로 사용하는 것이 대표적인 예제입니다. e.g.) Lighthouse CI
웹 성능은 웹의 로직과 더불어 중요한 점검 요소이기에, 웹 사이트의 첫 설계와 개발 이후에도 지속적으로 관리하며 버전 관리와 함께 모니터링 대상으로 삼는 것도 매우 적절한 프로세스라고 할 수 있습니다.
참고한 사이트:
https://developer.mozilla.org/en-US/docs/Web/Performance/Performance_budgets
https://github.com/GoogleChrome/lighthouse-ci
