2018.05.15

구글 라이트하우스 3.0에 등장한 신기능은?

Paul Krill | InfoWorld
웹 페이지 성능을 향상시키고 프로그레시브 웹 앱 개발을 돕는 오픈소스 도구인 '라이트하우스'(Lighthouse)가 3.0 버전으로 메이저 업그레이드됐다.

이 구글의 웹 페이지 품질 감사 도구는 이제 신속한 감사 기능과 함께 정확한 통계를 제공한다. 또 실행 간 편차가 감소했다. 라이트하우스 3.0 릴리즈의 주요 내용은 다음과 같다.

- 실행 간 차이가 적은 신속한 감사. 이는 랜턴(Lantern)이라는 코드명을 가진 내부 감사 엔진을 통해 이뤄지는 시뮬레이티드 스로틀링(simulated throttling) 덕분에 가능하다. 엔진은 일반적인 네트워크 및 CPU 설정에서 감사를 실행하고 모바일 환경에서 페이지를 로드하는 데 걸리는 시간을 예측한다.

- 라이트하우스 및 크롬 UX 팀이 개발한 새로운 보고서 UI.

- 인보케이션(Invocation) 변화. 이를 통해 라이트하우스의 Node.js 버전이 CLI 버전에서와 같이 동일한 구성 옵션을 지원한다.

- 성능 감사를위한 스코어링 모델의 변경. 점수 50은 75 번째 백분위 수를 나타내며, 완전한 점수 100은 98 번째 백분위 수를 나타낸다.

- 몇 가지 새로운 감사. 신규 감사 중 하나는 사용자가 첫 '콘텐트풀'(contentful) 페인트를 테스트할 수 있도록 허용한다. 콘텐트풀 페인트란 텍스트나 이미지가 스크린에 처음 그려지는 시간을 측정하는 것이다. 또 사용자의 robots.txt 파일을 유효성을 검사하는 감사가 추가됐으며 GIFs를 video 태그로 전환함으로써 비디오 파일 크기를 극적으로 줄일 수 있는 지점을 알려주는 감사 기능도 존재한다. 네 번째는 'link' 태그에 rel="preconnect" 속성을 추가해 성능을 향상시킬 수 있는 지점을 보여주는 감사 기능이다.

- 퍼페추얼 스피드 인덱스(Perpetual Speed Index)는 이제 스피드 인덱스라고 불린다.

- JSON 출력 포맷은 이제 3개의 톱 레벨 프로퍼티(propery)를 가진다. 1hr 프로퍼티는 감사 결과를 포함한다. artifacts 프로퍼티는 크롬에서 수집된 데이터를 포함한다. report 프로퍼티는 문자열로 포맷된 리포트 HTML/JSON/CSV를 포함한다.

라이트하우트를 이용하려는 개발자는 감사하려는 URL를 제공해야 한다. 그러면 이 도구가 보고서를 생성하게 된다. 라이트하우스는 명령줄로부터, Node.js 모듈로써, 크롬 데브틀스 내에서 구동될 수 있다.

구글 라이트하우스 다운로드 방법
npm install -g를 실행함으로써 CLI를 통해 라이트하우스를 다운로드할 수 있다. Node.js의 경우 npm installlighhouse@nex를 실행하면 된다. 크롬에서는 라이트하우스 확장기능이 3.0 버전으로 자동 업데이트되어야 한다. 크롬 데브툴스의 경우 라이트하우스 3.0은 크롬 69에서 사용할 수 있다.  ciokr@idg.co.kr
2018.05.15

구글 라이트하우스 3.0에 등장한 신기능은?

Paul Krill | InfoWorld
웹 페이지 성능을 향상시키고 프로그레시브 웹 앱 개발을 돕는 오픈소스 도구인 '라이트하우스'(Lighthouse)가 3.0 버전으로 메이저 업그레이드됐다.

이 구글의 웹 페이지 품질 감사 도구는 이제 신속한 감사 기능과 함께 정확한 통계를 제공한다. 또 실행 간 편차가 감소했다. 라이트하우스 3.0 릴리즈의 주요 내용은 다음과 같다.

- 실행 간 차이가 적은 신속한 감사. 이는 랜턴(Lantern)이라는 코드명을 가진 내부 감사 엔진을 통해 이뤄지는 시뮬레이티드 스로틀링(simulated throttling) 덕분에 가능하다. 엔진은 일반적인 네트워크 및 CPU 설정에서 감사를 실행하고 모바일 환경에서 페이지를 로드하는 데 걸리는 시간을 예측한다.

- 라이트하우스 및 크롬 UX 팀이 개발한 새로운 보고서 UI.

- 인보케이션(Invocation) 변화. 이를 통해 라이트하우스의 Node.js 버전이 CLI 버전에서와 같이 동일한 구성 옵션을 지원한다.

- 성능 감사를위한 스코어링 모델의 변경. 점수 50은 75 번째 백분위 수를 나타내며, 완전한 점수 100은 98 번째 백분위 수를 나타낸다.

- 몇 가지 새로운 감사. 신규 감사 중 하나는 사용자가 첫 '콘텐트풀'(contentful) 페인트를 테스트할 수 있도록 허용한다. 콘텐트풀 페인트란 텍스트나 이미지가 스크린에 처음 그려지는 시간을 측정하는 것이다. 또 사용자의 robots.txt 파일을 유효성을 검사하는 감사가 추가됐으며 GIFs를 video 태그로 전환함으로써 비디오 파일 크기를 극적으로 줄일 수 있는 지점을 알려주는 감사 기능도 존재한다. 네 번째는 'link' 태그에 rel="preconnect" 속성을 추가해 성능을 향상시킬 수 있는 지점을 보여주는 감사 기능이다.

- 퍼페추얼 스피드 인덱스(Perpetual Speed Index)는 이제 스피드 인덱스라고 불린다.

- JSON 출력 포맷은 이제 3개의 톱 레벨 프로퍼티(propery)를 가진다. 1hr 프로퍼티는 감사 결과를 포함한다. artifacts 프로퍼티는 크롬에서 수집된 데이터를 포함한다. report 프로퍼티는 문자열로 포맷된 리포트 HTML/JSON/CSV를 포함한다.

라이트하우트를 이용하려는 개발자는 감사하려는 URL를 제공해야 한다. 그러면 이 도구가 보고서를 생성하게 된다. 라이트하우스는 명령줄로부터, Node.js 모듈로써, 크롬 데브틀스 내에서 구동될 수 있다.

구글 라이트하우스 다운로드 방법
npm install -g를 실행함으로써 CLI를 통해 라이트하우스를 다운로드할 수 있다. Node.js의 경우 npm installlighhouse@nex를 실행하면 된다. 크롬에서는 라이트하우스 확장기능이 3.0 버전으로 자동 업데이트되어야 한다. 크롬 데브툴스의 경우 라이트하우스 3.0은 크롬 69에서 사용할 수 있다.  ciokr@idg.co.kr
X