애플, 구글, 마이크로소프트, 모질라 같은 기술 기업이 협력해 개발하는 벤치마크 도구인 스피드미터(Speedometer) 3.0이 발표됐다.
스피드미터는 시뮬레이션된 사용자 상호 작용 타이밍을 측정해 브라우저 웹앱 응답성을 테스트하는 벤치마크 도구다. 스피드미터 초기 버전은 2014년 웹킷팀이 출시했으며 이후 사용자와 개발자가 더 풍부하고 부드러운 온라인 경험을 추구하는 도구로 이용해왔다.
이런 스피드미터 최신 버전인 3.0이 나온 것. 스피드미터 3.0은 구글 크롬 브라우저 엔진인 블링크를 개발하는 구글, 파이어폭스 브라우저 엔진인 긱코를 개발하는 모질라, 사파리 브라우저 엔진인 웹킷을 개발하는 애플이라는 3가지 주요 브라우저 엔진 개발자에 의해 공동 작업으로 탄생했다.
스피드미터 3.0은 이전 버전과 마찬가지로 실제 웹페이지에서 사용자 작업을 시뮬레이션해 웹앱 응답성을 측정하도록 설계됐다. 스피드미터 3.0에선 성능을 측정하는 더 좋은 방법과 현대 웹 환경을 반영한 더 대표적인 테스트 세트가 도입되고 있다.
스피드미터 3.0은 주요 브라우저 엔진(Blink/V8, Gecko/SpiderMonkey, WebKit/JavaScriptCore)을 지원하고 있으며 이런 업계를 넘은 협업은 이번이 처음이다. 컨센서스를 기반으로 한 새로운 커버넌스 모델을 기반으로 개발됐으며 깃허브 공유 저장소에서 개발에 기여할 수도 있다.
스피드미터 3.0에선 여러 새로운 테스트를 추가했다. 새로운 벤치마크를 설계하기 위해 개발자는 브라우저를 최적화하는데 중요하다고 생각되는 몇 가지 주요 시나리오와 사용자 상호 작용을 파악하는 것으로 시작했다. 이번에 추가한 새로운 테스트는 캔버스와 SVG 차트 렌더링(React Stockcharts, Chart.js, Perf Dashboard, Observable Plot), 코드 편집(CodeMirror), WYSIWYG 편집(TipTap), 뉴스 사이트 읽기(Next.js) 등을 시뮬레이션하는 것이다. 또 TodoMVC 테스트도 개선했으며 HTTP 아카이브 데이터를 기반으로 가장 일반적인 프레임워크 일반적 버전에 적응하도록 코드가 업데이트됐다.
이런 테스트를 위한 더 복잡한 버전도 도입했다. 인기 있는 웹앱 페이지 가중치와 구조를 더 엄격하게 에뮬레이트하는 복잡한 CSS 규칙이 많은 더 큰 DOM 트리에 내장되어 있다. 이들을 결합하면 브라우저 엔진에 대한 광범위한 실행을 통해 웹상 사용자 경험을 높이기 위해 자바스크립트, 레이아웃, CSS, 그래픽, DOM API를 최적화할 수 있는 새로운 기회를 제공할 수 있다.
또 스피드미터 3.0 테스트 러너 자체도 개선해 페인트나 비동기 작업 등 사용자 액션에 따라 브라우저가 수행하는 작업을 더 측정할 수 있게 됐다. 스피드미터 2.0은 테스트 스크립트를 동기적으로 실행하는 시간을 동기화 시간으로 측정하고 0초 타이머가 시작되기 전에 추가 작업을 비동기 시간으로 측정했다. 하지만 이로 인해 웹페이지 렌더링을 업데이트하기 위해 브라우저 엔진이 수행해야 하는 일부 작업이 손실된다.
스피드미터 3.0에선 지금까지 누락된 렌더링 작업을 측정할 수 있어 현실 세계 콘텐츠를 최적화할 기회를 더 늘리고 있다. 이를 위해 requestAnimationFrame 콜백 테스트 스크립트를 동기화 시간으로 측정하고 2번째 requestAnimationFrame에서 예약된 0초 타이머를 비동기 시간으로 시작한다. 이 비동기 시간은 브라우저 엔진에 의한 페이지 렌더링 뿐 아니라 테스트 자체 타이머에 의한 작업도 포함하는 걸 보장한다. 이로 인해 벤치마크 정확성이 크게 향상되고 브라우저 엔진이 이전에 누락된 작업을 최적화하기 때문에 사용자에게 큰 개선을 가져올 수 있다.
그 밖에도 개발자 도구가 개선되어 브라우저 엔지니어가 결과를 더 이해하고 프로파일링하고 테스트를 사용자 정의할 수 있다. 복잡한 테스트를 쉽게 만들고 유지 관리할 수 있게 테스트 러너 아키텍처를 재설계했다. 또 많은 코드 품질 향상 최신 기능 마이그레이션도 이뤄졌다.
스피드미터 3.0 목표는 현실 세계 인터넷 환경을 가능하면 반영해 브라우저가 벤치마크 점수를 높일 때 사용자가 이익을 얻는 것이다. 관련 내용은 이곳에서 확인할 수 있다.