원문: Lighthouse evolution: continuous integration, new performance score formula, and more
원작자: Elizabeth Sweeny, Twitter
라이트하우스의 진화: CI, 새로운 성능 지표 등
Chrome Developer Summit 2019에서 라이트하우스 최신 업데이트와 통찰력을 얻어보자.
Chrome Dev Summit(CDS)의 속도 측정 도구의 진화 세션에서 폴 아이리시와 나는 모든 사용자를 위해 빠른 속도의 환경를 만들고 유지하는데 도움을 주는 구글의 새로운 제품과 기능을 소개했다. 그 이야기의 중심에는 성능 모니터링 도구인 라이트하우스가 있다.
라이트하우스 CI 알파 릴리즈
라이트하우스 팀은 모든 커밋이 production 브랜치에 적용되기 전에 라이트하우스로 관리할 수 있는 새로운 CI 제품인 Lighthouse CI의 알파 버전을 선보였다. 라이트하우스 CI는 라이트하우스를 다중 실행하고 정적 검사나 지표 기준치를 설정한 다음, 시각적인 비교와 기본 항목 점수 기록을 위한 보고서를 서버에 올린다. 기존의 budgets.json 설정도 어떤 라이트하우스 검사나 항목별 결과를 내기 위한 새로운 표현방법과 함께 잘 동작한다.
라이트하우스 CI는 별 다른 설정없이도 Travis CI, Circle CI, 그리고 GitHub Actions를 지원하며, 약간의 설정으로 우분투나 컨테이너 기반의 CI 서비스도 지원한다. 라이트하우스 CI 서버를 사내 환경에 설치할 수도 있고, 인스턴트 실행을 위한 도커 이미지를 사용할 수도 있다. 바로 시작할 수 있는 대안으로 라이트하우스 보고서를 위한 무료 공개 임시 스토리지가 마련되어 있다.
성능 지표가 곧 업데이트될 예정
변경 사항은 라이트하우스 성능 지표 버전 6에 적용될 예정이다! (2019년 11월 기준) 버전 5는 라이트하우스는 성능 점수를 0-100 형태로 보여주기 위해서 가중치를 계산하고 값을 조정해서 5가지 지표를 제공한다. First Contentful Paint, Speed Index, First Meaningful Paint, Time to Interactive와 First CPU Idle이다.
자세한 정보는 라이트하우스의 성능 계산법를 확인해 보자.
라이트하우스 버전 6에서는 새로운 지표인 Largest Contentful Paint (LCP)와 Total Blocking Time (TBT)가 First CPU Idle (FCI) and First Meaningful Paint (FMP)를 대체하고 있다. 5가지 지표의 각 가중치는 로드와 상호작용 측정의 다른 위상을 더 균형있게 맞추기 위해 조정될 것이다.
Cumulative Layout Shift (CLS)는 여전히 마무리 단계에 있지만, 결국 라이트하우스의 성능 측정에 포함되어야 할 새로운 지표이다.
라이트하우스 팀은 모든 점수 곡선을 미세하게 튜닝하고 있고, 지표들이 완성되고 철저히 테스트되도록 계속 작업하고 있다. 2020년 1월에 라이트하우스 버전 6의 성능 지표를 출시하는 것이 목표다.
성능을 담당하는 엔지니어는 가끔 두 가지 별개의 어려움 즉, 가변성과 환경 간의 불일치 현상 때문에 속도 측정 결과를 재현하는데 어려움을 겪는다. 가변성은 테스트 환경이 동일함에도 측정 결과가 변하는 문제다. 환경 간의 불일치 현상은 같은 페이지가 각기 다른 환경(예를 들어, DevTools와 PageSpeed Insights)에서 측정할 때 다른 결과를 얻는 문제를 말한다. 라이트하우스 팀은 가변성을 개선하기 위해서 다양한 방법으로 작업하고 있고, 가변성의 원인과 가변성을 다루는 방법을 이해하는 것이 개선에 도움이 되었다. 또한 라이트하우스 팀은 환경 간의 차이를 줄이기 위한 조정 방법을 연구하고 있다. 하지만 적어도 현재로서는 다른 조건들과 하드웨어가 다른 측정치를 낼 것으로 기대하는 것이 타당하다고 본다.
라이트하우스 Stack Packs
라이트하우스는 사이트가 프레임워크나 저작물 관리 시스템 (CMS)를 사용할 경우 자동으로 이를 감지하고 보고서에 해당 기술을 고려한 조언을 보고서에 추가한다. Stack Packs은 맞춤식 권장 사항과 (여러분과 같은) 커뮤니티 전문가의 조언을 라이트하우스의 주요 검사 보고서 위에 추가한다.
현재까지는, Angular, WordPress, Magento, React와 AMP를 위한 Stack Packs가 있다. 여러분의 Stack Pack을 만드려면 깃허브 리포지토리를 방문하거나 라이트하우스팀에게 이슈를 남겨라.
라이트하우스 플러그인이 크롬 확장 프로그램으로 곧 출시될 예정
라이트하우스 플러그인은 라이트하우스 확장성의 장점을 얻을 수 있는 또 하나의 방법이다. 라이트하우스의 주요 검사들이 현재 처리하지 않고 있는 검사 항목들이 많다. 왜냐하면 일부 개발자에게만 의미있거나 그 팀이 측정을 하기 위한 대역폭을 아직 정하지 않았기 때문이다.
라이트하우스 플러그인은 커뮤니티의 전문가들이 새로운 검사 항목들을 구현해서 라이트하우스에서 실행하고 새로운 항목의 보고서를 추가할 수 있게 해준다. 지금 당장은 라이트하우스 CLI에서만 플러그인이 동작하고 있지만, DevTools의 Audits 패널에서 동작할 수 있도록 하는 것이 목표다.
DevTools Audits 패널의 커뮤니티 플러그인들(베타)
사용자가 라이트하우스 플러그인을 크롬 웹스토어로부터 확장 프로그램으로 설치하면, DevTools는 설치된 플러그인을 식별하고 Audits 패널의 옵션으로 제공할 것이다. 라이트하우스 팀은 앞으로 몇 달 안에 플러그인 방식을 지원할 것이므로 계속 관심 가져주길 바란다. 그러는 동안 오늘 여러분은 플러그인을 노드 모듈 형태로 만들어서 CLI를 통해 모든 라이트하우스 사용자들이 써보게 할 수 있다.
더 알아보기
CDS 2019에서 다뤘던 라이트하우스와 다른 성능 측정 도구의 업데이트를 더 자세히 보려면, 속도 측정 도구의 진화에 대한 토크를 보면 된다.
라이트하우스를 개선하는데 여러분의 피드백은 소중하다. 라이트하우스 CI를 사용해 보거나, Stack Pack을 만들어 보거나, 혹은 라이트하우스 플러그인을 만들어 보고 여러분의 생각을 알려달라.