프론트엔드 Lighthouse를 이용해 최적화 시키기 (with three.js )

몇달전 애정있게 진행한 프로젝트를 지속적으로 개선하다가, lighthouse를 통해 보다 객관적인 성능 향상을 시도해 보기로 했다.

 

 

실수로 <모바일> 버전으로 테스트를 해 스코어가 지나치게 낮게 나왔다. <데스크탑> 버전은 60점 정도가 나왔다.

 

 

 

일단은 빨간불이 들어온 부분부터 점차 개선하기로 했다.

 

1. Serve image in next-gen formats

이미지 파일의 확장자를 변경하도록 하자

. jpg -> . webp 파일로 변환

 

 

2. animated 요소를 <video> element로 변경하기

.git 파일을 .webm 확장자로 변경 후 video element로 재생하도록 하였다.

전)

 <img :src="require('../assets/images/loading.gif')" />

 

후)

 <video id="making_story_video" autoplay loop muted playsinline>

        <source id="making_story_img" src="story.webm" type="video/webm" />

 </video>

 

autoplay loop 속성은 해당 파일이 반복적으로 재생하도록 한다.

 

3. 웹폰트 로드 중에 텍스트가 계속 표시 되도록 하기 

 

https://developer.chrome.com/ko/docs/lighthouse/performance/font-display/

웹폰트 로드 중에 텍스트가 계속 표시되도록 하기 - Chrome for Developers

 

보이지 않는 텍스트가 표시되지 않도록 하는 방법

사용자 정의 글꼴이 로드되는 동안 보이지 않는 텍스트가 표시되지 않도록 하는 가장 쉬운 방법은 시스템 글꼴을 일시적으로 표시하는 것입니다. @font-face 스타일에 font-display: swap을 포함하면 대부분의 최신 브라우저에서 FOIT를 피할 수 있습니다.

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}

글꼴 표시 API는 글꼴이 표시되는 방식을 지정합니다. swap은 글꼴을 사용하는 텍스트가 시스템 글꼴을 사용하여 즉시 표시되어야 함을 브라우저에 알립니다. 사용자 정의 글꼴이 준비되면 시스템 글꼴을 대체합니다. (자세한 내용은 로드 중 보이지 않는 텍스트의 표시 방지 게시물을 참조하세요.)

 

 

결과