Optimization - Lighthouse의 performance opportunities 확인하기

이예빈·2022년 10월 7일
0

사용자 친화 웹

목록 보기
5/5
post-thumbnail

Lighthouse 🗼


웹 최적화에 대해 공부하면서 Lighthouse에 대해서도 배우게 되었다.
Lighthouse는 다양한 지표를 이용하여 사이트를 검사하여 성능을 측정하고 그에 대한 개선책도 제공해준다. Lighthouse 검사 항목에는 성능, 접근성, PWA(Progressive Web App), SEO 등이 있으며 어떤 웹페이지에서든 사용할 수 있다.

그 중 웹 성능을 측정하여 콘텐츠가 표시되는지 걸리는 시간, 표시된 후 사용자와 상호작용하기 까지 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 등의 웹 최적화 정도를 확인할 수 있는 Performance 항목을 살펴보고자 한다.

성능 검사는 오늘의 집 홈페이지에서 진행하였다.
처음 검사를 진행했을 때 IndexedDB 때문에 로드 성능에 영향을 미치는 데이터가 있을 수 있다고 해서 시크릿 모드로 진행해보았으나 Lighthouse를 개발자도구에서 실행하려면 어쨌든 그 홈페이지에 접속을 먼저 해야하므로 소용이 없었다.

그래서 Application 탭에서 Storage를 비우고 다시 시도 해보았더니
어찌된 일인지 Best Practices 점수가 더 낮아졌다. Best Practices 항목은 웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지, HTTPS 프로토콜을 사용하는지, 콘솔 창에 오류가 나타나지는 않는지 등을 확인하는 항목이라고 들었는데 왜일까..

혹시 콘솔창에 오류가 있나 확인해보니 고양이가 있었다. 귀엽다...

아무튼 여기서 말하고자 하는 것은 Performance 지수이므로 다시 돌아와서 확인 해보면 Performance 지수는 51점으로 보통 수준인 것으로 나타났다.

Opportunities 부분에서는 시간을 많이 소모하는 부분과 개선 해결책을 제시해준다. 나타난 항목들을 살펴보면 Reduce unused JavaScript가 제일 위에 나타났다.
가장 문제가 되는 순서대로 보여주는 것 같다.

1. Reduce unused JavaScript

사용되지 않는 JavaScript를 줄이고, 네트워크 활동에서 사용되는 메모리를 줄이기 위해서 script 로드를 연기하라고 되어있다.

SSR을 하지 않는다면 React.lazy()를 사용하여 JavaScript 번들을 분할하라고 알려준다. React는 Single Page Application이므로 한 번에 사용하지 않는 컴포넌트까지 불러오는데 React.lazy()를 사용하면 컴포넌트를 동적으로 import할 수 있다.

2. Properly size images

데이터 소모량을 줄이고 로드 타임을 개선하기 위해서 적절한 크기의 이미지를 제공하라고 되어있다.

홈페이지 상에서 이미지가 나타나는 크기에 맞게 압축한 이미지파일을 사용하면 이를 개선할 수 있을 것이다. 맨 위에 나타난 사진을 보면 홈페이지 상에서 크게 나올 필요가 없는 사진의 크기가 1080*1080의 크기로 올라온 것을 확인할 수 있다.

3. Preload Largest Contentful Paint image

LCP 시간을 향상시키기 위해 LCP 요소에 사용되는 이미지를 미리 로드(preload)하라고 되어있다.

LCP는 Largest Contentful Paint의 약자로 뷰포트를 차지하는 가장 큰 콘텐츠(이미지 또는 텍스트 블록)의 렌더 시간을 측정한다. 이를 이용하여 주요 콘텐츠가 유저에게 보이기까지 시간을 가늠할 수 있다.

LCP 이미지를 preload하기 위해서는 <link rel="preload"> 를 사용하여 브라우저에게 해당 항목을 먼저 로드해야한다는 것을 알려줄 수 있다.
위의 이미지에서 볼 수 있듯이 해당 태그를 사용하면 페이지가 로딩될 때 LCP 이미지인 'HERO IMAGE'를 빠르게 로드한다.

4. Minify JavaScript

JavaScript 파일을 최소화하면 페이로드 크기와 스크립트 구문 분석 시간을 줄일 수 있다고 되어있다.

React 앱을 개발모드로 배포하게 되면 React에 포함된 개발자에게 도움을 주기 위한 경고 들이 포함된 채로 배포되기 때문에 앱이 불필요하게 크고 느려질 수 있다.

따라서 배포시 프로덕션 버전을 사용해야 하는데 CRA를 기반한 프로젝트라면 npm run build 명령어를 통해 프로덕션 빌드파일을 따로 생성할 수 있다.

profile
temporary potato

0개의 댓글