Lighthouse를 이용하여 웹페이지 성능 개선 방법

웹페이지 성능 개선 방법

Lighthouse 를 기반으로 측정하고 나온 항목들을 구글이 추천하는 개선 방법을 사용하여 웹페이지의 성능 개선을 한다.

Lighthouse

웹페이지의 품질을 개선할 수 있도록 도와주는 도구로써 개발자도구에 Lighthouse 탭을 이용하거나 npm 모듈을 설치해서 사용하면 됩니다.
크게 5개의 항목을 기준으로 퍼포먼스가 표시됩니다.
퍼포먼스 말고도 Accessibility, Best Practices, SEO, Progressive Web App 를 볼 수 있습니다.

FCP: 콘텐츠가 포함된 첫 페인트는 첫 번째 텍스트 또는 이미지가 표시되는 시간을 나타냅니다.

• 초기 서버 응답을 줄이는 방법으로 폰트 최적화, CSR => SSR, 코드 경량화.

LCP: 최대 콘텐츠 렌더링 시간은 최대 텍스트 또는 이미지가 표시되는 시간을 나타냅니다.

• 페이지 렌더링 시간을 줄이는 방법으로 이미지 최적화 (webp, svg) img 태그 사용.

TBT: FCP와 상호작용 시간 사이의 모든 시간의 합으로, 작업 지속 시간이 50ms 를 넘으면 밀리초 단위로 표현됩니다.

• 불필요한 외부 라이브러리, 코드 페이로드 줄이기

CLS: 레이아웃 변경 횟수는 표시 영역 안에 보이는 요소의 이동을 측정합니다.

• 이미지 크기 지정, 동적 컨텐츠 최소화, font-display 설정, 요소 최소 크기 지정

Speed Index: 속도 색인은 페이지 콘텐츠가 얼마나 빨리 표시되는지 보여줍니다.

• 렌더링이 개선되다보면 같이 개선되는 요소로 얼마나 시각적으로 표시되는지를 판단해서 처리하면 됨.

성능 개선에 사용했던 몇가지 방법

• Vue 에서 사용하는 csr 생명주기가 아닌, Nuxt 의 생명주기를 활용하여 ssr 렌더링사용.
• 개발자도구에 coverage 기능을 사용하여 사용하지 않는 css 삭제.
• png, jpeg 등 이미지 webp 로 변환.
• img 태그 사용 및 lazy loading 최적화
• 불필요한 외부 라이브러리 삭제
• 이미지 크기 지정
• 동적 컨텐츠 최소화
• 폰트 최적화
• 요소 최소 크기 지정

성능 참고 싸이트

https://web.dev/